Kleine Widgets mit Speedometer wie PRTG

Vor längerer Zeit hatte ich mir mal das PRTG-DEMO-System angeschaut.

Mir gefielen die kleine Speedometer, die das PRTG-Logo beinhalten ganz gut. Da ich aber mehr mit Bootstrap und anderen Performance-Management-Tools arbeite, wollte ich das relativ prtg1kompakte Widget mal mit Bootstrap nachbauen.

Das Speedometer ist ein SVG, welches aus mehreren Elementen besteht. Die Skala des Speedometers besteht aus einigen Kreisausschnitten (path-Elemente) und würde einem bunten PIE-Chart entsprechen.
Unten wird der PIE-Chart dann in den unteren 10% der Höhe abgeschnitten. Dies geschiet durch ein Rechteck (rect-Element) in Hintergrundfarbe.
Über diesen Pie-Chart wurde dann  noch ein Kreis (circle) in Hintergrundfarbe und einem deutlichen Versatz zum Zentrum des PIE-Charts gesetzt. Dadurch ergibt sich die Skala.
In meinem Beispiel habe ich dem Kreis eine helle Umrandung gegeben, so dass man ihn erkennen kann.
Final wird ein Polygon (path) als Zeiger darübergelegt und einfach in einem passenden Winkel, hier 333.37 gedreht. Per Javascript müsste man diesen Winkel nur entsprechend dem letzten Messwert aktualisieren.

<svg width="52" height="50"  style="background-color:#eee;">
  <path d="M23,50 a25,25 0 1,0 3,-50" fill="#ffC705" stroke="#fff" stroke-width="2px" /><!--Orange-->
  <path d="M0,25  a25,25 0 0,0 50,0" fill="#ff0000" stroke="#eee" stroke-width="2px"/><!--red-->
  <path d="M26,0 a25,25 0 0,0 -3,50" fill="#5cB85c" stroke="#fff" stroke-width="2px"/><!--green-->
  <rect x="0" y="40" width="50" height="40"   style="fill: #eee;" />
  <circle style="fill: #eee;" r="19" cy="30" cx="22" fill="#eee" stroke="#fff" stroke-width="2px"></circle> 
   <g transform="translate(22,30) rotate(333.37)">
      <path style="fill: rgb(255, 0, 0); stroke: rgb(255, 0, 0); fill-opacity: 0.9;" d="M0,-23L0.19206,-18C0.3,-15,0.8,-6.7,0.9,-2.4C1,1.9,0.9,2.4,0.6,2.6C0.2,2.9,-0.28808999999999996,2.8809000000000005,-0.6241949999999999,2.6408250000000004C-0.9602999999999999,2.4007500000000004,-1.05633,1.9206000000000003,-0.912285,-2.4007500000000004C-0.76824,-6.722100000000001,-0.38412,-14.884650000000002,-0.19206,-18.965925000000002L0,-23.047200000000004"></path>
   </g>
</svg>

 

Hier die Test-Datei: http://hman-projects.de/extraSite/fake/prtg_widget1.html

Die Bootstrap-Variante unterscheidet sich mehr oder weniger von der originalen PRTG-Variante, die ich so ca. 2014 bei Paessler vorgefunden hatte.

Bei einer heutigen Kontrolle der Paessler Webseite kann man erkennen, dass Paessler die Widgets nun wesentlich kompakter macht und auf einige Elemente verzichtet.

Dieses Beispiel habe ich hier aufgeführt, um zu zeigen, wie man ein Speedometer in HTML, SVG und Bootstrap realisieren kann.

Das PATH-Element in SVG ist nicht so simpel, daher hier noch ein einfacheres Beispiel und Erläuterung der Variablen:

<svg width=“135″ height=“135″>
<path d=“M125,85 a60,60 0 1,0 -115,0″ fill=“#E79A16″ /><!–Top Half–>
<path d=“M10,85 a60,60 0 0,0 115,0″ fill=“#D78500″ /><!–Bottom Half–>
</svg>

M = Move To: X, Y
L = Line
a = Bogenkurve http://svg.tutorial.aptico.de/start2.php?knr=10&kname=Pfade
Der Anweisung „A“ oder „a“ müssen 5 Werte und ein Koordinatenpunkt folgen:
1.    der Radius der x-Achse der Ellipse
2.    der Radius der y-Achse der Ellipse
3.    die Rotation der x-Achse der Ellipse in Grad   (0 bedeutet keine Rotation)
4.    das large-arc-flag:
0 für den kurzen Weg um die Ellipse
1 für den langen Weg um die Ellipse
5   das sweep-flag:
0 für Zeichnung entgegen den Uhrzeigersinn
1 für Zeichnung mit dem Uhrzeigersinn
6   die Koordinaten des Endpunktes.

<paths d=“M50,25 a25,25 0 1,0 -50,0″ fill=“#ffC705″ stroke=“#eee“ stroke-width=“2px“ /><!–Top Half–>
<paths d=“M0,25  a25,25 0 0,0 50,0″ fill=“#5cB85c“ stroke=“#eee“ stroke-width=“2px“/><!–Bottom Half–>

 


Posted

in

,

by

Tags: