New FHEM Tablet UI

[nesges]

Jetzt gehen mir wirklich die Ideen aus. Welchen Browser in welcher Version benutzt du?
Ich hab grade eine neue Version eingecheckt. Falls die Änderung darin den Fehler bei dir behebt, würde ich mich allerdings wundern Aber probier mal bitte https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/js/widget_clock.js

[SirMarco]

Danke für deine Hilfe. Habe die Version probiert, keine änderungen. nutze Firefox und Chrome. chrome android klappt auch nicht.

mensch was kann das nur sein

[setstate]

Ich möchte mir in einem Widget regelmäßig aktualisierte Nachrichten ausgeben lassen. Dazu verwende ich ReadingsHistory, was die Nachrichteneinträge verwaltet und bei Bedarf den passenden HTML-Code erzeugt. Den lasse ich dann als Label anzeigen. Klappt im Prinzip mit einem kleinen Schönheitsfehler:

Beim ersten Laden bzw. manuellen Laden der Seite wird alles richtig angezeigt. Ergänze ich nun einen Eintrag, der per longpoll aktualisiert werden soll, fehlen auf einmal die Zeilenumbrüche. Mache ich dann einen Reload, passt es wieder. Es liegt also nicht am HTML-Code den ich dem Label liefere, sondern das longpoll-Update scheint die <BR>-Tags zu ignorieren, im Unterschied zum "normalen" Update.

Hallo Brockmann,

die <br> Tags werden explizit entfernt. Leider weiß ich jetzt aus dem Kopf nicht 100%ig, warum genau.
Du kannst ja mal in der
fhem-tablet-ui.js
die Zeile 238 ändern, von

var lines = data.replace(/<br>/g,"").split(/\n/);

auf

var lines = data.split(/\n/);

und schauen ob es dann besser ist und (ganz wichtig) alles andere auch noch funktioniert.

[Brockmann]

Du kannst ja mal in der fhem-tablet-ui.js die Zeile 238 ändern, und schauen ob es dann besser ist und (ganz wichtig) alles andere auch noch funktioniert.

Danke für den Tipp. Ich probiere es aus und geben dann Rückmeldung.

[aeronaut]

Ei der Daus, ein Update hat meine index.html überschrieben Glücklicherweise gibts "backup_before_update".

War das im Sinne des Erfinders? Dann könnte man den tablet-Ordner kopieren und beim define angeben. Aber so müsste man die js-Ordner immer synchron halten ... manuell.

[setstate]

Upps 
Nö, ist nicht gewollt. Dann muss die geänderte Filegröße das Update erzwungen haben. Am Zeitstempel kann es nicht liegen, der ist auf "alt" gesetzt.

Vorsichtshalber müsst ihr die wichtigsten Dateien als "unänderbar" kennzeichnen:

Code Auswählen Erweitern

attr global exclude_from_update xyz.html

Oder ich mache ab sofort keine Änderungen mehr an der Demo index.html und zeige neue Beispiele in einem Example Ordner an neuen *.html Files.

[bmwfan]

@dj_sammy190:

Habe den Fehler in der Pushmessage gefunden. War Hochkomma zu viel. Es muss so aussehen (aus der DEF)

Code Auswählen Erweitern

([20:00] and [?du_abfallkalender:state] ne "Nichts") (set Pushoveradresse1 msg 'Müllabfuhr' 'Morgen wird [du_abfallkalender:state] geleert' '' 0 '',set Pushoveradresse2 msg 'Müllabfuhr' 'Morgen wird [du_abfallkalender:state] geleert' '' 0 '')

so gehts bei mir.

Gruß Jürgen

[bjoernbo]

@dj_sammy190: Kannst'e einen Bildschirmausdruck beifügen ?

[bjoernbo]

@all: Man kann ja so einiges ins UI integrieren, da JS, CSS & HTML. Hat einer von euch mal versucht Skype ins UI zu integrieren, oder gar Apples-Facetime?? 

[aeronaut]

Oder ich mache ab sofort keine Änderungen mehr an der Demo index.html und zeige neue Beispiele in einem Example Ordner an neuen *.html Files.

Das klingt gut. Aus den Beispielen konnte ich vieles schöpfen, die müssen erhalten bleiben Aber mal generell: Das UI ist wunderbar und ich kann mir vorstellen, mehrere Instanzen für unterschiedliche Devices oder gar Anwendungsfälle (z.B. irgendwie authentifiziert für verschiedene User) zu benutzen. Damit wäre der js-Ordner ja stets manuell synchron zu halten - oder darf es gar nur eine Instanz geben?

[Maahaax]

Hallo zusammen,

jetzt schreibe ich auch endlich mal meinen ersten Beitrag im Forum. Die Tablet UI ist der Wahnsinn, tausend Dank dafür! Endlich kann ich meine Ideen wesentlich einfacher umsetzen und der WAF-Faktor ist enorm!
Ich möchte daher auch gerne was zurück geben und daher meine aktuelle UI vorstellen, da ich einige Anpassungen vorgenommen habe. Die wohl größte Anpasung ist, dass ich Farbe ins Spiel gebracht habe. Hintergrund für mich, dass ich so die Wiedererkennbarkeit von Geräten erhöhe (Schalter immer orange, Heizung immer hellblau etc.). Des Weiteren habe ich mich für ein einfaches Kacheldesign entschieden, da ich von der Metro UI von Windows gerade für Tablet-Oberflächen begeistert bin.

Aktuell ist das Layout auf ein 7"-Tablet ausgerichtet (Auflösung angeblich 800x600)

Hier mein aktueller Code für die tablet.html (meine Hauptseite)

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* Just another dashboard for FHEM
*
         * Version: 1.3.4
* Requires: jQuery v1.7+, font-awesome, jquery.gridster, jquery.toast
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - add 'define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<title>Home Control</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="146">
<meta name="widget_base_height" content="130">
<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="debug" content="1"> <!-- 1=output to console;0=not output -->
<meta name='gridster_disable' content='1'>

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

<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/pgm2/jquery.knob.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
    <script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>

<!-- Enable this lines for usage with WebViewControl -->
<script type="text/javascript" src="/fhem/pgm2/cordova-2.3.0.js"></script>
<script type="text/javascript" src="/fhem/js/webviewcontrol.js"></script>
<script type="text/javascript">var wvcDevices = {'13381': 'homeTab01'}; var wvcUserCssFile="webviewcontrol.css"</script>
<!-- End for WebViewControl -->

</head>
<body>

<!-- available class: container,left,right,cell,narrow,darker,big,bigger,small,thin,large,wider -->
<!-- available data-type: symbol,dimmer,homestatus,label,push,slider,switch,thermostat,volume,weather -->

<div class="gridster">
<ul>

<!-- Reihe 1 -->
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" id="light">
<div class="cell">
<header>K&uuml;che</header>
<div data-type="switch" class="bigger cell" data-device="Kueche" data-get-on="on.*" data-get-off="off" data-set-on="on" data-on-color="#ffffff"></div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1" id="weather">
<div class="cell" onclick="setFhemStatus('trigger sayWettervorhersage')">
<header>Wetter</header>
<div data-type="weather" data-device="proWetter" data-get="fc0_weatherDay" class="bigger cell"></div>
<div class="" id="statustext">
<div class="inline" data-type="label" data-device="proWetter" data-get="fc0_weatherDay"></div>(
<div class="inline" data-type="label" data-device="proWetter" data-get="fc0_tempMin"></div>-
<div class="inline" data-type="label" data-device="proWetter" data-get="fc0_tempMax"></div>)
</div>
</div>
</li>

<li data-row="1" data-col="3" data-sizex="1" data-sizey="1" id="device">
<div class="cell">
<header>TV</header>
<div class="bigger cell" data-type="symbol" data-device="presenceLgTV" data-background-icon="fa-circle" data-icon="fa-desktop" data-on="present" data-off="absent" data-on-background-color="Darkblue" data-on-color="#FFFFFF" data-off-color="#2A2A2A"></div>
</div>
</li>
<li data-row="1" data-col="4" data-sizex="1" data-sizey="1" id="roommate">
<div class="cell">
<header>Max</header>
<div class="bigger cell" data-type="symbol" data-device="rr_Max" data-icons='["fa-home","fa-university","fa-globe","fa-bed","fa-bed","fa-bed fa-blink"]' data-on-colors='["White","White","White","White","White","White"]' data-get-on='["home","absent","gone","gotosleep","asleep","awoken"]' >
</div>
</div>
</li>
<li data-row="1" data-col="5" data-sizex="1" data-sizey="1" id="roommate">
<div class="cell">
<header>Melli</header>
<div class="bigger cell" data-type="symbol" data-device="rr_Melli" data-icons='["fa-home","fa-university","fa-globe","fa-bed","fa-bed","fa-bed fa-blink"]' data-on-colors='["White","White","White","White","White","White"]' data-get-on='["home","absent","gone","gotosleep","asleep","awoken"]' >
</div>
</div>
</li>

<!-- Reihe 2 -->
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1" id="light">
<div class="cell">
<header>Flur</header>
<div data-type="switch" class="bigger cell" data-device="Flur" data-get-on="on.*" data-get-off="off" data-set-on="on" data-on-color="#ffffff"></div>
</div>
</li>
<li data-row="2" data-col="2" data-sizex="1" data-sizey="1" id="heat">
<div class="cell">
<header>Wohnzimmer</header>
<div data-type="circlemenu" class="circlemenu">
<ul class="menu">
<li><div data-type="symbol" data-icon="fa-sliders" id="entry"></div></li>
<li><div data-type="push" data-device="WZ_HZ" data-set="desired-temp off" data-icon="" id="entry">off</div></li>
<li><div data-type="push" data-device="WZ_HZ" data-set="desired-temp 5.0" data-icon="" id="entry">5</div></li>
<li><div data-type="push" data-device="WZ_HZ" data-set="desired-temp 15.0" data-icon="" id="entry">15</div></li>
<li><div data-type="push" data-device="WZ_HZ" data-set="desired-temp 19.0" data-icon="" id="entry">19</div></li>
<li><div data-type="push" data-device="WZ_HZ" data-set="desired-temp 21.0" data-icon="" id="entry">21</div></li>
</ul>
</div>
</div>
</li>

<li data-row="2" data-col="3" data-sizex="1" data-sizey="1" id="light">
<div class="cell">
<header>Bad</header>
<div data-type="switch" class="bigger cell" data-device="Bad" data-get-on="on.*" data-get-off="off" data-set-on="on" data-on-color="#ffffff"></div>
</div>
</li>
<li data-row="2" data-col="4" data-sizex="1" data-sizey="1" id="roommate">
<div class="cell">
<header>Phillip</header>
<div class="bigger cell" data-type="symbol" data-device="rr_Phillip" data-icons='["fa-home","fa-university","fa-globe","fa-bed","fa-bed","fa-bed fa-blink"]' data-on-colors='["White","White","White","White","White","White"]' data-get-on='["home","absent","gone","gotosleep","asleep","awoken"]' >
</div>
</div>
</li>
<li data-row="2" data-col="5" data-sizex="1" data-sizey="1" id="roommate">
<div class="cell">
<header>Jojo</header>
<div class="bigger cell" data-type="symbol" data-device="rr_Jojo" data-icons='["fa-home","fa-university","fa-globe","fa-bed","fa-bed","fa-bed fa-blink"]' data-on-colors='["White","White","White","White","White","White"]' data-get-on='["home","absent","gone","gotosleep","asleep","awoken"]'>
</div>
</div>
</li>

<!-- Reihe 3 -->
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1" id="device">
<div class="cell">
<header>R3, S1</header>
</div>
</li>
<li data-row="3" data-col="2" data-sizex="1" data-sizey="1" id="status">
<div class="cell">
<header>Waschmaschine</header>
<div class="bigger cell" data-type="symbol" data-device="Waschmaschine" data-icons='["fa-sign-in","fa-sign-out","fa-refresh fa-spin"]' data-on-colors='["White","White","White"]' data-get-on='["aus","fertig","waschen"]' ></div>
<div data-type="label" data-device="Waschmaschine" data-get="state" id="statustext"></div>
</div>
</li>
<li data-row="3" data-col="3" data-sizex="1" data-sizey="1" id="device">
<div class="cell">
<header>R3, S3</header>
</div>
</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1" id="device">
<div class="cell">
<header>R3, S4</header>
</div>
</li>
<li data-row="3" data-col="5" data-sizex="1" data-sizey="1" id="device">
<div class="cell">
<header>R3, S5</header>
</div>
</li>

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


Wie man sieht, habe ich noch einige Platzhalter drin.

und meine metroui.css:

Code Auswählen Erweitern

body {
    background-color: #ffffff;
    font-family: "Helvetica Neue", "Helvetica", "Open Sans", "Arial", "Helvetica", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: regular;
    color: #ffffff !important;
}

@font-face {
    font-family: 'MeteoconsRegular';
    src: url('../fonts/meteocons-webfont.eot');
    src: url('../fonts/meteocons-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/meteocons-webfont.woff') format('woff'),
         url('../fonts/meteocons-webfont.ttf') format('truetype'),
         url('../fonts/meteocons-webfont.svg#MeteoconsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.center {
    margin: 0 auto;
}

.cell {
    margin: 5px 0px !important;
}

.circlemenu {
width: auto;
text-align: center;
vertical-align: middle;
margin-top: 20px;
font-size:100%;
}

.circlemenu #entry {
    margin-top:-1px;
    margin-left:-1px;
    font-size:200%;
}

.biggest {
    margin-top: -35px;
    font-size: 450% !important;
}

.gridster ul li {
    background-color:#CCCCCC;
}

.gridster li header {
    background: #262626;
color: #fff;
font-size: 14px;
    text-align: right;
padding: 2px 5px ;
}

.weather:before {
color: #ffffff;
}

.gridster #light {
    background-color:#e3a21a;
    overflow: hidden;
    text-align: center;
}

.gridster #weather {
    background-color:#55AA55;
    overflow: hidden;
    text-align: center;
}

.gridster #heat {
    background-color:#0080ff;
    overflow: hidden;
    text-align: center;
    font-size: 100%;
}

.gridster #device {
    background-color:#233a77;
    overflow: hidden;
    text-align: center;
}

.gridster #resident, #residents {
    background-color:#da532c;
    overflow: hidden;
    text-align: center;
}

.gridster #roommate {
    background-color:#da532c;
    overflow: hidden;
    text-align: center;
}

.gridster #status {
    background-color:#1b6125;
    overflow: hidden;
    text-align: center;
}
.gridster #statustext {
    align:bottom;
    margin-top:-20px;
    font-weight:bold;
}

.font-blue,       .font-blue-link a         {color: #2d89ef;}
.font-blueLight,  .font-blueLight-link a    {color: #eff4ff;}
.font-blueDark,   .font-blueDark-link a     {color: #2b5797;}
.font-green,      .font-green-link a        {color: #00a300;}
.font-greenLight, .font-greenLight-link a   {color: #99b433;}
.font-greenDark,  .font-greenDark-link a    {color: #1e7145;}
.font-red,        .font-red-link a          {color: #b91d47;}
.font-yellow,     .font-yellow-link a       {color: #ffc40d;}
.font-orange,     .font-orange-link a       {color: #e3a21a;}
.font-orangeDark, .font-orangeDark-link a   {color: #da532c;}
.font-pink,       .font-pink-link a         {color: #9f00a7;}
.font-pinkDark,   .font-pinkDark-link a     {color: #7e3878;}
.font-purple,     .font-purple-link a       {color: #603cba;}
.font-darken,     .font-darken-link a       {color: #1d1d1d;}
.font-lighten,    .font-lighten-link a      {color: #d5e7ec;}
.font-white,      .font-white-link a        {color: #ffffff;}
.font-grayDark,   .font-grayDark-link a     {color: #525252;}
.bg-blue       {background-color: #2d89ef;}
.bg-blueLight  {background-color: #eff4ff;}
.bg-blueDark   {background-color: #2b5797;}
.bg-green      {background-color: #00a300;}
.bg-greenLight {background-color: #99b433;}
.bg-greenDark  {background-color: #1e7145;}
.bg-red        {background-color: #b91d47;}
.bg-yellow     {background-color: #ffc40d;}
.bg-orange     {background-color: #e3a21a;}
.bg-orangeDark {background-color: #da532c;}
.bg-pink       {background-color: #9f00a7;}
.bg-pinkDark   {background-color: #7e3878;}
.bg-purple     {background-color: #603cba;}
.bg-darken     {background-color: #1d1d1d;}
.bg-lighten    {background-color: #d5e7ec;}
.bg-white      {background-color: #ffffff;}
.bg-grayDark   {background-color: #525252;}


Viele Grüße

Max

[bjoernbo]

...auch eine nette Idee! Top !

[setstate]

Grundsätzlich ja.  Der timestamp wird intern schon gespeichert, muss nur ausgegeben werden. Kleine Änderung ...

Update. Die Änderung gibt es jetzt für das Label Widget. -> Wenn man die CSS Klasse 'timestamp'  hinzufügt, wird statt des Reading-Wertes, der Reading-Zeitstempel angezeigt.

Beispiel:

Code Auswählen Erweitern

                       
<div data-type="label"
       data-device="THSensorWZ"
       data-get="temperature"
       class="timestamp darker">
</div>


Um nur die Uhrzeit und nicht das Datum anzuzeigen, kann man, wie beim Label Widget standardmässig, data-part einsetzen, um nur bestimmte Teile anzuzeigen.

Code Auswählen Erweitern

                       
<div data-type="label"
       data-device="THSensorWZ"
       data-get="temperature"
       data-part="2"
       class="timestamp darker">
</div>


Oder per RegEx: Zeit ohne Sekunden

Code Auswählen Erweitern

                       
<div data-type="label"
       data-device="THSensorWZ"
       data-get="temperature"
       data-part=".*(\d\d:\d\d):\d\d.*"
       class="timestamp darker">
</div>


[bjoernbo]

Frage an die JS-Experten!

Ich lasse mir in der battery.html den Status der Batterie von div. Geräten anzeigen. Daneben wird auch angezeigt, ob ein Gerät "alive" ist oder "dead". Es ist doch sicherlich möglich, wenn eins der Geräte
a) einen leeren Batteriestatus hat und / oder
b) eine Gerät nicht "alive" ist,

dass mir in meinem Menü auf der rechten-Seite (momentan orangenes-Symbol) dieses  rot dargestellt wird, oder ?

Ins blaue gesprochen:

if data-get="battery" == "ok" then id="room_batterie" = <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(RED);>

data-type="symbol" data-device="Wohnzimmer.Wandthermostat"
                        data-get="battery"
                        data-icons='["fa-circle","fa-circle"]'
                        data-get-on='["ok","low"]'
                        data-on-colors='["green","red"]'
                        style="font-size:2em">

<a id="room_batterie" href="batterie.html" class="cell fa-stack fa-2x">
    <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(111,69,120);"></i>
    <i id="fg" class="fa fa-stack-1x fa-bolt" style="color: rgb(255,255,255);"></i>
</a>

@nesges: Ich meine bei dir auch irgendwo mal ein Symbol in Form einer Batterie gesehen zu haben. In den aktuellen awesome Icon's ist das nicht enthalten, oder? Wo hast Du das her?

[Maahaax]

Frage an die JS-Experten!

Ich lasse mir in der battery.html den Status der Batterie von div. Geräten anzeigen. Daneben wird auch angezeigt, ob ein Gerät "alive" ist oder "dead". Es ist doch sicherlich möglich, wenn eins der Geräte
a) einen leeren Batteriestatus hat und / oder
b) eine Gerät nicht "alive" ist,

dass mir in meinem Menü auf der rechten-Seite (momentan orangenes-Symbol) dieses  rot dargestellt wird, oder ?

Ins blaue gesprochen:

if data-get="battery" == "ok" then id="room_batterie" = <i id="bg" class="fa fa-stack-2x fa-circle" style="color: rgb(RED);>


@nesges: Ich meine bei dir auch irgendwo mal ein Symbol in Form einer Batterie gesehen zu haben. In den aktuellen awesome Icon's ist das nicht enthalten, oder? Wo hast Du das her?

Du könntest die ganzen Batterien in eine STRUCTURE packen und deren Status entsprechend als Symbol-Link anzeigen lassen.