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

 

Phonegap – Cordova 2017 Teil 6: Scrolling im IPhone-Emulator und Font-Awesome

Scrolling

Im IPhoen Emulator lassen sich die pages nicht scrollen, – im Gegentest im richtigen IPhone zeigt, dass sie sich auf dem realen IPhone doch scrollen lassen.  Merkwürdig aber erstmal kein Hindernis.
Nach einigen Test mit dem Simulator habe ich festgestellt, dass Scrollen auch im Emulator funktioniert. Man muss nur (more…)

Phonegap – Cordova 2017 Teil 5: Javascript Alert funktioniert nicht

Der normale Alert funktioniert leider nicht. Als Programmierer verwendet man einen Debugger oder gibt Logs irgendwo aus und wenn es garnicht anders geht, dann verwendet man eben „alert“.
In Cordova gibt es ein Plugin für Dialoge, welches installiert werden muss.
cordova plugin add cordova-plugin-dialogs
Der zugehörige Code sieht wie folgt aus:

(more…)

Phonegap – Cordova 2017 Teil 4: Usersettings innerhalb der App sichern

Settings, – irgendwo muss der User ja seine Account-Daten für den Zugriff auf diese Tools sichern.

Wie sichert man Daten im Browser und funktioniert das auch noch in Cordova?
Die Maske war dazu schnell erstellt und dann um diese Accordionpane aus JQuery-Mobile erweitert.
Page mit Usersettings

Hier der Code:

(more…)

Phonegap – Cordova 2017 Teil 3: Welches Framework für das GUI

Welches Framework?

Welches Framework verwendet man nun heute für das GUI?
Bootstrap war und ist mein Favorit für viele Bereiche aber die Ladezeiten im Simulator waren einfach schlecht.
Siehe auch: http://www.gajotres.net/best-html5-mobile-app-frameworks-jquery-mobile/
Mit  „jquery-Mobile“,  vergleichbar mit jQuery-UI hatte ich schonmal gearbeitet und der Einstieg gestaltet sich durch viele Beispiele und gute Dokumentation sehr einfach.
Also suche ich in Google mal nach „Cordova jQuery mobile template“ um eine Basis zu erhalten und auch eines gefunden:

(more…)

Phonegap – Cordova 2017 Teil 2 : Cordova Plugins – by default nicht installiert

Lösung für die Cordova-Plugins

Plugins müssen 2017 in Cordova in jedem Projekt einzeln geladen werden!
Referenz der Cordova CLI https://cordova.apache.org/docs/de/latest/guide/cli/
cordova plugin add PluginName

Mit

cordova plugin search PluginName

kann man nach Plugins suchen.

(more…)

Phonegap – Cordova 2017 Teil1

Phonegap als Entwicklungsplattform für Smartphone-APPs hatte ich schonmal in 2014 getestet und nicht weiter verfolgt, denn so eine ganz tolle Idee zu einer APP hatte ich einfach nicht.
Ende 2016/ Januar 2017 hatte ich dann Phonegap/Cordova und xCode neu installiert.
Folgende Punkte habe ich installiert:

  • XCODE
  • Cordova via Termial:
    sudo npm install -g cordova
  • Codova/Phonegap Desktop App via Download-Package für MacOSX

Ein etwas älteres Video zu dem Thema findet in dieser englischen Video-Serie:
https://www.youtube.com/watch?v=L7KmIjFvHVw

So legt man eine erste App an
Dann habe ich unter /Documents einen neunen Ordner via Finder erzeugt und dorthin gewechselt

(more…)

1 2 3