Gartenbeleuchtung in TabletUI übernehmen

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

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

redlav

#30
16 Februar 2017, 22:33:04
Häng mal deine html-Dateien hier rein, damit ich mir die mal ansehen kann.

Vieleicht fällt mir ja was auf.

Kusselin

#31
17 Februar 2017, 07:09:35 Letzte Bearbeitung: 17 Februar 2017, 09:51:11 von Kusselin
Hi,
so sieht die html datei aus:
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">

<!-- 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

Kusselin

#32
17 Februar 2017, 13:22:00
Anders herum...
wie müsste die Ergänzung aussehen das die Icons nebeneinander sitzen??
im Header soll " Gartenbeleuchtung" stehen:

Code Auswählen
<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

n4rrOx

#33
17 Februar 2017, 14:53:49
Hi,

versuch es mal so...:
Code Auswählen

<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 ...
Code Auswählen
<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

Kusselin

#34
17 Februar 2017, 15:37:27
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
Code Auswählen
<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??

n4rrOx

#35
17 Februar 2017, 16:16:45
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
Code Auswählen
<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?:
Code Auswählen

<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.
Code Auswählen

<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:
Code Auswählen
Eins Zwei Drei

Kusselin

#36
17 Februar 2017, 16:59:37
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!!

Code Auswählen
<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 :-(

n4rrOx

#37
17 Februar 2017, 17:15:33
Bitte nachlesen wie das mit den Gridster-Einteilungen ist (wie gesagt .... benutze kein Gridster):
Code Auswählen
.... 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.

Kusselin

#38
17 Februar 2017, 17:29:41
Ahhh ok das ist natürlich noch ne option..bin grad unterwegs..melde mich


Gesendet von iPhone mit Tapatalk Pro

Thorsten Pferdekaemper

#39
17 Februar 2017, 19:28:44
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
FUIP

redlav

#40
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">

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.

Kusselin

#41
17 Februar 2017, 21:20:31
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

Kusselin

#42
17 Februar 2017, 21:23:19
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>


Menü HTML:
Code Auswählen
<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:
Code Auswählen
<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

Thorsten Pferdekaemper

#44
18 Februar 2017, 11:20:25
Hi,
funktioniert ohne diese Zeile hier überhaupt was im Tablet UI:
Code Auswählen

   <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
FUIP
Drucken
Nach oben Seiten 1 2 3 4 Alle
Benutzer-Aktionen