Another attempt for a universal GUI

[vovchik]

Dear Peter,

Thanks. I played a bit. We can, using just an image and no text in a STOCK button (but a tooltip) make rather attractive and compact GUIs. I like that feature.

With kind regards,
vovchik

[Pjot]

If we need to add an image to the GUI, it cannot be done directly. Most browsers do not allow direct access to your hard disk, and Webkit is no exception. But it can be done with the method mentioned before.

For example, this loads a local GIF image:

INCLUDE mi

CONST file$ = DIRNAME$(ME$) & "/vaccuum.gif"

DECLARE gif TYPE void*

gif = BLOAD(file$)

MARK("gif", "<img width='600' height='400' src='data:image/gif;base64," & B64ENC$(gif, FILELEN(file$)) & "'/>", 0, 0, 600, 400)

FREE gif

DISPLAY("Vaccuum Cleaner", 605, 405)


PS Accidentally, I rediscovered an undocumented feature of B64ENC$ / B64DEC$, these functions allow a second argument specifying the size of the area to encode. I will update the docs.

PS2: similar to HUG, I will add IMAGE to wrap this functionality. Can it get any smaller

INCLUDE mi

IMAGE("gif", DIRNAME$(ME$) & "/vaccuum.gif", 0, 0, 600, 400)

DISPLAY("Vaccuum Cleaner", 605, 405)


Latest here

[vovchik]

Dear Peter,

Thanks, again. That is very compact code for displaying an animation. And nice that you rediscovered the "area" feature of B64ENC$. Everything works nicely.

With kind regards,
vovchik

[vovchik]

Dear all,

Just another mi (version 0.6) demo.

With kind regards,
vovchik

UPDATED: I added a funny Orthodox Easter (which is today) animation.

Attachments:

mi6-striped-bg-src.bac.tar.gz (5.54 KB)

gif-easter-src.bac.tar.gz (142.96 KB)

[vovchik]

Dear all,

Here is a very minimalistic TV viewer - only showing SkyNews (UK) at the moment. It is ONLY 351 BYTES of source, not counting mi.bac, since webkit does all the heavy lifting. And it works! Amazing. Enjoy.

With kind regards,
vovchik

Attachments:

skynews-live-src.tar.gz (4.85 KB)

[Pjot]

Apr 28, 2019 14:26:22 GMT 1 vovchik said:

It is ONLY 351 BYTES of source, not counting mi.bac, since webkit does all the heavy lifting.

That's really awesome!!! Outstanding. Your originality and creativity does not seem to have any limit. I would never have imagined that this was possible at all.

Your other programs work also, by the way - I like the orthodox Easter

Thanks vovchik for this impressive contribution!

Best regards,

Peter

[bigbass]

Hello Guys

Thanks for all your work
Good news and bad news
first the bad RPI3 Debian official
and webkit use an older version
and all other demos except the first demo fails

good news I installed Ubuntu bionic mate 18.04 for the RPI3
and it has the latest webkit version and all the demos
in this thread work minus one work correctly

*the one that doesn't work I believe is my fault installing the needed codex
for the tv viewer I will try again and post feedback
it does compile and run but no video

all the demos from Peter and vovchik are excellent
and work well thanks

I couldn't offer any positive feedback until
today using a newly installed version of ubuntu
*all work out of the box without edits

great job guys!
Joe

[vovchik]

Dear Peter and Joe,

Thanks. Webkit is very powerful. And we can code very economically. As for mutiple platforms, I had the exact same problem with mi.bac in RPI3 (the callback), so am now just experimenting in Mint. Good thing Ubuntu seems to work, except for the webkit codecs issue. Here is another step in making a complete IPTV player. The next step will be including a FILESELECT for a playlist (m3u/m3u8) and filling a combo box with the entries. We then select and click Play, and away we go.

With kind regards,
vovchik

Attachments:

iptv-skynews-hqlq-src.bac.tar.gz (7.56 KB)

[Pjot]

Thanks vovchik,

This way we can make a full IPTV application, all in BaCon using Webkit. Pretty cool

I will look into the FULLSCREEN method shortly.

BR
Peter

[vovchik]

Dear all,

In the meantime, I've come up with a splash screen that actually moves nicely - using a gif in the "cloud". I think it looks pretty attractive...and FULLSCREEN will be nice, too. Now to read m3u playlists and to get the COMBO box working with m3u data...

With kind regards,
vovchik

UPDATED: Added an info button and MSGDIALOG.

Attachments:

iptv-aljazeera-gif-url-splash-src.bac.tar.gz (12.97 KB)

[Pjot]

Thanks vovchik,

Very nice, and all works. In the meantime I have looked into FULLSCREEN. As a preview, there will be a property setting for MI like "metric" which can be either "px" (default) or "%".

That way, we can configure relative positioning of widgets, and also define a television object which spans the whole screen (e.g. "width:100%").

BR
Peter

[vovchik]

Dear Peter,

Thanks. I have now added a combobox that gets filled by reading a list. I still need to write a proper m3u playlist parser, so that we can use existing lists that are out there. In any case it now works with the combobox. You select a stream and press the play button. And if you have URLs you want to try out, just edit the biptv-en.txt file and separate the channel name from the url with a "|".

With kind regards and happy viewing,
vovchik

Attachments:

biptv-list-en-src.bac.tar.gz (16.57 KB)

[Pjot]

Hi vovchik,

Thanks, and it looks promising! All works for me.

I managed to add the FULLSCREEN method in the Minimal Interface. I wanted to do it in a universal way, so it works for other types of GUI too. Also, putting a GUI into full screen is one thing, but putting it back is another.

So it should be possible to get back to the previous state as well. The FULLSCREEN method is a toggling function and will do precisely this.

To keep the correct positioning and sizing of widgets into a window, I have introduced the MI property "metric". It can be set to relative positioning, so even when enlarging a GUI all should look correctly.

Note that I have enabled resizing of the main window now, too.

To make it all work, I had to make a small change to your HTML object definition. The MARK widget already uses "<div>" tags, and when using your definition, these will be double, which causes the relative sizing not to work for the television image. So I have removed the "<div>" tags in your string. Also I have changed it to use relative sizes.

The example below will show the new functionality. I have connected the "Toggle Full Screen" button to the FULLSCREEN method directly, to keep the code small and clean. But you can use your own callback here also.

The latest MI code is here.

BR
Peter

PS generally, when using REMOVE, please note that the REMOVE method should be invoked as 'CALL REMOVE("id")' because the BaCon parser will otherwise think it is a REM and skip the line.


INCLUDE mi

' Watch sky news
mru$ = "http://skydvn-nowtv-atv-prod.skydvn.com/atv/skynews/1404/live/05.m3u8"

mypage$ = "<object type='text/html' data='" & mru$ & "' width='100%' height='100%' style='border:0px'></object>"

' Use relative positioning
PROPERTY(NULL, "metric", "%")

' Set relative values for position and size
MARK("sky", mypage$, 0, 0, 100, 91)
BUTTON("fullscreen", "Toggle Full Screen", 1, 92, 18, 7, FULLSCREEN)

' Size of DISPLAY is always in pixels
DISPLAY("Skynews Live", 755, 455)


[vovchik]

Dear all,

Peter has made some very nice enhancements to MI, and we can now do full screen. Have a look at the latest incarnation of biptv.

With kind regards,
vovchik

Attachments:

fullscreen-ok.tar.gz (23.78 KB)

[bigbass]

Hello vovchik
and other rpi3 users


just to do a follow up I am using ubuntu 18.04 rpi3 to test on
it compiles and runs and I get audio but no video
for the tv viewer
in the terminal I get

** (WebKitWebProcess:12784): CRITICAL **: 09:56:40.146: gst_gl_display_get_handle_type: assertion 'GST_IS_GL_DISPLAY (display)' failed

(WebKitWebProcess:12784): GStreamer-CRITICAL **: 09:56:40.146: gst_object_unref: assertion 'object != NULL' failed

(WebKitWebProcess:12784): GStreamer-CRITICAL **: 09:56:40.146: gst_object_unref: assertion 'object != NULL' failed
libEGL warning: DRI2: failed to authenticate

which led me to DRI2: failed to authenticate
pi3d.github.io/html/FAQ.html

this is GLX having problems but gave me a clue to the symlinks
GLX DRI2 not supported or failed to authenticate


I followed the suggestions by creating sym links but no still
and this is a raspberry pi problem that is unrelated to webkit or
the universal GUI or the tv viewer demo but at least it was investigated for many hours
If someone does find a fix I would like you to post it please

webkit and the universal GUI work on the raspberry pi3
when the webkit version is equal to or greater than 2.20

*we only have a problem with libEGL displaying the video stream
the audio part does work
gl and raspberry pi have known problems

Joe