Archive of ‘Bootstrap’ category

Bootstrap 4 … still alpha

Nach einigen Jahren in denen ich Bootstrap 3.0 verwende, muss ich mich langsam mal an Bootrap 4.0 gewöhnen. Es ist immer noch alpha und die von mir bisher verwendeten Plugins in Bootstrap 3.0 wie Boostrap-Table muss ich erstmal mit Bootstrap 4.0 testen.

Einige Bereiche wurden in Bootstrap 4.0 geändert und so werde ich z.B. meine entwickelten Applikationen mit “wells” umändern, so dass sie mit “cards” funktionieren.

Hier gibt es eine schöne Webseite, die die Unterschiede schnell aufzeigt:

http://bootstrap4.guide/

Dashboards mit Gridstack

Gridsatck liefert eine einfache Funktion um mit Bootstrap auch Dashboards oder ein Grid von Widgets zu gestalten.

Gridstack finde ich persönlcih sehr praktisch, denn es gibt nicht zu viele Funktionen vor, sprich, man kann sehr viel selbst implementieren ohne schon ein großes Admin-Template oder sonstige visuelle Dinge berücksichtigen zu müssen.

Hier ein einfaches Beispiel, welches zu 95% dem Original entspricht und ich nur die Referenzierung der DIVs durch IDs in Javascript hinzugefügt habe. Somit ließe sich über die Serialisierung als JSON-String das Grid sichern und laden und je nach Widget-ID oder DIV-ID wird der passende Content asynchron geladen.

Beipiel unter: http://hman-projects.de/extraSite/fake/gridstack_serialization.html

Neue Demo mit kleinem DropDown-Menü vom 23.07.2017

http://hman-projects.de/extraSite/gridstack/demo/

Hier die offzielle Gridstack-Seite:

https://troolee.github.io/gridstack.js/

 

 

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–>