PB6.20B4 - WebViewGadget - How to get/set the zoom factor?

[Kukulkan]

If a user is changing the zoom factor in the WebViewGadget (eg Ctrl+Mouse-Wheel), how can I remember that for the next start of the app?

I think I need some cross platform (Win, Linux, Mac) solution to get and set the WebViewGadget zoom factor.

[Caronte3D]

Maybe you can use "document.body.style.transform" to set the zoom from you code.

[Caronte3D]

Example to set the zoom:

Code: Select all

  Procedure IncrementJS(JsonParameters$)
    Static i.d=1
    i+0.1
      WebViewExecuteScript(0,"scale="+StrD(i)+";"+
                       "document.body.style.transform = `scale(${scale})`;"+
                       "document.body.style.transformOrigin = '0 0'; // Evita desplazamientos inesperados"+
                       "document.body.style.width = `${100 / scale}%`; // Ajusta el ancho para evitar desbordes")
    ProcedureReturn UTF8(~"{ \"count\": "+StrD(i)+ "}")
  EndProcedure

  OpenWindow(0, 100, 100, 400, 400, "Hello", #PB_Window_SystemMenu)

  WebViewGadget(0, 0, 0, 400, 400)

  SetGadgetItemText(0, #PB_WebView_HtmlCode, 
                    ~"<button id=\"increment\">Tap me</button>\n"+
                    ~"<div>Actual zoom: <span id=\"count\">1</span></div>\n"+
                    ~"<script>\n"+
                    ~"  const [incrementElement, countElement, computeElement, "+
                    ~"computeResultElement] =\n"+
                    ~"    document.querySelectorAll(\"#increment, #count, #compute, "+
                    ~"#compute-result\");\n"+
                    ~"  document.addEventListener(\"DOMContentLoaded\", () => {\n"+
                    ~"    incrementElement.addEventListener(\"click\", () => {\n"+
                    ~"      window.increment().then(result => {\n"+
                    ~"        countElement.textContent = result.count;\n"+
                    ~"      });\n"+
                    ~"    });\n"+
                    ~"  });\n"+
                    ~"</script>")
    
  BindWebViewCallback(0, "increment", @IncrementJS())

  Repeat 
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow

[zikitrake]

This sample get the zoom factor and put it to 400% as example

(This is obvious, but you can try reduce/increment the zoom via Ctrl+ or Ctrl- or using the mouse wheel )

Code: Select all

Procedure.d WebViewGetZoomFactor(WebView)
  
  Protected Result.d
  Protected Controller.ICoreWebView2Controller
  
  If GadgetType(WebView) = #PB_GadgetType_WebView    
    Controller = GetGadgetAttribute(WebView, #PB_WebView_ICoreController)
    If Controller
      Controller\get_ZoomFactor(@Result)
    EndIf
  EndIf
  Result = Result * 100
  ProcedureReturn Result
  
EndProcedure

Procedure.i WebViewSetZoomFactor(WebView, zoom.d = 100)
  
  Protected Controller.ICoreWebView2Controller
  
  If GadgetType(WebView) = #PB_GadgetType_WebView    
    Controller = GetGadgetAttribute(WebView, #PB_WebView_ICoreController)
    If Controller
      Controller\put_ZoomFactor(zoom/100)
    EndIf
  EndIf
  
EndProcedure

OpenWindow(0, 100, 100, 400, 400, "Hello", #PB_Window_SystemMenu)

WebViewGadget(0, 0, 20, 400, 380)
SetGadgetText(0, "file://" + #PB_Compiler_Home + "examples/sources/Data/WebView/webview.html")
ButtonGadget(1, 0,0,120,20, "Debug Zoom")
ButtonGadget(2, 125,0,120,20, "Zoom to 400%")

Repeat 
  Event = WaitWindowEvent()
  Select Event
     Case #PB_Event_Gadget
       Select EventGadget()
         Case 1 :
           Debug WebViewGetZoomFactor(0)
         Case 2 :
           WebViewSetZoomFactor(0, 400)
           Debug WebViewGetZoomFactor(0)
       EndSelect
     Default
   EndSelect
Until Event = #PB_Event_CloseWindow

[Caronte3D]

This sample get the zoom factor and put it to 400% as example

Excellent! much better than mine

[Kukulkan]

Thanks to all of you!

This sample get the zoom factor and put it to 400% as example

(This is obvious, but you can try reduce/increment the zoom via Ctrl+ or Ctrl- or using the mouse wheel )
...

It does not even compile for me both on Linux and Mac? Is it just Windows I think?

Code: Select all

[08:34:10] [COMPILER] Line 4: Structure not found: ICoreWebView2Controller.

As I wrote, I need a cross platform solution. Looks like this is only for Windows

I will test the way through the document.body.style.transform DOM attribute, maybe that works... If it works, I will post my solution here.

[zikitrake]

...As I wrote, I need a cross platform solution. Looks like this is only for Windows
...

Sorry! That's what I get for reading only the post title.