[FHEM-Tablet-UI] User-Demos

[spacecowboy.21]

Hallo zusammen,

hier ist meine Umsetzung.

Viele Grüße
Zage

Das sieht echt super aus!!

Könntest Du deine Css und die html posten?

Danke

[chris76e]

Ok Paul,

werde jetzt erstmal eine einfache Version machen und mich dann später nochmal damit rumschlagen.

Aber Danke für die Vorlage

Christian

[paul79]

Ok Paul,

werde jetzt erstmal eine einfache Version machen und mich dann später nochmal damit rumschlagen.

Aber Danke für die Vorlage

Christian

du kann ja oben in der index.html Seite diese eintragen dann hast du schon mal das aussehen und dann Stück für Stück ausbauen.

Code Auswählen Erweitern

<link rel="stylesheet" type="text/css" href="css/fhem-grayblue-user-ui.css" />
<link rel="stylesheet" type="text/css" href="css/fhem-tablet-ui-user.css" />

Gruß Paul

[chris76e]

Super, so funktioniert schonmal der Anfang.

Vielen Dank

[paul79]

Hallo,

ich habe noch ein update von meinen 2 Widgets widget_uwz_paul79.js und widget_verkehrsinfo.js.

Gruß Paul

[mrfloppy]

Ich komme weiter.
Zumindest läuft das backup.sh. Es erstellt das Backup und kopiert die Dateinen auch brav auf den NAS. Auch das Löschen klappt.

ABER:
Keine readings in FHEM.Backup (setreading FHEM.Backup backupMB $fileSizeMB)
Damit auch kein FHEM.Backup off (set FHEM.Backup off)

Du hast bestimmt ein telnet Passwort vergeben oder?

in der backup.sh
mytelnetPW="password"  definieren und dann die Befehle so aufrufen

perl /opt/fhem/fhem.pl 7072 $mytelnetPW "setreading FHEM.Backup state off"

Dann sollte es funktionieren das "off" richtig gesetzt wird

LG

[TWART016]

Dieser Version ist für 8 Zoll und 10,5 Zoll erstellt, beim Start der Webseite ist ein Script in der index.html was die Breite des Tabletts ausliest und wenn diese 1280px beträgt wird zusätzlich die css Datei fhem-tablet-ui-user-1280.css geladen, damit werden die richtigen Größen für 10.5 Zoll geladen. Wozu das Ganze, damit man beide Tabletts im native Modus laufen und nicht gezoomt werden.

Die css Datein für die Einstellungen:
fhem-grayblue-user-ui.css -> hauptsächlich für Farben
fhem-tablet-ui-user.css -> Schatteneffekte und Größen
fhem-tablet-ui-user-1280.css -> spezielle Größen für Auflösung 1280x800px

Wie bekommt man die Auflösung der Geräte am leichtesten heraus? Ich habe unterschiedliche Geräte: PC, Android Tablet, iOS. Ist das sogar per Label in FTUI möglich?

Ich möchte damit gerne für Mobilbrowser und Tablet unterschiedliche Icongrößen verwenden, ohne mehrere Versionen für PC, Tablet und mobil zu erstellen.

[paul79]

Wie bekommt man die Auflösung der Geräte am leichtesten heraus? Ich habe unterschiedliche Geräte: PC, Android Tablet, iOS. Ist das sogar per Label in FTUI möglich?

Ich möchte damit gerne für Mobilbrowser und Tablet unterschiedliche Icongrößen verwenden, ohne mehrere Versionen für PC, Tablet und mobil zu erstellen.

Hallo,

probiere mal diese Seite size.html

Gruß Paul

[TWART016]

Danke, sieht gut aus.

Ich finde es nur seltsam, dass beim iPhone eine Auflösung von 980*1691 angezeigt wird.

Erstens hat mein iPhone (Safari) gar nicht so viel Pixel. Zweitens wird auf dem Tablet (Fully) eine geringere Auflösung angezeigt.

Die Auflösung beim iPhone in FTUI ist zudem gefühlt deutlich kleiner (sicherlich die hälfte).

Das habe ich beim mobil index gesetzt.

Code Auswählen Erweitern


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

[paul79]

Hi,

genau erklären kann ich es nicht, für mich war nur wichtig wie ich unterscheide wo es aufgerufen wird. Es gibt auch einen Unterschied ob es im Head oder Body abgefragt wird.

schau mal hier: https://forum.fhem.de/index.php/topic,46897.msg395218.html#msg395218 das ist auch ein Link zu http://www.canbike.org/CSSpixels/ drin.

Ein Excel Sheet zur Berechnung der Gridgröße aus den Beitrag oben ist hier:
https://forum.fhem.de/index.php/topic,57366.msg557268.html#msg557268

Gruß Paul

[TWART016]

schau mal hier: https://forum.fhem.de/index.php/topic,46897.msg395218.html#msg395218 das ist auch ein Link zu http://www.canbike.org/CSSpixels/ drin.

Das mit dem Device Width kann hinhauen. Wie kann man das selber herausfinden? Meine Tablets tauchen dort nicht auf.

Kann man anstatt der fixen Breite auch eine eigene Pixelanzahl angeben?

Code Auswählen Erweitern

content="width=device-width"

Unabhängig von der Größe kann ich jetzt zumindest ein anderes css mit unterschiedlichen Größen nehmen.

EDIT: Wie das Skript auf eine breite von 980 kommt ist mir immer noch ein Rätsel. Pixelbreite ist nur 750.

[paul79]

Hi,

zu Apple kann ich nix sagen aber vielleicht hilft die dieses weiter:

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Gruß Paul

[spacecowboy.21]

...ein paar Beipiele aus meinem FTUI 

Sieht sehr schön aus.

Würdest Du deine Datein und css bereit stellen?

[Wasserwerk33]

Hallo LEute

habe mir mir aus dem Internet dieses Umgebung besorgt. Nur leider kann ich sie nicht so anpassen wie ich es gerne möchte. Es war mit Sectionen versehen. Diese sind in machen bereichen auch super. Nur bei meiner Unwetterseite ist dieses irgendwie nicht so pralle. Kann mir vielleicht jemand sagen wie ich dieses hinbekommen das ich dieses ohne sectionen einstelllen kann. Habe mal meinen Code beigefügt und ein Foto wie es aussieht.

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
   <head></head>
   <body>
      <div class="label" id="content_dwd"
      <div class="gridster">
<ul>
         <li class="halbTransparent border-left border-right" data-row="3" data-col="2" data-sizex="3" data-

sizey="4">
  <header>Unwetter</header>
            <div class="col-60">
              <div data-type="uwz"
                   data-device="Unwetterzentrale" 
                   data-detail='["uwzLevel","IconURL","ShortText","WarnTime"]'
                   data-lngtxtstyle="small"
   data-imgsize="50"
                   data-max="5"
                   data-textdivider="</br>"
                   data-swiperstyle="yes"
                   class=""></div>
</li>
<li class="halbTransparent border-left border-right" data-row="3" data-col="5" data-sizex="4" data-sizey="4">
            <header>Karte</header>
            <div data-type="image"
                 data-refresh="300"
                 data-width="500 "
                 data-height="480"
                 data-url="http://www.unwetterzentrale.de/images/map/nrw_index.png"
                 class="right-space">
</div>
                  </div>
               </div>
            </li>
         </ul>
      </div>
   </div>
</body>
</html>

[christian22]

Hi Paul

Rufe die Seite über den Button Tablet-UI in Fhem auf bzw. direkt die index.html.

Momentan wird nichts aktualisiert. Ein Schalter den ich eben eingebaut habe um ne Lampe ein/aus schalten funktioniert.

Bekomme folgende Meldung im Log:

Code Auswählen Erweitern

2017.02.27 17:28:21 1: devspec2array WEB,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Kueche_Tuerkontakt,Kueche_Fensterkontakt1,Wohn_Fensterkontakt,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.

2017.02.27 17:28:26 1: devspec2array WEB,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Kueche_Tuerkontakt,Kueche_Fensterkontakt1,Wohn_Fensterkontakt,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.

2017.02.27 17:28:27 1: devspec2array WEB,HM_CC_boost,HM_CC_auto_an_aus,HM_CC_eco,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Kueche_Tuerkontakt,Kueche_Fensterkontakt1,Wohn_Fensterkontakt,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.

2017.02.27 17:28:47 1: devspec2array WEB,Wohn_Wandthermostat,Wohn_Fensterkontakt,Kueche_Fensterkontakt1,Kueche_Tuerkontakt,Kueche_Wandthermostat,Bad_Wandthermostat,HM_CC_boost,HM_CC_auto_an_aus,HM_CC_eco,Handy,Yamaha_zone2,Yamaha,Fritzboxanrufeliste,Abfall_CalView,?????_CalView,Geburtstage_CalView,TrafficMaps,Pushover_an_aus,VI_Hessen,UWZ,Wetter,Sonnenauf,Sonnenunter: Sequence (???...) not recognized in regex; marked by <-- HERE in m/^(??? <-- HERE ??_CalView)$/ at fhem.pl line 1186.


Hey Chris,

das Problem liegt an den ??_CalView-Einträgen, die Paul mit den Fragezeichen maskiert hat. Wenn du die alle aus den Vorlagen schmeißt, dann geht es wunderbar.
Vielen Dank nochmal an Paul für das Teilen.

Grüße