New FHEM Tablet UI

[HoTi]

Hallo,

so hier meine fertige Lösung zur Anzeige der Müllabfuhrtermine. Mit bestem Dank an mc-hollin!!!
Im Menü meiner index.html wird, am Button das auf die Muellabfuhr übersichtsseite verlinkt, am Vortag einer Lehrung ein Warning engeblendet.
Auf der Übersichtsseite, muell.html, werden die Tonnen mit der Anzahl der Tage bis zur Leerung angezeigt.
Um 18 Uhr am Vortag einer Leerung bekomme ich eine Pushover Mitteilung auf mein Smartphone.
Für die Abfuhrtermin habe ich bei meinem Städischen Entsorger die Termine als .ics downloaden können und sie in einen Googlekalender importiert.

PS: Die Graue Tonne, untem auf dem Screenshot der muell.html, sieht man nicht da sie einen Vortag anfängt zu blinken. Screenshot zum falschen Zeitpunkt! 

Hier der FTUI Code:

Code Auswählen Erweitern

        <header>Muell</header>
<div style="font-size:30px; color:rgb(96, 0, 0);"
data-type="button"
data-device="Muellalert"
data-color="#aa6900"
data-get-on='["on","off"]'
data-url="muell.html"
    data-icons='["fa-trash warn blink","fa-trash"]'
class="cell small"></div>

Code Auswählen Erweitern

<header>Abfall</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="Gelbetonne" data-get='STATE' data-off-color="#E6E600" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["#E6E600","#E6E600","#E6E600"]' class="bigger"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="Biomuell" data-get='STATE' data-off-color="#996633" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["#996633","#996633","#996633"]' class="bigger"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="Papiertonne" data-get='STATE' data-off-color="#4747D1" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["#4747D1","#4747D1","#4747D1"]' class="bigger"></div>
<div data-type="symbol" data-background-icon="fa-circle-thin " data-off-background-color="#7A7A7A" data-on-background-color="#7A7A7A" data-device="Restmuell" data-get='STATE' data-off-color="grey" data-get-on='["off","^[01]$","^[1-9][0-9]|[2-9]$"]' data-icons='["fa-trash warn","fa-trash warn blink","fa-trash warn"]' data-on-colors='["gray","gray","gray"]' class="bigger"></div>
    </div>

Hier der zugehörige Fhem Code:

Code Auswählen Erweitern

#MuellKalender

define Abfall Calendar ical url https://www.google.com/calendar/ical/xyz/basic.ics 600
attr Abfall room Kalender

define Abfall_Update notify Abfall:(modeUpcoming|modeAlarmOrStart).* {Abfalltermine("$EVENT")}
attr Abfall_Update room Kalender


define Papiertonne dummy
attr Papiertonne group Abfall
attr Papiertonne room Kalender
attr Papiertonne event-on-change-reading state

define Restmuell dummy
attr Restmuell group Abfall
attr Restmuell room Kalender
attr Restmuell event-on-change-reading state

define Gelbetonne dummy
attr Gelbetonne group Abfall
attr Gelbetonne room Kalender
attr Gelbetonne event-on-change-reading state

define Biomuell dummy
attr Biomuell group Abfall
attr Biomuell room Kalender
attr Biomuell event-on-change-reading state

define Psh_Papiertonne at *18:00:00 {if(Value("Papiertonne") eq "1") {fhem ("set myPushover msg 'Müllkalender' 'Morgen wird die Papiertonne abgeholt'")} }
define Psh_Restmuell at *18:00:00 {if(Value("Restmuell") eq "1") {fhem ("set myPushover msg 'Müllkalender' 'Morgen wird der Restmuell abgeholt'")} }
define Psh_Gelbetonne at *18:00:00 {if(Value("Gelbetonne") eq "1") {fhem ("set myPushover msg 'Müllkalender' 'Morgen wird die Gelbetonne abgeholt'")} }
define Psh_Biomuell at *18:00:00 {if(Value("Biomuell") eq "1") {fhem ("set myPushover msg 'Müllkalender' 'Morgen wird der Biomuell abgeholt'")} }

define Muellalert dummy
attr Muellalert room Kalender
attr Muellalert event-on-change-reading state

define at_Muellalert at *06:00:00 {if(Value("Papiertonne") eq "1" || Value("Restmuell") eq "1" || Value("Gelbetonne") eq "1" || Value("Biomuell") eq "1") {fhem("set Muellalert on")} else { fhem("set Muellalert off")}}

und hier der Code für die benötigte 99_myUtilsMuell:

Code Auswählen Erweitern

##############################################
# $Id: myUtilsTemplate.pm 7570 2015-01-14 18:31:44Z rudolfkoenig $
#
# Save this file as 99_myUtils.pm, and create your own functions in the new
# file. They are then available in every Perl expression.

package main;

use strict;
use warnings;
use POSIX;
use Time::Local;

sub
myUtils_Initialize($$)
{
  my ($hash) = @_;
}

sub
Abfalltermine ($)
{
  my ($Ereignis) = @_;
  my @Ereignisarray = split(/.*:\s/,$Ereignis);
  my $Ereignisteil1 = $Ereignisarray[1];
  my @uids=split(/;/,$Ereignisteil1);
  my $t  = time;
  my $dtPapier = '';
  my $dtWertstofftonne = '';
  my $dtRest = '';
  my $dtBiomuell = '';
   foreach my $uid (@uids) {
    my $Kalendertext = fhem("get Abfall summary $uid");
    if ($Kalendertext =~ /Altpapier/) {
        my $dt = fhem("get Abfall start $uid");
        my @SplitDt = split(/ /,$dt);
        my @SplitDate = split(/\./,$SplitDt[0]);
        my $eventDate = timelocal(0,0,0,$SplitDate[0],$SplitDate[1]-1,$SplitDate[2]);
        if ($dtPapier eq '' || ($eventDate < $dtPapier && $eventDate > $t))
        {
          $dtPapier = $eventDate;
          Log(3, $dtPapier);
        }
    };
if ($Kalendertext =~ /Gelbe/) {
        my $dt = fhem("get Abfall start $uid");
        my @SplitDt = split(/ /,$dt);
        my @SplitDate = split(/\./,$SplitDt[0]);
        my $eventDate = timelocal(0,0,0,$SplitDate[0],$SplitDate[1]-1,$SplitDate[2]);
        if ($dtWertstofftonne eq '' || ($eventDate < $dtWertstofftonne && $eventDate > $t))
        {
          $dtWertstofftonne  = $eventDate;
        }
    };
    if ($Kalendertext =~ /Restmüll/) {
        my $dt = fhem("get Abfall start $uid");
        my @SplitDt = split(/ /,$dt);
        my @SplitDate = split(/\./,$SplitDt[0]);
        my $eventDate = timelocal(0,0,0,$SplitDate[0],$SplitDate[1]-1,$SplitDate[2]);
        if ($dtRest eq '' || ($eventDate < $dtRest && $eventDate > $t))
        {
          $dtRest = $eventDate;
        }
    };
    if ($Kalendertext =~ /Biomüll/) {
        my $dt = fhem("get Abfall start $uid");
        my @SplitDt = split(/ /,$dt);
        my @SplitDate = split(/\./,$SplitDt[0]);
        my $eventDate = timelocal(0,0,0,$SplitDate[0],$SplitDate[1]-1,$SplitDate[2]);
        if ($dtBiomuell eq '' || ($eventDate < $dtBiomuell && $eventDate > $t))
        {
          $dtBiomuell  = $eventDate;
        }
    };
   
   
  my $dayDiff = floor(($dtPapier - $t) / 60 / 60 / 24 + 1);
  if ($dayDiff >= 0) {
    fhem("set Papiertonne $dayDiff");
  }
  my $dayDiff = floor(($dtWertstofftonne - $t) / 60 / 60 / 24 + 1);
  if ($dayDiff >= 0) {
    fhem("set Gelbetonne $dayDiff");
  }
  my $dayDiff = floor(($dtRest - $t) / 60 / 60 / 24 + 1);
  if ($dayDiff >= 0) {
    fhem("set Restmuell $dayDiff");
  }
    my $dayDiff = floor(($dtBiomuell - $t) / 60 / 60 / 24 + 1);
  if ($dayDiff >= 0) {
    fhem("set Biomuell $dayDiff");
  }
  }
}

Hallo Phil__,

kannst du mir bei dem beiden Fehlern weiter gehelfen?

2016.01.14 09:34:20 1: PERL WARNING: Argument "" isn't numeric in subtraction (-) at ./FHEM/99_myUtilsMuell.pm line 66.
2016.01.14 09:34:20 1: PERL WARNING: Argument "" isn't numeric in subtraction (-) at ./FHEM/99_myUtilsMuell.pm line 70.
2016.01.14 09:34:20 1: PERL WARNING: Use of uninitialized value $Ereignisteil1 in split at ./FHEM/99_myUtilsMuell.pm line 26.

[Aladin222]

Gute Idee! Das control-File hat ja schon die benötigten Infos, das müsste man nur prüfen und mit den lokalen Files vergleichen. Kann man mit HTTPMOD machen, man braucht nur eine Prüffunktion, die man irgendwo in eine 99_myUtils.pm legt:

Code Auswählen Erweitern

sub controlfile_updatecheck($) {
    use Date::Parse;
    my $raw = shift;

    my $response='';
    my @lines = split "\n", $raw;
    foreach my $line (@lines) {
        my @remote= split " ", $line;
        if(@remote>3 && $remote[0] eq "UPD") {
            Log 3, $line;
            $remote[1]=~s/_/ /;
           
            my @local = stat($remote[3]);
            if($local[7] != $remote[2] || $local[9] < str2time($remote[1])) {
                $response .= $remote[0]." ".$remote[3]."\n";
            }
        }
    }
    return $response;
}


Eine Funktion um das Update durchzuführen und die Readings zu aktualisieren:

Code Auswählen Erweitern

sub controlfile_update($) {
    my $device = shift;
    my $url = InternalVal($device, 'url', '');
    my $def = InternalVal($device, 'DEF', '');
   
    fhem("setreading $device available updated");
    fhem("setreading $device files -");
    fhem("define at_recheck_$device at +00:05:00 modify $device $def");
    fhem("update all $url");
}

Und in die fhem.cfg kommen dann diese Definitionen:

Code Auswählen Erweitern

define UPDATE_FTUI HTTPMOD https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt 14400
attr UPDATE_FTUI alias Fhem Tablet UI
attr UPDATE_FTUI userattr timeout reading01Name reading01Regex reading02Name reading02Regex
attr UPDATE_FTUI event-on-change-reading available,files
attr UPDATE_FTUI reading01Name files
attr UPDATE_FTUI reading01Regex (?s)(UPD.*)
attr UPDATE_FTUI reading01Expr $val=controlfile_updatecheck($val);;$val
attr UPDATE_FTUI reading02Name available
attr UPDATE_FTUI reading02Regex (?s)(UPD.*)
attr UPDATE_FTUI reading02Expr $val=controlfile_updatecheck($val) ne ''?'yes':'no';;$val
attr UPDATE_FTUI room hidden

define UPDATE_WIDGETS HTTPMOD https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt 14400
attr UPDATE_WIDGETS alias Widgets for Fhem Tablet UI
attr UPDATE_WIDGETS userattr timeout reading01Name reading01Regex reading02Name reading02Regex
attr UPDATE_WIDGETS event-on-change-reading available,files
attr UPDATE_WIDGETS reading01Name files
attr UPDATE_WIDGETS reading01Regex (?s)(UPD.*)
attr UPDATE_WIDGETS reading01Expr $val=controlfile_updatecheck($val);;$val
attr UPDATE_WIDGETS reading02Name available
attr UPDATE_WIDGETS reading02Regex (?s)(UPD.*)
attr UPDATE_WIDGETS reading02Expr $val=controlfile_updatecheck($val) ne ''?'yes':'no';;$val
attr UPDATE_WIDGETS room hidden

define UPDATES readingsGroup UPDATE_FTUI:available,files UPDATE_WIDGETS:available,files
attr UPDATES valueFormat { ($READING eq 'files' && $VALUE !~ /^-?$/)?'<a href="?cmd={controlfile_update(\'$DEVICE\')}">[Start Update]</a>':$VALUE }
attr UPDATES alias 3d Party Updates
attr UPDATES room System

In der readingsGroup wird ein Link mit dem Text "[Start Update]" angezeigt, sobald ein Update verfügbar ist. Die readingsGroup kann man sicher noch schöner machen, aber da kenn ich mich nicht aus und überlasse das euch

PS: Habe ein paar Stellen verändert, am besten komplett neu übernehmen.

Sorry ,entweder ich habe da was falsch verstanden , oder es hakt bei mir irgendwo :
- o.g. Erstellt einen Raum System, in dem eine Möglichkeit ist ,wenn ein Update vorhanden ist ,ein Update für das Tablet UI bzw die Widgets anzustoßen .
Soweit sieht das bei mir auch gut aus !
Es wird ein Update beides angezeigt !
Das erste Update lasse ich laufen ... Restart ... Nur noch Update für Widget da
Lasse ich dieses Update laufen ... Restart .... Erscheint wieder ein Update für Tablet UI ...usw.
Da das ja eigentlich nicht sein kann , habe ich es mal händisch versucht und dachte ich bin nun UP to Date .
Hmmmm, mache ich den updatecheck , so wird mir aber immer noch das gleiche Update zu Verfügung gestellt ....grummel
Was mach ich denn da falsch ?

[HoTi]

Sorry ,entweder ich habe da was falsch verstanden , oder es hakt bei mir irgendwo :
- o.g. Erstellt einen Raum System, in dem eine Möglichkeit ist ,wenn ein Update vorhanden ist ,ein Update für das Tablet UI bzw die Widgets anzustoßen .
Soweit sieht das bei mir auch gut aus !
Es wird ein Update beides angezeigt !
Das erste Update lasse ich laufen ... Restart ... Nur noch Update für Widget da
Lasse ich dieses Update laufen ... Restart .... Erscheint wieder ein Update für Tablet UI ...usw.
Da das ja eigentlich nicht sein kann , habe ich es mal händisch versucht und dachte ich bin nun UP to Date .
Hmmmm, mache ich den updatecheck , so wird mir aber immer noch das gleiche Update zu Verfügung gestellt ....grummel
Was mach ich denn da falsch ?

Na da schließe ich mich doch mal an!

[JoeALLb]

Gibt es eine Anleitung oder ein Beispiel für das "readingsgroup" widget?
Ich bekomme da irgendwie garnichts angezeigt....

[MrWishbone]

Hallo MrWishbone,

sehe ich da richtig und du hast Register in deinem Popup? Könntest du mir einen Tip geben wie das realisiert wird?

Danke im Vorraus

Hallo I3skon3,

die Tabs sind Marke Eigenbau, ich hab dazu ein Tutorial im Netz gefunden und es entsprechend aufs Tablet UI eingesetzt. Das ganze ist bisher auch nur ein Test und hat auch noch ein paar Macken.

So gibt es z.B. anscheinend Probleme mit einigen Widget, welche ihre Daten nicht korrekt laden können (deswegen fragte ich nach einer Möglichkeit das Datenladen anzustoßen).
Außerdem ist das Layout noch nicht ganz optimal. Mir fehlte bisher die Zeit mir dies noch genauer anzusehen.
Falls du aber dennoch dein Glück versuchen willst, das ganze setzt sich aus drei Teilen zusammen:

Zunächst musst du eine eigene CSS erstellen, bei mir heißt diese: fhem-tablet-ui_cust.css

Code Auswählen Erweitern


.dialog {
  background-color:#000000;
}

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}

    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }

    .tab-links li {
        margin:0px 5px;
        float:left;
        list-style:none;
    }

        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#191919;
            font-size:16px;
            font-weight:600;
            color:#aa6900;
            transition:all linear 0.15s;
        }

        .tab-links a:hover {
            background:#8C8C8C;
            text-decoration:none;
        }

    li.active a, li.active a:hover {
        background:#2A2A2A;
        color:#aa6900;
    }

    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
    height:350px;
        border-radius:3px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#2A2A2A;
    }

        .tab {
            display:none;
        }

        .tab.active {
            display:block;
        }


Wichtig ist hierbei, dass ich im Augenblick unter ".tab-content" noch eine fixe höhe (height:350px) eingebe. Ich habe es noch nicht hinbekommen die höhe dynamisch zu gestalten um unterschiedliche Pop-Up größen zuzulassen.

Zweiter Teil ist eine zusätzliche Java-Script Datei, bei mir heißt sieh schlicht "tabs.js":

Code Auswählen Erweitern


jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
        //jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});


Zuguter letzt musst du es im HTML-Dokument deiner Wahl einbauen.

Zunächst muss die Kopfzeile angepasst werden um die folgenden Zeilen:

Code Auswählen Erweitern


<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui_cust.css" />
<script type="text/javascript" src="/fhem/tablet/js/tabs.js"></script>

Achte hierbei auf die Reihenfolge. Die erste Zeile muss als letzte <link....> Zeile kommen und die zweite Zeile muss zwingend nach "jquery.min.js" kommen. Ansonsten laden die Funktionen nicht richtig.

Ist die Vorbereitung geschafft, kannst du die Tabs einbauen. Ich habe sie im Dialog platziert (deswegen habe ich auch die Hintergrundfarbe im Dialog auf schwarz geändert), aber Theoretisch können sie Überall eingebaut werden.

Code Auswählen Erweitern


<div data-type="popup" data-width="1000px" data-height="450px">
<!-- gewünschte Widgets hier -->
<div class="dialog">
<div class="top-space">
<header style="color: #aa6900;" class="big">WOHNZIMMER</header>
</div>
<div class="row">
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#wz_tab1">Dashboard</a></li>
<li><a href="#wz_tab2">Temperatur-Config</a></li>
<li><a href="#wz_tab3">Tab #3</a></li>
<li><a href="#wz_tab4">Tab #4</a></li>
</ul>

<div class="tab-content">
<div id="wz_tab1" class="tab active">
<div data-template="include/wz_tab1.html" class="cell"></div>
</div>

<div id="wz_tab2" class="tab">
<div data-template="include/wz_tab2.html" class="cell"></div>
</div>

<div id="wz_tab3" class="tab">
<p>Tab #3 content goes here!</p>
</div>

<div id="wz_tab4" class="tab">
<p>Tab #4 content goes here!</p>
</div>
</div>
</div>
</div>
</div>
</div>


Viel Erfolg

[wwg2000]

Hallo zusammen,

erstmal muss ich ein großes Lob loswegen: das FHEM Tablet UI ist ratten scharf. Gerade die coolen Widgets und der individuelle Einsatz sind Spitze. Auch die Trennung zwischen Oberflächen-Design und der dahinterliegenden FHEM-Logik ist super, das hat mich bei anderen Oberfläche immer generft.
Die gute Doku und die vielen Beispiel helfen natürlich auch.
Ich hab mir mit dem Tablet UI einen Floorplan erstellt. Dank der Widgets und der Animierungen sieht das recht gut aus. Ist zwar noch nicht fertig, aber es wird.


Ich hab aber auch eine Frage zu dem "Popup"-Widget und dem Verschieben (draggable): Ich hab in einem Popup ein Thermostat zur Temperaturreglung reingepackt. Wenn ich dort aber die Themperatur verändern will, dann verschiede ich damit gleichzeitig auch das Popup. Sehr lustiger Effekt, aber nicht wirklich hilfreich.
Laut Doku auf github kann das Verschieben beim Popup mit data-draggable deaktiviert werden. Funktioniert bei mir aber nicht. Und sofern ich das Codeing in widget_popup.js richtig verstehe, dann wird dort auch niergendswo der Parameter data-draggable abgefragt, sondern jedes Popup in Zeile 76 mit dialog.draggable(); "verschiebbar" gemacht.

Kann es sein, dass die Implementierung zu dem Parameter noch fehlt?

Gruß

[matzemoerk]

Hallo,

Ich habe ein Problem mit meinem Pagetab Menü. Es kommt unabhängig von Browser und Endgerät immer wieder vor, dass mein mit Pagetab aufgebautes Menü nicht angezeigt wird. Nach ein oder mehrmaligem reload der Seite taucht es dann wieder auf. Bei der Umsetzung habe ich mich an das Beispiel gehalten, bei dem das Menü in eine eigene Datei ausgelagert wird und als Template auf jeder Seite eingebunden wird. Anbei ein Einblick meiner Umsetzung. An was kann das liegen?

Schonmal danke für die Hilfe!

menu.html

Code Auswählen Erweitern


<html>
<body>
    <header>Menü</header>
    <div class="cell">
        <div data-type="pagetab" data-return-time="15" data-url="index.html" data-icon="fa-home" class="cell"></div>
        <div data-type="pagetab" data-url="multimedia.html" data-icon="fa-music" class="cell"></div>
        <div data-type="pagetab" data-url="weather.html" data-icon="fa-cloud" class="cell"></div>
        <div data-type="pagetab" data-url="wecker.html" data-icon="fa-bell" class="cell"></div>
        <div data-type="pagetab" data-url="system.html" data-icon="fa-gears" class="cell"></div>
        <div data-type="pagetab" data-url="info.html" data-icon="fa-info" class="cell"></div>
    </div>
</body>
</html>


index.html

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
        <!--
         /* FHEM tablet ui */
         /*
         * Just another dashboard for FHEM
         *
         * Version: 1.3.5
         * 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>FHEM-Tablet-UI</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="116">
        <meta name="widget_base_height" content="146">
        <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="0"> <!-- 1=output to console;0=no output -->
<meta name="toast" content="0">

        <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/fhem-blue-ui.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" />

        <!-- define your personal style here, it wont be overwritten  -->
        <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />

        <script type="text/javascript" src="/fhem/tablet/js/my_screensaver.js"></script>
        <script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
        <script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.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>



</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>
<li class="transparent50" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Uhr</header>


<div class="big top-space-2x" data-type="clock" data-format="H:i"></div>
<div class="" data-type="clock" data-format="d.m.Y"></div>


</li>


<li class="transparent50" data-row="2" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>


<li class="transparent50" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header>Wohnen</header>
<div data-type="klimatrend"
    data-device="OG_Wohnen_Klima"
    data-get="statTemperatureTendency"
    data-refperiod="1"
    data-stagnating-color="rgb(120,120,120)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(51,122,183)"
    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="inline big"
    ></div>
<div data-type="label"
     data-device="OG_Wohnen_Klima"
   data-get="temperature"   
     data-limits='[-73,10,23]'
     data-colors='["#4169E1","#FFA500","#FF0000"]'
     data-unit="%B0C%0A"
     data-fix="1"
     class="big top-space inline">
</div>
<div
style="color: #337ab7"
data-type="label"
     data-device="OG_Wohnen_Klima"
   data-get="humidity"   
     data-unit="%"
     class="cell big top-space">
</div>
</li>
<li class="transparent50" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header>Schlafzimmer</header>
<div data-type="klimatrend"
    data-device="DG_Schlafzimmer_Klima"
    data-get="statTemperatureTendency"
    data-refperiod="1"
    data-stagnating-color="rgb(120,120,120)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(51,122,183)"
    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="inline big"
    ></div>
<div data-type="label"
     data-device="DG_Schlafzimmer_Klima"
   data-get="temperature"   
     data-limits='[-73,10,23]'
     data-colors='["#4169E1","#FFA500","#FF0000"]'
     data-unit="%B0C%0A"
     data-fix="1"
     class="big top-space inline">
</div>
<div
style="color: #337ab7"
data-type="label"
     data-device="DG_Schlafzimmer_Klima"
   data-get="humidity"   
     data-unit="%"
     class="cell big top-space">
</div>
</li>
<li class="transparent50" data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<header>Büro</header>
<div data-type="klimatrend"
    data-device="DG_Buero_Klima"
    data-get="statTemperatureTendency"
    data-refperiod="1"
    data-stagnating-color="rgb(120,120,120)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(51,122,183)"
    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="inline big"
    ></div>
<div data-type="label"
     data-device="DG_Buero_Klima"
   data-get="temperature"   
     data-limits='[-73,10,23]'
     data-colors='["#4169E1","#FFA500","#FF0000"]'
     data-unit="%B0C%0A"
     data-fix="1"
     class="big top-space inline">
</div>
<div
style="color: #337ab7"
data-type="label"
     data-device="DG_Buero_Klima"
   data-get="humidity"   
     data-unit="%"
     class="cell big top-space">
</div>     
</li>
     
<li class="transparent50" data-row="1" data-col="4" data-sizex="1" data-sizey="1">
<header>Bäder</header>
<div>
<div data-type="klimatrend"
    data-device="DG_Bad_Klima"
    data-get="statTemperatureTendency"
    data-refperiod="1"
    data-stagnating-color="rgb(120,120,120)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(51,122,183)"
    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="inline big"
    ></div>
<div data-type="label"
     data-device="DG_Bad_Klima"
   data-get="temperature"   
     data-limits='[-73,10,23]'
     data-colors='["#4169E1","#FFA500","#FF0000"]'
     data-unit="%B0C%0A"
     data-fix="1"
     class="big top-space inline">
</div>
</div>
<div>
<div data-type="klimatrend"
    data-device="OG_WC_Klima"
    data-get="statTemperatureTendency"
    data-refperiod="1"
    data-stagnating-color="rgb(120,120,120)"
    data-icon="fa-angle"
    data-rising-color="rgb(180,80,80)"
    data-falling-color="rgb(51,122,183)"
    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="inline big"
    ></div>
<div data-type="label"
     data-device="OG_WC_Klima"
   data-get="temperature"   
     data-limits='[-73,10,23]'
     data-colors='["#4169E1","#FFA500","#FF0000"]'
     data-unit="%B0C%0A"
     data-fix="1"
     class="inline top-space big">
</div>
</div>
</li>

<li class="transparent50" data-row="1" data-col="6" data-sizex="1" data-sizey="1">
<header>Espressomaschine</header>
<div data-type="switch" class="cell bigger top-space"
            data-device="OG_Kueche_Strom_Espresso"
            data-get-on="on"
            data-get-off="off"
            data-icon="fa-plug"></div>
               
     
         <div
data-type="label"
     data-device="OG_Kueche_Energie_Espressomaschine_Pwr"
     data-unit="W/h"
     class="cell darker narrow right">
</div>
</li>

<li class="transparent50" data-row="1" data-col="7" data-sizex="1" data-sizey="1">
<header>Tablet laden</header>
<div data-type="switch" class="cell bigger top-space"
            data-device="OG_Wohnen_Strom_Tablet"
            data-get-on="on"
            data-get-off="off"
            data-icon="fa-plug"></div>

<div
data-type="label"
     data-device="dummyAkkuTablet"
     data-unit="%"
     class="cell darker narrow right">
     </div>

</li>

<li class="transparent50" data-row="2" data-col="6" data-sizex="1" data-sizey="1">
<header>Beamer</header>
<div data-type="switch" class="cell bigger top-space"
            data-device="HM_274860_Schalter_Beamer"
            data-get-on="on"
            data-get-off="off"
            data-icon="fa-plug"></div>
</li>

<li class="transparent50" data-row="2" data-col="7" data-sizex="1" data-sizey="1">
<header>Stehlampe</header>
<div data-type="dimmer" data-device="OG_Wohnen_Dimmer_Stehlampe"
            data-get-on="[0-9]{1,3}|on"
            data-set-on="pct 50"
            data-get-off="off"
            data-set-off="pct 0"
            data-dim="pct"
            class="cell bigger top-space">
</div>
</li>
     

<li class="transparent50" data-row="1" data-col="8" data-sizex="1" data-sizey="1">
<header>Wasserbett</header>

<div data-type="switch" class="cell bigger readonly top-space"
            data-device="DG_Schlafzimmer_Strom_Wasserbett"
            data-get-on="on"
            data-get-off="off"
            data-icon="fa-bed"></div>
               
     
         <div
data-type="label"
     data-device="DG_Schlafzimmer_Energie_Wasserbett_Pwr"
     data-unit="W/h"
     class="cell darker narrow right">
</div>
</li>

<li class="transparent50" data-row="2" data-col="8" data-sizex="1" data-sizey="1">
<header>Licht Küche</header>
<div data-type="switch" class="cell bigger top-space"
            data-device="OG_Kueche_Licht_Decke"
            data-get-on="on"
            data-get-off="off"
            data-icon="fa-lightbulb-o"></div>
</li>     
     
<li class="transparent50" data-row="3" data-col="6" data-sizex="1" data-sizey="1">
    <header>Licht Essen</header>
<div data-type="dimmer" data-device="OG_Kueche_Dimmer_Essen"
            data-get-on="[0-9]{1,3}|on"
            data-set-on="pct 100"
            data-get-off="off"
            data-set-off="pct 0"
            data-dim="pct"
            class="cell bigger top-space"></div>
</li>  

<li class="transparent50" data-row="3" data-col="7" data-sizex="1" data-sizey="1">
    <header>Licht Wohnen</header>
<div data-type="dimmer" data-device="OG_Wohnen_Dimmer_Decke"
            data-get-on="[0-9]{1,3}|on"
            data-set-on="pct 100"
            data-get-off="off"
            data-set-off="pct 0"
            data-dim="pct"
            class="cell bigger top-space"></div>
</li>


<li class="transparent50" data-row="3" data-col="8" data-sizex="1" data-sizey="1">
<header>HUE</header>     
<div data-type="dimmer" data-device="HUEBridge_HUEDevice1" data-get-on="!off" data-get-off="off" data-set="pct" class="cell bigger top-space" ></div>
</li>   
     
<li class="transparent50" data-row="2" data-col="2" data-sizex="4" data-sizey="3">
<header>SONOS Wohnzimmer</header>
<div data-type="image" data-device="Sonos_Wohnzimmer" data-get="currentAlbumArtURL" data-size="55%" class="top-space"></div>

<div class="container cell">
<div data-type="label" class="" data-device="Sonos_Wohnzimmer" data-get="infoSummarize1"></div><br>
<div data-type="label" class="darker narrow" data-device="Sonos_Wohnzimmer" data-get="infoSummarize3"></div><br>
</div>
           

<div class="cell">
<div data-type="push"
            data-set-on="VolumeD"
            data-icon="fa-volume-off"
            data-background-icon="-"
            data-device="Sonos_Wohnzimmer"
            class="inline"></div>

    <div data-type="push" data-device="Sonos_Wohnzimmer"
    data-icon="fa-step-backward" data-background-icon="-"
             data-set-on="Previous" class="inline">
        </div>
        <div data-type="push" data-device="Sonos_Wohnzimmer"
             data-icon="fa-stop" data-background-icon="-"
             data-set-on="Stop" class="inline">
        </div>
        <div data-type="push" data-device="Sonos_Wohnzimmer"
             data-icon="fa-play" data-background-icon="-"
             data-set-on="Play" class="inline">
        </div>
        <div data-type="push" data-device="Sonos_Wohnzimmer"
             data-icon="fa-step-forward" data-background-icon="-"
             data-set-on="Next" class="inline">
        </div>
        <div data-type="push"
            data-set-on="VolumeU"
            data-icon="fa-volume-up"
            data-background-icon="-"
            data-device="Sonos_Wohnzimmer"
            class="inline"></div>
    </div> 
   
     
</li>   
<li class="transparent50" data-row="6" data-col="2" data-sizex="4" data-sizey="1">
   
    <header>SONOS Voreinstellungen</header>
   
    <div class="cell wider left">
    <div data-type="select" data-device="Sonos_Wohnzimmer" data-list="FavTabletUI" data-set="startFavourite" class="cell " ></div>
        <div data-type="label" class="cell">Favouriten</div>
    </div>

<div class="right top-space right-space">


<div data-type="push" data-device="Sonos_Wohnzimmer"
             data-icon="fa-volume-down"
             data-set="Volume 8"
             class="cell inline">
</div>

<div data-type="push" data-device="Sonos_Wohnzimmer"
             data-icon="fa-volume-off"
             data-set="Volume 15"
             class="cell inline">
</div>

  <div data-type="push" data-device="Sonos_Wohnzimmer"
             data-icon="fa-volume-up"
             data-set="Volume 30"
             class="cell inline">
</div>
     <div data-type="label" class="cell">Lautstärke</div>


</div>

</li>

<li class="transparent50" data-row="4" data-col="6" data-sizex="2" data-sizey="2">
<header>Rolladen Gesamt</header>

    <div>
    <div data-type="switch" data-device="Structure_Rollaeden"
      data-get-on="on" data-get-off="!on"
      data-set-on="on" data-set-off=""
      data-icon="fa-angle-double-up" data-background-icon="fa-square" ></div>
    <div data-type="label" class="inline w1x">Auf</div>
</div>
<div>
    <div data-type="switch" data-device="Structure_Rollaeden"
      data-get-on="75" data-get-off="!on"
      data-set-on="75" data-set-off=""
      data-icon="fa-angle-down" data-background-icon="fa-square"></div>
    <div data-type="label" class="inline w1x">75</div>
</div>
<div>
    <div data-type="switch" data-device="Structure_Rollaeden"
      data-get-on="50" data-get-off="!on"
      data-set-on="50" data-set-off=""
      data-icon="fa-angle-down" data-background-icon="fa-square"></div>
    <div data-type="label" class="inline w1x">50</div>
</div>
  <div>
    <div data-type="switch" data-device="Structure_Rollaeden"
      data-get-on="25" data-get-off="!on"
      data-set-on="25" data-set-off=""
      data-icon="fa-angle-down" data-background-icon="fa-square"></div>
    <div data-type="label" class="inline w1x">25</div>
</div>
<div>
    <div data-type="switch" data-device="Structure_Rollaeden"
      data-get-on="off" data-get-off="!on"
      data-set-on="off" data-set-off=""
      data-icon="fa-angle-double-down" data-background-icon="fa-square"></div>
    <div data-type="label" class="inline w1x">Zu</div>
</div>
</li>

<li class="transparent50" data-row="4" data-col="8" data-sizex="1" data-sizey="1">
<div data-type="push"
     data-icon="fa-bed"
     class="cell bigger top-space-2x"
     onclick="setFhemStatus('set OG_Wohnen_Dimmer_Stehlampe 0 0 10; set HUEBridge_HUEDevice1 off 10; set OG_Kueche_Dimmer_Essen 0 0 10; set OG_Wohnen_Dimmer_Decke 0 0 10; set OG_Kueche_Licht_Decke off; set OG_Essen_Rolladen 0; set OG_Wohnen_Rolladen 0; set OG_Kueche_Strom_Espresso off')"></div>

</li>

<li class="transparent50" data-row="5" data-col="8" data-sizex="1" data-sizey="1">
<div data-type="switch" class="cell bigger top-space-2x"
            data-device="dummy_Anwesenheit"
            data-get-on="anwesend"
            data-get-off="abwesend"
            data-icon="fa-users"></div>
</li>


<li class="transparent50" data-row="1" data-col="9" data-sizex="2" data-sizey="5" data-template="sidebar_wetter.html"></li>
           

</ul>
</div>
<div data-template="screensaver.html"></div>
</body>
</html>


[Dduieh]

Hallo,

ist es möglich über einen Button direkt eine Routine in 99_myUtils.pm aufzurufen?

Vielen Dank

[setstate]

Kann es sein, dass die Implementierung zu dem Parameter noch fehlt?

Nö, alles da und funktioniert ...
Aber ich Trottel hab vergessen das ganze hochzuladen.
Sorry, ist soeben passiert.

[setstate]

Hallo,

ist es möglich über einen Button direkt eine Routine in 99_myUtils.pm aufzurufen?

Vielen Dank

Code Auswählen Erweitern

<div data-type="button" data-fhem-cmd="{discardTV()}"></div>

[the ratman]

hallo

sorry, dass ich der warscheinlich der 5 millionste hier bin, der die frage hat:
ich bringe die callist mit meiner fritzbox nicht auf die reihe. in der standard-ui werden mir die anrufe angezeigt, mit icon und allem pipapo.
aber egal welche codeschnippsel ich von hier ausprobiere - ich kriege auf der tablet ui keine anzeige.

in meiner fhem.cfg steht folgendes (einiges aus reiner verzweiflung *g*):

Code Auswählen Erweitern

define Anrufliste FB_CALLLIST Telefonanlage
attr Anrufliste create-readings 1
attr Anrufliste disable 0
attr Anrufliste event-on-change-reading .*
attr Anrufliste icon edit_copy
attr Anrufliste language de
attr Anrufliste number-of-calls 3
attr Anrufliste room Telefonanlage

was muß ich nun tun, um in der tablet ui die 3 anrufe sehen zu können? vorzugsweise mit icon. derzeit würde mich aber schon alles freuen, was über eine leere fläche hinaus geht.

[l3skon3]

@MrWishbone

Danke für die ausführlich Anleitung, ich werde mal versuchen das ganze nachzubauen.

[kvo1]

@the ratman
fhem.cfg

Code Auswählen Erweitern

define FB7272_LIST FB_CALLLIST FB7272
attr FB7272_LIST comment test auf CUBIE
attr FB7272_LIST create-readings 1
attr FB7272_LIST event-on-change-reading .*
attr FB7272_LIST icon phone_answersing
attr FB7272_LIST icon-mapping {'outgoing.missed' => 'phone_missed_out@red','incoming.missed' => 'phone_missed_in@red'}
attr FB7272_LIST language de
attr FB7272_LIST list-order descending
attr FB7272_LIST list-type all
attr FB7272_LIST number-of-calls 10
attr FB7272_LIST room Telefon
attr FB7272_LIST show-icons 1
attr FB7272_LIST time-format-string %a. %d %b %Y %T
attr FB7272_LIST verbose 0
attr FB7272_LIST visible-columns row,state,timestamp,name,number,internal,connection,duration

FTUI Beispiele

Code Auswählen Erweitern


<li data-row="1" data-col="2" data-sizex="6" data-sizey="4">
   <header style="color:red">A N R U F L I S T E   -   B E I S P I E L 1</header>
    <table border="0px" width="100%">
<tr>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="1-timestamp" class="left"></div> </td>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="1-name" class="left"></div> </td>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="1-number" class="left"></div> </td>
<td><div data-type="symbol" data-device="FB7272_LIST"
data-get="1-state"
data-icons='["fa-phone","fa-phone","fa-arrow-down","fa-arrow-up","fa-fax","fa-arrow-circle-down","fa-arrow-circle-up","fa-arrow-circle-down","fa-arrow-circle-up"]'
data-get-on='["<= ((o))","=> ((o))","=> [=]","<= [=]","=> O_O","=>","<=","=> X","<= X"]'
data-on-colors='["yellow","yellow","blue","blue","orange","green","green","red","red"]' class="left"></div> </td>
        </tr>
         <tr>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="2-timestamp" class="left"></div> </td>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="2-name" class="left"></div> </td>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="2-number" class="left"></div> </td>
<td><div data-type="symbol" data-device="FB7272_LIST"
data-get="2-state"
data-icons='["fa-arrow-down","fa-arrow-up","fa-fax","fa-arrow-circle-down","fa-arrow-circle-up","fa-arrow-circle-down","fa-arrow-circle-up"]'
data-get-on='["=> [=]","<= [=]","=> O_O","=>","<=","=> X","<= X"]'
data-on-colors='["blue","blue","orange","green","green","red","red"]' class="left"></div> </td>
        </tr>
<tr>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="3-timestamp" class="left"></div> </td>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="3-name" class="left"></div> </td>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="3-number" class="left"></div> </td>
<td><div data-type="symbol" data-device="FB7272_LIST"
data-get="3-state"
data-icons='["fa-arrow-down","fa-arrow-up","fa-fax","fa-arrow-circle-down","fa-arrow-circle-up","fa-arrow-circle-down","fa-arrow-circle-up"]'
data-get-on='["=> [=]","<= [=]","=> O_O","=>","<=","=> X","<= X"]'
data-on-colors='["blue","blue","orange","green","green","red","red"]' class="left"></div> </td>
        </tr>
<tr>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="4-timestamp" class="left"></div> </td>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="4-name" class="left"></div> </td>
             <td><div data-type="label" data-device="FB7272_LIST" data-get="4-number" class="left"></div> </td>
<td><div data-type="symbol" data-device="FB7272_LIST"
data-get="4-state"
data-icons='["fa-arrow-down","fa-arrow-up","fa-fax","fa-arrow-circle-down","fa-arrow-circle-up","fa-arrow-circle-down","fa-arrow-circle-up"]'
data-get-on='["=> [=]","<= [=]","=> O_O","=>","<=","=> X","<= X"]'
data-on-colors='["blue","blue","orange","green","green","red","red"]' class="left"></div> </td>
        </tr>
</table>

</li>





[kvo1]

Nö, alles da und funktioniert ...
Aber ich Trottel hab vergessen das ganze hochzuladen.
Sorry, ist soeben passiert.

@setstate
funktioniert, Danke!

[waschbaerbauch]

Nö, alles da und funktioniert ...
Aber ich Trottel hab vergessen das ganze hochzuladen.
Sorry, ist soeben passiert.

Vielen vielen Dank, nun funktioniert es!