Canvas Based HTML5 Gauge im WebGadget

Für allgemeine Fragen zur Programmierung mit PureBasic.
topsoft
Beiträge: 67
Registriert: 16.09.2004 11:55
Wohnort: nrw

Re: Canvas Based HTML5 Gauge im WebGadget

Beitrag von topsoft »

Hi,
jetzt wird es kurios.

test.pb

Code: Alles auswählen

If OpenWindow(0, 0, 0, 1024, 768, "Window", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
  WebGadgetEx(#WebGadgetEx, 0, 0, 1024, 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(8) + ";", @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
Gauge.html:

Code: Alles auswählen

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script type="application/javascript" src="./gauge.min.js"></script>
   
  </head>
<body style="width:100%;height:100%">

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

</body>
</html>
Ausgabe:
Bild

Ich habe nichts gesehen weil es ausserhalb des angezeigten Bereichs war. Nur warum und wie bekomme ich das nach {0,0}?
Ausserdem werden die min und max Einstellungen (0, 50) in der Anzeige ignoriert. Ob es auf der Ramdisk oder einer SSD ausgeführt wird ist dabei egal.
Würde mich auch wundern die Ramdisk ist 32 GB gross. Hier läuft ein Win10 X64.

Gruß Rene
Zuletzt geändert von topsoft am 28.07.2019 21:55, insgesamt 1-mal geändert.
Skylake QuadCore i7 6700K @4400MHz, MSI Z170A Gaming M5, 64 GB DDR4 @ 2133MHz, B: Ramdisk 32GB, C: Raid0 SATA SSD 1TB, D: Raid0 M2 SSD 1TB, E: Raid0 HDD 8TB, 28" 4K @ RTX2080, Win10 X64
topsoft
Beiträge: 67
Registriert: 16.09.2004 11:55
Wohnort: nrw

Re: Canvas Based HTML5 Gauge im WebGadget

Beitrag von topsoft »

Ich hab die gauge.min.js mal Formatiert. Jetzt braucht man nur noch die js2pb.exe. ;-)

Datei von filehorst.de laden
Skylake QuadCore i7 6700K @4400MHz, MSI Z170A Gaming M5, 64 GB DDR4 @ 2133MHz, B: Ramdisk 32GB, C: Raid0 SATA SSD 1TB, D: Raid0 M2 SSD 1TB, E: Raid0 HDD 8TB, 28" 4K @ RTX2080, Win10 X64
Benutzeravatar
Kiffi
Beiträge: 10711
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: Canvas Based HTML5 Gauge im WebGadget

Beitrag von Kiffi »

Dein Screenshot sieht sehr seltsam aus. Bei mir und RSBasic gibt es diesen X/Y - Offset nicht.

Hast Du irgendein Tool im Hintergrund laufen, welches die Browser-Ansicht beeinflusst?
topsoft hat geschrieben:Ausserdem werden die min und max Einstellungen (0, 50) in der Anzeige ignoriert.
Das Gauge kann man umfangreich konfigurieren. Bei Dir fehlt die Angabe der majorTicks:

Code: Alles auswählen

majorTicks: [
  '0','10','20','30','40','50'
],
siehe: https://canvas-gauges.com/documentation ... ipting-api
a²+b²=mc²
topsoft
Beiträge: 67
Registriert: 16.09.2004 11:55
Wohnort: nrw

Re: Canvas Based HTML5 Gauge im WebGadget

Beitrag von topsoft »

Ah ja werde ich mir anschauen.

Der Offset im Fenster kommt von der Skalierung der Anzeige. Ich habe zwei 28' Monitore mit jeweils 4k und die Skalierung auf 200%. Stelle ich diese auf 100% zurück ist alles in Ordnung (bis auf die Scrollbalken). Leider kann ich dann auf den Monitoren kaum noch was erkennen.

Bild

Gruß Rene
Skylake QuadCore i7 6700K @4400MHz, MSI Z170A Gaming M5, 64 GB DDR4 @ 2133MHz, B: Ramdisk 32GB, C: Raid0 SATA SSD 1TB, D: Raid0 M2 SSD 1TB, E: Raid0 HDD 8TB, 28" 4K @ RTX2080, Win10 X64
Benutzeravatar
Kiffi
Beiträge: 10711
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: Canvas Based HTML5 Gauge im WebGadget

Beitrag von Kiffi »

topsoft hat geschrieben:Ich habe zwei 28' Monitore mit jeweils 4k und die Skalierung auf 200%.
mh, ok, das könnte es sein.

High DPI Displays/Support

Ich glaube, das wäre dann ein feature request für RSBasic.
a²+b²=mc²
Benutzeravatar
RSBasic
Admin
Beiträge: 8047
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: Canvas Based HTML5 Gauge im WebGadget

Beitrag von RSBasic »

Ich kann es (nicht immer) mit 125 % DPI nachstellen.
Es ist auch egal, ob ich die Compiler-Checkbox "DPI-kompatibles Executable (Windows) erstellen" aktiviere oder deaktiviere und ob ich mit der originalen DLL-Datei oder mit der von mir grad erstellte und angepasste DLL-Datei mit aktivierter oder deaktivierter DPI-Unterstützung ausführe.
Mal gehts, mal gehts nicht. Je nach Compiler-Einstellung wird es skaliert oder nicht, aber hat nichts mit der Positionierung zu tun. Ich schätze mal, das passiert, weil das erstellte Gadget von außen in ein fremdes PB-Fenster implementiert wird und bei bestimmter DPI-Skalierung wird das innere HTML-Element falsch positioniert.

@topsoft
Kannst du in deinem Code einen Button hinzufügen und als Klick-Event folgenden Code einfügen und damit testen?

Code: Alles auswählen

ResizeWebGadgetEx(#WebGadgetEx, 0, 0, 0, 0, @ErrorOutput$)
ResizeWebGadgetEx(#WebGadgetEx, 0, 0, 1200, 768, @ErrorOutput$)
Wird es danach bei dir richtig positioniert und korrekt angezeigt?
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
topsoft
Beiträge: 67
Registriert: 16.09.2004 11:55
Wohnort: nrw

Re: Canvas Based HTML5 Gauge im WebGadget

Beitrag von topsoft »

Nein bringt leider keine Besserung.
vor klick:
Bild
nach klick:
Bild
Gruß Rene
Skylake QuadCore i7 6700K @4400MHz, MSI Z170A Gaming M5, 64 GB DDR4 @ 2133MHz, B: Ramdisk 32GB, C: Raid0 SATA SSD 1TB, D: Raid0 M2 SSD 1TB, E: Raid0 HDD 8TB, 28" 4K @ RTX2080, Win10 X64
Benutzeravatar
Kiffi
Beiträge: 10711
Registriert: 08.09.2004 08:21
Wohnort: Amphibios 9

Re: Canvas Based HTML5 Gauge im WebGadget

Beitrag von Kiffi »

@Ray: Kannst Du das mal mit dem EnableHighDPISupport() ausprobieren?
High DPI Displays/Support hat geschrieben:WinForms
Add the relevant app.manifest entries and call Cef.EnableHighDPISupport(). It's best make that the first call in your application entry point.
a²+b²=mc²
Benutzeravatar
RSBasic
Admin
Beiträge: 8047
Registriert: 05.10.2006 18:55
Wohnort: Gernsbach
Kontaktdaten:

Re: Canvas Based HTML5 Gauge im WebGadget

Beitrag von RSBasic »

Das habe ich bereits getestet, aber das Problem tritt trotzdem auf.
Mit dem Workaround ResizeWebGadgetEx() konnte ich das Problem, welches ich hier nachstellen konnte, beheben.
Ich schau später nochmal nach, ob ich eine andere Möglichkeit finde.
Aus privaten Gründen habe ich leider nicht mehr so viel Zeit wie früher. Bitte habt Verständnis dafür.
Bild
Bild
Antworten