Tablet AJAX/JavaScript/HTML GUI

[fhem86]

Neu:

• Zoom disabled
• slider(click/touch) -> eigener Befehl/min Wert/max Wert/steps(Schritte)/Nachkommastellen(0,1,2 usw.)

Slider:
(siehe Anhang / see attachement)

Anleitung:

Code Auswählen Erweitern


define slider dummy
define slider2 dummy


#attr viewFHEM_status item8 slider_device|slider|Beschreibung|Position|command $state$|min|max|step|Nachkommastellen

attr viewFHEM_status item8 slider|slider|Das ist ein Slider|1|set slider $state$|10.3|57.4|5.5|1

attr viewFHEM_status item9 slider2|slider|Das ist ein Slider|1|set slider2 $state$|0|40|0.5|2

$state$ wird automatisch durch den Status ersetzt.



Slider aktivieren/anzeigen:
Beschreibung anklicken/touchen

Slider deaktivieren/verstecken:
Modul ganz links anklicken/touchen

Ich warte auf die Erfahrungsberichte :)

[fhem86]

Schon 11 downloads und kein Kom­men­tar? Scheint ja gut zu funktionieren :)

[Steffen]

Schon 11 downloads und kein Kom­men­tar? Scheint ja gut zu funktionieren :)

Hallo!

Hatte kurz getestet, doch haut leider die Auflösung weder auf meinem Galaxys3(zu Groß) noch auf Tablet 10zoll(zu klein) hin.

Wollte nochmal genau Testen...

Mfg Steffen

[fhem86]

Neu:

• Label Modul (Gruppe/Überschrift)

(siehe Anhang / see attachement)

Anleitung:

Code Auswählen Erweitern


#Dummy für Gruppe/Überschrift <- kann live geändert werden
define Label_Dummy dummy
set Label_Dummy der Text

#Modul Label Definition
attr viewFHEM_status itemIrgendwas Label_Dummy|label|BREITExHÖHE|Position



Beispiel (Screenshot):

Code Auswählen Erweitern


#Dummys für Gruppe/Überschrift
define Label_Temp dummy
set Label_Temp Klima
define Label_Licht dummy
set Label_Licht Licht

#Modul Label Definition
attr viewFHEM_status item0 Label_Temp|label|2x3|1
attr viewFHEM_status item1 Label_Licht|label|1x3|3


#Sonstige Module Definition
attr viewFHEM_status item2 Temp_Wohnung|temperature|Temperatur Wohnung in °C|1
attr viewFHEM_status item3 Temp_Wohnung|humidity|Luftfeuchtigkeit Wohnung in %|2
attr viewFHEM_status item4 Temp_Terrasse|temperature|Temperatur Terrasse in °C|1
attr viewFHEM_status item5 Temp_Terrasse|humidity|Luftfeuchtigkeit Terrasse in %|2
attr viewFHEM_status item6 Deckenstrahler|onoff[on:left>backcolor:00FF00][off:left>backcolor:FF0000]|Deckenstrahler|3
attr viewFHEM_status item7 Bett_LED|onoff[on:left>backcolor:00FF00][off:left>backcolor:FF0000]|Bett LED|3



[Carsten]

Hallo,

ich habe gerade mal versucht mit der letzten Version den Slider zu testen. Da es mit dem Dimmer nicht funktionierte, habe ich das Beispiel für slider2 kopiert und auch einen Dummy angelegt ( allerdings namens slidertest ).
Also

Code Auswählen Erweitern

slidertest|slider|Das ist ein Slider|1|set slidertest $state$|0|40|0.5|2
Auch das bekomme ich nicht zum Laufen. Der Wert bleibt leer und es erscheint kein Slider beim Klicken. Weder im FF noch auf meinem Android-Handy.

Wo wird denn überhaupt festgelegt, aus welchem Reading der Wert geholt werden soll?

Gruß

Carsten

[Steffen]

Schon 11 downloads und kein Kom­men­tar? Scheint ja gut zu funktionieren :)

Hallo!

Hatte kurz getestet, doch haut leider die Auflösung weder auf meinem Galaxys3(zu Groß) noch auf Tablet 10zoll(zu klein) hin.

Wollte nochmal genau Testen...

Mfg Steffen

So nochmal getestet auf einem Galaxy S2 und auch das Bild zu Groß so das einige Item komplett verschwunden sind.
Stellt sich das Bild nicht Automatisch auf den Screen ein?
Kann man das irgendwie einstellen?

Der Editor ist Super, macht das Basteln noch mehr Spaß!

Mfg Steffen

[Gambit]

Hallo,

coole Sache. Was mir jetzt zur Trekki-Console noch fehlt sind Soundeffekte beim Berühren der Schaltfläche.
Ansonsten wirklich klasse gemacht !

Bye Gambit

[fhem86]

@Steffen

öffne mal die index.html mit einem editor

in den ersten beiden zeilen steht.

Code Auswählen Erweitern


<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />


Damit wird der zoom deaktiviert und die auflösung auf die device auflösung gesetzt.

Einfach beide Zeilen löschen, schon passt es wieder auf dem S2.

Ich muss mal schauen, wie ich das in die viewFHEM_config einbaue.


Meinst du mit Editor den ajaxEditor?

[fhem86]

Hallo,

ich habe gerade mal versucht mit der letzten Version den Slider zu testen. Da es mit dem Dimmer nicht funktionierte, habe ich das Beispiel für slider2 kopiert und auch einen Dummy angelegt ( allerdings namens slidertest ).
Also

Code Auswählen Erweitern

slidertest|slider|Das ist ein Slider|1|set slidertest $state$|0|40|0.5|2
Auch das bekomme ich nicht zum Laufen. Der Wert bleibt leer und es erscheint kein Slider beim Klicken. Weder im FF noch auf meinem Android-Handy.

Wo wird denn überhaupt festgelegt, aus welchem Reading der Wert geholt werden soll?

Gruß

Carsten

Der Wert wird aus dem Reading state von slidertest augelesen.


Wenn du auf die Beschreibung klickst oder touched erscheint dann der slider?

Der Befehl wird ausgeführt wenn:
mouseup oder touchend

Ich habe das im Firefox unter Windows und im Android Browsern getestet (Dolphin und Std. Browser)

[Steffen]

@Steffen

öffne mal die index.html mit einem editor

in den ersten beiden zeilen steht.

Code Auswählen Erweitern


<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />


Damit wird der zoom deaktiviert und die auflösung auf die device auflösung gesetzt.

Einfach beide Zeilen löschen, schon passt es wieder auf dem S2.

Ich muss mal schauen, wie ich das in die viewFHEM_config einbaue.


Meinst du mit Editor den ajaxEditor?

Hallo!

Leider klappt das auch nicht richtig, ohne die Zeilen zu löschen wird es übergroß dargestellt und mit deinem Hinweiß löschen der zwei Zeilen wird es im Hochformat richtig dargestellt und im Quervormat fehlt zwei Zeilen unten in der darstellung, egal auf welchen Gerät ich das Test(S3;S2;Tablet10zoll) es ist irgendwie nie genau...

Mfg Steffen

[fhem86]

@Steffen

Benutze auf dem S2 mal den Dolphin Browser und aktiviere über add-ons das Vollbild
Damit sollten locker alle deine Zeilen angezeigt werden.
Wichtig die genannten Zeilen aus der index.html löschen

Habe es gerade selbst getestet.

Gruß

[Carsten]

Der Wert wird aus dem Reading state von slidertest augelesen.


Wenn du auf die Beschreibung klickst oder touched erscheint dann der slider?

Der Befehl wird ausgeführt wenn:
mouseup oder touchend

Ich habe das im Firefox unter Windows und im Android Browsern getestet (Dolphin und Std. Browser)

Nein, es erscheint kein Slider. Mit Beschreibung meinst du den Text "Das ist ein Slider", oder? Es wird auch kein Wert angezeigt.

[fhem86]

Nein, es erscheint kein Slider. Mit Beschreibung meinst du den Text "Das ist ein Slider", oder? Es wird auch kein Wert angezeigt.

Poste bitte mal deine config

So funktioniert das bei mir (FF Windows/Dolphin oder Android Brower unter Android 4.0.4 und 4.1.2)

Code Auswählen Erweitern


define slider2 dummy
attr viewFHEM_status item8.3 slider2|slider|Das ist ein Slider|1|set slider2 $state$|0|40|5|2


"Das ist ein Slider" einmal touchen/klicken nicht gedrückt halten -> finger drauf und wieder hoch. Im Firefox muss es auf jeden Fall gehen.

[Carsten]

*Kopf -> Tisch*

Sorry. Typischer Fall von PEBCAK. Es ist mir sehr peinlich, aber ich war offenbar zu blöd, die neue Version ins richtige Verzeichnis zu kopieren. Habe die Datei gerade nochmal heruntergeladen und kopiert und jetzt klappt alles wunderbar. Gefällt mir.

Eine kleine Unschönheit gibt es aber noch: Mein Homematic Dimmer kann neben 0-100% auch die states On und Off annehmen. Gerade stand er auf Off und im Status wurde dann NaN angezeigt.

[fhem86]

Eine kleine Unschönheit gibt es aber noch: Mein Homematic Dimmer kann neben 0-100% auch die states On und Off annehmen. Gerade stand er auf Off und im Status wurde dann NaN angezeigt.

Wird in der nächsten Version gefixed.

Ich erweitere den slider auch um eine Wörter Version

z.B. mögliche Werte Wertname1/Wertname2/Wertname3 usw.

Wenn man slided, wird den jeweils der nächste Wertname ausgewählt.