Another attempt for a universal GUI

[bigbass]

Hello vovchik

Thanks for posting the dual
Compile option code
a good full solution

I Saw that you posted
before but I am only using
A rpi3 at the moment
And I was even reluctlant to post the mint version without
Testing it first


When I post demos in future
I will use your dual option

Thanks
Joe

P.S
I also suffer from tunnel vision
When I spend a few hours coding
I don't see anything around me
until the code compiles and runs
Then my vision comes back to me again

[Pjot]

Apr 15, 2019 0:10:35 GMT 1 vovchik said:

There is a little problem with timeouts, though, if a word cannot be found. I wonder whether we shouldn't check for that, since the GUI goes blank waiting for a server response.

Thanks vovchik, your styling is superb, as always. I noticed the blanking too, and it seems to be related to the callback data. When I change line 272 as follows:

gui$ = template$


...then it works a lot better. Not sure why the 'data' argument does not receive the correct data though.

In any case, this program was meant as a Proof-of-Concept. It already has shown quite some pitfalls, all of which we were able to overcome. I like the idea of HTML rendering a lot, especially with the embedded SVG stuff, which you have demonstrated so skillfully.

Coming days I will look into some kind of high-level API which will generate the HTML for us and which allows the quick creation of a GUI.

The Dutch dictionary works fine indeed, I did not see it before, so thanks for mentioning!

BR

PEter

[vovchik]

Dear Peter,

Your mod (gui$ = template$) does wonders! Thanks. I tried gui$ = (char*)data, but it did nothing that I could see. I do not understand why, but your little mod works, which is, I suppose, the important thing. Understanding might come later.

With kind regards,
vovchik

[Pjot]

All,

As mentioned, I have optimized the HTML based GUI and squeezed out an API. The looks are nothing fancy yet, however, from API point of view, it now has a declarative structure and the client program does not need to use global variables (like in HUG).

For fun, I tried to remake the original dictionary client and the result can be found below.

The actual GUI code now is only 14 lines, compared to the original program which needed 59 lines!

BR
Peter


INCLUDE mi

FUNCTION Get_Data$(server$, request$)

   LOCAL total$, line$
   LOCAL mynet

   OPEN server$ & ":2628" FOR NETWORK AS mynet
   SEND request$ 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_Dicts(nr, MI_type items[])

   LOCAL resp$, item$, word$, server$, dict$, all$
   LOCAL x, which=0 TYPE static int

   FOR x = 0 TO nr-1
       IF items[x].key$ = "drop" THEN server$ = items[x].value$
       IF items[x].key$ = "entry" THEN word$ = items[x].value$
       IF items[x].key$ = "list" THEN dict$ = items[x].value$
       IF items[x].key$ = "dflt" THEN all$ = items[x].value$
   NEXT

   IF server$ <> TOKEN$(Dict_Server$, which) THEN

       which = ISTOKEN(Dict_Server$, server$)
       resp$ = Get_Data$(server$, "SHOW DB" & CR$ & NL$)

       ' Populate list with dictionaries
       TEXT("list", "")
       FOR item$ IN resp$ STEP CR$ & NL$
           IF REGEX(LEFT$(item$, 1), "[[:alpha:]]") THEN TEXT("list", item$)
       NEXT
       TEXT("text", "")
   
   ELSE
       ' Get dictionary right
       IF all$ = "true" THEN
           dict$ = "*"
       ELIF LEN(dict$) THEN
           dict$ = HEAD$(dict$, 1)
       ENDIF

       ' We have to lookup a word
       IF LEN(dict$) AND LEN(word$) THEN
           resp$ = Get_Data$(server$, "DEFINE " & dict$ & " " & word$ & CR$ & NL$)
           TEXT("text", resp$)
       ELSE
           TEXT("text", "")
       ENDIF
   ENDIF

ENDSUB

SUB Show_About

   TEXT("text", "")
   TEXT("text", "Demo program with Webkit" & NL$ & TAB$(1) & "Using BaCon " & VERSION$ & NL$ & NL$ & "(C) Peter van Eerten - April 21, 2019")

ENDSUB

SUB Clear_Edit

   TEXT("text", "")
   TEXT("entry", "")

ENDSUB

CONST Dict_Server$ = "dict.org dict.saugus.net dict.tu-chemnitz.de dict.mova.org dict.dvo.ru"

' Create droplist part
FRAME("frame1", " Servers ", 10, 10, 230, 55)
COMBO("drop", Dict_Server$, 20, 30, 130, 35)
BUTTON("refresh", "Refresh", 160, 30, 90, 35, Get_Dicts)

' Create control panel
FRAME("frame2", " Control ", 270, 10, 220, 55)
BUTTON("about", "About", 280, 30, 70, 35, Show_About)
BUTTON("clear", "Clear", 355, 30, 70, 35, Clear_Edit)
BUTTON("exbut", "Quit", 430, 30, 70, 35, QUIT)

' Create dictionary panel
FRAME("frame3", " Dictionaries ", 10, 85, 480, 145)
LIST("list", "", 20, 110, 480, 120)

' Create text part
FRAME("frame4", " Translation ", 10, 250, 480, 180)
EDIT("text", "", 20, 275, 480, 155)

' Create entry and lookup button
ENTRY("entry", "", 10, 455, 440, 20)
CHECK("dflt", "All", 460, 455, 50, 30)

' Endless mainloop
DISPLAY("Thesaurus", 525, 490)


Attachments:

mi.bac.gz (3.9 KB)

[Pjot]

Note that it is really easy to integrate SVG and HTML markup.

INCLUDE mi

toki_pona$ = "<svg width='468' height='617'><metadata>Created by potrace 1.5, written by Peter Selinger 2001-2004</metadata>" \
"<g transform='translate(0,617) scale(0.709091,-0.709091)' fill='#000099' stroke='none'>" \
"<path fill='#000099' stroke='none' d='M302 838 c-14 -14 -16 -126 -3 -147 5 -8 16 -11 25 -8 12 5 16 21 16 71 0 89 -10 112 -38 84z'/>" \
"<path fill='#000099' stroke='none' d='M521 775 c-27 -57 -32 -108 -10 -113 18 -3 84 122 75 144 -11 30 -44 15 -65 -31z'/>" \
"<path fill='#000099' stroke='none' d='M34 797 c-8 -22 59 -158 76 -154 38 7 -11 167 -51 167 -11 0 -22 -6 -25 -13z'/>" \
"<path fill='#000099' stroke='none' d='M254 590 c-50 -7 -128 -52 -175 -100 -98 -100 -65 -346 57 -423 63 -40 107 -50 200 -44 125 7 212 62 275 172 53 92 32 220 -51 317 -62 71 -170 99 -306 78z'/>" \
"<path fill='#ffff63' stroke='none' d='M443 539 c47 -13 112 -70 138 -120 24 -48 26 -147 3 -190 -22 -43 -82 -108 -117 -125 -137 -71 -277 -55 -351 41 -39 52 -51 92 -51 175 1 77 19 113 82 161 80 63 198 86 296 58z'/>" \
"<path fill='#000099' stroke='none' d='M462 367 c-5 -7 -15 -28 -21 -48 -21 -67 -100 -120 -144 -98 -30 15 -65 56 -88 102 -21 40 -51 48 -57 14 -5 -26 53 -111 96 -141 89 -62 204 -7 252 119 15 40 -15 81 -38 52z'/>" \
"</g>" \
"</svg>"

MARK("png", toki_pona$, 5, 5, 468, 617)
BUTTON("exit", "Quit", 390, 630, 80, 30, QUIT)
MARK("txt1", "<h2>I like Toki Pona!</h2>", 160, 620, 180, 30)
MARK("txt2", "<a href='https://tokipona.org/'>More info here</a>", 5, 635, 100, 30)
DISPLAY("Toki Pona", 480, 670)


Attachments:

[vovchik]

Dear Peter,

Thanks. Very nice and simple. Here is an variant that uses an SVG as a window background:

INCLUDE mi

url$ ="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient"
svg_box$ = "<svg xmlns='http://www.w3.org/2000/svg' " \
" width='480' height='670' viewBox='0 0 10 10'" \
" preserveAspectRatio='none'>" \
"<linearGradient id='g'>" \
" <stop offset='10%' stop-color='skyblue'/>" \
" <stop offset='50%' stop-color='azure'/>" \
" <stop offset='90%' stop-color='skyblue'/>" \
"</linearGradient>" \
"<rect fill='url(#g)' x='0' y='0' width='100%' height='100%'/>" \
" </svg>"

MARK("png", svg_box$, 5, 5, 480, 670)
BUTTON("exit", "Quit", 390, 630, 80, 30, QUIT)
MARK("txt1", "<h2>I like SVG BGs!</h2>", 160, 620, 180, 30)
MARK("txt2", "<a href='" & url$ & "'>More info here</a>", 20, 640, 100, 30)
DISPLAY("SVG Background", 490, 680)

And another variant here:

INCLUDE mi

url$ ="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient"
svg_box$ = "<svg xmlns='http://www.w3.org/2000/svg' " \
" width='480' height='670' viewBox='0 0 10 10'" \
" preserveAspectRatio='none'>" \
"<linearGradient id='g'>" \
" <stop offset='10%' stop-color='skyblue'/>" \
" <stop offset='50%' stop-color='azure'/>" \
" <stop offset='90%' stop-color='skyblue'/>" \
"</linearGradient>" \
"<rect fill='url(#g)' x='0' y='0' width='100%' height='100%'/>" \
" </svg>"
svg_banner$ = "<svg width='240' height='60' viewBox='0 0 400 60'>" \
" <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>" \
" <linearGradient id='l1' gradientUnits='objectBoundingBox'" \
" x1='1' x2='1' y1='0' y2='1'>" \
" <stop stop-color='skyblue' offset='0'/>" \
" <stop stop-color='blue' offset='1'/>" \
" </linearGradient>" \
" <rect x='2.5%' y='2%' rx='5%' ry='25%' width='96%'" \
" height='96%' fill='url(#l2)' stroke='#0F17FD' stroke-width='0.5%'/>" \
" <g transform='scale(0.15 0.15) translate(145, 165)'>" \
" <circle r='48%' cx='50%' cy='50%' fill='url(#l2)'" \
" fill-opacity='1.0' stroke='none'/>" \
" <circle r='46%' cx='50%' cy='50%' fill='url(#l1)'" \
" fill-opacity='1.0' stroke='none'/>" \
" </g>" \
" <g transform='translate(37,43) scale(0.35,-0.35)'" \
" fill='url(#l2)' stroke='white'>" \
" <path d='M24 73 c-4 -1 -7 -3 -10 -6 -21 -21 1 -55 28" \
" -45 l7 3 8 -9 9 -9 3 4 4 4 -8 8 c-9 10 -9 9 -6 16 6" \
" 21 -14 41 -35 34z m16 -9 c18 -9 12 -35 -8 -35 -19 0" \
" -25 27 -8 35 6 3 11 2 16 0z'/>" \
" </g> " \
" <g stroke-width='0' stroke='darkred' transform='translate(25, 0)'" \
"  font-family='DejaVu Sans Bold'" \
"  font-size='26' font-style='normal' font-weight='800'" \
"  text-anchor='middle' opacity='1' dominant-baseline='central' >" \
" <text fill='#0F17FD' x='50%' dy='30'>I like SVG Boxes!</text>" \
"   <text fill='black' font-weight='400' font-size='16' x='50%' dy='50'>" \
" SVG Rounded box</text>" \
" </g>" \
"</svg>"

MARK("png", svg_box$, 5, 5, 480, 670)
MARK("png1", svg_banner$, 120, 615, 240, 60)
BUTTON("exit", "Quit", 390, 630, 80, 30, QUIT)
MARK("txt1", "<h2><font color='skyblue'>I like SVG BGs!</font></h2>", \
170, 280, 180, 30)
MARK("txt2", "<a href='" & url$ & "'>More info here</a>", 20, 640, 100, 30)
DISPLAY("SVG Background", 490, 680)

With kind regards,
vovchik

[Pjot]

Thanks vovchik!

The webkit HTML renderer is very powerful indeed Also I am curious if it all works on the WPE version of Webkit (Web Platform for Embedded) which I will try shortly.

BR
Peter

[Pjot]

Added the RADIO button, this is how it works. Also added more documentation to the top of the 'mi.bac' include file.

INCLUDE mi

SUB Get_Val( nr, MI_type items[] )

   LOCAL x

   FOR x = 0 TO nr-1
       PRINT items[x].key$, ":", items[x].value$
   NEXT

ENDSUB

RADIO("radio", "option 1", 10, 20, 100, 30)
RADIO("radio", "option 2", 10, 50, 100, 30)

RADIO("bla", "bla 1", 10, 110, 100, 30)
RADIO("bla", "bla 2", 10, 140, 100, 30)
RADIO("bla", "bla 3", 10, 170, 100, 30)

BUTTON("submit", "Click", 10, 260, 100, 30, Get_Val)

DISPLAY("Test radio buttons", 400, 300)


EDIT: more updates, release 0.3
- fixed issue with ' symbol in TEXT method
- check on valid UTF8 encoding in TEXT method
- added SLIDER widget
- added FILEDIALOG widget
- added REMOVE method
- added PASSWORD widget

Attachments:

mi.bac.gz (3.73 KB)

[vovchik]

Dear Peter,

Here is a little mi widget demo. I modded mi.bac slightly to permit user-defined svg icons. Everything is in the attached archive. I am now wondering how we can do tooltips using "title='some text'" without too much fuss.

With kind regards,
vovchik

Attachments:

mi-radio-src.bac.tar.gz (5.54 KB)

[Pjot]

Thanks vovchik,

Your program works, and thanks again for trying the latest. As you may have noticed, I also introduced 'ISUTF8', which, some time ago, we have discussed before.

However, the problem mentioned back then remains, because we only know that a byte sequence is compliant to UTF8 encoding, but we never will know if the byte sequence really is UTF8 data in the sense of a valid readable string. It still could be random binary data just as well, which coincidentally turns out to be UTF8 compliant.

In any case, as long as the data is compliant to UTF8, the Webkit widget will not choke on it (though it may display meaningless garbage from several unicode charts).

Regarding your SVG modification, I like the concept of inline icons appearing in a Window Manager, but I feel reluctant about the GDK dependency. Sorry for my nagging. The reason is that I am still hoping to port this GUI to other Webkit backends, like Cocoa, QT and WPE. This porting comes down to simply rewriting the DISPLAY function only, which will be easier if it has as few dependencies as possible

I looked into nanoSVG again, but still GTK will need a GdkPixBuf to set an inline SVG as an icon. Best alternative may be "gtk_window_set_icon_from_file" but then this is not inline.

For the tooltips, in the original HUG this was set by the PROPERTY function, which I will look into as well - for example, next to tooltips, we might want to set focus or be able to put limitations like max characters (entry) or columns (textview), for which we can use PROPERTY also.

Thanks again for testing and your suggestions,
Peter

[vovchik]

Dear Peter,

You are right about pixbuf, which is exclusive to GTK, but I like using it. Here is SHAKESPEARE done in mi. The only real problem is a flashing screen when I try to update the MARK by removing it and then redefining it. Without being able to use TEXT, I do not know how to do it cleanly any other way.

With kind regards,
vovchik

Attachments:

shakespeare-mi.bac.tar.gz (8.97 KB)

[Pjot]

Thanks for the Shakespeare program in the Minimal Interface. I have quickly added the possibility to use the TEXT method for the MARK button. Hope this works better for you.

Also I have added the PROPERTY method, which, among other thing, allows setting up a tooltip:

PROPERTY("button", "title", "Click here to exit")


Hope that these improvements work for you. Attached the Minimal Interface 0.4.

Best regards,
Peter

Attachments:

mi.bac.gz (3.99 KB)

[vovchik]

Dear Peter,

Thanks. I had to modify the TEXT routine in my own source (TEXT_MARK) to handle the html code and svgs properly, but TEXT can fixed easily to do the same, I think. We still have the flashing screen refreshes, and I am wondering whether that can be prevented in any way. In any case, here is a revised Shakespeare....

With kind regards,
vovchik

Attachments:

shakespeare-mi-text-src.bac.tar.gz (10.2 KB)

[Pjot]

Hi vovchik,

The TEXT method replaced the ' symbol (single quote) to avoid messing up the HTML syntax. But this was only necessary when inserting data into the "value=" property, so it was easy to adjust.

Regarding the flashing screen, it is not so bad on my machine, though I can imagine it being more visible on lower-end hardware. The reason is of course the HTML rendering. Webkit renders the full HTML definition at each submit, and this takes time, causing the flashing.

So it would be nice to render the text within the SVG while the rest of the page remains visible.

The only way I can see now is by using SVG animations (SMIL). Your program has to generate all the texts for the insults in advance, and then put them into a full SVG definition.

This small example provides the concept:

svg$ = "<svg>" \
 "<text x='10' y='30' font-size='20'>" \
 "<animate attributeName='visibility'" \
  "from='visible' to='hidden' dur='2s' repeatCount='indefinite'/>" \
   "Hello world.</text>" \
 "<text x='10' y='30' font-size='20' visibility='hidden'>" \
 "<animate attributeName='visibility'" \
  "from='hidden' to='visible' dur='2s' repeatCount='indefinite'/>" \
   "More text.</text>" \
"</svg>"


Unlike you, I am not an SVG guru, but I am sure you can fiddle this into a workable solution for the insult generator.

Attached the fixed version which now also contains native message dialogs.

Br
Peter

Latest: mi.bac

[Pjot]

Dear vovchik,

As I understand it, this Minimal Interface approach, which is based on declarative HTML code, needs re-rendering each time the HTML has changed.

This simply comes with the declarative nature of HTML. We could consider this one of the downsides of web browsing, but on the other hand, the HTML rendering is pretty fast nevertheless (hardly any flashing on my laptop), and more importantly, it has a lot of advantages in terms of markup, advantages which we cannot find in GTK for example.

I have added the STOCK button now too, the nice thing with HTML is that there are many ways to equip a button with an icon - also with native SVG:

STOCK("id", "<svg width='100' height='100'><circle cx='45' cy='45' r='40' fill='red'></svg>", 10, 10, 100, 100, cb)
STOCK("id", "<img width='100' height='100' src='http://www.url.com/icon.png'>", 10, 10, 100, 100, cb)
STOCK("id", "<img width='100' height='100' style='vertical-align:middle' src='data:image/png;base64,iVBORw0KGgoAAAAN.....DHEFDSC=='>Label</img>", 430, 30, 70, 35, cb)


We can even embed base64 encoded PNG data, which is something I have done in the updated dictionary program.

BR
Peter

Latest Minimal Interface: mi.bac

Attachments:

thesaurus.bac.gz (4.71 KB)