Minimal web browser in BaCon and GTK

[Pjot]

Not really useful but we can do it

Rgrds
Peter

' Import GTK functions for GUI
lib$ = "libgtk-x11-2.0.so.0"
IMPORT "gtk_box_pack_start(long,long,int,int,int)" FROM lib$ TYPE void
IMPORT "gtk_container_add(long,long)" FROM lib$ TYPE void
IMPORT "gtk_entry_get_text(long)" FROM lib$ TYPE char*
IMPORT "gtk_entry_new(void)" FROM lib$ TYPE long
IMPORT "gtk_exit(void)" FROM lib$ TYPE void
IMPORT "gtk_init(int*,void*)" FROM lib$ TYPE void
IMPORT "gtk_main(void)" FROM lib$ TYPE void
IMPORT "gtk_scrolled_window_new(long,long)" FROM lib$ TYPE long
IMPORT "gtk_scrolled_window_set_policy(long,int,int)" FROM lib$ TYPE void
IMPORT "gtk_scrolled_window_set_shadow_type(long,int)" FROM lib$ TYPE void
IMPORT "gtk_vbox_new(int,int)" FROM lib$ TYPE long
IMPORT "gtk_widget_show_all(long)" FROM lib$ TYPE void
IMPORT "gtk_window_new(int)" FROM lib$ TYPE long
IMPORT "gtk_window_set_default_size(long,int,int)" FROM lib$ TYPE void
IMPORT "gtk_window_set_icon_name(long,char*)" FROM lib$ TYPE void
IMPORT "gtk_window_set_title(long,char*)" FROM lib$ TYPE void

' Import HTML renderer functions
lib$ = "libwebkitgtk-1.0.so.0"
IMPORT "webkit_web_view_new(void)" FROM lib$ TYPE long
IMPORT "webkit_web_view_load_uri(long,char*)" FROM lib$ TYPE void

' Import callback functionality
lib$ = "libgobject-2.0.so.0"
IMPORT "g_signal_connect_data(long,char*,void*,long,long,int)" FROM lib$ TYPE void

' When pressing <enter> go to the URL
SUB Goto_Url

LOCAL link$

link$ = gtk_entry_get_text(url)
webkit_web_view_load_uri(html, link$)

ENDSUB

' Initialize GTK
gtk_init(0, 0)

' Create main window
window = gtk_window_new(0)
gtk_window_set_title(window, "Minimal Web Browser in BASIC")
gtk_window_set_default_size(window, 1024, 600)
gtk_window_set_icon_name(window, "gtk-network")
g_signal_connect_data(window, "delete-event", gtk_exit, 0, 0, 0)

url_box = gtk_vbox_new(0, 0)

' Create entry to enter URL
url = gtk_entry_new()
gtk_box_pack_start(url_box, url, 0, 0, 1)
g_signal_connect_data(url, "activate", Goto_Url, 0, 0, 0)

' Create HTML renderer
html = webkit_web_view_new()
scrolled = gtk_scrolled_window_new(0, 0)
gtk_scrolled_window_set_policy(scrolled, 1, 1)
gtk_scrolled_window_set_shadow_type(scrolled, 3)
gtk_container_add(scrolled, html)
gtk_box_pack_start(url_box, scrolled, 1, 1, 1)

' Load basicprogramming by default
webkit_web_view_load_uri(html, "http://basic-converter.proboards.com")

' Pack everything together and wait for event
gtk_container_add(window, url_box)
gtk_widget_show_all(window)
gtk_main()


Attachments:

[vovchik]

Dear Peter,

Very nice and minimalistic. Webkit certainly does a lot. And your little demo illustrates how to use it. Thanks.

With kind regards,
vovchik

[pebau]

If you plug in javascript, websockets and of course some bacon code you can build pretty nice WEB apps like this sort of shell in a web browser.
Here for the websocketd: websocketd.com/      github.com/joewalnes/websocketd/wiki/Ten-second-tutorial

Data flow:   <browser><javascript-><wesocketd-><stdout><stdin><bacon based web-to-shell-wrapper><stdout-><browser>


 
bash starter script: (starter.sh)

#!/bin/bash
socketstate=`ps -efw | grep websocketd | grep 8080 | wc -l`

if [ ${socketstate} -gt 0 ]; then
echo -e "Websocketd on port 8080 is already running"
echo -e "please kill manually\n"
ps -efw | grep websocketd
exit
fi

./websocketd --port=8080 --devconsole ./command   # -> bacon based bash to web wrapper
echo -e "Quitting command_starter\n"
some bacon: (command.bac)

PROTO signal ALIAS SIGNAL:'use signal function from libc
PROTO kill ALIAS KILL          :' Use kill function from libc to send signal
wspid$=exec$("ps -efw | grep websocketd | grep 8080 | head -n1 | awk '{printf $2}'")
pipefile$="/tmp/fifo_" & wspid$
 SUB Cleanup(int dummy):      'do cleanup
    SIGNAL(SIGINT, SIG_DFL):    ' Restore CTRL+C
    SYSTEM "rm " & pipefile$  
    PRINT "Cleanup done"
    CLOSE FILE mypipe
    CLOSE FILE myinput
    KILL(getpid(), SIGINT):         ' Send the SIGINT to myself
 ENDSUB
SIGNAL(SIGINT, Cleanup):         ' Catch CTRL+C
PRINT "Connected to bash"
setdisplay$="export DISPLAY=localhost:0"
SYSTEM "rm -f " & pipefile$
SYSTEM "mkfifo " & pipefile$

'start bash with reading from pipe first - otherwise the pipe might block
'write stderr and stdout: 2>&1&"
com$="bash <" & pipefile$ & " 2>&1&"
SYSTEM com$

OPEN (pipefile$) FOR WRITING AS mypipe
OPEN ("/dev/stdin") FOR READING AS myinput
WRITELN setdisplay$ TO mypipe

WHILE TRUE
        REPEAT
            key = WAIT(STDIN_FILENO, 1000)
            IF key == 0 THEN:REM There was no input from user
                   result$= CHOP$(exec$("echo $(hostname), $(date)")):REM Print date and time in browser state once a second
                   PRINT "State: connected to " & result$
            ENDIF      
        UNTIL key <> 0:REM There was some input
            key$=CHR$(key):REM get char code of first received char from stdin
        READLN input$ FROM myinput:REM read rest of input
        PRINT key$ & input$:REM write to stdout
        WRITELN key$ & input$ TO mypipe:REM write to pipe->bash
WEND
some HTML: (command.html)

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8"/>
   <title>Command via websocketd</title>
   <style>
     html, body {
       height: 90%;
      }
     #outer {
       height: 90%
       }
     #middle {
       background-color:  white;
       width: 95%;
       height: 100%;
       font-family: monospace;
      }
     #state {
       font: 20px arial;
       padding: 10px;
       text-align: left;
       position: absolute;
       bottom: 0;
       width: 95%;
       height: 15px;
       background-color:  white;
     }
   </style>
</head>

    <body>
     <nobr>
     <!-- send command via a dropdown list            -->
     <select name="ab" onclick="if (this.selectedIndex) send(this.value); blur();">
     <option value="-1">Select </option>
     <option value="cd ~">cd to home folder</option>
     <option value="pwd">pwd</option>
     </select>
   
     <!-- send commands via a onclick                -->
    <button type = "button" onclick = send("ls+-l")>ls -l</button>
    <button type = "button" onclick = send("xterm+-fn+10x20&")>xterm</button>
    <button type = "button" onclick = send("uname+-a")>uname</button>
    <button type = "button" onclick = {document.getElementById('middle').textContent="";}>clear screen</button>

     </nobr>
     <nobr>
     <!-- send command via a href link                -->
     &nbsp
     <a href="#start an xterm" onclick = send("xterm+-fn+10x20&")>xterm -fn 10x20</a>

     <!-- send command via a Textbox                  -->
     String: <input type="text" onkeypress=handle_enter(event) size=26 id=outmsg>

     </nobr>

      <BR><BR>
      <div id="outer">
              <textarea id='middle'readonly></textarea>
            <div id="state"></div>
      </div>


   <script>
     var ws = new WebSocket('ws://localhost:8080/');    // connect to websocket server on port 8080
     ws.onopen = function() {
       document.body.style.backgroundColor = '#cfc';    // green = connected
       document.getElementById('state').textContent = "State: Connected";   // display in status bar
     };
     ws.onclose = function() {
       document.body.style.backgroundColor = '#00FFFF'; // blue = disconnected
       document.getElementById('state').textContent = "State: Disconnected";  // display in status bar
     };
     ws.onmessage = function(event) {                   // got a message from websocket server
       var rmessage=event.data;
       var isstate = rmessage.indexOf("State");         // does it contain a state message
       if (isstate == 0) {document.getElementById('state').textContent = event.data;}    // if yes than display in status bar
       else {  // show the received message in the middle html area  
       document.getElementById('middle').textContent += rmessage;
       document.getElementById('middle').textContent += "\r\n";
       textarea=document.getElementById('middle');
       moveCaretToEnd(textarea);
        }
       };
     
     function send(arg)    // replace "+" with a blank character and send to websocket server
           {
           arg = arg.replace(/\+/g," ");
           ws.send(arg);
           }

     function handle_enter(e) {
           if (e.keyCode === 13) {
                  // alert("enter pressed");
                  send(document.getElementById('outmsg').value);
                  }        
           return false;
           }  
       
    window.onerror = function(msg, url, line, col, error) {
    // Note that col & error are new to the HTML 5 spec and may not be
    // supported in every browser.  It worked for me in Chrome.
    var extra = !col ? '' : '\ncolumn: ' + col;
    extra += !error ? '' : '\nerror: ' + error;

    // You can view the information in an alert to see things working like this:
    alert("Error: " + msg + "\nurl: " + url + "\nline: " + line + extra);

    // TODO: Report this error via ajax so you can keep track
    //       of what pages have JS issues

    var suppressErrorAlert = true;
    // If you return true, then error alerts (like in older versions of
    // Internet Explorer) will be suppressed.
    return suppressErrorAlert;
    };
   
   function moveCaretToEnd(el) {    // go to the end of received text messages - scroll down
   if (typeof el.selectionStart == "number") {
       el.selectionStart = el.selectionEnd = el.value.length;
   } else if (typeof el.createTextRange != "undefined") {
       el.focus();
       var range = el.createTextRange();
       range.collapse(false);
       range.select();
      }
   }
   </script>

 </body>
</html>


how to use:
in one terminal:
./starter.sh

In the bacon based webkit browser:
file:///home/<user>/command.html

[Pjot]

Updated for GTK3 and Webkit2. Make sure to install the package 'libwebkit2gtk-3.0-dev' before converting.

' 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`

' When pressing <enter> go to the URL
SUB Goto_Url

   LOCAL link$

   link$ = gtk_entry_get_text(GTK_ENTRY(url))
   IF LEFT$(link$, 4) <> "http" THEN link$ = "http://" & link$
   webkit_web_view_load_uri(WEBKIT_WEB_VIEW(html), link$)

ENDSUB

' Initialize GTK
gtk_init(0, 0)

' Create main window
window = gtk_window_new(0)
gtk_window_set_title(GTK_WINDOW(window), "Minimal Web Browser in BASIC")
gtk_window_set_default_size(GTK_WINDOW(window), 1024, 600)
gtk_window_set_icon_name(GTK_WINDOW(window), "gtk-network")
g_signal_connect_data(GTK_WIDGET(window), "delete-event", G_CALLBACK(exit), 0, 0, 0)

url_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0)

' Create entry to enter URL
url = gtk_entry_new()
gtk_box_pack_start(GTK_BOX(url_box), GTK_WIDGET(url), 0, 0, 1)
g_signal_connect_data(GTK_ENTRY(url), "activate", Goto_Url, 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))
gtk_box_pack_start(GTK_BOX(url_box), GTK_WIDGET(scrolled), 1, 1, 1)

' Load basicprogramming by default
webkit_web_view_load_uri(WEBKIT_WEB_VIEW(html), "http://basic-converter.proboards.com")

' Pack everything together and wait for event
gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(url_box))
gtk_widget_show_all(GTK_WIDGET(window))
gtk_main()


[bigbass]

Hello Peter thanks for this
minimum browser!

some small adjustmets for the RPI3
this works


'---sudo apt-get install libwebkitgtk-3.0-0
'---sudo apt-get install libwebkitgtk-3.0-dev

' Using libwebkit2  change to webkitgtk-3.0
PRAGMA INCLUDE <webkitgtk-3.0/webkit/webkit.h>
PRAGMA OPTIONS `pkg-config --cflags webkitgtk-3.0`
PRAGMA LDFLAGS `pkg-config --libs webkitgtk-3.0`






this also works
some small adjustments need to be made to
compile and run on RPI3



' 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`


cleanly compiles and I am posting from
your demo code


hard to believe so few lines are needed
to have a working browser

Joe

[vovchik]

Dear Peter,

Thanks for the GTK3 version, too. I modded the gtk2 source very slightly a while back to give the app an icon and to allow a command-line argument (either URL or file). UPX'd, the executable is 13k, which is incredible.

With kind regards,
vovchik

Attachments:

bbrowse-vov.bac.tar.gz (3.07 KB)

[bigbass]

Hello vovchik


Thanks for your version
it would play nicely with gtk2 HUG code

I knew that I would need to adjust something small but it was only
one package very easy

Runtime error: statement 'IMPORT' at line 22 in 'bbrowse-vov.bac': Could not open library

sudo apt-get install libwebkitgtk-1.0-0

compiled lightning fast
Converting 'bbrowse-vov.bac'... done, 198 lines were processed in 0.307 seconds.


very useful to mix this with HUG later
Joe

[vovchik]

Dear Joe,

With the "file://" bit, bbrowse also is a very fast little tool for browsing local html docs. We need to add some navigation controls, download functions and just a few additional bits to make this little prog entirely useful. I did some "Hugification" in this version, defining some functions to create a few widgets and a few ALIASes.

With kind regards,
vovchik

PS. We can also watch videos, including Youtube!!!!

Attachments:

bbrowse-vov-alias-src.bac.tar.gz (3.81 KB)

[Pjot]

Updated for webkit2gtk-4.0:

' Do not choke on GTK commands
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`

' When pressing <enter> go to the URL
SUB Goto_Url

   LOCAL link$

   link$ = gtk_entry_get_text(GTK_ENTRY(url))
   IF LEFT$(link$, 4) <> "https" THEN link$ = "https://" & link$
   webkit_web_view_load_uri(WEBKIT_WEB_VIEW(html), link$)

ENDSUB

' Initialize GTK
gtk_init(0, 0)

' Create main window
window = gtk_window_new(0)
gtk_window_set_title(GTK_WINDOW(window), "Minimal Web Browser in BASIC")
gtk_window_set_default_size(GTK_WINDOW(window), 1280, 800)
gtk_window_set_icon_name(GTK_WINDOW(window), "gtk-network")
g_signal_connect_data(GTK_WIDGET(window), "delete-event", G_CALLBACK(exit), 0, 0, 0)

url_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0)

' Create entry to enter URL
url = gtk_entry_new()
gtk_box_pack_start(GTK_BOX(url_box), GTK_WIDGET(url), 0, 0, 1)
g_signal_connect_data(GTK_ENTRY(url), "activate", Goto_Url, 0, 0, 0)

' Create HTML renderer
html = webkit_web_view_new()
gtk_box_pack_start(GTK_BOX(url_box), GTK_WIDGET(html), 1, 1, 1)

' Load basicprogramming by default
webkit_web_view_load_uri(WEBKIT_WEB_VIEW(html), "https://www.basic-converter.org")

' Pack everything together and wait for event
gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(url_box))
gtk_widget_show_all(GTK_WIDGET(window))
gtk_main()


[vovchik]

Dear Peter,

Great and very terse. I added a few lines to enable entering a url as an argument. Thanks...

' Do not choke on GTK commands
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`
DECLARE myurl$ TYPE STRING

' When pressing <enter> go to the URL
SUB Goto_Url

   LOCAL link$

   link$ = gtk_entry_get_text(GTK_ENTRY(url))
   IF LEFT$(link$, 4) <> "https" THEN link$ = "https://" & link$
   webkit_web_view_load_uri(WEBKIT_WEB_VIEW(html), link$)

ENDSUB

' Initialize GTK
myurl$ = CHOP$(TOKEN$(ARGUMENT$, 2, " "))
gtk_init(0, 0)

' Create main window
window = gtk_window_new(0)
gtk_window_set_title(GTK_WINDOW(window), "Minimal Web Browser in BASIC")
gtk_window_set_default_size(GTK_WINDOW(window), 1280, 800)
gtk_window_set_icon_name(GTK_WINDOW(window), "gtk-network")
g_signal_connect_data(GTK_WIDGET(window), "delete-event", G_CALLBACK(exit), 0, 0, 0)

url_box = gtk_box_new(GTK_ORIENTATION_VERTICAL, 0)

' Create entry to enter URL
url = gtk_entry_new()
gtk_box_pack_start(GTK_BOX(url_box), GTK_WIDGET(url), 0, 0, 1)
g_signal_connect_data(GTK_ENTRY(url), "activate", Goto_Url, 0, 0, 0)

' Create HTML renderer
html = webkit_web_view_new()
gtk_box_pack_start(GTK_BOX(url_box), GTK_WIDGET(html), 1, 1, 1)

' Load basicprogramming by default, if no url argument passed
IF LEN(myurl$) THEN
webkit_web_view_load_uri(WEBKIT_WEB_VIEW(html), myurl$)
PRINT "Loading ", myurl$, " as argument..."
ELSE
webkit_web_view_load_uri(WEBKIT_WEB_VIEW(html), "https://www.basic-converter.org")
PRINT "Loading https://www.basic-converter.org as default..."
END IF
' Pack everything together and wait for event
gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(url_box))
gtk_widget_show_all(GTK_WIDGET(window))
gtk_main()

[pebau]

small typo: "5" needed instead of "4" !
IF LEFT$(link$, 5) <> "https" THEN link$ = "https://" & link$

[vovchik]

Dear pebau,

Thanks for the bugfix.

With kind regards,
vovchik