|
|
Post by Pjot on Apr 8, 2019 20:28:44 GMT 1
Some time ago I was thinking to use an HTML renderer (e.g. web browser) as a platform to host GUI programs. The advantages are obvious: - Multi platform GUI
- Using HTML forms which is generally available
- HTML has a simple declarative syntax
- Coloring and styling can easily be done
- All the required widgets are built-in and HUG was inspired by HTML widgets in the first place
Problem of course is how to handle events and do callbacks without using Javascript. So, accidentally, when updating the minimal web browser yesterday, I looked a little deeper in the webkit API, and to my surprise, there is a callback on the "submit-form" signal!  Below a small Proof-of-Concept on a universal GUI based on HTML forms, using webkit. It is all BaCon code and allows callbacks. Of course further development of ideas and concepts is needed, but I think it can be done. Regards, Peter ' Do not choke on GTK functions
OPTION PARSE FALSE
' Using GTK3
PRAGMA INCLUDE <gtk/gtk.h>
PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
' Using libwebkit2
PRAGMA INCLUDE <webkit2/webkit2.h>
PRAGMA OPTIONS `pkg-config --cflags webkit2gtk-3.0`
PRAGMA LDFLAGS `pkg-config --libs webkit2gtk-3.0`
'---------------------------------------------------------------------------------------------------
' Define GUI
gui$ = "<!DOCTYPE html>" \
"<html>" \
"<body bgcolor='#D3D3D3'>" \
"<h2>Your BMI revealed</h2>" \
"<form action='' id='main_form' method='post' target='_self'>" \
"Height (cm):<br>" \
"<input type='text' name='height' value='0'>" \
"<br><br>" \
"Weight (kg):<br>" \
"<input type='text' name='weight' value='0\'>" \
"<br><br>" \
"Your BMI is:<br>" \
"<input type='text' name='bmi' value='0'>" \
"<br><br>" \
"<input type='submit' value='Calculate'>" \
"& nbsp;& nbsp;& nbsp;& nbsp;" \
"<input type='submit' form='exit_form' value=' Exit '>" \
"</form>" \
"<form action='' id='exit_form' method='post' target='_self'>" \
"<input type='text' style='display: none' name='exit' value='exit'>" \
"</form>" \
"</body>" \
"</html>"
'---------------------------------------------------------------------------------------------------
SUB Get_Event(void* widget, void* form, void* data)
LOCAL table TYPE GHashTable*
LOCAL iter TYPE GHashTableIter
LOCAL key, value TYPE void*
LOCAL name$
LOCAL height, weight TYPE FLOATING
' Get the values from the form
table = webkit_form_submission_request_get_text_fields(form)
IF table = NULL THEN
PRINT "Internal error: no data - exiting..."
END
ENDIF
' Fetch fields and values
g_hash_table_iter_init (&iter, table)
WHILE g_hash_table_iter_next(&iter, &key, &value)
name$ = (char*)key
SELECT name$
CASE "height"
height = VAL(value)/100
CASE "weight"
weight = VAL(value)
CASE "exit"
END
ENDSELECT
' Make sure to retain values
gui$ = REPLACE$(gui$, "name='" & key & "' value='*'", "name='" & key & "' value='" & value & "'", TRUE)
WEND
' Set value in GUI
gui$ = REPLACE$(gui$, "name='bmi' value='*'", "name='bmi' value='" & STR$(weight/(height*height)) & "'", TRUE)
' Render again with calculated result
webkit_web_view_load_html(WEBKIT_WEB_VIEW(html), gui$, NULL)
ENDSUB
'---------------------------------------------------------------------------------------------------
' Initialize GTK
gtk_init(0, 0)
' Create main window
window = gtk_window_new(0)
gtk_window_set_title(GTK_WINDOW(window), "Proof of Concept - BMI Calculator")
gtk_window_set_default_size(GTK_WINDOW(window), 300, 310)
gtk_window_set_icon_name(GTK_WINDOW(window), "gtk-dialog-info")
g_signal_connect_data(GTK_WIDGET(window), "delete-event", G_CALLBACK(exit), 0, 0, 0)
' Create HTML renderer
html = webkit_web_view_new()
scrolled = gtk_scrolled_window_new(0, 0)
gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(scrolled), 1, 1)
gtk_scrolled_window_set_shadow_type(GTK_SCROLLED_WINDOW(scrolled), 3)
gtk_container_add(GTK_CONTAINER(scrolled), GTK_WIDGET(html))
' Load GUI definition
webkit_web_view_load_html(WEBKIT_WEB_VIEW(html), gui$, NULL)
g_signal_connect_data(GTK_WIDGET(html), "submit-form", G_CALLBACK(Get_Event), 0, 0, 0)
' Pack everything together and wait for event
gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(scrolled))
gtk_widget_show_all(GTK_WIDGET(window))
gtk_main()
EDIT: replaced the inline escaped double quotes for single quotes. Note the 'nbsp' tags, they are put here wrongly otherwise they are not being displayed properly. Attachments:
|
|
|
|
Post by vovchik on Apr 8, 2019 21:57:12 GMT 1
Dear Peter, I like it. Thanks. Webkit adds a very powerful resource to BaCon, and I am also playing with in the hope that we can create a lightning-fast and unencumbered browser that will load and display in seconds. Using html is a universal GUI is a very nice idea. It works for me on my Mint 18.4 and RPI3. With kind regards, vovchik |
|
|
|
Post by bigbass on Apr 9, 2019 19:12:32 GMT 1
Hello Peter
Will be very useful
and java free
on the RPI we need to change
' Do not choke on GTK functions
OPTION PARSE FALSE
'/usr/include/webkitgtk-4.0/webkit2
' Using GTK3
PRAGMA INCLUDE <gtk/gtk.h>
PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
' Using libwebkit2 RPI3 change 3.0 to 4.0
'---sudo apt-get install libwebkit2gtk-4.0-37-gtk2
'---sudo apt-get install libwebkit2gtk-4.0-dev
PRAGMA INCLUDE <webkitgtk-4.0/webkit2/webkit2.h>
PRAGMA OPTIONS `pkg-config --cflags webkit2gtk-4.0`
PRAGMA LDFLAGS `pkg-config --libs webkit2gtk-4.0`
Ahh I just saw your EDIT note all is ok
you need to minor update your demo the format
is off just a little you see & nbsp instead of the space
here when you pasted
"& nbsp;& nbsp;& nbsp;& nbsp;" \
I used 4 of these instead and works fine '&emsp'
" " \
Thanks for this demo
Joe
|
|
|
|
Post by alexfish on Apr 9, 2019 21:26:22 GMT 1
Hi Peter working here as per Joe's IE latest PI can only have versions libwebkit2gtk-4.0-37 Or libwebkit3 thought would try some color text And reshaped the & nbsp; possible use This<pre> " "</pre>Text This<pre> " "</pre>Textthe color ' Define GUI
gui$ = "<!DOCTYPE html>" \
"<html>" \
"<body bgcolor='#D3D3D3'>" \
"<h2><font color='#C46464'>Your BMI revealed </font></h2>" \
"<form action='' id='main_form' method='post' target='_self'>" \
"<font color='#00FFC0'>Height (cm):</font><br>" \
"<input type='text' name='height' value='0'>" \
"<br><br>" \
"<font color='#C46464'>Weight (kg):</font><br>" \
"<input type='text' name='weight' value='0\'>" \
"<br><br>" \
"Your BMI is:<br>" \
"<input type='text' name='bmi' value='0'>" \
"<br><br>" \
"<input type='submit' value='Calculate'>" \
" " \
"<input type='submit' form='exit_form' value=' Exit '>" \
"</form>" \
"<form action='' id='exit_form' method='post' target='_self'>" \
"<input type='text' style='display: none' name='exit' value='exit'>" \
"</form>" \
"</body>" \
"</html>"
BR Alex Attachments:
|
|
|
|
Post by Pjot on Apr 9, 2019 21:43:52 GMT 1
working here as per Joe's IE latest PI can only have versions libwebkit2gtk-4.0-37 Thanks guys, you are right. On Linux Mint there seems to be a libwebkit2gtk-4.0 and a libwebkit2gtk-3.0. The latter uses a deprecated function to parse the fields in the "submit-form" signal. I have rewritten the code slightly, using libwebkit2gtk-4.0 and the correct function. We need "libwebkit2gtk-4.0-dev" installed though. Hope this works for you too. @ Alex: nice to see the easy markup stuff BR, Peter PS the [ pre ] tag doesn't seem to work for me.... ' Do not choke on GTK functions
OPTION PARSE FALSE
' Using GTK3
PRAGMA INCLUDE <gtk/gtk.h>
PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
' Using libwebkit2
PRAGMA INCLUDE <webkit2/webkit2.h>
PRAGMA OPTIONS `pkg-config --cflags webkit2gtk-4.0`
PRAGMA LDFLAGS `pkg-config --libs webkit2gtk-4.0`
'---------------------------------------------------------------------------------------------------
' Define GUI
gui$ = "<!DOCTYPE html>" \
"<html>" \
"<body bgcolor='#D3D3D3'>" \
"<h2>Your BMI revealed</h2>" \
"<form action='' id='main_form' method='post' target='_self'>" \
"Height (cm):<br>" \
"<input type='text' name='height' value='0'>" \
"<br><br>" \
"Weight (kg):<br>" \
"<input type='text' name='weight' value='0'>" \
"<br><br>" \
"Your BMI is:<br>" \
"<input type='text' name='bmi' value='0'>" \
"<br><br>" \
"<input type='submit' value='Calculate'>" \
"& nbsp;& nbsp;& nbsp;& nbsp;" \
"<input type='submit' form='exit_form' value=' Exit '>" \
"</form>" \
"<form action='' id='exit_form' method='post' target='_self'>" \
"<input type='text' style='display: none' name='exit' value='exit'>" \
"</form>" \
"</body>" \
"</html>"
'---------------------------------------------------------------------------------------------------
SUB Get_Event(void* widget, WebKitFormSubmissionRequest* form, void* data)
LOCAL key, value TYPE GPtrArray*
LOCAL height, weight TYPE FLOATING
LOCAL key$, value$
LOCAL idx
' Get the values from the form
IF form = NULL THEN
PRINT "Internal error: no data - exiting..."
END
ENDIF
webkit_form_submission_request_submit(form)
' Get the values from the form
IF webkit_form_submission_request_list_text_fields(form, &key, &value) THEN
REPEAT
key$ = (char*)g_ptr_array_index(key, idx)
value$ = (char*)g_ptr_array_index(value, idx)
SELECT key$
CASE "height"
height = VAL(value$)/100
CASE "weight"
weight = VAL(value$)
CASE "exit"
END
ENDSELECT
' Make sure to retain values
gui$ = REPLACE$(gui$, "name='" & key$ & "' value='[0-9,.na-]+'", "name='" & key$ & "' value='" & value$ & "'", TRUE)
INCR idx
UNTIL idx = key->len
' Set value in GUI
gui$ = REPLACE$(gui$, "name='bmi' value='[0-9,.na-]+'", "name='bmi' value='" & STR$(weight/(height*height)) & "'", TRUE)
' Render again with calculated result
webkit_web_view_load_html(WEBKIT_WEB_VIEW(html), gui$, NULL)
ENDIF
ENDSUB
'---------------------------------------------------------------------------------------------------
' Initialize GTK
gtk_init(0, 0)
' Create main window
window = gtk_window_new(0)
gtk_window_set_title(GTK_WINDOW(window), "Proof of Concept - BMI Calculator")
gtk_window_set_default_size(GTK_WINDOW(window), 300, 310)
gtk_window_set_icon_name(GTK_WINDOW(window), "gtk-dialog-info")
g_signal_connect_data(GTK_WIDGET(window), "delete-event", G_CALLBACK(exit), 0, 0, 0)
' Create HTML renderer
html = webkit_web_view_new()
scrolled = gtk_scrolled_window_new(0, 0)
gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(scrolled), 1, 1)
gtk_scrolled_window_set_shadow_type(GTK_SCROLLED_WINDOW(scrolled), 3)
gtk_container_add(GTK_CONTAINER(scrolled), GTK_WIDGET(html))
' Load GUI definition
webkit_web_view_load_html(WEBKIT_WEB_VIEW(html), gui$, NULL)
g_signal_connect_data(GTK_WIDGET(html), "submit-form", G_CALLBACK(Get_Event), 0, 0, 0)
' Pack everything together and wait for event
gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(scrolled))
gtk_widget_show_all(GTK_WIDGET(window))
gtk_main()
|
|
|
|
Post by alexfish on Apr 9, 2019 22:12:43 GMT 1
Hi Peter
getting this error
bacon -y web.bac
Converting 'web.bac'... done, 115 lines were processed in 0.143 seconds.
Compiling 'web.bac'... cc `pkg-config --cflags gtk+-3.0` `pkg-config --cflags webkit2gtk-4.0` -c web.bac.c
cc -o web web.bac.o -lbacon -L. -lm `pkg-config --libs gtk+-3.0` `pkg-config --libs webkit2gtk-4.0`
Makefile.bacon:4: recipe for target 'web' failed
Compiler error:
web.bac.o: In function `Get_Event':
web.bac.c:(.text+0x108): undefined reference to `webkit_form_submission_request_list_text_fields'
collect2: error: ld returned 1 exit status
make: *** [web] Error 1
Error code recieved : 512
BR
Alex
|
|
|
|
Post by Pjot on Apr 10, 2019 6:48:02 GMT 1
Hi Alex,
Can you check the output of:
# pkg-config --libs webkit2gtk-4.0
Probably it returns empty on your system. I did run into the same error, but after I had installed libwebkit2gtk-4.0-dev compilation worked.
HTH
Peter
EDIT: I changed the last code with webkit2gtk-4.0 a bit to make it work in Ubuntu.
|
|
|
|
Post by vovchik on Apr 10, 2019 14:21:57 GMT 1
Dear all, And we can actually make it nice and pretty with very few and tiny html tweaks (see attachment). With kind regards, vovchik |
|
|
|
Post by bigbass on Apr 11, 2019 8:51:50 GMT 1
Hello Guys
I wanted to comment on Peter's new demo
and your work vovchik
however we have different packages installed
for this reason Alex and I were having compiling errors
I tracked down how to get your work to compile and run
PRAGMA INCLUDE <webkitgtk-4.0/webkit2/webkit2.h>
notice that we must use a prefix webkitgtk-4.0
because that's where the headers get installed
RPI3 is debian based and mint takes from debian and Ubuntu but they package
their own stuff too so this is why we have conflicts
I really just care about the fix
next problem Alex and I need to use the older SUB ROUTINE
I just swap out the SUB completely then it works
I will just repost your work vovchik with those two changes
and lets see if Alex can have good results also now
this took me some time to sort out but now its working correctly
thanks it looks great !
VOVCHIK'S DEMO ADJUSTED TO COMPILE FOR THE RPI3
no other edits were made used the old SUB from Peter's first demo
and the prefix <webkitgtk-4.0
' Do not choke on GTK functions
OPTION PARSE FALSE
' Using GTK3
PRAGMA INCLUDE <gtk/gtk.h>
PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
' Using libwebkit2
PRAGMA INCLUDE <webkitgtk-4.0/webkit2/webkit2.h>
PRAGMA OPTIONS `pkg-config --cflags webkit2gtk-4.0`
PRAGMA LDFLAGS `pkg-config --libs webkit2gtk-4.0`
'---------------------------------------------------------------------------------------------------
DECLARE gui$ TYPE STRING
' Define GUI
' " background-repeat: repeat;" \
gui$ = "<!DOCTYPE html>" \
"<html>" \
"<head>" \
"<title>Example</title>" \
"<!-- Styles --> " \
"<style>" \
"body {" \
" background: url('http://www.basic-converter.org/comp010.jpg');" \
" background-position: 50% 50%;" \
" background-repeat: repeat;" \
"}" \
"</style>" \
"</head>" \
"<body dir='ltr'>" \
"<div align='center'>" \
"<svg width='290' height='55' viewBox='0 0 300 65'> " \
"<linearGradient id='l2' gradientUnits='objectBoundingBox' " \
" x1='1' x2='1' y1='0' y2='1'>" \
" <stop stop-color='white' offset='0'/>" \
" <stop stop-color='lightgray' offset='0.5'/>" \
" <stop stop-color='white' offset='1'/>" \
"</linearGradient>" \
"<rect x='2.0%' y='2%' rx='5%' ry='25%' width='96%' " \
" height='96%' fill='url(#l2)' stroke='#076FD4' stroke-width='0.5%'/>" \
" <g stroke-width='0' stroke='darkred' " \
" fill='#076FD4' font-family='DejaVu Sans Bold' " \
" font-size='26' font-style='normal' font-weight='800' " \
" text-anchor='middle' opacity='1' dominant-baseline='central' >" \
" <text x='50%' dy='40'>Your BMI revealed</text>" \
" </g>" \
"</svg>" \
"</div>" \
"<form align='center' action='' id='main_form' method='post' target='_self'>" \
"Height (cm):<br>" \
"<input type='text' name='height' value='0'>" \
"<br><br>" \
"Weight (kg):<br>" \
"<input type='text' name='weight' value='0'><font color='#076FD4'>" \
"<br><br>" \
"<b>Your BMI is:</b><br></font>" \
"<input type='text' name='bmi' value='0'>" \
"<br><br>" \
"<div style='float:left'>" \
"<input type='submit' value='Calculate'>" \
"</div>" \
"<div style='float:right'>" \
"<input type='submit' form='exit_form' value=' Exit '>" \
"</div>" \
"</form>" \
"<div align='center'>" \
"<svg width='32' height='32' viewBox='0 0 232 232'> " \
"<linearGradient id='l2' gradientUnits='objectBoundingBox' " \
" x1='1' x2='1' y1='0' y2='1'>" \
" <stop stop-color='white' offset='0'/>" \
" <stop stop-color='#076FD4' offset='0.5'/>" \
" <stop stop-color='white' offset='1'/>" \
"</linearGradient>" \
"<g transform='translate(0.0,232.0) scale(1.0,-1.0)' " \
"fill='url(#l2)' stroke='black'> " \
"<path d='M101 225 c-96 -13 -127 -135 -50 -196 70 -56 176 -3 176 88 0 68 " \
"-58 118 -126 108z m-23 -60 c18 -5 34 -22 36 -38 1 -9 0 -9 -19 -9 l-15 0 " \
"-5 5 c-8 9 -14 9 -23 0 l-5 -5 -14 0 c-18 0 -19 0 -19 7 0 26 35 49 64 " \
"40z m110 0 c18 -7 32 -24 34 -39 1 -8 0 -8 -19 -8 l-15 0 -5 5 c-8 9 -14 " \
"9 -23 0 l-5 -5 -15 0 c-18 0 -19 0 -18 9 2 28 38 48 66 38z m-119 -51 c2 " \
"-2 0 -4 -4 -5 -5 0 -7 1 -7 4 0 3 9 4 11 1z m108 0 c2 -2 0 -4 -4 -5 -5 0 " \
"-7 1 -7 4 0 3 9 4 11 1z m-53 -28 c20 -30 58 -35 86 -11 16 13 4 -10 -16 " \
"-32 -30 -32 -86 -42 -124 -21 -22 11 -35 24 -49 48 -5 9 -2 10 7 3 29 -23 " \
"68 -15 86 18 3 5 5 4 10 -5z'/> " \
"</g> " \
"</svg>" \
"</div>" \
"<form action='' id='exit_form' method='post' target='_self'>" \
"<input type='text' style='display: none' name='exit' value='exit'>" \
"</form>" \
"</body>" \
"</html>"
'---------------------------------------------------------------------------------------------------
SUB Get_Event(void* widget, void* form, void* data)
LOCAL table TYPE GHashTable*
LOCAL iter TYPE GHashTableIter
LOCAL key, value TYPE void*
LOCAL name$
LOCAL height, weight TYPE FLOATING
' Get the values from the form
table = webkit_form_submission_request_get_text_fields(form)
IF table = NULL THEN
PRINT "Internal error: no data - exiting..."
END
ENDIF
' Fetch fields and values
g_hash_table_iter_init (&iter, table)
WHILE g_hash_table_iter_next(&iter, &key, &value)
name$ = (char*)key
SELECT name$
CASE "height"
height = VAL(value)/100
CASE "weight"
weight = VAL(value)
CASE "exit"
END
ENDSELECT
' Make sure to retain values
gui$ = REPLACE$(gui$, "name='" & key & "' value='*'", "name='" & key & "' value='" & value & "'", TRUE)
WEND
' Set value in GUI
gui$ = REPLACE$(gui$, "name='bmi' value='*'", "name='bmi' value='" & STR$(weight/(height*height)) & "'", TRUE)
' Render again with calculated result
webkit_web_view_load_html(WEBKIT_WEB_VIEW(html), gui$, NULL)
ENDSUB
'---------------------------------------------------------------------------------------------------
' Initialize GTK
gtk_init(0, 0)
' Create main window
window = gtk_window_new(0)
gtk_window_set_title(GTK_WINDOW(window), "BMI Calculator")
gtk_window_set_default_size(GTK_WINDOW(window), 310, 330)
gtk_window_set_icon_name(GTK_WINDOW(window), "gtk-dialog-info")
g_signal_connect_data(GTK_WIDGET(window), "delete-event", G_CALLBACK(exit), 0, 0, 0)
' Create HTML renderer
html = webkit_web_view_new()
scrolled = gtk_scrolled_window_new(0, 0)
gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(scrolled), 1, 1)
gtk_scrolled_window_set_shadow_type(GTK_SCROLLED_WINDOW(scrolled), 3)
gtk_container_add(GTK_CONTAINER(scrolled), GTK_WIDGET(html))
' Load GUI definition
webkit_web_view_load_html(WEBKIT_WEB_VIEW(html), gui$, NULL)
g_signal_connect_data(GTK_WIDGET(html), "submit-form", G_CALLBACK(Get_Event), 0, 0, 0)
' Pack everything together and wait for event
gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(scrolled))
gtk_widget_show_all(GTK_WIDGET(window))
gtk_main()
|
|
|
|
Post by vovchik on Apr 11, 2019 10:16:32 GMT 1
Dear Joe, Thanks for figuring out the PRAGMA bit on the PI. I updated the archive (attached), and it now has a proper RPI3 version. I also added SVG_PIXBUF, so we can set the app icon from an inline SVG (and also display inline SVGs)in GTK3 easily. With kind regards, vovchik |
|
|
|
Post by vovchik on Apr 11, 2019 17:51:45 GMT 1
Dear all,
And we can do a conditional compile (using webkit as an example) this way. It seems to work:
' Using libwebkit2
IF INSTR(OS$, "armv") THEN
PRAGMA INCLUDE <webkitgtk-4.0/webkit2/webkit2.h>
PRAGMA OPTIONS `pkg-config --cflags webkit2gtk-4.0`
PRAGMA LDFLAGS `pkg-config --libs webkit2gtk-4.0`
ELSE
PRAGMA INCLUDE <webkit2/webkit2.h>
PRAGMA OPTIONS `pkg-config --cflags webkit2gtk-4.0`
PRAGMA LDFLAGS `pkg-config --libs webkit2gtk-4.0`
END IF
With kind regards,
vovchik
|
|
|
|
Post by Pjot on Apr 11, 2019 18:16:30 GMT 1
Thanks all, Those are very useful tweaks and additions! I thought to throw in another demo and share some experiences. - Each button need its own form so the event handler can see which button was pressed
- I could not get a Java popup running in Webkit so I am cheating with a GTK message box
- Text fields need a button so their contents can be submitted to the event handler
- Though Webkit takes a care of a lot of things for you, HTML has its limitations
This is a port of my old Dictionary program. BR Peter ' Do not choke on GTK functions
OPTION PARSE FALSE
' Using GTK3
PRAGMA INCLUDE <gtk/gtk.h>
PRAGMA OPTIONS `pkg-config --cflags gtk+-3.0`
PRAGMA LDFLAGS `pkg-config --libs gtk+-3.0`
' Using libwebkit2
PRAGMA INCLUDE <webkit2/webkit2.h>
PRAGMA OPTIONS `pkg-config --cflags webkit2gtk-4.0`
PRAGMA LDFLAGS `pkg-config --libs webkit2gtk-4.0`
'---------------------------------------------------------------------------------------------------
' Define GUI
gui$ = "<!DOCTYPE html>" \
"<html>" \
"<body bgcolor='#D3D3D3' style='font-size:12px;'>" \
"<form action='' id='about_form' method='post' target='_self'>" \
"<input type='text' style='display: none' name='about' value='about'>" \
"</form>" \
"<form action='' id='clear_form' method='post' target='_self'>" \
"<input type='text' style='display: none' name='clear' value='clear'>" \
"</form>" \
"<form action='' id='exit_form' method='post' target='_self'>" \
"<input type='text' style='display: none' name='exit' value='exit'>" \
"</form>" \
"<table style='width:100%'>" \
"<tr>" \
"<td>" \
"<fieldset>" \
"<legend>Control</legend>" \
"<input type='submit' form='about_form' value=' About '>" \
"<input type='submit' form='clear_form' value=' Clear '>" \
"<input type='submit' form='exit_form' value=' Quit '>" \
"</fieldset>" \
"</td>" \
"<td style='text-align:center'>" \
"<h3>BaCon dictionary</h3>The classic dictionary program" \
"</td>" \
"</tr>" \
"</table>" \
"<br>" \
"<fieldset>" \
"<legend>Translation</legend>" \
"<textarea rows='8' cols='62'></textarea>" \
"</fieldset>" \
"<br>" \
"<form action='' id='word_form' method='post' target='_self'>" \
"<fieldset>" \
"<legend>Lookup</legend>" \
"<table style='width:100%'>" \
"<tr>" \
"<td style='text-align:left'>" \
"Server: <input type='text' size='14' name='server' value='dict.org'>" \
"</td>" \
"<td style='text-align:right'>" \
"Word: <input type='text' size='20' name='word' value='' autofocus>" \
"<input type='submit' value='Lookup'>" \
"</td>" \
"</tr>" \
"</table>" \
"</fieldset>" \
"</form>" \
"</body>" \
"</html>"
'---------------------------------------------------------------------------------------------------
SUB Show_Dialog(msg$)
LOCAL dialog
webkit_web_view_load_html(WEBKIT_WEB_VIEW(html), gui$, NULL)
dialog = gtk_message_dialog_new(GTK_WINDOW(window), GTK_DIALOG_DESTROY_WITH_PARENT, GTK_MESSAGE_INFO, GTK_BUTTONS_CLOSE, NULL)
gtk_message_dialog_set_markup(GTK_MESSAGE_DIALOG(dialog), msg$)
gtk_dialog_run(GTK_DIALOG(dialog))
gtk_widget_destroy(GTK_WIDGET(dialog))
ENDSUB
'---------------------------------------------------------------------------------------------------
FUNCTION Lookup_Word$(server$, word$)
LOCAL req$, line$, total$
LOCAL mynet
req$ = "DEFINE english " & word$ & CR$ & NL$
OPEN server$ & ":2628" FOR NETWORK AS mynet
SEND req$ TO mynet
REPEAT
RECEIVE line$ FROM mynet
total$ = total$ & line$
IF INSTR(line$, "250 ok") THEN BREAK
UNTIL NOT(WAIT(mynet, 1000))
SEND "QUIT" TO mynet
CLOSE NETWORK mynet
RETURN total$
ENDFUNCTION
'---------------------------------------------------------------------------------------------------
SUB Get_Event(WebKitWebView* widget, WebKitFormSubmissionRequest* form, void* data)
LOCAL key, value TYPE GPtrArray*
LOCAL height, weight TYPE FLOATING
LOCAL key$, value$, server$, word$, text$
LOCAL idx
' Get the values from the form
IF form = NULL THEN
PRINT "Internal error: no data - exiting..."
END
ENDIF
webkit_form_submission_request_submit(form)
' Get the values from the form
IF webkit_form_submission_request_list_text_fields(form, &key, &value) THEN
REPEAT
key$ = (char*)g_ptr_array_index(key, idx)
value$ = (char*)g_ptr_array_index(value, idx)
' Find out the action
SELECT key$
CASE "server"
server$ = value$
CASE "word"
word$ = value$
CASE "clear"
gui$ = REPLACE$(gui$, "<textarea rows='8' cols='62'>.*</textarea>", "<textarea rows='8' cols='62'></textarea>", TRUE)
BREAK
CASE "about"
Show_Dialog("<b>Demo program with Webkit</b>" & NL$ & TAB$(1) & "Using BaCon " & VERSION$ & NL$ & NL$ & "<i>(C) Peter van Eerten - April 11, 2019</i>")
BREAK
CASE "exit"
END
ENDSELECT
' Make sure to retain the current values in the GUI
gui$ = REPLACE$(gui$, "name='" & key$ & "' value='[.]*'", "name='" & key$ & "' value='" & value$ & "'", TRUE)
INCR idx
UNTIL idx = key->len
' Lookup word in English dictionaries
IF LEN(word$) THEN
text$ = Lookup_Word$(server$, word$)
gui$ = REPLACE$(gui$, "<textarea rows='8' cols='62'>.*</textarea>", "<textarea rows='8' cols='62'>" & text$ & "</textarea>", TRUE)
ENDIF
' Render GUI again with text result
webkit_web_view_load_html(WEBKIT_WEB_VIEW(html), gui$, NULL)
ENDIF
ENDSUB
'---------------------------------------------------------------------------------------------------
' Initialize GTK
gtk_init(0, 0)
' Create main window
window = gtk_window_new(0)
gtk_window_set_title(GTK_WINDOW(window), "Proof of Concept Webkit - Dictionary")
gtk_window_set_default_size(GTK_WINDOW(window), 500, 350)
gtk_window_set_icon_name(GTK_WINDOW(window), "gtk-dialog-info")
g_signal_connect_data(GTK_WIDGET(window), "delete-event", G_CALLBACK(exit), 0, 0, 0)
' Create HTML renderer
html = webkit_web_view_new()
scrolled = gtk_scrolled_window_new(0, 0)
gtk_scrolled_window_set_policy(GTK_SCROLLED_WINDOW(scrolled), 1, 1)
gtk_scrolled_window_set_shadow_type(GTK_SCROLLED_WINDOW(scrolled), 3)
gtk_container_add(GTK_CONTAINER(scrolled), GTK_WIDGET(html))
' Load GUI definition
webkit_web_view_load_html(WEBKIT_WEB_VIEW(html), gui$, NULL)
g_signal_connect_data(GTK_WIDGET(html), "submit-form", G_CALLBACK(Get_Event), 0, 0, 0)
' Pack everything together and wait for event
gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(scrolled))
gtk_widget_show_all(GTK_WIDGET(window))
gtk_main()
Attachments:
|
|
|
|
Post by bigbass on Apr 11, 2019 18:24:05 GMT 1
hey guys
we can use css too
working on it still sorry
removed until all is fine
|
|
|
|
Post by alexfish on Apr 12, 2019 8:00:56 GMT 1
Hi Peter
pkg configs
:~ $ pkg-config --libs webkit2gtk-4.0
-lwebkit2gtk-4.0 -lgtk-3 -lgdk-3 -lpangocairo-1.0 -lpango-1.0 -latk-1.0 -lcairo-gobject -lcairo -lgdk_pixbuf-2.0 -lsoup-2.4 -lgio-2.0 -lgobject-2.0 -ljavascriptcoregtk-4.0 -lglib-2.0
at this stage have not done a reboot after the installs
so will I do a shut down & reboot
then test the bits again
BR
Alex
|
|
|
|
Post by alexfish on Apr 12, 2019 8:46:36 GMT 1
Hi All
Joe's 'reworked demo' works
Will now test the other demo's
BR
Alex
|
|
