New FHEM Tablet UI

[Da_Erdinga]

Hallo zusammen,

jetzt habe ich (glaue ich) meinen Fehler der weissen Seite gefunden.
Ich habe die index-example.html nicht wie angenommen renamed, sondern in eine "neue"Datei namens index.html verschoben.

Wie kann ich das rückgängig machen?

Ich wollte es über die grafische Oberfläche des PI machen, aber die habe ich mal (weil nicht benutzt) gelöscht.
Jetzt hab ich sie zwar nachinstalliert, aber der Pi will, das ich mich unter FHEM anmelde und da weiss ich die Zugangsdaten nicht
PI und Raspberry hab ich schon probiert.

Jetzt wüde ich das ganze dann doch über die Konsole machen.

Wer kann mir da helfen?

Danke

[Gunther]

Versuch doch mal über ftp auf den PI zuzugreifen

[CoolTux]

Hallo Leute,

Ist es normal das sich beim Swiper Widget der Inhalt der ersten Seite vom Widget nach links verschiebt? Ich kann das ganze gar nicht bündig machen.
Siehe Anhang.



Grüße
Leon

[CoolTux]

Kennt Ihr das wenn der Blitz einen trifft? Gut, dann muß ich mich nicht entschuldigen wenn ich sage ich habe es eben gelöst bekommen     


Danke an alle für diese tolle UI

[masterpete23]

@CoolTUx:
Woher kommen die Handy  /  Tablet daten?
das klingt interessant

[CoolTux]

Schau mal in meine Sig   
Tip: AMAD


Grüße

[mircoby]

Hallo setstate,

Du kannst Dich sicher an das Thema MAX Heizungsthermostat und Tablet UI erinnern - siehe zitat unten.

Du hattest damals eine funktion eingebaut sodass das widget_thermostat.js auch für MAX! Thermostate in der Weise funktioniert dass das verändern der Temperatur nicht automatisch die Betriebsart auf manuell umschaltet. Das funktionierte bis zum update heute prima.

Leider klappt das jetzt nicht mehr. Habe die beiden widget_thermostat.js von "damals" und "heute" verglichen:

die Stelle mit dem zusätzlichen vergleich

Code Auswählen Erweitern

if (mode === 'auto') ist sinngemäß noch drin, an etwas anderer stelle.

Der "mode" wird eine zeile zuvor gesetzt. Was mir dabei auffiel. Es gibt einen unterschied zwichen damals und heute.

damals:

Code Auswählen Erweitern

var mode = getDeviceValueByName( device, this.o.mode );

heute:

Code Auswählen Erweitern

var mode = getDeviceValueByName( device, this.o.modes );

Korrigiere ich den mode wieder wie vorher dann klappts. Kannst Du das bitte noch mal prüfen und ggf. beim nächsten upload korrigieren?


Zwei weitere Themen die seit dem Update:

1)  Die skala des widget_thermostat ist zum einen verdreht, zum anderen verschiebe ich es komplett auf dem display sobald ich verstellen möchte.!? Verstellen klappt, ist eher ein optisches Thema.

2) beim switch konnte man in der vergangenheit mehrere durch Semikola getrennte Kommandos absetzten. Ich nutze es so:

Code Auswählen Erweitern


div data-type="switch"
                     data-icon="fa-car"
                     data-device="wz_WandThermostat"
                     data-cmd="set"
                     data-get="mode"
                     data-get-on="auto|temporary"
                     data-get-off="manual"
                     data-set-on=";set wz_MaxMode auto"
                     data-set-off=";set wz_MaxMode manual"
                     class="inline cell">&nbsp;</div>


Vor dem Semikolon bei data-set-on/off stand "nichts", was dazu führte, dass auch kein kommando zum wz_WandThermostat gesendet wurde (so gewünscht), es wurde dann lediglich der zweite Befehl das setzen des dummys wz_MaxMode ausgeführt.

Seit dem Update wird jetzt zusätzlich zum setzen des dummys ein fehlerhaft zusammengesetzter Befehl (unvollständig) an das wz_WandThermostat gesendet. -> Fehlermedlungen. (PERL WARNING: Use of uninitialized value $setting in string eq at ./FHEM/10_MAX.pm line 257.)

Wie kann ich das senden an das device wieder unterdrücken?

Freue mich auf Deine Rückmeldung.

@microby:

hilft das weiter:

Code Auswählen Erweitern

<div data-type="thermostat"
                       data-device="wz_WandThermostat"
                       data-get="desiredTemperature"
                       data-set="desiredTemperature"
                       data-temp="temperature"
                       data-valve="valveposition"
                       data-mode="mode"
                       data-off="off"
                       data-boost="boost"
                       data-step="0.5"
                       data-min="10"
                       data-max="25"
                       data-angleoffset="0"
                       data-width="300"
                       data-height="300"
                       class="cell top-space-2x">
                  </div>


Das Thermostat liest den Wert unter data-mode="mode" aus, wenn gleich 'auto' dann wird "set wz_WandThermostat desiredTemperature auto <value>" gesendet. Bei allen anderen Varianten "set wz_WandThermostat desiredTemperature <value>"

Mit dem abgehangenen geänderten Thermostat

[DanHard]

Versuche es später! Habe als Vorlage die Exemple Datei genommen!
Melde mich wieder!

So habe es getestet, leider kommt immer noch sehr oft eine Seite die sehr verworfen aussieht.
Eventuell liegt es an meinem Quelltext. Kannst du einen Fehler entdecken?

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="widget_base_width" content="120">
        <meta name="widget_base_height" content="115">
        <meta name="widget_margin" content="1">
        <meta name='gridster_disable' content='0'>
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
        <meta name="longpoll_delay" content="2000">
        <meta name="debug" content="0"> <!-- 1=output to console;0=not output -->
        <meta http-equiv="Cache-Control" content="no-store" />

    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-mobil-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>


    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Wohnzimmer</header>

<div data-type="label" data-device="wz_temphumi" data-get="temperature" data-unit="%B0C%0A" data-limits='[0,10,15,21,23]' data-colors='["#ffffff","#6699ff","#AA6900","#AD3333","#FF0000"]' class="cell big"></div>
<div data-type="label" data-device="wz_temphumi" data-get="humidity" data-unit="%" data-limits='[-1,20,39,59,65,79]' data-colors='["#ffffff","#6699ff","#AA6900","FFCC80","#AD3333","#FF0000"]' class="cell big"></div>

</li>

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>Schlafzimmer</header>


<div data-type="label" data-device="sz_temphumi"
     data-get="temperature" data-unit="%B0C%0A" data-limits='[0,10,15,21,23]' data-colors='["#ffffff","#6699ff","#AA6900","#AD3333","#FF0000"]' class="cell big"></div>
<div data-type="label" data-device="sz_temphumi"
     data-get="humidity" data-unit="%" data-limits='[-1,20,39,59,65,79]' data-colors='["#ffffff","#6699ff","#AA6900","FFCC80","#AD3333","#FF0000"]' class="cell big"></div>

</li>

<li data-row="2" data-col="1" data-sizex="2" data-sizey="1">
        <header>Lampen</header>

<div class="cell center">
    <div class="left inline">
<div data-type="switch" class="cell inline"
            data-device="ge_it2"
            data-get-on="on"
            data-get-off="off"></div>
<div data-type="label" class="cell">Pflanzen</div>
</div>
    <div class="left inline">
<div data-type="switch" class="cell inline"
            data-device="ge_it1"
            data-get-on="on"
            data-get-off="off"></div>
<div data-type="label" class="cell">Sofa</div>       
</div>
    <div class="left inline">
<div data-type="switch" class="cell inline"
            data-device="ge_it3"
            data-get-on="on"
            data-get-off="off"></div>
<div data-type="label" class="cell">X-Mas</div>       
</div>
</div>


    </li>



<li data-row="3" data-col="1" data-sizex="2" data-sizey="1" class="gs-w" style="background-color: rgb(42, 42, 42);">
<header>Termine</header>
    <div class="cell">
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="Waschen" data-get='STATE' data-off-color="#4747D1" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-spinner warn","fa-spinner warn blink","fa-spinner warn"]' data-on-colors='["#5CA36A","#5CA36A","#5CA36A"]' class="smal"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="Karton" data-get='STATE' data-off-color="#996633" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-newspaper-o warn","fa-newspaper-o warn blink","fa-newspaper-o warn"]' data-on-colors='["#996633","#996633","#996633"]' class="smal"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="Papier" data-get='STATE' data-off-color="#E6E600" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-newspaper-o warn","fa-newspaper-o warn blink","fa-newspaper-o warn"]' data-on-colors='["#f9f9f9","#f9f9f9","#f9f9f9"]' class="smal"></div>
   </div>
    </li>






<li data-row="4" data-col="1" data-sizex="2" data-sizey="1.2" class="gs-w" style="background-color: rgb(42, 42, 42);">
        <header>Wetter Aussenbereich</header>
<div class="centered" style="padding-top:10px !important;padding-bottom:15px !important">           
       

<div class="left">
<div data-type="label" data-subtype="Temperature" data-device="aussen_temphumi" class="cell big" data-get="temperature" data-unit=" %B0C%0A" data-limits="[0,10,15,21,23]" data-colors="[&quot;#ffffff&quot;,&quot;#6699ff&quot;,&quot;#AA6900&quot;,&quot;#AD3333&quot;,&quot;#FF0000&quot;]" style="color: rgb(170, 105, 0);">17.6<span style="font-size: 50%;"> °C
</span></div>
<div data-type="label" data-subtype="Humidity" data-device="aussen_temphumi" class="cell big" data-get="humidity" data-unit=" %" data-limits="[-1,20,39,59,65,79]" data-colors="[&quot;#ffffff&quot;,&quot;#6699ff&quot;,&quot;#AA6900&quot;,&quot;FFCC80&quot;,&quot;#AD3333&quot;,&quot;#FF0000&quot;]" style="color: rgb(170, 105, 0);">50<span style="font-size: 50%;"> %</span></div>
</div>

<div class="left">
                    <div data-type="label" data-device="Meteo" data-get="fc1_wday" style="margin-bottom:5px">Do<span style="font-size: 50%;"></span></div>
                    <div data-type="weather" data-device="Meteo" data-get="fc1_weather" data-imageset="meteocons" style="font-size:16px;padding:5px;margin:0;margin-top:-5px;" class="weather" data-icon="Q"></div>
                   
<div class="" style="padding:0px 5px 0px 0px">
   <div data-type="label" data-device="Meteo" data-get="fc1_tempMin" data-unit="&deg;C" class="inline">XX</div>\
   <div data-type="label" data-device="Meteo" data-get="fc1_tempMax" data-unit="&deg;C" class="inline">XX</div>
</div>


                    <div data-type="label" data-device="Meteo" data-get="fc1_chOfRain" data-unit="%">10<span style="font-size: 80%;">%</span></div>
                </div>

<div class="left">
<div data-type="label" data-device="Meteo" data-get="fc2_wday" style="margin-bottom:5px">Do<span style="font-size: 70%;"></span></div>
<div data-type="weather" data-device="Meteo" data-get="fc2_weather" data-imageset="meteocons" style="font-size:16px;padding:5px;margin:0;margin-top:-5px;" class="weather" data-icon="Q"></div>
<div class="">
<div data-type="label" data-device="Meteo" data-get="fc2_tempMin" data-unit="&deg;C" class="inline">XX</div>\
<div data-type="label" data-device="Meteo" data-get="fc2_tempMax" data-unit="&deg;C" class="inline">XX</div>
</div>
<div data-type="label" data-device="Meteo" data-get="fc2_chOfRain" data-unit="%">10<span style="font-size: 50%;">%</span></div>
</div>



        </div>






</ul>
</div>
</body>
</html>


Den Longpoll Delay habe ich auch schon auf 2000 gesetzt, dies hat aber leider nichts gebracht.
Danke

[netbus]

Hallo,
Ich möchte gerne von den Swiper Widgets die Autoplay Funktion nutzen um eine Slideshow darzustellen.
Die Fotos liegen auf einer NAS welche ich lokal gemountet habe aber sie werden leider nicht angezeigt.

Code Auswählen Erweitern

<li data-row="3" data-col="6" data-sizex="4" data-sizey="2">
<div data-type="swiper" data-height="200px" data-width="250px"
         data-autoplay="4000" class="top-space">
    <ul>
        <li><div data-type="image" data-url="/opt/fotos/Kinder/" data-refresh="60" class="nocache"></div></li>
        <li><div data-type="image" data-url="/opt/fotos/Kinder/" data-refresh="60" class="nocache"></div></li>
        <li><div data-type="image" data-url="/opt/fotos/Kinder/" data-refresh="60" class="nocache"></div></li>
     </ul>
     </div>
Woran kann das liegen?

[CoolTux]

Eventuell ein Rechteproblem?

[netbus]

Eventuell ein Rechteproblem?

das habe ich schon geprüft aber das passt.
In der angegebenen "data-url" liegen hunderte Fotos. Holt sich das Widget ein beliebiges Foto oder wie funktioniert das?

[setstate]

das habe ich schon geprüft aber das passt.
In der angegebenen "data-url" liegen hunderte Fotos. Holt sich das Widget ein beliebiges Foto oder wie funktioniert das?

Das geht nicht. Der Client kann kein "List" auf dem Server veranlassen und sich eine Datei auswählen. Maximal könnte man eine Zufallszahl auf dem Client erzeugen und dann einen Filenamen zusammenbauen. Dann müssten aber alle Fotos durchnummeriert sein und im Bereich des RND liegen. Einfacher ist es, serverseitig per PHP den Random-Mechanismus zu implementieren.

[netbus]

ok danke

[tomster]

-- edit: Formatierungsproblem gelöst --

Bleibt die Erweiterung des Range-Widgets

Servus zusammen!

Ich bin gerade dabei die Visualisierung für das Projekt "Bierwaage" http://forum.fhem.de/index.php/topic,44684.0.html zusammenzuschrauben. Dabei möchte ich das Range-Widget ein bissl umbauen, so dass es "hinter" einem PNG liegt (vermutlich mittels z-index) und durch die transparenten Bereiche des PNGs "durchscheint". Soweit bin ich aber noch nicht, weil mir im Vorfeld schon was quer läuft:
Leider verhagelt es mir total das Layout, weil die PNGs mit unnötig viel "Rand drumrum" angezeigt werden. Die PNGs sind im Original 200x127px groß.
Wenn ich diese aber einbaue, dann schrumpft es die Bilder auf eine deutlich kleinere Größe zusammen. Dennoch kriege ich die beiden Spalten Fass1 u. Fass2 nicht näher zusammen gerückt. Irgendwas muss ich doch am Code übersehen, bzw. nicht verstehen. Hat jemand eine Idee hierzu?

Was mir gefehlt hat waren die col-1-x-Klassen

Code Auswählen Erweitern


...
<meta name="widget_base_width" content="105">
<meta name="widget_base_height" content="42">
...
<li data-row="3" data-col="1" data-sizex="2" data-sizey="5">
                <div class=" center">
       <div class="left col-1-3">
                <div class="large top-space">Fass 1</div>
                <div data-type="image" data-url="/fhem/tablet/images/keg.png" data-size="100%"
                class="top-space"></div>
       </div>
        <div class="left col-1-3">
                <div class="large top-space">CO<sup>2</sup></div>
                <div data-type="image" data-url="/fhem/tablet/images/co2.png" data-size="60%"
                class="top-space"></div>
       </div>
       <div class="left col-1-3">
                <div class="large top-space">Fass 2</div>
                <div data-type="image" data-url="/fhem/tablet/images/keg.png" data-size="100%"
                class="top-space"></div>
       </div>
</div>
</li>


[tomster]

Ok, es heisst wohl data-size an Stelle von data-width.
Mit data-size=" 100%" gibt's keine Abstände (vorausgesetzt die gridster-width ist ausreichend). Mit data-size="75%" hab ich ich aber wieder das Problem, dass die gridster-width > Originalbildbreite (127px) sein muss, um die beiden Fässer in einer Reihe anzuzeigen. Hmm, wo liegt den nur der Fehle


Ach, und wenn jemand reeein zufällig eine gute Idee zur Umsetzung des PNG-Overlays hat, nur her damit