New FHEM Tablet UI

[backb01]

Hallo

Ich habe etwas herumgestöbert, leider konnte ich keine Antwort auf meinem Problem finden (ich hoffe ich habe keinen Beitrag übersehen). Ich verwende Tablet UI. Mir ist gestern aufgefallen das z.B die Schalter sich in dem Fullscreen IE-Browswer von einem WindowsRT nicht schalten lassen (wird kurz als off oder on angezeigt dann springt es wieder zurück in dem vorherigen zustand) jedoch sehr wohl über den IE wenn Mann es direkt über den Desktop startet (nicht Full Screen). Hat jemand eine Idee?

[setstate]

Hi,
Would it be an easy mod to change the playstream to play at a volume (and respond to volume changes) set in the data-device state instead of just on/off value? The radio/alarm volume then can be set using a dummy & volume slider.  I've been trying this myself but i'm not very good at javascript and i'm hoping it's quite an easy mod for someone who knows what they're doing!
Regards
Craig

Hi Craig,

the volume control is added to the playstream widget now.
You can use it like this:

Code Auswählen Erweitern

<div data-type="playstream" data-url="http://radioeins.de/stream"
data-device="dummy1"
data-get-on="play" data-get-off="stop"
         data-volume="volume">
</div>

data-volume refers to a FHEM reading which holds the volume value (numeric 0-100)
Regards
Mario

[setstate]

Hallo,
ich bekomme das javascript-widget nicht zum laufen. Ich möchte zunächst ein einfaches:

Code Auswählen Erweitern

function activeCall() {
        console.log(gridster.serialize());
}

zum laufen bekommen und habe es FHEM-seitig sowohl mit

Code Auswählen Erweitern

<div data-type="javascript" data-device="JS" data-get="state"></div> als auch mit

Code Auswählen Erweitern

<div data-type="javascript" data-device="JS" data-get="code"></div> und dem einem entsprechenden dummy JS mit und ohne userReading (code) ausprobiert.
In der Konsole bekomme ich auch ein  angezeigt, die activeCall()-Funktion wird aber nicht aufgerufen. Kann mir hier jemand weiterhelfen?

Danke
Torben

Es ist noch ein Fehler im javascript Widget, der sich bei der Umbenamsung eingeschlichen hat.

Es muss

Code Auswählen Erweitern

widgetname : 'javascript',
heißen, und nicht

Code Auswählen Erweitern

widgetname : 'reload',


Aufruf dann so:

set JS activeCall()

[mrfloppy]

Ich bilde mir ein es hat was gegeben, damit man nach Zeit wieder auf die Hauptseite springt,
finde aber keine Threads mehr dazu.
Geht das irgendwie ?

LG

[Torben]

Es ist noch ein Fehler im javascript Widget, der sich bei der Umbenamsung eingeschlichen hat.

Es muss

Code Auswählen Erweitern

widgetname : 'javascript',
heißen, und nicht

Code Auswählen Erweitern

widgetname : 'reload',


Aufruf dann so:

set JS activeCall()

Danke setstate. So läuft es. Ich hatte zwar auch in das Widget geschaut, aber der Name war mir gar nicht aufgefallen.

Nun habe ich leider den nächsten Punkt. Wenn ich mit diesem javascript dynamisch ein Widget einfüge (hier zum Test nur mal die Uhrzeit)

Code Auswählen Erweitern

function missedCall() {
$(".gridster ul").gridster().data('gridster').add_widget('<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" id="timeDate"><div data-type="clock" class="container big left" data-format="H:i"></div></li>', 1, 1,1,1);
}

erscheint das leere Gridster-Widget, es übernimmt aber keine Daten vom Tablet UI/FHEM, obwohl in den HTML-Element-Informationen der Code richtig übernommen wird. Er ist identisch zu dem, wenn ich das Widget direkt in der index.html habe.
Muss man dabei noch etwas besonderes beachten?

[mc-hollin]

Nun habe ich leider den nächsten Punkt. Wenn ich mit diesem javascript dynamisch ein Widget einfüge (hier zum Test nur mal die Uhrzeit)
erscheint das leere Gridster-Widget, es übernimmt aber keine Daten vom Tablet UI/FHEM, obwohl in den HTML-Element-Informationen der Code richtig übernommen wird. Er ist identisch zu dem, wenn ich das Widget direkt in der index.html habe.
Muss man dabei noch etwas besonderes beachten?

Vielleicht wird das dynamisch hinzugefügte Widget nicht von initWidgets miterfasst und muss individuell angetriggert werden.
Nur so ne Idee.

[setstate]

Ein dynamisches Nachladen eines Widgets ist nicht richtig vorgesehen und umsetzbar. Man muss auf jeden Fall ein init und dann ein update des Widgets triggern. Das geht aber nicht pro Widget, sondern pro Widget Typ (each Schleife). Man würde also immer alle vom gleichen Typ neu initiieren und alle updaten. Das bringt Probleme mit ...
Ich würde eher alle Widgets statisch lassen und nur mit hide() und show() arbeiten.

[Torben]

Vielen Dank für den Hinweis. Wenn man das hide() und show() in Verbindung mit mutate_widget_in_gridmap nutzt, kann man versteckte widgets außerhalb des scrollbaren Bereichs schieben und wieder zurückholen. Damit kann man das Frontend quasi dynamisch aufbauen, sofern alle widgets beim Start geladen werden.
Anbei der Code für das Verstecken in der 5. Reihe, die sonst bei mir leer ist:
index.html

Code Auswählen Erweitern

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1" data-close="2" class="anruf-widget" id="anrufe">
fhem-tablet-ui-user.js

Code Auswählen Erweitern

function verstecken() {
        $("#anrufe").hide();
        $(".gridster ul").data('gridster').mutate_widget_in_gridmap($("#anrufe"), { col: 2, row: 1, size_x: 1, size_y: 1 }, { col: 2, row: 5, size_x: 1, size_y: 1 }); // Widget von Reihe 1 nach Reihe 5 schieben
        $(".gridster ul").data('gridster').resize_widget($("#timeDate"),2,1); // Hier wird ein anderes Widget vergrößert, damit keine leere Stelle bleibt
}
und das Zurückholen

Code Auswählen Erweitern

function zuruckholen() {
        $(".gridster ul").data('gridster').resize_widget($("#timeDate"),1,1); //vorher vergrößertes Widget wieder verkleinern, um Platz zu machen
        $("#anrufe").show();
        $(".gridster ul").data('gridster').mutate_widget_in_gridmap($("#anrufe"), { col: 2, row: 5, size_x: 1, size_y: 1 }, { col: 2, row: 1, size_x: 1, size_y: 1 }); // Widget von Reihe 5 wieder in Reihe 1 holen
}

Das geht sicherlich noch schöner, funktioniert aber schon mal so weit.

[chris1284]

Kann es sein das im dimmer-widget ein bug ist? data-set-on wird nicht übernommen.

Code Auswählen Erweitern

<div data-type="dimmer" data-device="az_light_ledschlauch" data-get="dim" data-set-on="on" class="cell" ></div>
das sollte doch bewirken das bei klicj auf den button des dimmers "on" gesendet wird?! Er sendet trotzdem immer set az_light_ledschlauch [letzterdim wert] zb set az_light_ledschlauch 100

hi setstate, kannst du zu dem punkten noch etwas sagen? aktuell fahre ich als workaround noch 2 statt nur einem button/wirget

[setstate]

Das dimmer Widget ist per Default im Dim Mode. Nur wenn sich data-dim und data-set unterscheiden, wird explizit data-set-on benutzt. Siehe Beispiel in der Readme.

[setstate]

Ich habe da mal eine (dumme) Frage ...

ich würde meine Temperaturanzeige mit etlichen simplecharts gerne per Knopfdruck zwischen Sommer und Winterbetrieb (oder evt. auch weiteren Stufen) umschalten ... OK, das ginge auch mit verschiedenen Indexfiles die dann mit pagetab umgeschaltet werden ... ich würde aber lieber die min und max-werte der simplecharts anpassen, aber wie kriegt man das hin?

Beim Simplechart Widget kann man jetzt für data-minvalue und data-minvalue auch Arrays angeben, um die Min und Maxwerte automatisch in Stufen dynamisch anzupassen.

Code Auswählen Erweitern

                         
     data-minvalue="[10,-25]"
     data-maxvalue="[15,35]"

So könnte eine Sommer/Winter Umschaltung aussehen. Wenn ein Wert im Graph größer als der erste Max-Wert ist, wird im Array der nächst höhere Max-Wert probiert, bis der Graph-Wert wieder innerhalb von Max liegt.
Bei minvalue ebenso, aber in die andere Richtung.
data-maxvalue aufsteigend angeben, data-minvalue absteigend

[Nobby1805]

Hmmm ... das klingt schon recht gut ... Danke soweit , ich probiere das mal aus

Aber wenn es jetzt noch die Möglichkeit gäbe statt einer Automatik den verwendeten Wert, bzw. das verwendete Min/Max-Paar, von einen Reading/einem Steuerwert  abhängig zu machen

Edit: Begründung: ich hätte gerne bei nebeneinander stehenden Grafiken die selbe Skalierung

PS und natürlich passe ich die Doku im Wiki zeitnah an

[holle75]

schön, schön. bin begeistert. Würde gerne zwei layouts basteln: einmal für Zugriff über Mobile und einmal über tablet. Gibt es eine "Weiche" die man nutzen kann? Im Moment (zum probieren) muß ich immer meine index.html anders befüllen. Im Wiki nichts darüber gefunden.

liebe Grüße

H.

[chris1284]

bau 2 httpsrv in fhem. der erste ist ja wahrscheinlich     

Code Auswählen Erweitern

ftui/ ./www/tablet Tablet-UI
bau einfach nen 2.

legt einen neuen ordner unter /opt/fhem/www an, zb TUIMobil. Pacl da einfach alle files rein und definiere einen weiteren httpsrv

Code Auswählen Erweitern

define TUIMobil HTTPSRV ftuimobil/ ./www/TUIMobil TUIMobil

[Nobby1805]

was passiert denn jetzt ?