Canvas Based HTML5 Gauge im WebGadget

Beitrag von **Kiffi** » 18.07.2019 09:28

Shardik hat geschrieben:Leider stürzt bei mir Gauge.pb unter Windows 7 SP1 x64 sowohl mit PB 5.70 x86 als auch mit PB 5.70 x64 beim Start ab (PB.Ex_WebGadget.pb startet hingegen problemlos).

Zeltzam...

Vielleicht liegt es daran, dass das Gauge.html nicht geladen werden kann? Ich lade es aus dem Pfad, in dem auch die EXE liegt. Deshalb habe ich in meinen Compiler Options "Create temporary executable in the source directory" angehakt.

Grüße ... Peter

Shardik · Beitrag von **Shardik** » 18.07.2019 15:24

Kiffi hat geschrieben:Vielleicht liegt es daran, dass das Gauge.html nicht geladen werden kann? Ich lade es aus dem Pfad, in dem auch die EXE liegt. Deshalb habe ich in meinen Compiler Options "Create temporary executable in the source directory" angehakt.

Das war es! Vielen Dank, Peter, es läuft jetzt perfekt!

Beitrag von **Kiffi** » 19.07.2019 09:34

Es klappt anscheinend auch mit dem Internet Explorer.

PB-Code:

Code: Alles auswählen

EnableExplicit

Procedure SetBrowserEmulation()
  
  ; https://msdn.microsoft.com/en-us/library/ee330730(v=vs.85).aspx
  
  Protected IEVersion.s = "2AF9" ; setting the desired IE-Version (see below)
  
  ; 11001 (0x2AF9) IE11. Webpages are displayed in IE11 edge mode, regardless of the declared !DOCTYPE directive. Failing to declare a !DOCTYPE directive causes the page to load in Quirks.
  ; 11000 (0x2AF8) IE11. Webpages containing standards-based !DOCTYPE directives are displayed in IE11 edge mode. Default value for IE11.
  ; 10001 (0x2711) IE10. Webpages are displayed in IE10 Standards mode, regardless of the !DOCTYPE directive.
  ; 10000 (0x2710) IE10. Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode. Default value for IE 10.
  ;  9999 (0x270F) IE9.  Webpages are displayed in IE9 Standards mode, regardless of the declared !DOCTYPE directive. Failing to declare a !DOCTYPE directive causes the page to load in Quirks.
  ;  9000 (0x2328) IE9.  Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode. Default value for IE 9. Important  In IE 10, Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode.
  ;  8888 (0x22B8) IE8.  Webpages are displayed in IE8 Standards mode, regardless of the declared !DOCTYPE directive. Failing to declare a !DOCTYPE directive causes the page to load in Quirks.
  ;  8000 (0x1F40) IE8.  Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode. Default value for IE 8 Important  In IE 10, Webpages containing standards-based !DOCTYPE directives are displayed in IE10 Standards mode.
  ;  7000 (0x1B58) IE7.  Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode. Default value for applications hosting the WebBrowser Control.  
  
  Protected RegistryString.s
  Protected TempRegFile.s
  Protected FF
  
  RegistryString = "Windows Registry Editor Version 5.00" + #CRLF$ +
                   "" + #CRLF$ +
                   "[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION]" + #CRLF$ +
                   Chr(34) + GetFilePart(ProgramFilename()) + Chr(34) + "=dword:" + IEVersion + #CRLF$
  
  TempRegFile = GetTemporaryDirectory() + "SetBrowserEmulation.reg"
  
  FF = CreateFile(#PB_Any, TempRegFile)
  
  If FF
    WriteString(FF, RegistryString)
    CloseFile(FF)
    RunProgram("regedit", "/s " + Chr(34) + TempRegFile + Chr(34), "", #PB_Program_Hide | #PB_Program_Wait)
    DeleteFile(TempRegFile)
    ProcedureReturn #True
  EndIf
  
EndProcedure

SetBrowserEmulation()

Enumeration
  #Window
  #WebGadget
  #Timer1
  #Timer2
EndEnumeration

OpenWindow(#Window, 0, 0, 600, 300, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)

WebGadget(#WebGadget, 10, 10, 580, 280, GetPathPart(ProgramFilename()) + "Gauge.html")
AddWindowTimer(#Window, #Timer1, 1000)
AddWindowTimer(#Window, #Timer2, 1000)

Define Browser.IWebBrowser2
Browser = GetWindowLongPtr_(GadgetID(#WebGadget), #GWL_USERDATA)
Browser\put_Silent(#True)   

Repeat
  
  Select WaitWindowEvent()
      
    Case #PB_Event_Timer
      
      Select EventTimer()
          
        Case #Timer1
          SetGadgetText(#WebGadget, "javascript:gauge1.value=" + Random(100) + ";void(0);")
          
        Case #Timer2
          SetGadgetText(#WebGadget, "javascript:gauge2.value=" + Random(100) + ";void(0);")
          
      EndSelect
      
    Case #PB_Event_CloseWindow
      Break
      
  EndSelect
  
ForEver

Gauge.html:

Code: Alles auswählen

<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    
    <script>
    
      // https://github.com/Mikhus/canvas-gauges/issues/135
    
      if (!String.prototype.repeat) {
        String.prototype.repeat = function(count) {
          'use strict';
          if (this == null)
            throw new TypeError('can\'t convert ' + this + ' to object');

          var str = '' + this;
          // To convert string to integer.
          count = +count;
          // Check NaN
          if (count != count)
            count = 0;

          if (count < 0)
            throw new RangeError('repeat count must be non-negative');

          if (count == Infinity)
            throw new RangeError('repeat count must be less than infinity');

          count = Math.floor(count);
          if (str.length == 0 || count == 0)
            return '';

          // Ensuring count is a 31-bit integer allows us to heavily optimize the
          // main part. But anyway, most current (August 2014) browsers can't handle
          // strings 1 << 28 chars or longer, so:
          if (str.length * count >= 1 << 28)
            throw new RangeError('repeat count must not overflow maximum string size');

          var maxCount = str.length * count;
          count = Math.floor(Math.log(count) / Math.log(2));
          while (count) {
             str += str;
             count--;
          }
          str += str.substring(0, maxCount - str.length);
          return str;
        }
      }

    </script>
    
    <script type="application/javascript" src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js"></script>
    
  </head>
  
<body>

  <canvas id="gauge1"></canvas>
  <canvas id="gauge2"></canvas>
        
  <script type="application/javascript">
  
    var gauge1 = new RadialGauge({
        renderTo: 'gauge1',
        width: 200,
        height: 200,
        minValue: 0,
        maxValue: 100,
    }).draw();
    
    var gauge2 = new RadialGauge({
        renderTo: 'gauge2',
        width: 200,
        height: 200,
        minValue: 0,
        maxValue: 100,
    }).draw();
    
  </script>

</body>

</html>

Grüße ... Peter

Shardik · Beitrag von **Shardik** » 22.07.2019 14:43

Hallo Peter,

vielen Dank für Dein zweites Beispiel mit Verwendung des WebGadgets mit Internet Explorer 11 im Edge-Modus, das den Einsatz von RSBasics Ressourcen-intensives Web.Ex_Gadget mit Webkit-Browser umgeht. Beim Ausprobieren sollte man ebenfalls daran denken, im IDE-Menü unter

Compiler > Compiler-Optionen... > Karteireiter "Kompilieren/Starten"

im Rahmen "Executable starten mit:" die Option "Temporäres Executable im Quellcode-Verzeichnis erstellen" zu aktivieren. Zudem sollte noch erwähnt werden, dass bei jedem Start die Abfrage erscheint, ob das Programm Änderungen an dem Computer vornehmen darf.

Außerdem funktioniert leider nicht jeder Start. Nach Starten der IDE, Laden Deines PB-Programms und Start erscheint oft nur ein leeres Fenster mit weißem Hintergrund. Nach Abbruch und erneutem Starten klappt es dann häufig beim zweiten oder dritten Startversuch, manchmal auch direkt beim ersten. Dies ist unabhängig davon, ob PB 5.70 x86 oder x64 verwendet wird. Vielleicht liegt es daran, dass ich zur Zeit im Urlaub bin und wegen fehlendem WLAN mit einem WLAN-Stick per HSDPA mit dem Internet verbunden bin und nicht mit einem schnellen DSL- oder Glasfaser-Anschluss...

Beitrag von **Kiffi** » 22.07.2019 19:07

Shardik hat geschrieben:[...] die Option "Temporäres Executable im Quellcode-Verzeichnis erstellen" zu aktivieren.

ja. Mein Beispiel könnte man noch so erweitern, dass vorher überprüft wird, ob die HTML-Datei vorhanden ist. Man könnte auch alle nötigen Dateien auch in einer DataSection vorhalten und bei Bedarf in einen Temp-Ordner speichern und von dort aus laden. Das hielt ich aber hier im Rahmen einer Machbarkeitsstudie ein wenig für zu übertrieben.

Shardik hat geschrieben:Zudem sollte noch erwähnt werden, dass bei jedem Start die Abfrage erscheint, ob das Programm Änderungen an dem Computer vornehmen darf.

Eigentlich muss der Registry-Eintrag nur einmalig eingetragen werden. Danach nicht mehr. Auch hier könnte man vorher überprüfen, ob dieser Eintrag vorhanden ist und diesen bei Bedarf schreiben.

Shardik hat geschrieben:Außerdem funktioniert leider nicht jeder Start. [...] Vielleicht liegt es daran, dass ich zur Zeit im Urlaub bin und wegen fehlendem WLAN mit einem WLAN-Stick per HSDPA mit dem Internet verbunden bin und nicht mit einem schnellen DSL- oder Glasfaser-Anschluss...

Das würde sich IMO damit erledigen, wenn man die JS-Lib von der lokalen Platte lädt (und nicht von einem CDN). Auch das ist -- wie oben bereits beschrieben -- meiner Faulheit geschuldet, keine full featured demo schreiben zu wollen (zumal sich topsoft bisher mit einem Feedback vornehm zurückhält).

Grüße ... Peter

topsoft · Beitrag von **topsoft** » 25.07.2019 21:27

Hallo,

bin endlich zum Testen gekommen. Bei mit funktioniert es leider nicht.

Ich habe das Ex_WebGadget extrahiert.

Die gauge.html befindet sich im selben Verzeichniss.

Code: Alles auswählen

<html>
  <head>
     <script type="application/javascript" src="./gauge.min.js"></script>
	 <style>body{padding:0;margin:0;background:#222}</style>
   </head>
<body>

  <canvas id="gauge1"></canvas>
  <canvas id="gauge2"></canvas>
       
  <script type="application/javascript">
 
    var gauge1 = new RadialGauge({
        renderTo: 'gauge1',
        width: 200,
        height: 200,
        minValue: 0,
        maxValue: 100,
    }).draw();
   
    var gauge2 = new RadialGauge({
        renderTo: 'gauge2',
        width: 200,
        height: 200,
        minValue: 0,
        maxValue: 100,
    }).draw();
   
  </script>

</body>
</html>

der PureBasic Code

Code: Alles auswählen

EnableExplicit

Global PBEx_WebGadget

#PB_Web_Zoom = 100

CompilerIf #PB_Compiler_Processor = #PB_Processor_x86
  PBEx_WebGadget = OpenLibrary(#PB_Any, "PB.Ex_WebGadget_x86.dll")
CompilerElseIf #PB_Compiler_Processor = #PB_Processor_x64
  PBEx_WebGadget = OpenLibrary(#PB_Any, "PB.Ex_WebGadget_x64.dll")
CompilerEndIf

If PBEx_WebGadget
  Prototype WebGadgetEx(ID, X, Y, Width, Height, URL.p-Unicode, ParentWindowID, ErrorOutput)
  Global WebGadgetEx.WebGadgetEx = GetFunction(PBEx_WebGadget, "WebGadgetEx")
  Prototype SetWebGadgetExText(ID, URL.p-Unicode, ErrorOutput)
  Global SetWebGadgetExText.SetWebGadgetExText = GetFunction(PBEx_WebGadget, "SetWebGadgetExText")
  Prototype GetWebGadgetExText(ID, Output, ErrorOutput)
  Global GetWebGadgetExText.GetWebGadgetExText = GetFunction(PBEx_WebGadget, "GetWebGadgetExText")
  Prototype SetWebGadgetExState(ID, State, ErrorOutput)
  Global SetWebGadgetExState.SetWebGadgetExState = GetFunction(PBEx_WebGadget, "SetWebGadgetExState")
  Prototype SetWebGadgetExItemText(ID, Entry, Text.p-Unicode, ErrorOutput)
  Global SetWebGadgetExItemText.SetWebGadgetExItemText = GetFunction(PBEx_WebGadget, "SetWebGadgetExItemText")
  Prototype GetWebGadgetExItemText(ID, Entry, Output, ErrorOutput)
  Global GetWebGadgetExItemText.GetWebGadgetExItemText = GetFunction(PBEx_WebGadget, "GetWebGadgetExItemText")
  Prototype FreeWebGadgetEx(ID, ErrorOutput)
  Global FreeWebGadgetEx.FreeWebGadgetEx = GetFunction(PBEx_WebGadget, "FreeWebGadgetEx")
  Prototype IsWebGadgetEx(ID, ErrorOutput)
  Global IsWebGadgetEx.IsWebGadgetEx = GetFunction(PBEx_WebGadget, "IsWebGadgetEx")
  Prototype WebGadgetExWidth(ID, ErrorOutput)
  Global WebGadgetExWidth.WebGadgetExWidth = GetFunction(PBEx_WebGadget, "WebGadgetExWidth")
  Prototype WebGadgetExHeight(ID, ErrorOutput)
  Global WebGadgetExHeight.WebGadgetExHeight = GetFunction(PBEx_WebGadget, "WebGadgetExHeight")
  Prototype WebGadgetExX(ID, ErrorOutput)
  Global WebGadgetExX.WebGadgetExX = GetFunction(PBEx_WebGadget, "WebGadgetExX")
  Prototype WebGadgetExY(ID, ErrorOutput)
  Global WebGadgetExY.WebGadgetExY = GetFunction(PBEx_WebGadget, "WebGadgetExY")
  Prototype WebGadgetExID(ID, ErrorOutput)
  Global WebGadgetExID.WebGadgetExID = GetFunction(PBEx_WebGadget, "WebGadgetExID")
  Prototype HideWebGadgetEx(ID, State, ErrorOutput)
  Global HideWebGadgetEx.HideWebGadgetEx = GetFunction(PBEx_WebGadget, "HideWebGadgetEx")
  Prototype ResizeWebGadgetEx(ID, X, Y, Width, Height, ErrorOutput)
  Global ResizeWebGadgetEx.ResizeWebGadgetEx = GetFunction(PBEx_WebGadget, "ResizeWebGadgetEx")
  Prototype HideWebGadgetExDevTools(ID, State, ErrorOutput)
  Global HideWebGadgetExDevTools.HideWebGadgetExDevTools = GetFunction(PBEx_WebGadget, "HideWebGadgetExDevTools")
  Prototype ExecuteWebGadgetExJavaScript(ID, Code.p-Unicode, Output, ErrorOutput)
  Global ExecuteWebGadgetExJavaScript.ExecuteWebGadgetExJavaScript = GetFunction(PBEx_WebGadget, "ExecuteWebGadgetExJavaScript")
  Prototype BindWebGadgetExJavaScript(ID, PBProcedureName.p-Unicode, PBProcedureHandle, PID, ErrorOutput)
  Global BindWebGadgetExJavaScript.BindWebGadgetExJavaScript = GetFunction(PBEx_WebGadget, "BindWebGadgetExJavaScript")
  Prototype GetWebGadgetExAttribute(ID, Attribute, ErrorOutput)
  Global GetWebGadgetExAttribute.GetWebGadgetExAttribute = GetFunction(PBEx_WebGadget, "GetWebGadgetExAttribute")
  Prototype SetWebGadgetExAttribute(ID, Attribute, Value, ErrorOutput)
  Global SetWebGadgetExAttribute.SetWebGadgetExAttribute = GetFunction(PBEx_WebGadget, "SetWebGadgetExAttribute")
  Prototype EnableRemoteDebugger(Port, ErrorOutput)
  Global EnableRemoteDebugger.EnableRemoteDebugger = GetFunction(PBEx_WebGadget, "EnableRemoteDebugger")
 
EndIf

Define Output$ = Space(1000000)
Define ErrorOutput$ = Space(128)

#Window = 0
#WebGadgetEx = 0
#Timer = 0

OpenWindow(#Window, 0, 0, 450, 250, "GaugeDemo", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
If WebGadgetEx(#WebGadgetEx, 0, 0, 450, 250, "Gauge.html", WindowID(0), @ErrorOutput$)
  Debug "OK"
Else
  Debug ErrorOutput$
EndIf
AddWindowTimer(#Window, #Timer, 1000)
Repeat
  Select WaitWindowEvent()
     
    Case #PB_Event_Timer
     
      Select EventTimer()
         
        Case #Timer
          Debug ExecuteWebGadgetExJavaScript(#WebGadgetEx, "gauge1.value=" + Random(100) + ";", @Output$, @ErrorOutput$)
          Debug output$
          Debug ErrorOutput$
          ExecuteWebGadgetExJavaScript(#WebGadgetEx, "gauge2.value=" + Random(100) + ";", @Output$, @ErrorOutput$)
          Debug output$
          Debug ErrorOutput$
      EndSelect
     
    Case #PB_Event_CloseWindow
      CloseLibrary(PBEx_WebGadget)
      End
  EndSelect
ForEver

die Compiler Einstellungen

Das JS liefert als Fehler :

Code: Alles auswählen

Uncaught ReferenceError: gauge1 is not defined
@ :1:0
Uncaught ReferenceError: gauge2 is not defined
@ :1:0

Bestimmt habe ich etwas übersehen.

Beitrag von **Kiffi** » 25.07.2019 22:33

topsoft hat geschrieben:Bestimmt habe ich etwas übersehen.

ja:

Code: Alles auswählen

If WebGadgetEx(#WebGadgetEx, 0, 0, 450, 250, GetPathPart(ProgramFilename()) + "Gauge.html", WindowID(0), @ErrorOutput$)

topsoft · Beitrag von **topsoft** » 26.07.2019 19:50

Hi, leider geht das auch nicht.

folgender Code:

Code: Alles auswählen

OpenWindow(#Window, 0, 0, 450, 250, "GaugeDemo", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
Debug GetPathPart(ProgramFilename()) + "Gauge.html"
If  WebGadgetEx(#WebGadgetEx, 0, 0, 450, 250, GetPathPart(ProgramFilename()) + "Gauge.html", WindowID(0), @ErrorOutput$) = 1
  Debug "WebGadgetEx OK"
Else
  Debug "WebGadgetEx Fehler"
  Debug ErrorOutput$
EndIf
  
AddWindowTimer(#Window, #Timer, 1000)
Repeat
  Select WaitWindowEvent()
     
    Case #PB_Event_Timer
     
      Select EventTimer()
         
        Case #Timer
          If ExecuteWebGadgetExJavaScript(#WebGadgetEx, "gauge1.value=" + Random(100) + ";", @Output$, @ErrorOutput$) = 1
            Debug "ExecuteWebGadgetExJavaScript OK"
          Else
            Debug "ExecuteWebGadgetExJavaScript Fehler"
            Debug Output$
            Debug ErrorOutput$
          EndIf
          If ExecuteWebGadgetExJavaScript(#WebGadgetEx, "gauge2.value=" + Random(100) + ";", @Output$, @ErrorOutput$) = 1
            Debug "ExecuteWebGadgetExJavaScript OK"
          Else
            Debug "ExecuteWebGadgetExJavaScript Fehler"
            Debug Output$
            Debug ErrorOutput$
          EndIf
      EndSelect
     
    Case #PB_Event_CloseWindow
      CloseLibrary(PBEx_WebGadget)
      End
  EndSelect
ForEver

führt zu folgendem Debug Output:

Code: Alles auswählen

B:\Gauge.html
WebGadgetEx OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK
ExecuteWebGadgetExJavaScript OK

Im Fenster tut sich nichts.

Gruß Rene

Beitrag von **Kiffi** » 26.07.2019 20:23

(Keine Rückmeldung)

macht mich stutzig.

Verwendest Du x86 oder x64? x86 kann ich nicht testen, weil mein Virenscanner die EXE weglöscht.

Beitrag von **RSBasic** » 26.07.2019 20:28

@topsoft
Hast du versucht, ohne Antivirenprogramm zu starten?
Und hast du auch versucht, nicht auf RAMDisk zu starten?

Ich habe es auch mal getestet und alles heruntergeladen und Teile deines Codes in meinen Beispielcode übernommen. Bei mir funktioniert es. Sowohl x86 als auch x64.
Bild

Mein Beispielcode:

Code: Alles auswählen

;Version: 1.0.8.0

EnableExplicit

Global PBEx_WebGadget

#PBEx_WebGadgetEx_Version$ = "1.0.8.0"
#PB_Web_Zoom = 100

CompilerIf #PB_Compiler_Processor = #PB_Processor_x86
  PBEx_WebGadget = OpenLibrary(#PB_Any, "PB.Ex_WebGadget_x86.dll")
CompilerElseIf #PB_Compiler_Processor = #PB_Processor_x64
  PBEx_WebGadget = OpenLibrary(#PB_Any, "PB.Ex_WebGadget_x64.dll")
CompilerEndIf

If PBEx_WebGadget
  Prototype WebGadgetEx(ID, X, Y, Width, Height, URL.p-Unicode, ParentWindowID, ErrorOutput)
  Global WebGadgetEx.WebGadgetEx = GetFunction(PBEx_WebGadget, "WebGadgetEx")
  Prototype SetWebGadgetExText(ID, URL.p-Unicode, ErrorOutput)
  Global SetWebGadgetExText.SetWebGadgetExText = GetFunction(PBEx_WebGadget, "SetWebGadgetExText")
  Prototype GetWebGadgetExText(ID, Output, ErrorOutput)
  Global GetWebGadgetExText.GetWebGadgetExText = GetFunction(PBEx_WebGadget, "GetWebGadgetExText")
  Prototype SetWebGadgetExState(ID, State, ErrorOutput)
  Global SetWebGadgetExState.SetWebGadgetExState = GetFunction(PBEx_WebGadget, "SetWebGadgetExState")
  Prototype SetWebGadgetExItemText(ID, Entry, Text.p-Unicode, ErrorOutput)
  Global SetWebGadgetExItemText.SetWebGadgetExItemText = GetFunction(PBEx_WebGadget, "SetWebGadgetExItemText")
  Prototype GetWebGadgetExItemText(ID, Entry, Output, ErrorOutput)
  Global GetWebGadgetExItemText.GetWebGadgetExItemText = GetFunction(PBEx_WebGadget, "GetWebGadgetExItemText")
  Prototype FreeWebGadgetEx(ID, ErrorOutput)
  Global FreeWebGadgetEx.FreeWebGadgetEx = GetFunction(PBEx_WebGadget, "FreeWebGadgetEx")
  Prototype IsWebGadgetEx(ID, ErrorOutput)
  Global IsWebGadgetEx.IsWebGadgetEx = GetFunction(PBEx_WebGadget, "IsWebGadgetEx")
  Prototype WebGadgetExWidth(ID, ErrorOutput)
  Global WebGadgetExWidth.WebGadgetExWidth = GetFunction(PBEx_WebGadget, "WebGadgetExWidth")
  Prototype WebGadgetExHeight(ID, ErrorOutput)
  Global WebGadgetExHeight.WebGadgetExHeight = GetFunction(PBEx_WebGadget, "WebGadgetExHeight")
  Prototype WebGadgetExX(ID, ErrorOutput)
  Global WebGadgetExX.WebGadgetExX = GetFunction(PBEx_WebGadget, "WebGadgetExX")
  Prototype WebGadgetExY(ID, ErrorOutput)
  Global WebGadgetExY.WebGadgetExY = GetFunction(PBEx_WebGadget, "WebGadgetExY")
  Prototype WebGadgetExID(ID, ErrorOutput)
  Global WebGadgetExID.WebGadgetExID = GetFunction(PBEx_WebGadget, "WebGadgetExID")
  Prototype HideWebGadgetEx(ID, State, ErrorOutput)
  Global HideWebGadgetEx.HideWebGadgetEx = GetFunction(PBEx_WebGadget, "HideWebGadgetEx")
  Prototype ResizeWebGadgetEx(ID, X, Y, Width, Height, ErrorOutput)
  Global ResizeWebGadgetEx.ResizeWebGadgetEx = GetFunction(PBEx_WebGadget, "ResizeWebGadgetEx")
  Prototype HideWebGadgetExDevTools(ID, State, ErrorOutput)
  Global HideWebGadgetExDevTools.HideWebGadgetExDevTools = GetFunction(PBEx_WebGadget, "HideWebGadgetExDevTools")
  Prototype ExecuteWebGadgetExJavaScript(ID, Code.p-Unicode, Output, ErrorOutput)
  Global ExecuteWebGadgetExJavaScript.ExecuteWebGadgetExJavaScript = GetFunction(PBEx_WebGadget, "ExecuteWebGadgetExJavaScript")
  Prototype BindWebGadgetExJavaScript(ID, PBProcedureName.p-Unicode, PBProcedureHandle, PID, ErrorOutput)
  Global BindWebGadgetExJavaScript.BindWebGadgetExJavaScript = GetFunction(PBEx_WebGadget, "BindWebGadgetExJavaScript")
  Prototype GetWebGadgetExAttribute(ID, Attribute, ErrorOutput)
  Global GetWebGadgetExAttribute.GetWebGadgetExAttribute = GetFunction(PBEx_WebGadget, "GetWebGadgetExAttribute")
  Prototype SetWebGadgetExAttribute(ID, Attribute, Value, ErrorOutput)
  Global SetWebGadgetExAttribute.SetWebGadgetExAttribute = GetFunction(PBEx_WebGadget, "SetWebGadgetExAttribute")
  Prototype EnableRemoteDebugger(Port, ErrorOutput)
  Global EnableRemoteDebugger.EnableRemoteDebugger = GetFunction(PBEx_WebGadget, "EnableRemoteDebugger")
  Prototype SetWebGadgetExSetUserAgent(UserAgent.p-Unicode, ErrorOutput)
  Global SetWebGadgetExSetUserAgent.SetWebGadgetExSetUserAgent = GetFunction(PBEx_WebGadget, "SetWebGadgetExSetUserAgent")
  
EndIf

Define Output$ = Space(1000000)
Define ErrorOutput$ = Space(128)

#WebGadgetEx = 1
#Timer = 1

If OpenWindow(0, 0, 0, 1200, 768, "Window", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  WebGadgetEx(#WebGadgetEx, 0, 0, 1200, 768, GetPathPart(ProgramFilename()) + "gauge.html", WindowID(0), @ErrorOutput$)
  
  AddWindowTimer(0, #Timer, 1000)
  
  Repeat
    Select WaitWindowEvent()
      Case #PB_Event_Gadget
        Select EventGadget()
          Case #WebGadgetEx
            
        EndSelect
      Case #PB_Event_Timer
        
        Select EventTimer()
            
          Case #Timer
            If ExecuteWebGadgetExJavaScript(#WebGadgetEx, "gauge1.value=" + Random(100) + ";", @Output$, @ErrorOutput$) = 1
              Debug "ExecuteWebGadgetExJavaScript OK"
            Else
              Debug "ExecuteWebGadgetExJavaScript Fehler"
              Debug Output$
              Debug ErrorOutput$
            EndIf
            If ExecuteWebGadgetExJavaScript(#WebGadgetEx, "gauge2.value=" + Random(100) + ";", @Output$, @ErrorOutput$) = 1
              Debug "ExecuteWebGadgetExJavaScript OK"
            Else
              Debug "ExecuteWebGadgetExJavaScript Fehler"
              Debug Output$
              Debug ErrorOutput$
            EndIf
        EndSelect
      Case #PB_Event_CloseWindow
        CloseLibrary(PBEx_WebGadget)
        End
    EndSelect
  ForEver
EndIf

PureBoard

Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget

Re: Canvas Based HTML5 Gauge im WebGadget