Canvas Based HTML5 Gauge im WebGadget

[topsoft]

Hallo,

gibt es eine Möglichkeit die "Canvas Based HTML5 Gauge" z.B. im WebGadget nutzbar zu machen?

https://canvas-gauges.com/documentation/examples/

Gruß Rene

[RSBasic]

Benutzt du Windows? Wenn ja, dann kannst du folgende Bibliothek verwenden: viewtopic.php?f=11&t=31422
Damit hast du Webkit und du kannst CSS3 und HTML5 voll nutzen.

Alternativ kannst du in der Windows Registry einen Eintrag für dein Programm mit dem originalen WebGadget (Standard mit Internet Explorer 7) erstellen, so dass dein WebGadget stattdessen die aktuelle IE-Version verwendet. Der IE 11 kann zwar CSS3 und HTML5, aber trotzdem nicht alles, was z.B. der Chrome (WebKit) kann.
Um zu prüfen, welche Befehle unter IE 11 unterstützt werden, kannst du hier prüfen: https://caniuse.com/

[Blitzer]

1) Ein Gauge dient immer zur Darstellung und Bestimmung einer messtechnischen Größe; aber nur in Verbindung mit einem Messgerät (Messuhr, Temperatur, usw.), kann eine Darstellung erfolgen.

2) Was hier fehlt, ist z.B. ein einfacher Drehknopf (Radiosender, Lautstärkeknopf, Heizungsregler, usw.), bedienbar mit Maus oder als Touch.

Nicht blenden lassen... Also einfach gesagt, nach dem Output mittels Gauge kommt ein Input, z.B.mit einem Drehknopf.

Punkt 2) fehlt hier gänzlich. Erst wenn 1) und 2) vorhanden ist, macht eine Weiterverarbeitung von Daten erst Sinn.

Meine messtechnischen Projekte waren u.a. serverbasiert mit einer bunten Mischung verschiedener Schnittstellen.

Achtung: Ein Gauge ist "nur" der Einstieg in dieses komplexe Thema...

Blitzer

[topsoft]

Hi,

ich suche eigentlich nur eine Möglichkeit Messwerte als analoges Anzeigeinstrument in dem GUI darzustellen.
Mir ist dazu nichts anderes als die Canvas based Gauge eingefallen.

Gruß Rene

[mk-soft]

Mit den CanvasGadget und der VectorDrawing selber erstellen...

Vielleicht habe ich noch Zeit ein kleines Beispiel zu schreiben

[topsoft]

Vielleicht habe ich noch Zeit ein kleines Beispiel zu schreiben

Das wäre sehr cool.

[Shardik]

Du könntest Dir auch dieses Beispiel von Trond aus dem englischen Forum anschauen. Du musst lediglich vor dem ersten Start in 4 CreateImage()-Anweisungen

Code: Alles auswählen

32 | #PB_Image_Transparent

in

Code: Alles auswählen

32, #PB_Image_Transparent

abändern, da sich die PureBasic-Syntax bei CreateImage() mittlerweile geändert hat.

[topsoft]

Du könntest Dir auch dieses Beispiel von Trond aus dem englischen Forum anschauen.

Ich will keinem zu nahe Treten oder die Arbeit von anderen schlecht machen. Hier mal der direkte Vergleich.



Was sagt ihr? Ich würde das zweite benutzen wollen.

Gruß Rene

[Kiffi]

1.) PB.Ex WebGadget (Windows) (WebKit) herunterladen und entpacken.

2.) Folgenden Code unter Gauge.pb in den Ordner x64 oder x86 speichern:

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)
WebGadgetEx(#WebGadgetEx, 0, 0, 450, 250, GetPathPart(ProgramFilename()) + "Gauge.html", WindowID(0), @ErrorOutput$)
AddWindowTimer(#Window, #Timer, 1000)
Repeat
  Select WaitWindowEvent()
      
    Case #PB_Event_Timer
      
      Select EventTimer()
          
        Case #Timer
          ExecuteWebGadgetExJavaScript(#WebGadgetEx, "gauge1.value=" + Random(100) + ";", @Output$, @ErrorOutput$)
          ExecuteWebGadgetExJavaScript(#WebGadgetEx, "gauge2.value=" + Random(100) + ";", @Output$, @ErrorOutput$)
          
      EndSelect
      
    Case #PB_Event_CloseWindow
      CloseLibrary(PBEx_WebGadget)
      End
  EndSelect
ForEver

3.) Folgenden Code unter Gauge.html im gleichen Ordner wie den PB-Code oben abspeichern:

Code: Alles auswählen

<html>
  <head>
  
    <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]

@Peter,
vielen Dank für die Schritt-für-Schritt-Anleitung zur Anzeige der GaugeDemo mit RSBasics PB.Ex_WebGadget. 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).

Was sagt ihr? Ich würde das zweite benutzen wollen.

Natürlich würde jeder die zweite Version benutzen wollen. Aber ein direkter Vergleich ist auch sehr unfair: während Tronds Beispiel als Exe-Datei 84 KB groß ist, benötigt Kiffis Code und RSBasics PB.Ex_WebGadget mit WebKit schon allein 180 MB, und dabei ist das per HTML noch zu ladende Javascript Gauge-Instrument noch nicht mitgerechnet. Außerdem hast Du Tronds GaugeGadget für den Vergleich mit dem Javascript Gauge-Instrument auch noch vergrößert. Dadurch wird es natürlich viel pixeliger als es so schon ist. Dies ist die Originalgröße:

Zur Zeit der damaligen Veröffentlichung gab es in PureBasic die VectorDrawing-Bibliothek noch nicht, die man heute dafür verwenden würde und die keinerlei hässliche Pixel (auch nicht bei einer Vergrößerung) zeigen würde.

Der Vorteil einer reinen PureBasic-Lösung ist die leichtere Wartbarkeit und der Umstand, dass man nicht auf externe Abhängigkeiten angewiesen ist. Was passiert, wenn sich der Pfad zum Javascript-Instrument ändert, z.B. weil eine neue Version herauskommt? Und vom Browser oder von CefSharp?

Hier sind noch zwei weitere PureBasic-Beispiele in Originalgröße:

Ein Beispiel von jasper mit Erweiterungen von Bisonte mit Verwendung der Ogre 3D-Engine:



Ein Beispiel von einander:



Natürlich ist keins der Beispiele zur Zeit konkurrenzfähig mit den fast fotorealistischen Javascript-Instrumenten, aber sie sind zumindest ausbaufähig und leichter wartbar...