[FHEM-Tablet-UI] User-Demos

[Andy89]

Hallo Andy,

sieht super aus. Bei mir wird nur der Text angezeigt, ohne Design. Liegt vermutlich daran, dass m_myStyle.css fehlt. Könntest du das noch zur Verfügung stellen?

Oder woran kann es noch liegen?


Gruß
TWART016

ne an der m_myStyle.css liegt das nicht. Aber woran das liegt weiß ich auch nicht. Evtl Caching Probleme? Ich häng mal die m_myStyle.css und meine index-dark.html an^^ vielleicht hilft das ja

[TWART016]

Hilft leider auch nicht. Mich interessiert vor allem der Code mit dem Menü auf der linken Seite. Welcher Teil ist das in deinem Code?

[bjoernbo]

Hast Du den Eintrag

lib/font-awesome.min.css" />

bei

<link rel="stylesheet" href="

eingetragen?

<link rel="stylesheet" href="/fhem/www/tablet/lib/font-awesome.min.css" />

!! Bei mir weichen die Pfade vom Standard ab!! Musst Du auf deiner Einrichtung entspr. anpassen oder schau mal in die Index_mobile.html von Andy89

[Andy89]

guter Hinweis von Björn. Alle meine Pfade sind anders! Ich hab die Seiten auf meinem Server liegen und fhem ist auf einem anderem System. Du müsstest dir also die Verlinkungen in einer Standard-index von setstate mal anschauen 

[TWART016]

Das meiste habe ich soweit hinbekommen. Ich benutze die fhem-mobil-ui-dark.css

Aktuell gibt es drei Probleme:
1) Das Icon wird dunkelgrau angezeigt, genau wie der Hintergrund. Das Icon hätte ich gerne in bg-lightgray.
2) Bei Küche werden die Umlaute nicht korrekt angezeigt.
3) Bei zwei Seiten werden die Texte aus der Navigation im unteren Textfeld angezeigt.

Edit: Welches Iconset verwendest du?

[Andy89]

Aktuell gibt es drei Probleme:
1) Das Icon wird dunkelgrau angezeigt, genau wie der Hintergrund. Das Icon hätte ich gerne in bg-lightgray.
2) Bei Küche werden die Umlaute nicht korrekt angezeigt.
3) Bei zwei Seiten werden die Texte aus der Navigation im unteren Textfeld angezeigt.

Edit: Welches Iconset verwendest du?

1.) das kannst du selbst einstellen an dieser Stelle:

Code Auswählen Erweitern

<header id="header-nav" class="bg-darkgray fixed row">
<div data-type="slideout" data-icon-color="#fff"
class="col-1-8 big center-align notouch"></div>
hierzu einfach das data-icon-color anpassen
2.) das liegt daran, dass wahrscheinlich oben in der index was fehlt:

Code Auswählen Erweitern

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

3.) dazu fällt mir auf anhieb nichts ein...

edit-frage:

Code Auswählen Erweitern

<link rel="stylesheet" href="/ftui/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/ftui/lib/openautomation.css">

[TWART016]

1.) das kannst du selbst einstellen an dieser Stelle:

Code Auswählen Erweitern

<header id="header-nav" class="bg-darkgray fixed row">
<div data-type="slideout" data-icon-color="#fff"
class="col-1-8 big center-align notouch"></div>
hierzu einfach das data-icon-color anpassen

Danke das wars

2.) das liegt daran, dass wahrscheinlich oben in der index was fehlt:

Code Auswählen Erweitern

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Habe ich eingetragen, trotzdem über noch das Fragezeichen-Symbol. In der Aufgerufenen html-Datei ist es jedoch richtig, nur in der Leiste links und oben nicht.

3.) dazu fällt mir auf anhieb nichts ein...

Keine Ahnung warum, aber mittlerweile ist es weg und nun richtig.

edit-frage:

Code Auswählen Erweitern

<link rel="stylesheet" href="/ftui/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/ftui/lib/openautomation.css">

Danke

[Andy89]

Habe ich eingetragen, trotzdem über noch das Fragezeichen-Symbol. In der Aufgerufenen html-Datei ist es jedoch richtig, nur in der Leiste links und oben nicht.

hmm.. ich würde vermuten, dass es noch am Cache liegt und so noch die Alt-Daten genutzt werden. ich habe noch folgende Zeilen oben in der index:

Code Auswählen Erweitern

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Cache-Control" content="no-store" />

Und auf dem Laptop nutz ich meist den Web-Entwickler Modus im Firefox, da ich dort eingestellt habe, dass kein Cache genutzt werden soll.

[TWART016]

Code Auswählen Erweitern

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Cache-Control" content="no-store" />

Die Zeilen hatte ich genauso drinnen. Auch no-store habe ich.
Fehlen ggf. Pakete für das Betriebssystem bzw. Webserver?

[bjoernbo]

Ich hätte da auch mal ein Anliegen. Irgendwie will ich das mit den "col" nicht ganz verstehen. Vielleicht liegt auch hier dann mein Problem 

Ich hätte gerne unterhalb der Temperaturanzeige meine Tendency-Werte. Bekomme das aber nicht hin :-/

<header id="header-nav" class="bg-lightgray fixed row">
      <div data-type="slideout" class="col-1-8 big center-align notouch"></div>
      <div id="linkname" class="col-1-2 large bold center-align middle"></div>
      <div data-type="symbol" data-device="AnzahlOffenerFenster"
         data-get='Zaehler' data-off-color="grey"
         data-get-on='["^[0]$","^[1-9][0-9]|[1-9]$"]'
         data-icons='["ftui-window","ftui-window warn"]'
         data-on-colors='["grey","blue"]' class="col-1-8 big center-align"></div>
      <div data-type="label"
             data-device="netatmo_M02:00:00:00:24:a2"
                    data-get="temperature"
                 data-limits="[-20,-15,-10,-5,0,5,10,15,20,25,30,35]"
             data-colors='["#483D8B","#1874CD","#9AC0CD","#CAE1FF","#F5FFFA","#98FB98","#9ACD32","#FFA500","#FF4500","#FF3030","#EE2C2C","#8B1A1A"]'
                            data-unit="°C"
   
             class="col-1-8"></div>
<!--
    <div data-type="klimatrend"
    data-device="netatmo_M02:00:00:00:24:a2"
    data-get="statTemperatureTendency"
    data-refperiod="6"
    data-stagnating-color="rgb(80,80,80)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(80,80,180)"
    data-highmark="1"
    data-highmark-icon="fa-angle-double"
    data-highmark-rising-color="rgb(255,80,80)"
    data-highmark-falling-color="rgb(80,80,255)"
    class="small inline"></div>
    <div data-type="klimatrend"
    data-device="netatmo_M02:00:00:00:24:a2"
    data-get="statTemperatureTendency"
    data-refperiod="3"
    data-stagnating-color="rgb(80,80,80)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(80,80,180)"
    data-highmark="1"
    data-highmark-icon="fa-angle-double"
    data-highmark-rising-color="rgb(255,80,80)"
    data-highmark-falling-color="rgb(80,80,255)"
   class="small inline"></div>
    <div data-type="klimatrend"
    data-device="netatmo_M02:00:00:00:24:a2"
    data-get="statTemperatureTendency"
    data-refperiod="2"
    data-stagnating-color="rgb(80,80,80)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(80,80,180)"
    data-highmark="1"
    data-highmark-icon="fa-angle-double"
    data-highmark-rising-color="rgb(255,80,80)"
    data-highmark-falling-color="rgb(80,80,255)"
    class="small inline"></div>
    <div data-type="klimatrend"
    data-device="netatmo_M02:00:00:00:24:a2"
    data-get="statTemperatureTendency"
    data-refperiod="1"
    data-stagnating-color="rgb(80,80,80)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(80,80,180)"
    data-highmark="1"
    data-highmark-icon="fa-angle-double"
    data-highmark-rising-color="rgb(255,80,80)"
    data-highmark-falling-color="rgb(80,80,255)"
    class="small inline"></div>-->

            <div data-type="loading" data-icon="fa-spinner" data-color="blue"
         data-effect="fa-blink" data-shade="true"
         class="col-1-8 center-align big black"></div>
   </header>

Die Tendency-Werte sind momentan auskommentiert. Kann mir jemand weiterhelfen ?

[bjoernbo]

anbei ein erster Einblick/Ausblick auf meine Mobie-FTUI. Die gesamte Umsetzung inkl. Code folgt zum Wochenende.
Danke an dieser Stelle an Andy89 für die anfängliche Inspiration!

[kroonen]

@bjoernbo

How did you configure the dark gray items, in the header?? with larn, co2 etc

regards richard

[l-j-silver]

Ich hätte da auch mal ein Anliegen. Irgendwie will ich das mit den "col" nicht ganz verstehen. Vielleicht liegt auch hier dann mein Problem 

Ich hätte gerne unterhalb der Temperaturanzeige meine Tendency-Werte. Bekomme das aber nicht hin :-/
Die Tendency-Werte sind momentan auskommentiert. Kann mir jemand weiterhelfen ?

Ich habe dir mal eine PN gesendet. Wenn es so passt, dann kannst du ja gerne den Code zur Verfügung stellen.

[bjoernbo]

@kroonen

Code Auswählen Erweitern

<html>
<head></head>
<body>
<div class="page" id="m_wohnzimmer">
<section style="background-color:#A4A4A4;">
     
<div class="small col-1 left-align">Lärm</div>
<div data-type="label"
data-device="NetatmoInnenSensor"
                    data-get="noise"
                    data-fix="0"
                    data-unit=" dB"
                    class="small col-2 left-align"></div>
            <div class="small col-2 left-align">|&nbsp;Luftfeuchte</div>
                    <div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
                    data-get="humidity"
                    data-fix="0"
                    data-unit="%"
                    class="small col-2 left-align"></div>
            <div class="small col-3 left-align">|&nbsp;CO&sup2; Belastung</div>
              <div data-type="label"
                   data-device="NetatmoInnenSensor"
                   data-get="co2"
                   data-fix="0"
                   data-unit=" ppm"
                   data-limits="[0, 600, 1000, 1180, 1800, 2250]"
                   data-colors='["green","yellowgreen","greenyellow","yellow","orange","red"]'
                   class="small col-3 left-align"></div>
            <div class="small col-4 left-align">|&nbsp;Temperatur</div>
                   <div data-type="label"
data-device="Wohnzimmer.Wandthermostat"
                    data-get="measured-temp"
                    data-unit="°C"
                    class="small col-4 right-align"></div>
</section>

[Andy89]

@bjoernbo: danke für die Idee und den Code. Hab ich direkt auch mal bei mir eingesetzt