PureBasic Forums - English

http://www.purebasic.com
https://www.purebasic.fr/english/

Webview and Javascript

https://www.purebasic.fr/english/viewtopic.php?t=84085

Page 1 of 2

Webview and Javascript

Posted: Fri Apr 19, 2024 3:34 pm
by vertexview
Hello,
I am experimenting a great Javascript library, Leaflet, with Purebasic new webview gadget (PB 6.10) for geomapping features.
This library is associated to Openstreetmap site (https://www.openstreetmap.org).

Local test with an index.html file is quite simple and conclusive.
I made a try also with html code converted and passed in a string to the webwiew gadget,... but without success (blank view with the same code).

Here is the Leaflet Javascript library documentation: https://leafletjs.com/index.html
Javascript and CSS code: https://leafletjs-cdn.s3.amazonaws.com/ ... eaflet.zip

The visualisation in the webview gadget is done without any anomaly when i used a local html file called with this code:

Code: Select all

Global URL_leaflet.s=ProgDirectory.s+"/html/index.html"
SetGadgetText(#WebView_OSM, URL_leaflet.s)
These files are placed in /js directory of my project:
leaflet.js - This is the minified Leaflet JavaScript code
leaflet.css - The stylesheet for Leaflet
images - This folder, in the same directory as leaflet.css, contains images referenced by leaflet.css. .

Index.html file is placed in /html directory of my project:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Leaflet</title>
<link rel="stylesheet" href="js/leaflet.css" />
<script src="js/leaflet.js"></script>
<style>
  body{
    margin: 0;
    padding: 0;
  }
  #map {
    width: 100vw;
    height: 100vh;
  }
</style>
</head>
<body>
<div id="map"></div>
<script>
  const map = L.map('map', {center: [48.863, 2.329], zoom: 12});
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' 
    }).addTo(map);
  function onMapClick(e) {
    alert("You clicked the map at " + e.latlng);
  }
  var marker1 = L.marker([48.863, 2.329]).addTo(map);
  map.on('click', onMapClick);  
</script>
</body>
</html>
Here is the purebasic definition string of the same html code called for the gadget with:
SetGadgetItemText(#WebView_1, #PB_Web_HtmlCode, HTML.s)

Here is the string code:

Code: Select all

Global HTML.s
HTML.s="<!DOCTYPE html>\n"+
       ~"<html lang=\"en\">\n"+
       ~"<head>\n"+
       ~"<meta charset=\"UTF-8\">\n"+
       ~"<title>Leaflet</title>\n"+
       ~"<link rel=\"stylesheet\" href=\"js/leaflet.css\" />\n"+
       ~"<script src=\"js/leaflet.js\"></script>\n"+
       ~"<style>\n"+
       ~"  body{\n"+
       ~"    margin: 0;\n"+
       ~"    padding: 0;\n"+
       ~"  }\n"+
       ~"  #map {\n"+
       ~"    width: 100vw;\n"+
       ~"    height: 100vh;\n"+
       ~"  }\n"+
       ~"</style>\n"+
       ~"</head>\n"+
       ~"<body>\n"+
       ~"<div id=\"Map\"></div>\n"+
       ~"<script>\n"+
       ~"  const Map = L.Map('map', {center: [48.86, 2.29], zoom: 12});\n"+
       ~"  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n"+
       ~"  attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'\n"+
       ~"  }).addTo(Map);\n"+
       ~"function onMapClick(e) {\n"+
       ~"alert(\"You clicked the Map at \" + e.latlng);\n"+
       ~"}\n"+
       ~"var marker1 = L.marker([48.863, 2.329]).addTo(Map);\n"+
       ~"Map.on('click', onMapClick);\n"+
       ~"</script>\n"+
       ~"</body>\n"+
       ~"</html>"
My first objective is to visualize something in the gadget with this html code passed in a string of characters...
After that, a new focus will be interacting with the webview gadget and Javascript, adding a new marker, and updating its position using GPS location.
Thank you for your help.

Re: Webview and Javascript

Posted: Sat Apr 20, 2024 1:01 am
by Kiffi
Here is an example that uses the code from the Quick Start Guide:

Code: Select all

OpenWindow(0, #PB_Ignore, #PB_Ignore, 1000, 800, "Leaflet", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

WebViewGadget(0, 0, 0, 1000, 800, #PB_WebView_Debug)

Procedure.s GetHtml()
  
  ProcedureReturn ~"<!DOCTYPE html> \n" +
                  ~"<html lang='en'> \n" +
                  ~"<head> \n" +
                  ~"	<base target='_top'> \n" +
                  ~"	<meta charset='utf-8'> \n" +
                  ~"	<meta name='viewport' content='width=device-width, initial-scale=1'> \n" +
                  ~"	<title>Quick Start - Leaflet</title> \n" +
                  ~"	<link rel='shortcut icon' type='image/x-icon' href='docs/images/favicon.ico' /> \n" +
                  ~"    <link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=' crossorigin=''/> \n" +
                  ~"    <script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=' crossorigin=''></script> \n" +
                  ~"	<style> \n" +
                  ~"		html, body { \n" +
                  ~"			height: 100%; \n" +
                  ~"			margin: 0; \n" +
                  ~"		} \n" +
                  ~"		.leaflet-container { \n" +
                  ~"			height: 800px; \n" +
                  ~"			width: 1000px; \n" +
                  ~"			max-width: 100%; \n" +
                  ~"			max-height: 100%; \n" +
                  ~"		} \n" +
                  ~"	</style> \n" +
                  ~"</head> \n" +
                  ~"<body> \n" +
                  ~"<div id='map' style='width: 1000px; height: 800px;'></div> \n" +
                  ~"<script> \n" +
                  ~" \n" +
                  ~"	const map = L.map('map').setView([51.505, -0.09], 13); \n" +
                  ~"	const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { \n" +
                  ~"		maxZoom: 19, \n" +
                  ~"		attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>' \n" +
                  ~"	}).addTo(map); \n" +
                  ~"	const marker = L.marker([51.5, -0.09]).addTo(map) \n" +
                  ~"		.bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup(); \n" +
                  ~"	const circle = L.circle([51.508, -0.11], { \n" +
                  ~"		color: 'red', \n" +
                  ~"		fillColor: '#f03', \n" +
                  ~"		fillOpacity: 0.5, \n" +
                  ~"		radius: 500 \n" +
                  ~"	}).addTo(map).bindPopup('I am a circle.'); \n" +
                  ~"	const polygon = L.polygon([ \n" +
                  ~"		[51.509, -0.08], \n" +
                  ~"		[51.503, -0.06], \n" +
                  ~"		[51.51, -0.047] \n" +
                  ~"	]).addTo(map).bindPopup('I am a polygon.'); \n" +
                  ~"	const popup = L.popup() \n" +
                  ~"		.setLatLng([51.513, -0.09]) \n" +
                  ~"		.setContent('I am a standalone popup.') \n" +
                  ~"		.openOn(map); \n" +
                  ~"	function onMapClick(e) { \n" +
                  ~"		popup \n" +
                  ~"			.setLatLng(e.latlng) \n" +
                  ~"			.setContent(`You clicked the map at ${e.latlng.toString()}`) \n" +
                  ~"			.openOn(map); \n" +
                  ~"	} \n" +
                  ~"	map.on('click', onMapClick); \n" +
                  ~"</script> \n" +
                  ~"</body> \n" +
                  ~"</html> \n" +
                  ~"";
  
EndProcedure

SetGadgetItemText(0, #PB_WebView_HtmlCode, GetHtml())

Repeat 
  Event = WaitWindowEvent()
Until Event = #PB_Event_CloseWindow

Re: Webview and Javascript

Posted: Sat Apr 20, 2024 2:41 pm
by vertexview
Thank you Kiffi,
I modified my string definition.
The simplest solution was to replace the lines containing localy referenced files (leaflet.css and leaflet.js) with networked referenced ones

Not operationnal:

Code: Select all

~"<link rel=\"stylesheet\" href=\"js/leaflet.css\" />\n"+
~"<script src=\"js/leaflet.js\"></script>\n"+
Functional:

Code: Select all

~"<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=' crossorigin=''/> \n" +
~"<script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=' crossorigin=''></script> \n" +

Here is the functional string for my map.

Code: Select all

Global HTML.s=""
HTML+  ~"<!DOCTYPE html> \n"+
       ~"<html lang='en'> \n"+
       ~"<head> \n"+
       ~"<meta charset='UTF-8'> \n"+
       ~"<title>Leaflet</title> \n"+
       ~"<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=' crossorigin=''/> \n" +
       ~"<script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=' crossorigin=''></script> \n" +
       ~"<style> \n"+
       ~"  body{ \n"+
       ~"    margin: 0; \n"+
       ~"    padding: 0; \n"+
       ~"  } \n"+
       ~"  #map { \n"+
       ~"    width: 100vw; \n"+
       ~"    height: 100vh; \n"+
       ~"  } \n"+
       ~"</style> \n"+
       ~"</head> \n"+
       ~"<body> \n"+
       ~"<div id='map'></div> \n"+
       ~"<script>\n"+
       ~"  const map = L.map('map', {center: [48.86, 2.29], zoom: 12}); \n"+
       ~"  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { \n"+
       ~"  attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors' \n"+
       ~"  }).addTo(map); \n"+
       ~"function onMapClick(e) { \n"+
       ~"alert('You clicked the Map at ' + e.latlng); \n"+
       ~"} \n"+
       ~"var marker1 = L.marker([48.863, 2.329]).addTo(map); \n"+
       ~"map.on('click', onMapClick); \n"+
       ~"</script> \n"+
       ~"</body> \n"+
       ~"</html>"

Re: Webview and Javascript

Posted: Sat Apr 20, 2024 2:57 pm
by Piero
Don't take me wrong; it's just for laughs ;)

Code: Select all

1 functionnal
; Line 1: Syntax Error

Re: Webview and Javascript

Posted: Sat Apr 20, 2024 3:13 pm
by CDXbow
Nice work!
I have done a few experiments, loading files locally and from the web. HTML, MP4, WebGL, animated gifs have all worked well. Displaying scripted pages has been good, fast and reliable. Accurate rendering, too.

I have run into trouble displaying it on form with an image, there is some redraw problem. Which ever is coded to display first works, the second doesn't. I also had problems with it redrawing when I used the custombuttons.pbi, it only drew on the screen below the rendering of the buttons. I guess we can say it's immature but lots of potential.

I thought I'd have a go at taking a typical mobile navbar and turning it into a toolbar and displaying it in the webviewn gadget ay the top of a page. It works as far as displaying OK, but I haven't succeeded in the callbacks parts.

Code: Select all

;Test webviewgadget as toolbar
;CSS for the toolbat look is in the html file toolbar-css.ht,l
; Doesn't do anything at this stage but it looks nice!
; toolbar1.pb

OpenWindow(0,0,0,840,540,"Test Webview Gadget as Toolbar", #PB_Window_SystemMenu)

WebViewGadget(1, 0, 5, 830, 93)
  SetWindowColor(Window_0, RGB(255,255,255))
  EditorGadget(2, 45, 98, 730, 380)  ;  
  SetGadgetText(1, GetCurrentDirectory() + "toolbar-css.html")
  SetGadgetText(2, "Sadly I dont do anything yet, but a clever soul with callbacks could implement a modern toolbar in CSS and html")
; Show the window once the webview has been fully loaded
HideWindow(0, #False)
Repeat
  Select WaitWindowEvent()     
    Case #PB_Event_CloseWindow
      Quit = 1
      
  EndSelect
Until Quit = 1
The HTML code is below, I rolled the CSS into the HTML so as there was only one file needed. No scripting, it's all done with CSS.
toolbar-css.html goes in the same directory as the PB code.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Mobile Navigation </title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
<style type="text/css">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navigation {
    top: 1rem;
    position: absolute;
    left: 50%;
    display: block;
    margin: 0 auto;
    border-radius: 1rem;
    transform: translate(-50%, 0);
    background-color: green;
}

.navigation ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.navigation ul li {
    height: 30px;
    width: 35px;
    margin: 1rem;
    color: white;
    padding: 0 1rem;
    cursor: pointer;
    border-radius: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s linear;
}

.navigation ul li:hover {
    color: purple;
    transform: scale(1.2);
    background-color: #fff;
}

.navigation ul li:hover i {
    border-radius: 30%;
}
</style> 
</head>
<body>
    <div class="main-container">
        <nav class="navigation">
            <ul>
                <li>
                    <i class="fa-solid fa-house"></i>
                </li>
                <li>
                    <i class="far fa-file"></i>
                </li>
                <li>
                    <i class="fas fa-edit"></i>
                </li>
                <li>
                    <i class="fas fa-save"></i>
                </li>
                <li>
                    <i class="fa-solid fa-user"></i>
                </li>
            
                <li>
                    <i class="fa-solid fa-people-group"></i>
                </li>
                <li>
                    <i class="fas fa-wrench"></i>
                </li>
                 <li>
                    <i class="fas fa-table"></i>
                </li>
                <li>
                    <i class="fas fa-arrow-alt-circle-down"></i>
                </li>           
                <li>
                    <i class="fas fa-link"></i>
                </li>
 				<li>
                    <i class="fas fa-window-maximize"></i>
                </li>
             
                <li>
                    <i class="fas fa-power-off"></i>
                </li>
            </ul>
        </nav>
    </div>
</body>
</html>
Here is a modern looking 'toolbar' in PB, not yet working, so pretty but useless.

Image

I think there is a lot of potential for the gadget

Re: Webview and Javascript

Posted: Mon Apr 22, 2024 1:46 am
by CDXbow
Using the example from the help I managed to get one 'button' working on the toolbar after I replaced the CSS drawn buttons with real HTML buttons. I think to get it to work, I need to mod the javascript used in the example from the PB help, a thought that fills me with terror.

I did notice some aberrant behaviour, the webviewgadget would keep loading html first from a project I was working on earlier in the day. I had to renumber the gadget to stop it, I guess it was pulling data out of some local store. It would be nice if there was a way to stop this.

Re: Webview and Javascript

Posted: Mon Jul 07, 2025 3:56 pm
by vertexview
Hello,
About the Webview Gadget, I would like to know if there is a good method to modify a JS variable value using WebViewExecuteScript.

Below is the example with text in a button modified when it is clicked.
... but how can I change the HomeLoc value defined in the first tagged script from my main PB code ?

My goal is to use the Leaflet library in a Webview gadget with several markers (GPS coordinates), calculated in the main Purebasic program, passed to the map for visualization (Openstreetmap with Leaflet JS methods).

Code: Select all

Html$ =    ~"<button id=\"displayInfo\">Click to see information</button>\n"+
           ~"<script id=\"homeValue\">let homeLoc = [48.800, 1.400]</script>\n"+
           ~"<script>\n"+
           ~"  const displayInfoElement=document.getElementById(\"displayInfo\");\n"+
           ~"  const homeValueElement=document.getElementById(\"homeValue\");\n"+
           ~"  document.addEventListener(\"DOMContentLoaded\", () => {\n"+
           ~"    displayInfoElement.addEventListener(\"click\", () => {\n"+
           ~"      window.displayInfo(1000, 2000).then(result => {\n"+
           ~"      });\n"+
           ~"    });\n"+
           ~"  });\n"+
           ~"</script>";
    
  Procedure DisplayInfoCallback(ParametreJSON$)
    ; Change Button object text
    WebViewExecuteScript(0, ~"const element=document.getElementById(\"displayInfo\"); element.textContent=\"Hello from Callback !\";");
  EndProcedure
  
  Procedure HomeValueCallback(ParametreJSON$)
    ; Change JS variable value in script
    WebViewExecuteScript(0, ~"const element=document.getElementById(\"homeValue\"); element.textContent=\"let homeLoc = [50.400, 2.300]\";");
  EndProcedure

  OpenWindow(0, 100, 100, 500, 500, "Webview Callback Test", #PB_Window_SystemMenu)

  WebViewGadget(0, 50, 50, 400, 400, #PB_WebView_Debug)
  SetGadgetItemText(0, #PB_WebView_HtmlCode, Html$)
    
  BindWebViewCallback(0, "displayInfo", @DisplayInfoCallback())
  BindWebViewCallback(0, "homeValue", @HomeValueCallback())

  Repeat 
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow

Re: Webview and Javascript

Posted: Mon Jul 07, 2025 10:00 pm
by JHPJHP
Hi vertexview,

Check your PM.

Chromium Framework

Image

Re: Webview and Javascript

Posted: Mon Jul 07, 2025 10:02 pm
by vertexview
Below is another sample code with a Leaflet map.
The objective stay to modify the map center position with a new reference value, after button clicked.

Code: Select all

Global HTML.s=""
HTML+  ~"<!DOCTYPE html> \n"+
       ~"<html lang='en'> \n"+
       ~"<head> \n"+
       ~"<meta charset='UTF-8'> \n"+
       ~"<title>Leaflet</title> \n"+
       ~"<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=' crossorigin=''/> \n" +
       ~"<script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=' crossorigin=''></script> \n" +
       ~"<style> \n"+
       ~"  body{ \n"+
       ~"    margin: 0; \n"+
       ~"    padding: 0; \n"+
       ~"  } \n"+
       ~"  #map { \n"+
       ~"    width: 100vw; \n"+
       ~"    height: 100vh; \n"+
       ~"  } \n"+
       ~"</style> \n"+
       ~"</head> \n"+
       ~"<body> \n"+
       ~"<div id='map'></div> \n"+
       ~"<script id=\"homeValue\">let homeRef = [48.850, 2.350]</script>\n"+       
       ~"<script>\n"+
       ~"  const map = L.map('map', {center: homeRef, zoom: 12}); \n"+
       ~"  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { \n"+
       ~"  attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors' \n"+
       ~"  }).addTo(map); \n"+
       ~" const circle1 = L.circle(homeRef, {radius: 5000}).addTo(map); \n"+
       ~" const circle2 = L.circle(homeRef, {radius: 10000}).addTo(map); \n"+
       ~" circle1.setStyle({color: 'red'}); \n"+
       ~" circle1.setStyle({weight:1.0}); \n"+
       ~" circle1.setStyle({fillOpacity:0.01}); \n"+
       ~" circle2.setStyle({color: 'blue'}); \n"+
       ~" circle2.setStyle({weight:1.0}); \n"+
       ~" circle2.setStyle({fillOpacity:0.01}); \n"+
       ~"function onMapClick(e) { \n"+
       ~"alert('You clicked the Map at ' + e.latlng); \n"+
       ~"} \n"+
       ~"var marker1 = L.marker([48.84, 2.32]).addTo(map); \n"+
       ~"var marker2 = L.marker([48.88, 2.36]).addTo(map); \n"+
       ~"map.on('click', onMapClick); \n"+
       ~"</script> \n"+
       ~"</body> \n"+
       ~"</html>"
    
 
  Procedure HomeValueCallback(ParametreJSON$)
    ; Change JS variable value in script
    WebViewExecuteScript(0, ~"const element=document.getElementById(\"homeValue\"); element.textContent=\"let homeRef = [48.874, 2.295]\";");
  EndProcedure
  
  Procedure ChangeMapCenter(Eventype)
     BindWebViewCallback(0, "homeValue", @HomeValueCallback())
  EndProcedure  

  OpenWindow(0, 100, 100, 1200, 768, "Webview Callback Test", #PB_Window_SystemMenu)

  WebViewGadget(0, 0, 0, 1024, 768, #PB_WebView_Debug)
  SetGadgetItemText(0, #PB_WebView_HtmlCode, HTML.s)
  ButtonGadget(#PB_Any, 1040,  200, 140, 40, "Change Map Center")
  
  ; Call ChangeMapCenter procedure

  Repeat 
    Event = WaitWindowEvent()
    
    If Event = #PB_Event_Gadget
      ChangeMapCenter(Eventype)
    EndIf
    
  Until Event = #PB_Event_CloseWindow
  End

Re: Webview and Javascript

Posted: Tue Jul 08, 2025 12:39 pm
by dige
@vertexview: I see a map with 2 markers and 2 circles. After clicking on "Change map center" nothing happens. Seems that HomeValueCallback() will not called.

Re: Webview and Javascript

Posted: Tue Jul 08, 2025 1:47 pm
by vertexview
@dige. I know..., it's my question. What is missing ?...

The two markers and circles are made with the Leaflet javascript methods.
The center of the map, and circles, are defined using homeRef variable.
I guess there is a lot more to declare in the Javascript part of the HTML.s to allow access to the homeRef variable and its modification by WebViewExecuteScript.

Re: Webview and Javascript

Posted: Tue Jul 08, 2025 3:06 pm
by vertexview
@ JHPJHP
Thank you for your message… It hasn't gone unnoticed.
I visited your website and tested several demo applications. You've developed excellent, high-performance solutions in PureBasic.
My goal here is to learn Purebasic, step by step, and have a better understanding of the great possibilities offered with other technologies and languages.

Re: Webview and Javascript

Posted: Tue Jul 08, 2025 4:49 pm
by Kiffi
@vertexview:

Maybe you can do something with this code:

Code: Select all

EnableExplicit

Enumeration
  #Window
  #WebViewGadget
  #ButtonGadgetParis
  #ButtonGadgetLondon
EndEnumeration

Define HTML.s= ~"<!DOCTYPE html> \n"+
               ~"<html lang='en'> \n"+
               ~"<head> \n"+
               ~"<meta charset='UTF-8'> \n"+
               ~"<title>Leaflet</title> \n"+
               ~"<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' integrity='sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=' crossorigin=''/> \n" +
               ~"<script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' integrity='sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=' crossorigin=''></script> \n" +
               ~"<style> \n"+
               ~"  body{ \n"+
               ~"    margin: 0; \n"+
               ~"    padding: 0; \n"+
               ~"  } \n"+
               ~"  #map { \n"+
               ~"    width: 100vw; \n"+
               ~"    height: 100vh; \n"+
               ~"  } \n"+
               ~"</style> \n"+
               ~"</head> \n"+
               ~"<body> \n"+
               ~"<div id='map'></div> \n"+
               ~"<script>\n"+
               ~"  const map = L.map('map').setView([51.505, -0.09], 13); \n"+
               ~"  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { \n"+
               ~"    attribution: '&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors' \n"+
               ~"  }).addTo(map); \n"+
               ~""+
               ~"  function flyTo(lat, lng) { \n"+
               ~"    map.flyTo(new L.LatLng(lat, lng)); \n"+
               ~"  } \n"+
               ~""+
               ~"</script> \n"+
               ~"</body> \n"+
               ~"</html>"

Procedure ButtonGadgetParisEvent()
  WebViewExecuteScript(#WebViewGadget, "flyTo(48.85661400, 2.35222190);");
  DisableGadget(#ButtonGadgetParis, #True)
  DisableGadget(#ButtonGadgetLondon, #False)
EndProcedure

Procedure ButtonGadgetLondonEvent()
  WebViewExecuteScript(#WebViewGadget, "flyTo(51.505, -0.09);");
  DisableGadget(#ButtonGadgetParis, #False)
  DisableGadget(#ButtonGadgetLondon, #True)
EndProcedure


OpenWindow(#Window, 100, 100, 1200, 768, "Leaflet Webview Test", #PB_Window_SystemMenu)
WebViewGadget(#WebViewGadget, 0, 0, 1024, 768, #PB_WebView_Debug)
SetGadgetItemText(#WebViewGadget, #PB_WebView_HtmlCode, HTML.s)
ButtonGadget(#ButtonGadgetParis, 1040,  200, 140, 40, "Fly to Paris")
ButtonGadget(#ButtonGadgetLondon, 1040,  250, 140, 40, "Fly to London")

DisableGadget(#ButtonGadgetParis, #False)
DisableGadget(#ButtonGadgetLondon, #True)

BindGadgetEvent(#ButtonGadgetParis, @ButtonGadgetParisEvent())
BindGadgetEvent(#ButtonGadgetLondon, @ButtonGadgetLondonEvent())

Repeat 
Until WaitWindowEvent() = #PB_Event_CloseWindow

Re: Webview and Javascript

Posted: Tue Jul 08, 2025 6:14 pm
by JHPJHP
Hi Kiffi,

Excellent example :!:

Note: If you change the JavaScript method from panTo to flyTo it gives a nice animation. In addition, if you exactly match homeRef (initial values) to the WebViewExecuteScript (Paris) values, you can avoid a small jump if the Paris button is selected first.

Re: Webview and Javascript

Posted: Tue Jul 08, 2025 6:29 pm
by vertexview
@ Kiffi and JHPJHP
Thank you very much. Your codes and remarks open new horizons for my learning.
:D
All times are UTC+01:00
Page 1 of 2

Powered by phpBB® Forum Software © phpBB Limited