webui.pb

; /*
;   WebUI Library 2.3.0
;   http://webui.me
;   https://github.com/webui-dev/webui
;   Copyright (c) 2020-2023 Hassan Draga.
;   Licensed under MIT License.
;   All rights reserved.
;   Canada.
; */

CompilerIf Not #PB_Compiler_Thread
  CompilerError "Enable threadsafe in compiler options"
CompilerEndIf

CompilerIf #PB_Compiler_IsMainFile
  EnableExplicit
CompilerEndIf


#WEBUI_VERSION = "2.3.0"
#WEBUI_MAX_IDS = 512

Enumeration webui_browsers
  #AnyBrowser
  #Chrome
  #Firefox
  #Edge
  #Safari
  #Chromium
  #Opera
  #Brave
  #Vivaldi
  #Epic
  #Yandex
EndEnumeration

Enumeration webui_runtimes 
  #None
  #Deno
  #NodeJS
EndEnumeration

Enumeration webui_events
  #WEBUI_EVENT_DISCONNECTED
  #WEBUI_EVENT_CONNECTED
  #WEBUI_EVENT_MULTI_CONNECTION
  #WEBUI_EVENT_UNWANTED_CONNECTION
  #WEBUI_EVENT_MOUSE_CLICK
  #WEBUI_EVENT_NAVIGATION
  #WEBUI_EVENT_CALLBACK
EndEnumeration

Structure webui_event_t Align #PB_Structure_AlignC
  window.i        ; The window object number
  event_type.i    ; Event type
  *element        ; HTML element ID
  *data           ; JavaScript data
  event_number.i  ; Internal WebUI
EndStructure

PrototypeC PrototypeC_webui_event(*e.webui_event_t)

CompilerSelect #PB_Compiler_OS
  CompilerCase #PB_OS_Windows
    ImportC "webui-2-x64.lib"
    ;ImportC "webui-2-static-x64.lib"
    CompilerCase #PB_OS_Linux
      ImportC "webui-2-x64.so"
      CompilerCase #PB_OS_MacOS
        ;ImportC "webui-2-x64.dyn"
        ImportC "webui-2-static-x64.a"
      CompilerEndSelect
      ; Create a new webui window object.
      webui_new_window()
      ; Create a new webui window object.
      webui_new_window_id(window_number.i)
      ; Get a free window ID that can be used with `webui_new_window_id()`
      webui_get_new_window_id.i()
      ; Bind a specific html element click event with a function. Empty element means all events.
      webui_bind.i(window.i, element.p-Ascii, webui_event.PrototypeC_webui_event)
      ; Show a window using a embedded HTML, or a file. If the window is already
      webui_show.i(window.i, content.p-Ascii)
      ; Same as webui_show(). But with a specific web browser.
      webui_show_browser(window.i, content.p-Ascii, browser.i)
      ; Set the window in Kiosk mode (Full screen)
      webui_set_kiosk(window.i, status.i)
      ; Wait until all opened windows get closed.
      webui_wait()
      ; Close a specific window only. The window object will still exist.
      webui_close(window.i)
      ; Close a specific window and free all memory resources.
      webui_destroy(window.i)
      ; Close all opened windows. webui_wait() will break.
      webui_exit()
      ; Set the web-server root folder path.
      webui_set_root_folder.i(window.i, path.p-Ascii)
      
      ; -- Other ---------------------------
      ; Check a specific window if it's still running
      webui_is_shown.i(window.i)
      ; Set the maximum time in seconds to wait for browser to start
      webui_set_timeout(second.i)
      ; Set the default embedded HTML favicon
      webui_set_icon(window.i, icon.p-Ascii, icon_type.p-Ascii)
      ; Allow the window URL to be re-used in normal web browsers
      webui_set_multi_access(window.i, status.b)
      
      ; -- JavaScript ----------------------
      ; Run JavaScript quickly with no waiting for the response.
      webui_run(window.i, script.p-Ascii)
      ; Run a JavaScript, and get the response back (Make sure your local buffer can hold the response).
      webui_script.i(window.i, script.p-Ascii, timeout.i, *buffer, buffer_length.i)
      ; Chose between Deno and Nodejs runtime for .js and .ts files.
      webui_set_runtime(window.i, run_time.i)
      ; Parse argument as integer.
      webui_get_int.q(*e.webui_event_t)
      ; Parse argument as string.
      webui_get_string.i(*e.webui_event_t)
      ; Parse argument as boolean.
      webui_get_bool.i(*e.webui_event_t)
      ; Return the response to JavaScript as integer.
      webui_return_int(*e.webui_event_t, number.i)
      ; Return the response to JavaScript as string.
      webui_return_string(*e.webui_event_t, const.p-Ascii)
      ; Return the response to JavaScript as boolean.
      webui_return_bool(*e.webui_event_t, bool.i)
      ; Base64 encoding. Use this to safely send text based data to the UI. If it fails it will return NULL.
      webui_encode.i(*char)
      ; Base64 decoding. Use this to safely decode received Base64 text from the UI. If it fails it will return NULL.
      webui_decode.i(char.p-Ascii)
      ; Safely free a buffer allocated by WebUI, For example when using webui_encode().
      webui_free(*ptr)
      
      ; -- Interface -----------------------
      ; Bind a specific html element click event with a function. Empty element means all events. This replace webui_bind(). The func is (Window, EventType, Element, Data, EventNumber)
      webui_interface_bind.i(window.i, element.p-Ascii, *func)
      ; When using `webui_interface_bind()` you may need this function to easily set your callback response.
      webui_interface_set_response(window.i, event_number.i, response.p-Ascii)
      ; Check if the app still running or not. This replace webui_wait().
      webui_interface_is_app_running.i()
      ; Get window unique ID
      webui_interface_get_window_id.i(window.i)
      ; Get a unique ID. Same ID as `webui_bind()`. Return > 0 if bind exist.
      webui_interface_get_bind_id.i(window.i, element.p-Ascii)
    EndImport
    
    CompilerIf #PB_Compiler_IsMainFile
      
      Enumeration WebUI_Examples
        #PB_Forum_Example
        #WEBUI_Example_C_call_c_from_js
        #WEBUI_Example_C_call_js_from_c
        #WEBUI_Example_C_minimal
        #WEBUI_Example_C_serve_a_folder
        #WEBUI_Example_C_text_editor
      EndEnumeration
      
      #WebUI_Example = #PB_Forum_Example
      
      CompilerSelect #WebUI_Example
        CompilerCase #PB_Forum_Example
          
          ProcedureC webui_event_proc(*e.webui_event_t)
            Debug "webui_event_proc"
            Debug "Window      : " + Str(*e\window)
            Select *e\event_type
              Case #WEBUI_EVENT_CALLBACK
                Debug "Event_Type  : callback"
              Case #WEBUI_EVENT_CONNECTED
                Debug "Event_Type  : connected"
              Case #WEBUI_EVENT_DISCONNECTED
                Debug "Event_Type  : disconnected"
              Case #WEBUI_EVENT_MOUSE_CLICK
                Debug "Event_Type  : mouse click"
              Case #WEBUI_EVENT_MULTI_CONNECTION
                Debug "Event_Type  : multi connection"
              Case #WEBUI_EVENT_NAVIGATION
                Debug "Event_Type  : navigation"
              Case #WEBUI_EVENT_UNWANTED_CONNECTION
                Debug "Event_Type  : unwanted connection"
            EndSelect
            Debug "Element ID  : " + PeekS(*e\element, -1, #PB_Ascii)
            If *e\data
              Debug "Data        : " + PeekS(*e\data, -1, #PB_Ascii)
            EndIf
            Debug "Event_Number: " + Str(*e\event_number)
          EndProcedure
          
          
          Define.i window
          
          window = webui_new_window()
          webui_bind(window, "button_1", @webui_event_proc())
          webui_show(window, "<html><body><button id='button_1'>Click me!</button></body></html>")
          webui_wait()
          
        CompilerCase #WEBUI_Example_C_call_c_from_js
          ProcedureC my_function_string(*e.webui_event_t)
            
            Protected *str
            
            ; JavaScript:
            ; webui_fn('MyID_One', 'Hello');
            
            *str = webui_get_string(*e)
            Debug "my_function_string: " + PeekS(*str, -1, #PB_Ascii)  ; Hello
            
            ; Need Multiple Arguments?
            ;
            ; WebUI support only one argument. To get multiple arguments
            ; you can send a JSON string from JavaScript then decode it.
            ; Example:
            ;
            ; my_json = my_json_decoder(str);
            ; foo = my_json[0];
            ; bar = my_json[1];
          EndProcedure
          
          ProcedureC my_function_integer(*e.webui_event_t)
            
            Protected number.q
            
            ; JavaScript:
            ; webui_fn('MyID_Two', 123456789);
            
            number = webui_get_int(*e)
            Debug "my_function_integer: " + Str(number) ; 123456789
            
          EndProcedure
          
          ProcedureC my_function_boolean(*e.webui_event_t)
            
            Protected status.i
            
            ; JavaScript:
            ; webui_fn('MyID_Three', true)
            
            status = webui_get_bool(*e) ; True
            If status
              Debug "my_function_boolean: True"
            Else
              Debug "my_function_boolean: False"
            EndIf
            
          EndProcedure
          
          ProcedureC my_function_with_response(*e.webui_event_t)
            
            Protected number.q
            
            ; JavaScript:
            ; const result = webui_fn('MyID_Four', number);
            
            number = webui_get_int(*e)
            number = number * 2
            Debug "my_function_with_response: " + Str(number)
            
            ; Send back the response To JavaScript
            webui_return_int(*e, number)
            
          EndProcedure
          
          
          Define my_html$, my_window.i
          
          my_html$ = ""
          my_html$ + ~"<html>"
          my_html$ + ~"  <head>"
          my_html$ + ~"    <title>Call C from JavaScript Example</title>"
          my_html$ + ~"    <style>"
          my_html$ + ~"      body {"
          my_html$ + ~"        color: white;"
          my_html$ + ~"        background: #0F2027;"
          my_html$ + ~"        text-align: center;"
          my_html$ + ~"        font-size: 16px;"
          my_html$ + ~"        font-family: sans-serif;"
          my_html$ + ~"      }"
          my_html$ + ~"    </style>"
          my_html$ + ~"  </head>"
          my_html$ + ~"  <body>"
          my_html$ + ~"    <h2>WebUI - Call C from JavaScript Example</h2>"
          my_html$ + ~"    <p>Call C function with argument (<em>See the logs in your terminal</em>)</p>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <button onclick=\"webui_fn('MyID_One', 'Hello');\">Call my_function_string()</button>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <button onclick=\"webui_fn('MyID_Two', 123456789);\">Call my_function_integer()</button>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <button onclick=\"webui_fn('MyID_Three', true);\">Call my_function_boolean()</button>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <p>Call C function and wait for the response</p>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <button onclick=\"MyJS();\">Call my_function_with_response()</button>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <input type=\"text\" id=\"MyInputID\" value=\"2\">"
          my_html$ + ~"    <script>"
          my_html$ + ~"      function MyJS() {"
          my_html$ + ~"        const MyInput = document.getElementById('MyInputID');"
          my_html$ + ~"        const number = MyInput.value;"
          my_html$ + ~"        webui_fn('MyID_Four', number).then((response) => {"
          my_html$ + ~"            MyInput.value = response;"
          my_html$ + ~"        });"
          my_html$ + ~"      }"
          my_html$ + ~"    </script>"
          my_html$ + ~"  </body>"
          my_html$ + ~"</html>"
          
          ; Create a window
          my_window = webui_new_window()
          
          ; Bind HTML elements With C functions
          webui_bind(my_window, "MyID_One", @my_function_string())
          webui_bind(my_window, "MyID_Two", @my_function_integer())
          webui_bind(my_window, "MyID_Three", @my_function_boolean())
          webui_bind(my_window, "MyID_Four", @my_function_with_response())
          
          ; Show the window
          webui_show(my_window, my_html$) ; webui_show_browser(my_window, my_html, Chrome)
          
          ; Wait Until all windows get closed
          webui_wait()
          
          
        CompilerCase #WEBUI_Example_C_call_js_from_c
          ProcedureC my_function_exit(*e.webui_event_t)
            webui_exit()
          EndProcedure
          
          ProcedureC my_function_count(*e.webui_event_t)
            ; This function gets called every time the user clicks on "MyButton1"
            
            ; Create a buffer To hold the response
            Protected *response, Count.i
            
            *response = AllocateMemory(64)
            
            ; Run JavaScript
            If Not webui_script(*e\window, "return GetCount();", 0, *response, 64)
              Debug "JavaScript Error: " + PeekS(*response, -1, #PB_Ascii)
              ProcedureReturn
            EndIf
            
            Debug PeekS(*response, -1, #PB_Ascii)
            
            ; Get the count
            count = Val(PeekS(*response, -1, #PB_Ascii))
            
            ; Increment
            count + 1
            
            ; Generate a JavaScript
            
            ; Run JavaScript (Quick Way)
            webui_run(*e\window, "SetCount(" + Str(Count) + ")")
          EndProcedure
          
          
          Define my_html$, my_window.i
          
          my_html$ = ~"<html>"
          my_html$ + ~"  <head>"
          my_html$ + ~"    <title>Call JavaScript from C Example</title>"
          my_html$ + ~"    <style>"
          my_html$ + ~"      body {"
          my_html$ + ~"        color: white;"
          my_html$ + ~"        background: #0F2027;"
          my_html$ + ~"        text-align: center;"
          my_html$ + ~"        font-size: 16px;"
          my_html$ + ~"        font-family: sans-serif;"
          my_html$ + ~"      }"
          my_html$ + ~"    </style>"
          my_html$ + ~"  </head>"
          my_html$ + ~"  <body>"
          my_html$ + ~"    <h2>WebUI - Call JavaScript from C Example</h2>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <h1 id=\"MyElementID\">Count is ?</h1>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <button id=\"MyButton1\">Count</button>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <br>"
          my_html$ + ~"    <button id=\"MyButton2\">Exit</button>"
          my_html$ + ~"    <script>"
          my_html$ + ~"      var count = 0;"
          my_html$ + ~"      function GetCount() {"
          my_html$ + ~"        return count;"
          my_html$ + ~"      }"
          my_html$ + ~"      function SetCount(number) {"
          my_html$ + ~"        const MyElement = document.getElementById('MyElementID');"
          my_html$ + ~"        MyElement.innerHTML = 'Count is ' + number;"
          my_html$ + ~"        count = number;"
          my_html$ + ~"      }"
          my_html$ + ~"    </script>"
          my_html$ + ~"  </body>"
          my_html$ + ~"</html>";
          
          ; Create a window
          my_window = webui_new_window()
          
          ; Bind HTML elements With C functions
          webui_bind(my_window, "MyButton1", @my_function_count())
          webui_bind(my_window, "MyButton2", @my_function_exit())
          
          ; Show the window
          webui_show(my_window, my_html$) ; webui_show_browser(my_window, my_html, Chrome)
          
          ; Wait Until all windows get closed
          webui_wait()
          
          
        CompilerCase #WEBUI_Example_C_minimal
          Define my_window.i
          
          my_window = webui_new_window();
          webui_show(my_window, "<html>Hello</html>")
          webui_wait()
          
          
        CompilerCase #WEBUI_Example_C_serve_a_folder
          
          #MyWindow = 1
          #MySecondWindow = 2
          
          ProcedureC exit_app(*e.webui_event_t)
            
            ; Close all opened windows
            webui_exit()
          EndProcedure
          
          ProcedureC events(*e.webui_event_t)
            
            ; This function gets called every time
            ; there is an event
            
            If *e\event_type = #WEBUI_EVENT_CONNECTED
              Debug "Connected."
            ElseIf *e\event_type = #WEBUI_EVENT_DISCONNECTED
              Debug "Disconnected."
            ElseIf *e\event_type = #WEBUI_EVENT_MOUSE_CLICK
              Debug "Click."
            ElseIf *e\event_type = #WEBUI_EVENT_NAVIGATION
              Debug "Starting navigation to: " + PeekS(*e\Data, -1, #PB_Ascii)
            EndIf
          EndProcedure
          
          ProcedureC switch_to_second_page(*e.webui_event_t)
            
            ; This function gets called every
            ; time the user clicks on "SwitchToSecondPage"
            
            ; Switch To `/second.html` in the same opened window.
            webui_show(*e\window, "second.html")
          EndProcedure
          
          ProcedureC show_second_window(*e.webui_event_t)
            
            ; This function gets called every
            ; time the user clicks on "OpenNewWindow"
            
            ; Show a new window, And navigate To `/second.html`
            ; If it's already open, then switch in the same window
            webui_show(#MySecondWindow, "second.html")
            
          EndProcedure
          
          
          
          ; Create new windows
          webui_new_window_id(#MyWindow)
          webui_new_window_id(#MySecondWindow)
          
          ; Bind HTML element IDs With a C functions
          webui_bind(#MyWindow, "SwitchToSecondPage", @switch_to_second_page())
          webui_bind(#MyWindow, "OpenNewWindow", @show_second_window())
          webui_bind(#MyWindow, "Exit", @exit_app())
          webui_bind(#MySecondWindow, "Exit", @exit_app())
          
          ; Bind events
          webui_bind(#MyWindow, "", @events())
          
          ; Make Deno As the `.ts` And `.js` interpreter
          webui_set_runtime(#MyWindow, #Deno)
          
          ; Show a new window
          ; webui_set_root_folder(MyWindow, "_MY_PATH_HERE_");
          ; webui_show_browser(MyWindow, "index.html", Chrome);
          webui_show(#MyWindow, "index.html")
          
          ; Wait Until all windows get closed
          webui_wait()
          
          
          
        CompilerCase #WEBUI_Example_C_text_editor
          
          #FULL_FILE_BUFFER_SIZE = (2 * 1024 * 1024)    ; 2 MB
          Global *FULL_FILE_BUFFER
          *FULL_FILE_BUFFER = AllocateMemory(#FULL_FILE_BUFFER_SIZE, #PB_Memory_NoClear)
          Global JAVASCRIPT_BUFFER$
          Global FILE_PATH$
          
          ProcedureC Close(*e.webui_event_t)
            Debug "Exit."
            
            ; Close all opened windows
            webui_exit()
          EndProcedure
          
          ProcedureC Save(*e.webui_event_t)
            
            Protected file.i
            
            Debug "Save."
            
            ; Save Data received from the UI
            file = CreateFile(#PB_Any, FILE_PATH$)
            If file
              WriteString(file, PeekS(*e\Data, -1, #PB_Ascii))
              CloseFile(file)
            EndIf
          EndProcedure
          
          ProcedureC Open(*e.webui_event_t)
            
            Protected bytes_read.i, file.i, *file_encoded, *path_encoded, *file_path
            
            Debug "Open."
            
            ; Open a new file
            
            ; Open file And save the path To FILE_PATH
            FILE_PATH$ = OpenFileRequester("Choose a text file", "", "All|*.*", 0)
            If Len(FILE_PATH$) = 0
              ProcedureReturn
            EndIf
            
            ; Read the full content To FULL_FILE_BUFFER
            file = ReadFile(#PB_Any, FILE_PATH$)
            If file
              bytes_read = ReadData(file, *FULL_FILE_BUFFER, Lof(file))
              If bytes_read <> Lof(file)
                CloseFile(file)
                ProcedureReturn
              EndIf
              CloseFile(file)
            EndIf
            
            ; Send file content
            ; Encode the full content To base64
            *file_encoded = webui_encode(*FULL_FILE_BUFFER)
            If *file_encoded = #Null
              ProcedureReturn
            EndIf
            JAVASCRIPT_BUFFER$ = "addText('" + PeekS(*file_encoded, -1, #PB_Ascii) + "')"
            webui_run(*e\window, JAVASCRIPT_BUFFER$)
            
            ; Send file name
            ; Encode the file path To base64
            *file_path = Ascii(FILE_PATH$)
            *path_encoded = webui_encode(*file_path)
            FreeMemory(*file_path)
            If *path_encoded = #Null
              webui_free(*file_encoded)
              ProcedureReturn
            EndIf
            JAVASCRIPT_BUFFER$ = "SetFile('" + PeekS(*path_encoded, -1, #PB_Ascii) + "')"
            webui_run(*e\window, JAVASCRIPT_BUFFER$)
            
            ; Clean
            webui_free(*file_encoded)
            webui_free(*path_encoded)
            
            ;         // Add line by line example:
            ;         FILE *file = fopen(FILE_PATH, "r");
            ;         If(file == NULL)
            ;             Return;
            ;         char line[1024] = {0};
            ;         While (fgets(line, 1024, file) != NULL) {
            ;             // Line
            ;             char* line_encoded = webui_encode(line);
            ;             If(line_encoded != NULL) {
            ;                 char js[1024] = {0};
            ;                 // JS
            ;                 sprintf(js, "addLine('%s')", line_encoded);
            ;                 // Send
            ;                 webui_run(e->window, js);
            ;                 // Clean
            ;                 webui_free(line_encoded);
            ;             }
            ;         }
            ;         fclose(file);
            
          EndProcedure
          
          Define MainWindow.i
          
          MainWindow = webui_new_window()
          
          ; Bind HTML element IDs With a C functions
          webui_bind(MainWindow, "Open", @Open())
          webui_bind(MainWindow, "Save", @Save())
          webui_bind(MainWindow, "Close", @Close())
          
          ; Show a new window
          webui_show(MainWindow, "ui/MainWindow.html")
          
          ; Wait Until all windows get closed
          webui_wait()
          
      CompilerEndSelect
      
    CompilerEndIf