{"id":234,"date":"2017-06-18T17:47:05","date_gmt":"2017-06-18T16:47:05","guid":{"rendered":"http:\/\/www.hman-projects.de\/?p=234"},"modified":"2017-07-23T14:31:58","modified_gmt":"2017-07-23T13:31:58","slug":"kleine-widgets-mit-speedometer-wie-prtg","status":"publish","type":"post","link":"https:\/\/www.hman-projects.de\/?p=234","title":{"rendered":"Kleine Widgets mit Speedometer wie PRTG"},"content":{"rendered":"

Vor l\u00e4ngerer Zeit hatte ich mir mal das PRTG-DEMO-System angeschaut.<\/p>\n

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 \"prtg1\"<\/a>kompakte Widget mal mit Bootstrap nachbauen.<\/p>\n

Das Speedometer ist ein SVG, welches aus mehreren Elementen besteht. Die Skala des Speedometers besteht aus einigen Kreisausschnitten (path-Elemente) und w\u00fcrde einem bunten PIE-Chart entsprechen.
\nUnten wird der PIE-Chart dann in den unteren 10% der H\u00f6he abgeschnitten. Dies geschiet durch ein Rechteck (rect-Element) in Hintergrundfarbe.
\n\u00dcber diesen Pie-Chart wurde dann\u00a0 noch ein Kreis (circle) in Hintergrundfarbe und einem deutlichen Versatz zum Zentrum des PIE-Charts gesetzt. Dadurch ergibt sich die Skala.
\nIn meinem Beispiel habe ich dem Kreis eine helle Umrandung gegeben, so dass man ihn erkennen kann.
\nFinal wird ein Polygon (path) als Zeiger dar\u00fcbergelegt und einfach in einem passenden Winkel, hier 333.37 gedreht. Per Javascript m\u00fcsste man diesen Winkel nur entsprechend dem letzten Messwert aktualisieren.<\/p>\n

<svg width=\"52\" height=\"50\"\u00a0 style=\"background-color:#eee;\">\r\n\u00a0 <path d=\"M23,50 a25,25 0 1,0 3,-50\" fill=\"#ffC705\" stroke=\"#fff\" stroke-width=\"2px\" \/><!--Orange-->\r\n\u00a0 <path d=\"M0,25\u00a0 a25,25 0 0,0 50,0\" fill=\"#ff0000\" stroke=\"#eee\" stroke-width=\"2px\"\/><!--red-->\r\n\u00a0 <path d=\"M26,0 a25,25 0 0,0 -3,50\" fill=\"#5cB85c\" stroke=\"#fff\" stroke-width=\"2px\"\/><!--green-->\r\n\u00a0 <rect x=\"0\" y=\"40\" width=\"50\" height=\"40\"\u00a0\u00a0 style=\"fill: #eee;\" \/>\r\n\u00a0 <circle style=\"fill: #eee;\" r=\"19\" cy=\"30\" cx=\"22\" fill=\"#eee\" stroke=\"#fff\" stroke-width=\"2px\"><\/circle> \r\n\u00a0\u00a0 <g transform=\"translate(22,30) rotate(333.37)\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 <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>\r\n\u00a0\u00a0 <\/g>\r\n<\/svg><\/pre>\n
 <\/p>\n
Hier die Test-Datei: http:\/\/hman-projects.de\/extraSite\/fake\/prtg_widget1.html<\/a><\/p>\n
Die Bootstrap-Variante unterscheidet sich mehr oder weniger von der originalen PRTG-Variante, die ich so ca. 2014 bei Paessler vorgefunden hatte.<\/p>\n
Bei einer heutigen Kontrolle der Paessler Webseite kann man erkennen, dass Paessler die Widgets nun wesentlich kompakter macht und auf einige Elemente verzichtet.<\/p>\n
Dieses Beispiel habe ich hier aufgef\u00fchrt, um zu zeigen, wie man ein Speedometer in HTML, SVG und Bootstrap realisieren kann.<\/p>\n
Das PATH-Element in SVG ist nicht so simpel, daher hier noch ein einfacheres Beispiel und Erl\u00e4uterung der Variablen:<\/p>\n
<svg width=“135″ height=“135″>
\n<path d=“M125,85 a60,60 0 1,0 -115,0″ fill=“#E79A16″ \/><!–Top Half–>
\n<path d=“M10,85 a60,60 0 0,0 115,0″ fill=“#D78500″ \/><!–Bottom Half–>
\n<\/svg><\/p>\n
M = Move To: X, Y
\nL = Line
\na = Bogenkurve http:\/\/svg.tutorial.aptico.de\/start2.php?knr=10&kname=Pfade
\nDer Anweisung „A“ oder „a“ m\u00fcssen 5 Werte und ein Koordinatenpunkt folgen:
\n1.\u00a0\u00a0\u00a0 der Radius der x-Achse der Ellipse
\n2.\u00a0\u00a0\u00a0 der Radius der y-Achse der Ellipse
\n3.\u00a0\u00a0\u00a0 die Rotation der x-Achse der Ellipse in Grad\u00a0\u00a0 (0 bedeutet keine Rotation)
\n4.\u00a0\u00a0\u00a0 das large-arc-flag:
\n0 f\u00fcr den kurzen Weg um die Ellipse
\n1 f\u00fcr den langen Weg um die Ellipse
\n5\u00a0\u00a0 das sweep-flag:
\n0 f\u00fcr Zeichnung entgegen den Uhrzeigersinn
\n1 f\u00fcr Zeichnung mit dem Uhrzeigersinn
\n6\u00a0\u00a0 die Koordinaten des Endpunktes.<\/p>\n
<paths d=“M50,25 a25,25 0 1,0 -50,0″ fill=“#ffC705″ stroke=“#eee“ stroke-width=“2px“ \/><!–Top Half–>
\n<paths d=“M0,25\u00a0 a25,25 0 0,0 50,0″ fill=“#5cB85c“ stroke=“#eee“ stroke-width=“2px“\/><!–Bottom Half–><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Vor l\u00e4ngerer 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 kompakte Widget mal mit Bootstrap nachbauen. Das Speedometer ist ein SVG, welches aus mehreren Elementen besteht. Die Skala des Speedometers […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,30],"tags":[],"class_list":["post-234","post","type-post","status-publish","format-standard","hentry","category-bootstrap","category-html"],"_links":{"self":[{"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/posts\/234"}],"collection":[{"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=234"}],"version-history":[{"count":10,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/posts\/234\/revisions"}],"predecessor-version":[{"id":250,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=\/wp\/v2\/posts\/234\/revisions\/250"}],"wp:attachment":[{"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hman-projects.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}