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!
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
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
So sollte das gehen, die Farben kannst du ja anpassen.
<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>
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
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
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.
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!!
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
Na die, bei der das Problem auftritt. Im Zweifelsfall liefere halt mal alles.
Gruß,
Thorsten
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
<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:
<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
Hi,
da wundert es mich, dass überhaupt was geht.
Der Header muss so aussehen:
<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
So?:
<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 :(
Schau nochmal genau hin. </head> vergessen.
Wenn schon copy&paste, dann richtig.
Gruß,
Thorsten
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
Also wo der Taster erscheint ist ja erstmal egal.
Was erscheint denn auf dem kleinen Popup, wenn Du das Ding drückst?
Gruß,
Thorsten
Hi Thorsten,
so schauts aus wenn ich auf den Knopf drücke:
Warum habe ich noch so ein ">" zeichen unter beleuchtung stehen?
Gruss
Nur nochmal zum Verständnis....
der Aktor also das Device funktioniert ja in Fhem jetzt (war nicht korrekt gepairt).... und so wie mir das sinus gebastelt hat sollte es ja auch funktionieren...
Frage: liegt das dann an dem Code??? wenns doch aber in Fhem funzt kann es doch nur am Code liegen den ich von Sinus in FTui kopiert habe oder nicht??
Gruss
Markus
Das überflüssige > kommt von der Zeile:
<div data-type="label" class="darker big">Beleuchtung Terrasse</div>>
Am Ende ist ein > zuviel!
Bekommst du beim Betätigen des Switch in ftui eine Toastmessage?
Was steht da drin?
Wenn du das, was da kommt im fhem eingibst schaltet dann die Beleuchtung?
Mach mal im fhem ein list HM_471C02_Sw_01 und poste das Ergebnis hier.
Zitat von: redlav am 15 Februar 2017, 14:36:11
Das überflüssige > kommt von der Zeile:
<div data-type="label" class="darker big">Beleuchtung Terrasse</div>>
Am Ende ist ein > zuviel!
O.K. verstanden!
Zitat von: redlav am 15 Februar 2017, 14:36:11
Bekommst du beim Betätigen des Switch in ftui eine Toastmessage?
Was steht da drin?
Sorry, aber was ist eine Toastmessage?
Zitat von: redlav am 15 Februar 2017, 14:36:11
Wenn du das, was da kommt im fhem eingibst schaltet dann die Beleuchtung?
Was meinst du mit dem ws ich da eingebe?? Im oberen Post habe ich Screenshots gemacht..dort ist zu sehen wenn ich den Button betätige (ein) und aus (off)
Zitat von: redlav am 15 Februar 2017, 14:36:11
Mach mal im fhem ein list HM_471C02_Sw_01 und poste das Ergebnis hier.
mach ich sobal ich zuhause bin
Gruss
Zitat von: redlav am 15 Februar 2017, 14:36:11
Bekommst du beim Betätigen des Switch in ftui eine Toastmessage?
Was steht da drin?
Siehe zwei Posts vorher.
Zitat von: Kusselin am 15 Februar 2017, 16:46:50
O.K. verstanden!Sorry, aber was ist eine Toastmessage?
Das kleine Popup was kurz erscheint, wenn Du im FTUI auf das Icon klickst.
Zitat
Was meinst du mit dem ws ich da eingebe?? Im oberen Post habe ich Screenshots gemacht..dort ist zu sehen wenn ich den Button betätige (ein) und aus (off)
mach ich sobal ich zuhause bin
Gib das, was in dem kleinen Popup erscheint, mal im Kommandofeld in FHEM ein. Geht die Lampe dann an?
Wenn das funktioniert, dann gib mal in einem Browser in der Adresszeile das hier ein:
http://<host-IP>:8083/fhem?XHR=1&cmd=set%20HM_471C02_Sw_01%20on
Natürlich <host-IP> durch Dein 192.168.178... ersetzen.
Was passiert dann?
Gruß,
Thorsten
Hi Thorsten,
wenn ich das eingebe kommt:
Please define HM_471C02_Sw_01 first ?????
Gruss
markus
P.S. Das mit dem Toastmessage verstehe ich jetzt auch das ist die Message die immer kommt wenn man den Button drückt (das was ich auch kopert habe im Bild !!)
Also da stimmt definitiv was nicht!! Über fhem klappts und über Ftui nicht!! :'(
Die Toastmessages hatte ich übersehen. Mein Fehler :(
Wenn das Device nicht bekannt ist, stellt sich die Frage auf was du im fhem klickst?
Das wird dann wohl offensichtlich einen anderen Namen haben. Der von dir angegebene
ist der Name nach dem pairen. Hast du ihn danach umbenannt?
Hi, also wenn ich auf das Gerät in Fhem klicke..ich habe das umbenannt in " Beleuchtung terrasse" kommt folegndes:
INTERNALS:
DEF
471C0201
NAME
Beleuchtung_Terrasse
NOTIFYDEV
global
NR
59
NTFY_ORDER
50-HM_471C02_Sw_01
STATE
off
TYPE
CUL_HM
chanNo
01
device
HM_471C02
peerList
Terrasse_EIN,Terrasse_AUS
READINGS:
CommandAccepted
yes
2017-02-15 19:33:54
R-Terrasse_AUS-lgActionType
jmpToTarget
2017-02-11 12:27:33
R-Terrasse_AUS-shActionType
jmpToTarget
2017-02-11 12:27:33
R-Terrasse_EIN-lgActionType
jmpToTarget
2017-02-11 12:27:32
R-Terrasse_EIN-shActionType
jmpToTarget
2017-02-11 12:27:32
R-powerUpAction
off
2017-02-11 12:27:28
R-sign
off
2017-02-11 12:27:28
RegL_01.
08:00 30:06 57:24 56:00 00:00
2017-02-11 12:27:28
RegL_03.HM_39CD09_Btn_01
02:00 03:00 04:32 05:64 06:00 07:FF 08:00 09:FF 0A:01 0B:64 0C:66 82:00 83:00 84:32 85:64 86:00 87:FF 88:00 89:FF 8A:21 8B:64 8C:66 00:00
2017-02-11 12:27:32
RegL_03.HM_39CD09_Btn_02
02:00 03:00 04:32 05:64 06:00 07:FF 08:00 09:FF 0A:01 0B:13 0C:33 82:00 83:00 84:32 85:64 86:00 87:FF 88:00 89:FF 8A:21 8B:13 8C:33 00:00
2017-02-11 12:27:33
deviceMsg
off (to CUL868)
2017-02-15 19:33:54
level
0
2017-02-15 19:33:54
pct
0
2017-02-15 19:33:54
peerList
Terrasse_EIN,Terrasse_AUS,
2017-02-12 10:12:01
recentStateType
ack
2017-02-15 19:33:54
state
off
2017-02-15 19:33:54
timedOn
off
2017-02-15 19:33:54
ATTRIBUTES:
group
Aktor Gartenbeleuchtung
deleteattr
model
HM-LC-SW4-DR
deleteattr
peerIDs
00000000,39CD0901,39CD0902
deleteattr
room
Draussen
deleteattr
webCmd
statusRequest:toggle:on:off
deleteattr
Gruss
Wenn das Device nicht mehr so im fhem heißt, musst du das natürlich auch im ftui so angeben:
data-device="Beleuchtung_Terrasse"
schwere Geburt...aber jetzt funktioniert es!!! :D
Danke Euch!!!
Ne frage jetzt noch...wie bekomme ich jetzt das Widget links oben in die erste Spalte?
Super und nochmal danke..jetzt klappts mit dem button drücken!!!
Wenn deine html-Datei noch so aussieht wie hier:
https://forum.fhem.de/index.php/topic,67014.msg585172.html#msg585172 (https://forum.fhem.de/index.php/topic,67014.msg585172.html#msg585172)
dann fehlt da eine weitere Gridster definition.
Ich kann nicht genau erkennen, was das hier werden soll:
<ul>
<!-- Menü -->
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8" data-template="menu.html"></li>
</ul>
Welche Version hast du im Einsatz?
Wenn du kleiner 2.6 bist, musst du im Header noch die Gridstergrößen definieren:
<meta name="widget_base_width" content="xx">
<meta name="widget_base_height" content="xx">
Mit 2.6 selber habe ich nich nichts gemacht, dann braucht man das nicht (glaube ich), muss dann aber auch
keine sizex + sizey angeben.
Hi redlav,
wie bzw, woran erkenne ich die version von FTUI?
Und ich dachte mit dem Eintrag:
ul>
<!-- Menü -->
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8" data-template="menu.html"></li>
</ul>
definiere ich die Position des Buttons "Beleuchtung Terrasse"!
Gruss
Zitat
woran erkenne ich die version von FTUI?
Die Version kann man sich über folgenden Code anzeigen lassen:
<div class="cell">
<div class="bigger line-normal">FTUI</div>
<div class="" data-bind="ftui.version"></div>
</div>
Zitat
Und ich dachte mit dem Eintrag:
<ul>
<!-- Menü -->
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8" data-template="menu.html"></li>
</ul>
definiere ich die Position des Buttons "Beleuchtung Terrasse"!
Nicht so ganz. Was es mit dem data-template auf sich hat, kann ich nicht sagen. Aber die Definition müsste in etwa so aussehen:
<ul>
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8">
<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>
</li>
</ul>
Wobei die Größe der Kachel durch data-sizex="1" data-sizey="8" angegeben wird. Da ich nicht weiß, wie groß (und ob überhaupt)
deine widget_base definiert ist, muss du das ausprobieren, in dem du die Werte vergrößerst bzw. verkleinerst.
Hi, danke dir..
bin am testen und rumprobieren....aber glaubst ich bekomms hin diese widget nebeneinander zu ordner!!! das klappt einfach nicht!! >:(
Untereinander funzt ja automatisch, aber das blöde nebeneinander.....
Gruss
Markus
Häng mal deine html-Dateien hier rein, damit ich mir die mal ansehen kann.
Vieleicht fällt mir ja was auf.
Hi,
so sieht die html datei aus:
<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">
<!-- Gartenbeleuchtung -->
<li data-col="7" data-row="2" data-sizex="5" data-sizey="2">
<header>
<div data-type="label" class="medium">Gartenbeleuchtung</div>
</header>
<div class="top-space small">
<div data-type="switch" data-device="Beleuchtung_Terrasse" data-get="state" data-icons='["fa-lightbulb-o","fa-lightbulb-o"]' data-on-colors='["black","gray"]' data-get-on='["on","off"]' data-background-colors='["#006600","#505050"]' data-set-on="on" data-set-off="off" class="bigger inline" ></div>
<div data-type="switch" data-device="Beleuchtung_Ostseite" data-get="state" data-icons='["fa-lightbulb-o","fa-lightbulb-o"]' data-on-colors='["black","gray"]' data-get-on='["on","off"]' data-background-colors='["#006600","#505050"]' data-set-on="on" data-set-off="off" class="bigger inline" ></div>
<div data-type="switch" data-device="Beleuchtung_Suedseite" data-get="state" data-icons='["fa-lightbulb-o","fa-lightbulb-o"]' data-on-colors='["black","gray"]' data-get-on='["on","off"]' data-background-colors='["#006600","#505050"]' data-set-on="on" data-set-off="off" class="bigger inline" ></div>
<div data-type="switch" data-device="Beleuchtung_Westseite" data-get="state" data-icons='["fa-lightbulb-o","fa-lightbulb-o"]' data-on-colors='["black","gray"]' data-get-on='["on","off"]' data-background-colors='["#006600","#505050"]' data-set-on="on" data-set-off="off" class="bigger inline" ></div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Es ist ein Unterschied gell wenn ich die daten in der HTML hintereinander schreibe gegenüber untereinander?
Wenn Du noch mehr Infos benötigst, sag bitte Bescheid.
Gruss
Anders herum...
wie müsste die Ergänzung aussehen das die Icons nebeneinander sitzen??
im Header soll " Gartenbeleuchtung" stehen:
<ul>
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8">
<div data-type="switch" class="big"
data-device="Terrassen_Beleuchtung"
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">Terrasse</div>
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8">
<div data-type="switch" class="big"
data-device="Ostseite_Beleuchtung"
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">Osten</div>
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8">
<div data-type="switch" class="big"
data-device="Suedseite_Beleuchtung"
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">Suedseite</div>
<li data-col="1" data-row="1" data-sizex="1" data-sizey="8">
<div data-type="switch" class="big"
data-device="Westseite_Beleuchtung"
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">Westseite</div>
</li>
</ul>
Ich bekomms ums verr....nicht gebacken die Icons nebeneinander zu setzen!!
Gruss
Hi,
versuch es mal so...:
<ul>
<li data-col="1" data-row="1" data-sizex="1" data-sizey="2" data-sizex="8">
<header>Gartenbeleuchtung</header>
<div class="inline">
<div data-type="switch" class="big"
data-device="Terrassen_Beleuchtung"
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">Terrasse</div>
</div>
<div class="inline">
<div data-type="switch" class="big"
data-device="Ostseite_Beleuchtung"
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">Osten</div>
</div>
<div class="inline">
<div data-type="switch" class="big"
data-device="Suedseite_Beleuchtung"
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">Suedseite</div>
</div>
<div class="inline">
<div data-type="switch" class="big"
data-device="Westseite_Beleuchtung"
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">Westseite</div>
</div>
</li>
</ul>
Ggf. noch mit data-sizey und data-sizex experimentieren (benutze kein Gridster), wenn die Symbole trotzdem noch umgebrochen werden (da zu wenig Platz im li-Gridster-Element...).
Aber ich würde dir generell eher erstmal raten sich mit den grundlegenden HTML/CSS Eigenheiten zu beschäftigen....da du einfach noch solche grundlegenden Dinge, wie ... z. B. Tags, die geöffnet werden, nicht schließt ...
<li ......>
Inhalt
</li>
Anschließend kommen die Eigenheiten vom eingesetzten Framework ... Gridster, Flexbox .... usw. usw. und danach kommen die Eigenheiten der Widgets selbst.
Gruß
Mathias
Hi danke dir...
ja da gebe ich dir recht...habe Bücher zuhause die ich unbedingt mal lesen muss..aber soviel...
<li
Inhalt
</li>
da kommt dann alles rein was angezeigt werden soll....aber wie das dann aussehen muss damit die Buttons nebeneinander stehen sollen....das ist schwer..denke aber es hängt mit
<div class="inline">
zusammen, wenn ich mich nicht täuche??
Gruss
Wenn ich zuhause bin dann kopiere ich es mal rein und berichte..
Stimmt es das es ein Unterschied ist wenn ich den Inhalt (html) hintereinander schreibe als untereinander??
Hi,
das mit dem <li> war nur ein Beispiel.
Zitat von: Kusselin am 17 Februar 2017, 15:37:27
..denke aber es hängt mit
<div class="inline">
zusammen, wenn ich mich nicht täuche??
Richtig. Jeder DIV-Container der diese Klasse innerhalb eines "Rang-höheren" Elements hat (z.B. innerhalb eines <li> oder anderen <div>), wird nebeneinander angezeigt.
Zitat von: Kusselin am 17 Februar 2017, 15:37:27
...
Stimmt es das es ein Unterschied ist wenn ich den Inhalt (html) hintereinander schreibe als untereinander??
Meinst du mit untereinander und hintereinander Folgendes?:
<ul>
<li>
<div class="right-align">
<div class="inline">Eins </div>
<div class="inline">Zwei </div>
<div class="inline">Drei </div>
</div>
</li>
</ul>
bzw.
<ul><li><div class="right-align"><div class="inline">Eins </div><div class="inline">Zwei </div><div class="inline">Drei</div></div></li></ul>
Wenn, ja, dann ist die Antwort, dass es keinen Unterschied macht.
Man erhält bei beiden die gleiche Ausgabe:
Eins Zwei Drei
Hi,
ja so meinte ich das auch..danke für die Info..
Jetzt habe ich mal kopiert und zwar habe ich noch den "row wert verändert weil das eigentlich das menü ist am Anfang!!
<html>
<head>
<title>Einstellungen</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-col="2" data-row="1" data-sizex="1" data-sizey="2" data-sizex="8">
<header>Gartenbeleuchtung</header>
<div class="inline">
<div data-type="switch" class="big"
data-device="Terrassen_Beleuchtung"
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">Terrasse</div>
</div>
<div class="inline">
<div data-type="switch" class="big"
data-device="Ostseite_Beleuchtung"
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">Osten</div>
</div>
<div class="inline">
<div data-type="switch" class="big"
data-device="Suedseite_Beleuchtung"
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">Suedseite</div>
</div>
<div class="inline">
<div data-type="switch" class="big"
data-device="Westseite_Beleuchtung"
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">Westseite</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Und mit Bild so :-(
Bitte nachlesen wie das mit den Gridster-Einteilungen ist (wie gesagt .... benutze kein Gridster):
.... data-col="2" data-row="1" data-sizex="1" data-sizey="2" data-sizex="8" ....
So wie es auf dem Bild aussieht haben die Elemente nicht genug Platz, um sich nebeneinander aufzureihen und werden deswegen automatisch umgebrochen.
Ahhh ok das ist natürlich noch ne option..bin grad unterwegs..melde mich
Gesendet von iPhone mit Tapatalk Pro
data-sizex ist außerdem zweimal drin. Da kann sich das System dann was aussuchen. Nach Murphy wird das immer das Falsche sein.
Ich habe den ganzen inline-Kram irgendwann aufgegeben und positioniere meinen Kram mit <table>. Das ist in modernem Webdesign zwar verpönt, es hat aber den Vorteil, dass es funktioniert.
Btw.: selfhtml.org ist meistens meine Referenz. Bücher dazu habe ich keine.
Gruß,
Thorsten
Meine Frage nach den widget_base-Definitionen wurde auch noch nicht beantwortet:
<meta name="widget_base_width" content="xx">
<meta name="widget_base_height" content="xx">
Wie sehen diese in deiner index.html aus?
Ohne diese Informationen wird es schwierig die Größenangaben in den <li></li>-Definitionen
zu bewerten.
Verwendest du einen Editor mit html-Unterstützung?
In einem solchem Editor kannst du da auf die einzelnen Tags klicken der jeweils dazu passende wird hervorgehoben.
Auch eine Formatierungsfunktion, die die Einrückungen sauber vornimmt hilft bei der Suche nach Inkonsistenzen, die
durch copy&paste mal gerne passieren.
Dann nochmal die Frage nach der Version. Wenn du noch nicht viel an Code zusammen hast, würde ich dir den Update
die 2.6 empfehlen. Dann kannst du dir den ganzen Gridsterkram ersparen. Das geht da wohl automatisch. Außerdem
spartst du dir den Update nachher, der manchmal wohl eine Anpassung des Layout notwendig macht.
Zitat von: redlav am 17 Februar 2017, 19:33:55
Meine Frage nach den widget_base-Definitionen wurde auch noch nicht beantwortet:
<meta name="widget_base_width" content="xx">
<meta name="widget_base_height" content="xx">
weiß ich nicht ich poste aber die HTML dateien...
Zitat von: redlav am 17 Februar 2017, 19:33:55
Dann nochmal die Frage nach der Version. Wenn du noch nicht viel an Code zusammen hast, würde ich dir den Update
die 2.6 empfehlen. Dann kannst du dir den ganzen Gridsterkram ersparen. Das geht da wohl automatisch.
Sorry aber den Code von gestern..da erscheint nur fett "FTUI" mehr nicht!!
Wie update ich denn?
Gruss
Main HTML:
<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>
Menü HTML:
<html>
<body>
<div style="color:#bdc3c7; margin-top: 10px;">
<div data-type="clock" data-format="H:i" class="large"></div>
<div data-type="clock" data-format="d.n.Y" class="small"></div>
</div>
<div style="margin-top: 15px; border-top:5px solid #000000;"></div>
<div class="cell centered">
<div data-type="pagetab" data-url="main.html" data-icon="fa-home" class="top-space"></div>
<div data-type="pagetab" data-url="control.html" data-icon="fa-sliders" class="top-space"></div>
<div data-type="pagetab" data-url="media.html" data-icon="fa-music" class="top-space"></div>
<div data-type="pagetab" data-url="einstellungen.html" data-icon="fa-wrench" class="top-space"></div>
<div data-type="pagetab" data-url="wetter.html" data-icon="fa-sun-o" class="top-space"></div>
</div>
</body>
</html>
Einstellungen HZML:
<html>
<head>
<title>Einstellungen</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-col="2" data-row="1" data-sizex="1" data-sizey="10" data-sizex="8">
<header>Gartenbeleuchtung</header>
<div class="inline">
<div data-type="switch" class="big"
data-device="Terrassen_Beleuchtung"
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">Terrasse</div>
</div>
<div class="inline">
<div data-type="switch" class="big"
data-device="Ostseite_Beleuchtung"
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">Osten</div>
</div>
<div class="inline">
<div data-type="switch" class="big"
data-device="Suedseite_Beleuchtung"
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">Suedseite</div>
</div>
<div class="inline">
<div data-type="switch" class="big"
data-device="Westseite_Beleuchtung"
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">Westseite</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Ich hoffe ich habe soweit alles gepostet für Euch/Dich?
Gruss
MH
Ich kann dir das wiki sehr empfehlen
https://wiki.fhem.de/wiki/FHEM_Tablet_UI
https://wiki.fhem.de/wiki/FHEM_Tablet_UI (https://wiki.fhem.de/wiki/FHEM_Tablet_UI)
Hi,
funktioniert ohne diese Zeile hier überhaupt was im Tablet UI:
<script src="js/fhem-tablet-ui.js" defer></script>
Das würde mich wundern, aber ich bin die letzten Upgrades auch nicht mitgegangen.
Gruß,
Thorsten
Das kommt mir auch seltsam vor. Da sind ja keinerlei meta-Tags enthalten. :(
Die Version kannst du auch direkt aus der fhem-tablet-ui.js auslesen. Bei mir steht da:
Version: 2.4.3
Alles was größer dieser Version passiert ist, habe ich mir bisher erspart. Da wird es dann
auch schwierig für mich dein Problem zu lösen. Leider.
Hallo Zusammen,
ich habe jetzt nochmal ne neue index.html erzeugt..und habe auch viel probiert nun..langsam kommt man rein in die Materie...
hier mal ein Screen:
Jetzt möchte ich gerne noch unter die Tonnen jeweils einen Namen schreiben genauso gross wie beim Kalender -> medium
hab folgendes gemacht:
<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" >[b]<div data-type="label" class="medium">Bio</div>[/b]
Klappt aber nicht....dann geht gar nix mehr und es ist auch nix mehr zu lesen.
vielleicht hier noch eine Testlinie von Euch wie es funzen könnte?
Danke euch vielmals
"[ b ]" ist kein HTML...
Gruß,
Thorsten
Hi Thorsten,
das sollte eigentlich der code für fettschrift sein ;D
Aber nicht in HTML. HTML wäre <b>...</b> oder <strong>...</strong>.
Gruß,
Thorsten
@Kusselin
Sollte es dennoch nicht funktionieren, kannst du noch versuchen die Tonne und das Label in ein weiteres DIV mit der Klasse "inline" zu packen.
Somit sollte es auf jeden Fall funktionieren.