[FHEM-Tablet-UI] User-Demos

[xxsteffenxx]

Hi,

also ich hab's bei mir lösen können - es fehlt das jquery-ui.min.js - habe ich jetzt eingebunden. Läuft fehlerfrei

@xxsteffenxx: Sah bei mir ähnlich aus.


Cheers,

h3ll

Hallo h3ll,

wo und wie hast du diese eingebunden??

Steffen

[eki]

Das sollte in die HTML Datei, die im Hauptverzeichns des Tablet Ordners steht und typischerweise Index.html heißt. Wie es aussehen sollte, kannst Du an den bereits enthaltenen Einträgen sehen.

[xxsteffenxx]

So sieht meine index.html aus

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/powerange.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
[b] <link rel="stylesheet" href="/fhem/tablet/lib/jquery-ui.min.css" />[/b]



<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
  <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
  <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
[b]<script type="text/javascript" src="/fhem/tablet/js/jquery-ui.min.js"></script>[/b]

[xxsteffenxx]

und meine html-seite

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="6" data-sizey="4">
     <div class="normal"
data-type="chart"
data-device="WZ_Thermostat"
data-logdevice='["FileLog_WZ_Thermostat","FileLog_WZ_Thermostat","FileLog_WZ_Thermostat"]'
data-logfile="WZ_Thermostat-2015-11-01.log"
data-columnspec='["4:WZ_Thermostat.desiredTemperature:1:int","4:WZ_Thermostat.temperature:1:int","4:WZ_Thermostat.valveposition:1:int"]'
data-style='["ftui l0fill","ftui l0dot","ftui l2dash"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Termperatur Soll", "Temperature Ist", "Ventil"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div></li>

Das raster zeit es schonmal an

[eki]

Falls Du nichts hin- und her kopiert hast, steht die jquery-ui.min.js Datei auch im pgm2 Ordner und nicht im Tablet/lib Ordner.

[eki]

Bitte schaut Euch auch die Styles in der css Datei in meiner ursprünglichen Mail an, über die könnt Ihr noch was am Aussehen anpassen bzw. meine Voreinstellungen verwenden. Dort sind auch die Styles für die Graphen also z.B. ftui l0fill definiert (aber vielleicht wolltest Du ja auch schwarze Schrift auf dunkelgrauem Hintergrund 

[roman1528]

Hallo, Ich wollte mich bei meinem ersten Post im Forum mit ein paar Bilder beteiligen. Ich habe auf vielen Screens die Plots und Diagramme gesehen und da ich daheim auch ein paar Auswertung darstellen wollte und ich mit den vorhandenen Lösung optisch nicht zu frieden war hab ich widgets basierend auf der Highcharts-API erstellt.

Ziel ist es alle sinnvollen Diagramme der Highcharts-API via Widget zur Verfügung zustellen. Die sind optisch sowie technisch gut anpassbar und halt modern 

WetterUI zeigt mir das Wetter mit Forecast der nächsten Stunden und Tage. Das Große Diagramm wird direkt erzeugt und nicht als Bild eingebunden. Das war mir wichtig, da in den Popups mehr Infos drinnen sind. Das andere sind Beispiele für die Darstellung in Popups und 3D-Charts.

Hier also mal ein paar Screens für den Anfang.

diese schicken graphen von blackbluegl hätt ich so gern, bitte, bitte, bitte.    oder hab ich die plugins übersehen?
http://forum.fhem.de/index.php/topic,37378.msg352171.html#msg352171

[eki]

@h3ll: Schoen, dass es bei Dir jetzt zu klappen scheint, ich hatte schon an mir gezweifelt. Kannst Du trotzdem Deine Variante mit dem Get fuer dblog mal posten, ich würde das dann versuchen so zu integrieren, dass alle davon profitieren können.

[setstate]

@eki:
das wäre noch gut für das widget_chart.js Zeile 591:

Code Auswählen Erweitern


        if (!$.fn.draggable)
            dynamicload('../pgm2/jquery-ui.min.js', null, null, false);


Dann brauchen sich die User nicht um die Abhängigkeiten zu kümmern.

Und kannst du bitte auch noch die Eingabeparameter etwas flexibler machen:?
- Kein Array: wenn nicht als Array angegeben, dann Chart nur für einen Wert aufbauen
- Array-Count nicht gleich: wenn Feld nicht in Array gefunden wird, dann nimm den zuletzt gefundenen Wert

Sonst, super Arbeit !!!

[setstate]

diese schicken graphen von blackbluegl hätt ich so gern, bitte, bitte, bitte.    oder hab ich die plugins übersehen?
http://forum.fhem.de/index.php/topic,37378.msg352171.html#msg352171

Geduld, ist schon in Arbeit. blackbluegl hat schon geliefert, jetzt muss ich mir das ansehen ....

[h3llsp4wn]

Hi,

@eki:
Nachdem ich das mit dem Array begriffen habe, hat sich der Umbau erledigt - Beispiel s.u. logdb ist mein DbLog, HISTORY die Tabelle, damit wir alles
einwandfrei aus meinem DbLog gelesen.

... und - Klasse Arbeit!

Code Auswählen Erweitern


<div class="normal"
data-type="chart"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
data-columnspec='["WZ.Sensor:temperature","WZ.Sensor:humidity","Pool.Sensor:temperature"]'
data-style='["ftui l3fill","ftui l4","ftui l1fill"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur", "Luftfeuchtigkeit","Pool"]'
...


Zu den Styles - ich denke, die wir jeder so anpassen, wie es ihm gefällt - als Basisset ok finde ich.

@setstate: +1 für Deine Änderungsvorschläge 


Cheers,

h3ll

[roman1528]

Geduld, ist schon in Arbeit. blackbluegl hat schon geliefert, jetzt muss ich mir das ansehen ....

Sehr geil 

Danke schon mal an alle beteiligten^^

[eki]

@setstate: Das mit der Abfrage bezüglich array oder nicht array ist schon enthalten. Außer beim Logdevice (das war für mich sozusagen die Basis) wird das bei den anderen Arrays schon so gemacht, wie Du es vorschlägst. Ich werde das jetzt nochmal dahingehend ändern dass es auch für "zu kurze" arrays klappt und dass auch das Logdevice entsprechend behandelt wird.
Das mit dem dynamischen Einbinden ist eine super Idee, werd ich auch nachziehen. Ich melde mich wenns fertig ist.

[xxsteffenxx]

also ich bekomm das nicht hin es bleibt immer noch schwarz...

[setstate]

@setstate: Das mit der Abfrage bezüglich array oder nicht array ist schon enthalten. Außer beim Logdevice (das war für mich sozusagen die Basis) wird das bei den anderen Arrays schon so gemacht, wie Du es vorschlägst. Ich werde das jetzt nochmal dahingehend ändern dass es auch für "zu kurze" arrays klappt und dass auch das Logdevice entsprechend behandelt wird.
Das mit dem dynamischen Einbinden ist eine super Idee, werd ich auch nachziehen. Ich melde mich wenns fertig ist.

Mit der CSS können wir das auch so machen:

Code Auswählen Erweitern

    $('head').append('<link rel="stylesheet" href="'+ dir + '/../css/ftui_chart_orange.css" type="text/css" />');