WebView

Just starting out? Need help? Post your questions and find answers here.
User avatar
the.weavster
Addict
Addict
Posts: 1537
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

WebView

Post by the.weavster »

I have created a wrapper for this webview project.
I found the precompiled binaries here

Code: Select all

Enumeration
  #WebView_Lib
EndEnumeration

#WebView_NoDevTools = 0
#WebView_DevTools = 1
#WebView_Hint_None = 0
#WebView_Hint_Min = 1
#WebView_Hint_Max = 2
#WebView_Hint_Fixed = 3
#WebView_Return_Ok = 0
#WebView_Return_Error = 1

PrototypeC.i p_webview_create(nDebug.i, *window)
PrototypeC.i p_webview_get_window(*WebView)
PrototypeC p_webview_destroy(*WebView)
PrototypeC p_webview_run(*WebView)
PrototypeC p_webview_terminate(*WebView)
PrototypeC p_webview_dispatch(*WebView, *fn, *arg)
PrototypeC p_webview_set_html(*WebView, html.p-utf8)
PrototypeC p_webview_set_title(*WebView, title.p-utf8)
PrototypeC p_webview_set_size(*WebView, nWidth.i, nHeight.i, nHints.i)
PrototypeC p_webview_navigate(*WebView, url.p-utf8)
PrototypeC p_webview_init(*WebView, js.p-utf8)
PrototypeC p_webview_eval(*WebView, js.p-utf8)
PrototypeC p_webview_bind(*WebView, name.p-utf8, *fn, *arg)
PrototypeC p_webview_unbind(*WebView, name.p-utf8)
PrototypeC p_webview_return(*WebView, seq.p-utf8, nStatus.i, result.p-utf8)

Global WebView_Lib$
CompilerSelect #PB_Compiler_OS
  CompilerCase #PB_OS_Windows
    WebView_Lib$ = "./webview.dll"
  CompilerCase #PB_OS_Linux
    ImportC ""
      gtk_window_move(*win, x, y)
      gtk_window_resize(*win, x, y)
      gtk_window_maximize(*win)
    EndImport
    WebView_Lib$ = "./libwebview.so"
  CompilerCase #PB_OS_MacOS
    WebView_Lib$ = "./libwebview.dylib"
CompilerEndSelect

Procedure.i WebView_Function(FunctionName.s)
  Define.i nRes = GetFunction(#WebView_Lib, FunctionName)
  If nRes
    ProcedureReturn nRes
  Else
    MessageRequester("Error", "Function not found: " + FunctionName, 0)
    End
  EndIf
EndProcedure

If Not OpenLibrary(#WebView_Lib, WebView_Lib$)
  MessageRequester("Error", "Library not found", 0)
  End
EndIf

Global webview_create.p_webview_create = WebView_Function("webview_create")
Global webview_get_window.p_webview_get_window = WebView_Function("webview_get_window")
Global webview_destroy.p_webview_destroy = WebView_Function("webview_destroy")
Global webview_run.p_webview_run = WebView_Function("webview_run")
Global webview_terminate.p_webview_terminate = WebView_Function("webview_terminate")
Global webview_dispatch.p_webview_dispatch = WebView_Function("webview_dispatch")
Global webview_set_html.p_webview_set_html = WebView_Function("webview_set_html")
Global webview_set_title.p_webview_set_title = WebView_Function("webview_set_title")
Global webview_set_size.p_webview_set_size = WebView_Function("webview_set_size")
Global webview_navigate.p_webview_navigate = WebView_Function("webview_navigate")
Global webview_init.p_webview_init = WebView_Function("webview_init")
Global webview_eval .p_webview_eval = WebView_Function("webview_eval")
Global webview_bind.p_webview_bind = WebView_Function("webview_bind")
Global webview_unbind.p_webview_unbind = WebView_Function("webview_unbind")
Global webview_return.p_webview_return = WebView_Function("webview_return")

Procedure webview_move(wn, x, y, w, h)
  Protected nHandle = webview_get_window(wn)
  CompilerSelect #PB_Compiler_OS
    CompilerCase #PB_OS_Linux
      gtk_window_move(nHandle, x, y)
      gtk_window_resize(nHandle, w, h)
    CompilerCase #PB_OS_MacOS
      ; this branch is completely untested !!
      ; I have no experience of Mac and don't
      ; have one to test with
      Protected frame.NSRect
      frame\origin\x = x
      frame\origin\y = y
      frame\size\width = w
      frame\size\height = h
      CocoaMessage(0, nHandle, "setFrame:@", @frame)
  CompilerCase #PB_OS_Windows
      MoveWindow_(nHandle, x, y, w, h, #True)
  CompilerEndSelect
EndProcedure

Procedure webview_maximize(wn)
  Protected nHandle = webview_get_window(wn)
  CompilerSelect #PB_Compiler_OS
    CompilerCase #PB_OS_Linux
      gtk_window_maximize(nHandle)
    CompilerCase #PB_OS_MacOS
      ; ok, this is a fudge ...
      If ExamineDesktops()
        Define.i nW = DesktopWidth(0), nH = DesktopHeight(0)
        webview_move(wn, 0, 0, nW, nH)
      EndIf
  CompilerCase #PB_OS_Windows
      ShowWindow_(nHandle, #SW_MAXIMIZE)
  CompilerEndSelect  
EndProcedure

CompilerIf #PB_Compiler_IsMainFile
  Global w
  ; very simple html/js to test ...
  Define.s html = "<head><body>" + 
                  "<button id='btn-test' >Click Me</button>" +
                  "<script> " + 
                  "function test(evt) { " +
                  "    var someData = { 'param1': 'Hello from JS!' }; " + 
                  "    var s = window.rpc( evt.target.id, evt.type, someData )" + 
                  "    .then(s => { " + 
                  "        alert(s.result); " + 
                  "    }) " + 
                  "} " + 
                  "document.getElementById('btn-test').addEventListener('click', test); " + 
                  "</script>" +
                  "</head></body>"
  
  ; our function exposed to js as window.rpc() ...
  Procedure js_rpc(*seq, *req, *arg)
    ; the args from js arrive as a JSON.stringified array ...
    Debug PeekS(*req, -1, #PB_UTF8)
    ; send a response to js ...
    webview_return(w, PeekS(*seq, -1, #PB_UTF8), 0, "{ 'result': 'Hello from PB!' }")
  EndProcedure
  
  ; I can't attach webview_create() to a PB window/gadget :-(
  ; but a standalone window works ...
  w = webview_create(#WebView_DevTools, #Null)
  webview_set_title(w, "PB/JS Bridge Example")
  webview_maximize(w)
  webview_bind(w, "rpc", @js_rpc(), #Null)
  webview_set_html(w, html)
  ;webview_navigate(w, "https://www.purebasic.com")
  webview_run(w)
  webview_destroy(w)
  
CompilerEndIf
It works if I let the webview create its own window but I haven't figured out how to attach it to a gadget yet (MX Linux). The readme on github says GTK3 is required and I'm not sure if that's what PB is using. Also I think it has its own event loop so I'm not sure how you'd integrate that.

For my purpose the above would be fine (as I want my whole UI in HTML/JS) if only I could figure out how to position the window :?
Last edited by the.weavster on Mon May 29, 2023 10:20 am, edited 1 time in total.
Fred
Administrator
Administrator
Posts: 16618
Joined: Fri May 17, 2002 4:39 pm
Location: France
Contact:

Re: WebView

Post by Fred »

Default is GTK3 on Linux
infratec
Always Here
Always Here
Posts: 6817
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: WebView

Post by infratec »

I can only test windows at the moment. This works (you need PB x64, cause of the 64bit dll):

Code: Select all

  Procedure CloseWebview()
    
    Protected EventWindow.i, WebView.i
    
    EventWindow = EventWindow()
    WebView = GetWindowData(EventWindow)
    
    webview_terminate(WebView)
    CloseWindow(EventWindow)
  EndProcedure
  
  
  Define WebViewWindowID.i
  
  OpenWindow(0, 0, 0, 400, 300, "Test", #PB_Window_MinimizeGadget|#PB_Window_ScreenCentered)
  BindEvent(#PB_Event_CloseWindow, @CloseWebview(), 0)
  
  WebViewWindowID = WindowID(0)
  
  w = webview_create(#WebView_DevTools, @WebViewWindowID)
  SetWindowData(0, w)
  
  ;webview_set_title(w, "PB/JS Bridge Example")
  ;webview_set_size(w, 800, 500, #WebView_Hint_Min)
  webview_bind(w, "rpc", @js_rpc(), #Null)
  webview_set_html(w, html)
  ;webview_navigate(w, "https://www.purebasic.com")
  webview_run(w)
  
  webview_destroy(w)
Last edited by infratec on Sun May 28, 2023 2:47 pm, edited 4 times in total.
User avatar
mk-soft
Always Here
Always Here
Posts: 5335
Joined: Fri May 12, 2006 6:51 pm
Location: Germany

Re: WebView

Post by mk-soft »

When I look at the webview.h in the GTK3 area ...
Not testest

Code: Select all

w = webview_create(#WebView_DevTools, WindowID(0))
My Projects ThreadToGUI / OOP-BaseClass / EventDesigner V3
PB v3.30 / v5.75 - OS Mac Mini OSX 10.xx - VM Window Pro / Linux Ubuntu
Downloads on my Webspace / OneDrive
User avatar
the.weavster
Addict
Addict
Posts: 1537
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: WebView

Post by the.weavster »

Code: Select all

  WebViewWindowID = WindowID(0)
  w = webview_create(#WebView_DevTools, @WebViewWindowID)
This results in the error:
Gtk (CRITICAL): gtk_window_set_geometry_hints: assertion 'GTK_IS_WINDOW (window)' failed

Code: Select all

w = webview_create(#WebView_DevTools, WindowID(0))
This does create a window but the webview doesn't appear in it.
infratec
Always Here
Always Here
Posts: 6817
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: WebView

Post by infratec »

That's possible.
I always noticed that a window in Linux is not directly available after OpenWindow()
Maybe you can do someting like this:

Code: Select all

OpenWindow(0, 0, 0, 400, 300, "Test", #PB_Window_MinimizeGadget|#PB_Window_ScreenCentered)
      Timeout = 100
      Repeat
        WaitWindowEvent(10)
        Timeout - 1
      Until Timeout = 0
(You have to play with the values)
I'm not sure if IsWindow() does the trick too.

Or maybe

Code: Select all

Repeat : Until WaitWindowEvent(10) = 0
is also working.
User avatar
the.weavster
Addict
Addict
Posts: 1537
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: WebView

Post by the.weavster »

Would somebody with Mac OS knowledge please complete this for me so we have a webview_move() function:

Code: Select all

CompilerSelect #PB_Compiler_OS
  CompilerCase #PB_OS_Linux
    ImportC ""
      gtk_window_move(*win, x, y)
    EndImport
  CompilerCase #PB_OS_MacOS
    
CompilerEndSelect

Procedure webview_move(wn, x, y, w, h)
  nHandle = webview_get_window(wn)
  CompilerSelect #PB_Compiler_OS
    CompilerCase #PB_OS_Linux
      gtk_window_move(nHandle, x, y)
      webview_set_size(wn, w, h, #WebView_Hint_Min)
  CompilerCase #PB_OS_MacOS
    
  CompilerCase #PB_OS_Windows
      MoveWindow_(nHandle, x, y, w, h, #True)
  CompilerEndSelect
EndProcedure
infratec
Always Here
Always Here
Posts: 6817
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: WebView

Post by infratec »

User avatar
the.weavster
Addict
Addict
Posts: 1537
Joined: Thu Jul 03, 2003 6:53 pm
Location: England

Re: WebView

Post by the.weavster »

I have updated the code in my first post to add:

Code: Select all

webview_move(wn, x, y, w, h)
webview_maximize(wn)
I don't really know how to implement those for Mac OS but I've had a go ( no way of testing ), if anyone could take a look ( and put it right ) I'd appreciate it.
Post Reply