[FHEM-Tablet-UI] Widgets for fhem-tablet-ui

[Morrino]

Hi,

habe nocheinmal eine Frage bzgl. dem neuen Chart Widget. Kann es sein das an der y-Achse nur ganze Zahlen möglich sind?

Mit "data-maxvalue="1.4" funktioniert das leider nicht. Wollte damit den Spritpreisverlauf darstellen und da ist die Achse von 1€ bis 2€ etwas zu ungenau.

[nesges]

FHEM läuft bei mir auf einen Raspberry Pi im Pfad /opt/fhem.
Muss ich hier jetzt alle Pfadangaben auf /opt/fhem/www/... ändern?

Im HTML sind Pfade relativ zum Document-Root des Webservers anzugeben, der lokale Pfad wäre an der Stelle falsch. "/fhem" sollte schon stimmen, wenn's so funktioniert, dann bitte nicht ändern.

Habe die Zeile:

Code Auswählen Erweitern

  <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.min.js"></script>
in

Code Auswählen Erweitern

  <script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
umbenannt jetzt geht es.

Ok, wunderbar

Was ist denn der unterschied zwischen "fhem-tablet-ui.min.js" und "fhem-tablet-ui.js"?

Die .min-Variante ist eine "Minified"-Version der anderen. Das bedeutet, dass aus der .min alle "unnötigen" Zeichen rausgeworfen sind. Also Zeilenumbrüche, Einrückungen etc. Das macht man um die Dateien möglichst klein zu halten. Das Widget hat nicht beachtet, dass es eine Minified-Version geben könnte, da muss ich noch nachbessern. Verwende bitte vorerst die normale Version statt der .min.

[cfs]

'naben zusammen,

ich werde noch verrückt. Ich versuche gerade den datetimepicker im Tablet UI einzubinden. Habe den heruntergeladen und reinkopiert (www\pgm2\). Im fhem frontend ist der auch voll nutzbar. Nur im Tablet UI bekomme ich nichts. Was mache ich falsch?

Code Auswählen Erweitern

    <div data-type="datetimepicker" data-device="dummy1" class="inline large thin orange"></div>

Ich bekomme keinerlei Ausgabe, außer ggf. voran und nachgestellter Objekte (Texte). Muss ich noch irgendwo anders was hineinkopieren oder konfiguieren?

[setstate]

'naben zusammen,

ich werde noch verrückt. Ich versuche gerade den datetimepicker im Tablet UI einzubinden. Habe den heruntergeladen und reinkopiert (www\pgm2\). Im fhem frontend ist der auch voll nutzbar. Nur im Tablet UI bekomme ich nichts. Was mache ich falsch?

Code Auswählen Erweitern

    <div data-type="datetimepicker" data-device="dummy1" class="inline large thin orange"></div>

Ich bekomme keinerlei Ausgabe, außer ggf. voran und nachgestellter Objekte (Texte). Muss ich noch irgendwo anders was hineinkopieren oder konfiguieren?

Der FTUI Datetimepicker Widget braucht noch externe Libs: lib/jquery.datetimepicker.js + Stylesheet

Am besten man benutzt "update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt" zum Installieren

[cfs]

 
Alles da, das update hatte ich auch gemacht, dann nur zurück genommen weil er mir die font's irgendwie 'weggeworfen' hat. Zumindest hatte ich die fa Symbole dann nicht mehr. Hab dann zurück gesichert und die folgenden Dateien manuell kopiert:

Code Auswählen Erweitern


lib\jquery.datetimepicker.css
lib\jquery.datetimepicker.js
js\widget_datetimepicker.js


Leider aber lässt er mich noch immer nicht.

Code Auswählen Erweitern

Plugin dir: /fhem/tablet/js fhem-tablet-ui.js:122:1
Filename: index_heating.html fhem-tablet-ui.js:126:1
FHEM dir: /fhem/ fhem-tablet-ui.js:129:1
Collecting required readings fhem-tablet-ui.js:237:1
Synchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe http://xhr.spec.whatwg.org/ jquery.min.js:4:25327
Loaded plugin: widget_checkbox fhem-tablet-ui.js:62:18
Loaded plugin: widget_datetimepicker fhem-tablet-ui.js:62:18
Loaded plugin: widget_symbol fhem-tablet-ui.js:62:18
thermo dev:CUL_HM_HM_TC_IT_WM_W_EU_334F66_Climate par:STATE change:clima.temp jquery.min.js line 2 > eval:226:1
...

Irgendwie komme weiß ich nicht so recht woran es liegt. Im Debug kann ich auch nix wirklich erkennen.

[nesges]

Neues Widget: countdown

Zeigt einen animierten Countdown zu einer Zielzeit an. Die Zielzeit wird aus einem Reading gelesen.

Code Auswählen Erweitern

<div data-type="countdown"
    data-device="TIMER1"
    data-readymessage="ENDE"
    data-readyclass="blink"
    data-resettimeout="5000"
    data-resetmessage="-"
    data-interval="1000">

Zeigt die verbleibende Zeit bis zum Wert von TIMER1 als Countdown an. Der Countdown wird alle 1000ms aktualisiert. Nach Ablauf der Zeit wird 5000ms lang der Text "ENDE" angezeigt und die CSS-Klasse "blink" zugefügt. Danach wird "-" angezeigt.

Doku auf github

[setstate]

Hallo nesges,

schön wieder Aktivitäten von dir im Widgets-for-fhem-tablet-ui zu sehen ...

Eine kleine Sache ist mir Aufgefallen:
Dein Reading für data-get ist nur im Update dabei, wenn zufällig ein anderes Widget den Readingnamen in die Collection reingebracht hat. Es fehlt noch ein

Code Auswählen Erweitern

elem.addReading('get');
in der init_attr Funktion.

Grüße

[wkarl]

Hallo nesges,

geht das auch für readings? Z.B. data-device="DEVICE:reading"

ciao walter

Neues Widget: countdown

Zeigt einen animierten Countdown zu einer Zielzeit an. Die Zielzeit wird aus einem Reading gelesen.

Code Auswählen Erweitern

<div data-type="countdown"
    data-device="TIMER1"
    data-readymessage="ENDE"
    data-readyclass="blink"
    data-resettimeout="5000"
    data-resetmessage="-"
    data-interval="1000">

Zeigt die verbleibende Zeit bis zum Wert von TIMER1 als Countdown an. Der Countdown wird alle 1000ms aktualisiert. Nach Ablauf der Zeit wird 5000ms lang der Text "ENDE" angezeigt und die CSS-Klasse "blink" zugefügt. Danach wird "-" angezeigt.

Doku auf github

[Helmi55]

Hallo nesges
danke für das SVG Plot Modul.
Leider konnte ich auf Github nichts bezüglich der Beschriftung finden?

Wie kann ich das bitte lösen - Danke
Helmut

[nesges]

schön wieder Aktivitäten von dir im Widgets-for-fhem-tablet-ui zu sehen ...

Danke! Ich brauchte mal wieder was, was es noch nicht gab

Eine kleine Sache ist mir Aufgefallen:
Dein Reading für data-get ist nur im Update dabei, wenn zufällig ein anderes Widget den Readingnamen in die Collection reingebracht hat. Es fehlt noch ein

Code Auswählen Erweitern

elem.addReading('get');
in der init_attr Funktion.

Wird das nicht mehr implizit gemacht? Dann müsste ich wahrscheinlich noch ein paar der anderen Widgets anpassen.

[nesges]

geht das auch für readings? Z.B. data-device="DEVICE:reading"

Ja, das geht mit den Standard-Attributen, also:

Code Auswählen Erweitern

data-device="DEVICE"
data-get="reading"

Hab's in der Doku jetzt auch ergänzt (ich glaube das fehlt in der Doku zu einigen der anderen Widgets auch, ist aber überall so implementiert)

[nesges]

Leider konnte ich auf Github nichts bezüglich der Beschriftung finden?
Wie kann ich das bitte lösen - Danke

Was denn?

[Helmi55]

Die Beschriftung des Plots
Links, Rechts oben und unten (Grad, Name des Sensors usw.)
Ist momentan in schwarz - hätte die Schrift gerne in weiß??

Code Auswählen Erweitern

data-color="white"
        data-class="cell white"
So funktioniert nicht?
Danke für deine Hilfe
Gruß
Helmut

[nesges]

Das svgplot-Widget ist in dem Sinne "dumm": es nimmt nur das SVG und zeigt es an.

Du müsstest das SVG also bereits beim erzeugen so ändern, dass es passt. Evtl. ist auch was direkt per CSS möglich, aber da kenne ich mich nicht mit aus.

[Helmi55]

Ok Danke
so habe ich es gelöst - Danke ans Forum

http://forum.fhem.de/index.php?topic=48656.msg403240#msg403240

Gruß
Helmut