Gartenbeleuchtung in TabletUI übernehmen

Begonnen von Kusselin, 13 Februar 2017, 13:03:43

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1 2 3 4 Alle
Benutzer-Aktionen

Kusselin

13 Februar 2017, 13:03:43
Hallo Zusammen,

ich habe nun dank großer Hilfe hier im Forum es hinbekommen meinen 4-fach Aktor von Homematic inkl. der 8-tasten Fernbedienung von Homematic in Fhem einzubinden. nach anfänglichen Schwierigkeiten (nicht korrekt gepaired und auf ch immer ein rotes Ausrufezeichen in der Birne) klappt alles nun.

Jetzt würde ich gerne den Aktor in TabletUI übernehmen. Ich hätte geren das in TabletUI anstatt des "HM_471C02_Sw_01" Beleuchtung Terrasse steht und für den "HM_471C02_Sw_02" z.B. Beleuchtung Osten usw. steht!!

Ich hätte gerne das Lampensymbol und nicht diese Schieberegler.

Gibt es hier schon was in HTML das ich benutzen kann als Referenz oder kann mir ein HTML Profi das basteln? Ich bin z.Zt. auf Arbeit..wenn ihr was benötigen würdet, dann könnte ich das heute abend nachreichen!

Über ne Info danke ich Euch!

Viele Grüße

Markus

P.S. Im Anhang noch ein Bild von dem Aktor mit den Fernbedienungstasten. Das rote Ausrufezeichen kommt nicht mehr 2wenn ich eine Aktortaste drücke!

sinus61

#1
13 Februar 2017, 13:18:40
Jeweils ein Switch und ein Label Widget. Ist ja noch relativ übersichtlich und im Wiki ganz gut erklärt.

https://wiki.fhem.de/wiki/FTUI_Widget_Label#Kombination_von_Label-_mit_anderen_Widgets
https://wiki.fhem.de/wiki/FTUI_Widget_Switch

Kusselin

#2
13 Februar 2017, 18:13:17
Hi Sinus61,

danke für die Links. Doch ich denke das ist für mich noch zu schwer.

Könntest du mir eine Beispieldatei anhand meines Aktors erstellen...aufgrund dessen könnte ich dann probieren udn testen.

Sas wäre echt super nett von Dir.

Danke und Gruss

Markus

sinus61

#3
13 Februar 2017, 18:49:57
So sollte das gehen, die Farben kannst du ja anpassen.
Code Auswählen

<div data-type="switch" class="big"
    data-device="HM_471C02_Sw_01" data-get="state"
data-get-on='["on","off"]'
data-set-on="on"
data-set-off="off"
data-icons='["fa-lightbulb-o","fa-lightbulb-o"]'
data-on-colors='["black","gray"]'
data-background-colors='["#AA6900","#505050"]'>
</div>
<div data-type="label" class="darker big">Beleuchtung Terrasse</div>

Kusselin

#4
13 Februar 2017, 19:41:50
Hi Sinus,

danke dir...ich kann zwar jetzt ´den Knopf drücken für an und aus..aber das Licht geht nicht an...drücke ich hingegen den aktor in fhem geht die terrassenbeleuchtung an..

Woran liegt das.... aber danke..anhand deines beispiels kann ich mich durchhangeln..nur sollte halt auch der Aktor dann das terrassenlicht schalten

Gruss

markus

Thorsten Pferdekaemper

#5
14 Februar 2017, 07:46:08
Hi,
funktioniert auf dieser Tablet-UI-Seite irgendwas? ...also irgendein anderes Gerät in FHEM zu beeinflussen?
Stelle hier am besten mal das ganze HTML rein (in code-Tags...)
Gruß,
   Thorsten
FUIP

sinus61

#6
14 Februar 2017, 07:59:43
Wird denn der Status in FTUI angezeigt wenn Du in FHEM schaltest oder auch nicht? Das obige Beispiel setzt ja den Befehl "set HM_471C02_Sw_01 on" ab. Wenn der in FHEM funktioniert sollte es auch in FTUI gehen. Ansonsten zeig halt wirklich mal deine komplette Seite.

Kusselin

#7
14 Februar 2017, 08:05:29 Letzte Bearbeitung: 14 Februar 2017, 13:11:49 von Kusselin
Hallo Zusammen,

werde ich heute abend mal hier posten. Also man sieht beim drücken des Knopfes in FTUI unten links ein kleines popup das hochkommt und dann wieder verschwindet.

Danke Euch
@Thorsten: also mit Schaltbefehle in FTUI wäre die Gartenbeleuchtung die erste!! Alles andere Müllkalender und Geburtstagskalender + Wetter funzen!!


Kusselin

#8
14 Februar 2017, 13:11:59
ne Zwischenfrage noch: Welche dateien benötigt Ihr genau... denke mal die HTML in der ich das von Sinus61 gespeichert habe...
oder benötigt Ihr noch die main.html??

Gruss

Thorsten Pferdekaemper

#9
14 Februar 2017, 13:31:53
Na die, bei der das Problem auftritt. Im Zweifelsfall liefere halt mal alles.
Gruß,
   Thorsten
FUIP

Kusselin

#10
14 Februar 2017, 19:06:35
Hallo Zusammen,

also hier die HTML in der ich das mal als test eingefügt habe. eigentlich möchte ich es gerne in der Main.html haben..aber jetzt erstmal zum testen in den einstellungen.html.

Hier die daten:

Einstellungen.html
Code Auswählen
<html>
<head>
    <title>Einstellungen</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- Menü -->
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8" data-template="menu.html"></li>
</ul>
<div data-type="switch" class="big"
    data-device="HM_471C02_Sw_01" data-get="state"
data-get-on='["on","off"]'
data-set-on="on"
data-set-off="off"
data-icons='["fa-lightbulb-o","fa-lightbulb-o"]'
data-on-colors='["black","gray"]'
data-background-colors='["#AA6900","#505050"]'>
</div>
<div data-type="label" class="darker big">Beleuchtung Terrasse</div>>
</body>
</html>

und hier die Main.html:

Code Auswählen
<html>
<head>
    <title>iHaus Heler</title>
</head>
<body>
<div class="gridster">
<ul>
<!-- Menü -->
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8" data-template="menu.html"></li>

<!-- TV Controll -->
<li data-col="2" data-row="1" data-sizex="10" data-sizey="2">
<header>
<div data-type="label" class="medium">Media Control</div>
</header>
<div class="left-align left-space">
<div class="inline" data-type="label">Kinderzimmer</div>
<div class="inline" data-type="button" data-device="tv_kinderzimmer" data-get="STATE" data-colors='["green","red"]' data-limits='["opened","disconnected"]' data-fhem-cmd="set SamsungKinderzimmer POWEROFF" data-icon="fa-power-off"></div>
<div class="inline" data-type="select"
data-items='["","define timerKZ at +00:30:00 set SamsungSchlafzimmer POWEROFF",
"define timerKZ at +00:50:00 set SamsungSchlafzimmer POWEROFF",
"define timerKZ at +01:45:00 set SamsungSchlafzimmer POWEROFF",
"define timerKZ at +02:05:00 set SamsungSchlafzimmer POWEROFF"]'
data-alias='["TimerOFF",
"30 Minuten",
"50 Minuten",
"105 Minuten",
"125 Minuten"]'
data-cmd="delete timerKZ;"></div>
</div>
<div class="left-align left-space">
<div class="inline" data-type="label">Schlafzimmer</div>
<div class="inline" data-type="button" data-device="tv_schlafzimmer" data-get="STATE" data-colors='["green","red"]' data-limits='["opened","disconnected"]' data-fhem-cmd="set SamsungSchlafzimmer POWEROFF" data-icon="fa-power-off"></div>
<div data-type="select"
data-items='["",
"define timerSZ at +00:30:00 set SamsungSchlafzimmer POWEROFF",
"define timerSZ at +00:50:00 set SamsungSchlafzimmer POWEROFF",
"define timerSZ at +01:45:00 set SamsungSchlafzimmer POWEROFF",
"define timerSZ at +02:05:00 set SamsungSchlafzimmer POWEROFF"]'
data-alias='["TimerOFF",
"30 Minuten",
"50 Minuten",
"105 Minuten",
"125 Minuten"]'
data-cmd="delete timerSZ;"></div>
</div>
</li>

<!-- Familien Kalender-->
<li data-col="2" data-row="3" data-sizex="5" data-sizey="2">
<header>
<div data-type="label" class="medium">Wichtige Termine</div>
</header>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Familie" data-get="t_001_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_001_btime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_001_etime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_001_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Familie" data-get="t_002_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_002_btime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_002_etime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_002_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Familie" data-get="t_003_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_003_btime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_003_etime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_003_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Familie" data-get="t_004_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_004_btime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_004_etime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_004_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Familie" data-get="t_005_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_005_btime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_005_etime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_005_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Familie" data-get="t_006_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_006_btime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_006_etime" data-part="(\d\d\:\d\d).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Familie" data-get="t_006_summary" class="inline w3x right-align"></div>
</div>
</li>

<!-- Geburtstags Kalender-->
<li data-col="2" data-row="4" data-sizex="5" data-sizey="2">
<header>
<div data-type="label" class="medium">Geburtstage</div>
</header>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_001_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_001_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_002_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_002_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_003_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_003_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_004_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_004_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_005_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_005_summary" class="inline w3x right-align"></div>
</div>
<div class="left-space-2">
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_006_bdate" data-part="(\d\d\.\d\d\.).*" class="inline left"></div>
<div data-type="label" data-device="vKalender_Geburtstage" data-get="t_006_summary" class="inline w3x right-align"></div>
</div>
</li>

<!-- Abfall Kalender -->
<li data-col="7" data-row="5" data-sizex="5" data-sizey="2">
<header>
<div data-type="label" class="medium">Abfall Kalender</div>
</header>
<div class="top-space small">
<div data-type="symbol" data-device="MuellterminDummy" data-get="BioTonne" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["SaddleBrown","SaddleBrown"]' data-get-on='["0","2"]' class="bigger inline" ></div>
<div data-type="symbol" data-device="MuellterminDummy" data-get="BlaueTonne" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["blue","blue"]' data-get-on='["0","2"]' class="bigger inline" ></div>
<div data-type="symbol" data-device="MuellterminDummy" data-get="GrueneTonne" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["green","green"]' data-get-on='["0","2"]' class="bigger inline" ></div>
<div data-type="symbol" data-device="MuellterminDummy" data-get="Restmuell" data-icons='["fa-trash warn fa-spin","fa-trash warn"]' data-on-colors='["gray","grey"]' data-get-on='["0","2"]' class="bigger inline" ></div>
</div>
</li>

<!-- Wetter -->
<li data-col="12" data-row="1" data-sizex="2" data-sizey="8">
<header>
<div data-type="label" class="medium">Wetter</div>
</header>
<table>
<tr class="center">
<header>
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc1_day_of_week"></div>
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc1_date"></div>
</header>
</tr>
<tr class="center">
<td>
<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc1_condition"></div>
<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="temperature"></div>
<div class="medium inline" data-type="label">C°</div>
</td>
</tr>
<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="condition"></div></td></tr>
</table>
<br class="small">
<table>
<tr class="center">
<header class="small">
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc2_day_of_week"></div>
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc2_date"></div>
</header>
</tr>
<tr class="center">
<td>
<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc2_condition"></div>
<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc2_high_c"></div>
<div class="medium inline" data-type="label">C°</div>

</td>
</tr>
<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc2_condition"></div></td></tr>
</table>
<br class="small">
<table>
<tr class="center">
<header class="small">
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc3_day_of_week"></div>
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc3_date"></div>
</header>
</tr>
<tr class="center">
<td>
<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc3_condition"></div>
<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc3_high_c"></div>
<div class="medium inline" data-type="label">C°</div>
</td>
</tr>
<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc3_condition"></div></td></tr>
</table>
<br class="small">
<table>
<tr class="center">
<header class="small">
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc4_day_of_week"></div>
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc4_date"></div>
</header>
</tr>
<tr class="center">
<td>
<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc4_condition"></div>
<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc4_high_c"></div>
<div class="medium inline" data-type="label">C°</div>

</td>
</tr>
<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc4_condition"></div></td></tr>
</table>
<br class="small">
<table>
<tr class="center">
<header class="small">
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc5_day_of_week"></div>
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc5_date"></div>
</header>
</tr>
<tr class="center">
<td>
<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc5_condition"></div>
<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc5_high_c"></div>
<div class="medium inline" data-type="label">C°</div>

</td>
</tr>
<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc5_condition"></div></td></tr>
</table>
<br class="small">
<table>
<tr class="center">
<header class="small">
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc6_day_of_week"></div>
<div class="inline" data-type="label" data-device="MeinWetter" data-get="fc6_date"></div>
</header>
</tr>
<tr class="center">
<td>
<div class="medium inline" data-type="weather" data-device="MeinWetter" data-get="fc6_condition"></div>
<div class="medium inline" data-type="label" data-device="MeinWetter" data-get="fc6_high_c"></div>
<div class="medium inline" data-type="label">C°</div>

</td>
</tr>
<tr class="center"><td><div class="small" data-type="label" data-device="MeinWetter" data-get="fc6_condition"></div></td></tr>
</table>
</li>
</ul>
</div>
</body>
</html>


Wäre nett wenn ihr mir dsagen könntet wie ich das in die Main.html einfügen kann?

Gruss

Markus

Thorsten Pferdekaemper

#11
14 Februar 2017, 20:22:43
Hi,
da wundert es mich, dass überhaupt was geht.
Der Header muss so aussehen:
Code Auswählen

<html>
<head>
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>Einstellungen</title>
</head>

Die Zeile mit dem script ist eigentlich das Tablet-UI.
Gruß,
  Thorsten
FUIP

Kusselin

#12
14 Februar 2017, 20:33:50
So?:

Code Auswählen
<html>
<head>
    <script src="js/fhem-tablet-ui.js" defer></script>
    <title>Einstellungen</title>
<body>
<div class="gridster">
<ul>
<!-- Menü -->
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8" data-template="menu.html"></li>
</ul>
<div data-type="switch" class="big"
    data-device="HM_471C02_Sw_01" data-get="state"
data-get-on='["on","off"]'
data-set-on="on"
data-set-off="off"
data-icons='["fa-lightbulb-o","fa-lightbulb-o"]'
data-on-colors='["black","gray"]'
data-background-colors='["#AA6900","#505050"]'>
</div>
<div data-type="label" class="darker big">Beleuchtung Terrasse</div>>
</body>
</html>

Geht leider auch nicht  :(

Thorsten Pferdekaemper

#13
14 Februar 2017, 20:43:02
Schau nochmal genau hin. </head> vergessen.
Wenn schon copy&paste, dann richtig.
Gruß,
   Thorsten
FUIP

Kusselin

#14
14 Februar 2017, 21:21:00
Also das mit HTML klappt noch nicht so..denke ich sollte mich doch erst mit Fhem beschäftigen so wie du es mir geraten hast :-\

Funzt nicht! Außerdem ist der Knopf im untersten Bereich da ich ja keine Angaben mit "row" usw. gemacht habe wo ich sage wo der taster sitzen soll!!

Auf alle fälle ändert sich die Farbe des Knopfes aber das Licht geht net an auf der Terrasse

Gruss
Drucken
Nach oben Seiten1 2 3 4 Alle
Benutzer-Aktionen