New FHEM Tablet UI

bjoernbo · 05 Mai 2015, 18:43:16

Anpassung Thermostat.Widget:

Da nun bald, bzw. jetzt so langsam die Heizperiode sich dem ende nähert, habe ich meine Wandthermostate mal in den "off" Modus geschaltet. Im Thermostat.Widget wird mir allerdings nur der Wert 10 Grad angezeigt. Kann man das Widget ggf. so anpassen das auch der Wert OFF angezeigt werden kann?
Für die HomeMatic Komponente muss der Wert

Zitatdesired-temp

auch den Wert "OFF" annehmen können, anstelle von 10 Grad.

setstate · 05 Mai 2015, 18:53:28

Zitat von: bjoernbo am 05 Mai 2015, 18:43:16
Anpassung Thermostat.Widget:

Da nun bald, bzw. jetzt so langsam die Heizperiode sich dem ende nähert, habe ich meine Wandthermostate mal in den "off" Modus geschaltet. Im Thermostat.Widget wird mir allerdings nur der Wert 10 Grad angezeigt. Kann man das Widget ggf. so anpassen das auch der Wert OFF angezeigt werden kann?
Für die HomeMatic Komponente muss der Wert auch den Wert "OFF" annehmen können, anstelle von 10 Grad.

Das muss schon funktionieren, ich habe es bei mir nur noch nicht ausprobiert ...

http://forum.fhem.de/index.php/topic,34233.msg278440/topicseen.html#msg278440

bjoernbo · 05 Mai 2015, 19:14:40

Danke nesges! Nachdem ich

Zitatdata-min="4" data-off="off" data-max="31" data-boost="boost"

hinzugefügt habe funktioniert das nun einwandfrei!!!

Haecksler · 05 Mai 2015, 19:47:56

Danke für deine Hilfe!
Funktioniert leider noch nicht, also die 3 verschiedenen Zustände werden übernommen, wenn ich in FHEMWEB den Dummy Schalte, leider wird kein set gesendet, es gibt auch keine Ausgabe in der Konsole wenn tripush betätigt wird.

Zitat von: nesges am 05 Mai 2015, 00:26:28
Ah, um's senden ging's! Das hatten wir bisher noch nicht, ich hab aber grade ein wenig experimentiert und habe eine erste, experimentelle(!) Version. Probier mal bitte https://github.com/nesges/Widgets-for-fhem-tablet-ui/blob/master/testing/widget_tripush.js aus.

Code Auswählen Erweitern
<div data-type="tripush" data-device="Auto_Ja_SE" data-get-on='["AN","AUS_Licht","AUS"]' data-set-on='["AUS_Licht","AUS","AN"]' data-set-off="AUS" data-icons='["fa-square","fa-square","fa-square"]' data-on-colors='["#aa6900","SeaGreen","IndianRed"]' class="cell big" ></div>

***EDIT***
Habe nochmals alle Files upgedatet und siehe da es funktioniert! Perfekt KLASSE. Vielen Dank nesges!

Risiko · 05 Mai 2015, 19:53:12

@nesges
Hier die leicht korrigierte translation map für PROPLANTA.
Auch die Verwendung der PROPLANTA-Icons funktioniert. Allerdings werden diese immer neu von der Webseite geholt.
Evtl. könnte man noch einstellen, dass diese mit aus dem FHEM-Icon-Path genommen werden.
Da die PROPLANTA-Icons meiner Meinung nach nicht so ganz ins Design passen, wird das neue Feature vermutlich wenig genutzt werden.

Vielen Dank.

Risiko.

setstate · 05 Mai 2015, 20:05:51

Zitat von: Risiko am 05 Mai 2015, 19:53:12
Da die PROPLANTA-Icons meiner Meinung nach nicht so ganz ins Design passen, wird das neue Feature vermutlich wenig genutzt werden.

Ich wollte nix sagen ... aber das Thema hatten wir schon mal und das war auch meine Meinung, damals

http://forum.fhem.de/index.php/topic,34233.msg276750/topicseen.html#msg276750

tomster · 05 Mai 2015, 20:50:52

Zitat
Signalisierung Anrufe in Abwesenheit
Code Auswählen Erweitern
<div data-type="symbol" data-device="dummy1" data-get-on='["0","1"]' data-icons='["fa-fax","fa-fax warn"]' data-on-colors='["#555","#666"]'> </div>
(http://knowthelist.github.io/fhem-tablet-ui/phone_warn.png)

@setstate
Meinst Du man könnte dieses Widget als "Add-on", bzw. Overlay-Widget zu einem symbol, switch oder pagetab widget definieren? Ich fände es cool, wenn man ein z.B. Symbol-Widget wie bestehend (mit readings/settings von device 1) nutzen könnte und im roten Kreis auch Informationen von anderen dummies/ devices (Device 2) anzeigen könnte.

Wegwerf · 05 Mai 2015, 21:40:32

Zitat von: setstate am 05 Mai 2015, 16:10:44

Edit: getestet bei mir ... geht. Hast du auf der sekundären Seite auch keine Skripte eingebunden, wie ich? Also nur:
<html>
<title>FHEM</title>
<head>
</head>
<body>

Nein, habe da Keine Skripte, CSS oder irgendwas eingebunden nur das "reine"
<html>
<title>FHEM</title>
<head>
</head>
<body>
<div class="gridster">
<ul>
<li>

setstate · 05 Mai 2015, 21:59:01

Ich habe doch noch sporadische Fehler im Zusammenhang mit dem Pagetab durch ungünstiges Zeitverhalten gefunden. Es wird dann versucht, auf ein undefined Object zuzugreifen.
Den Fehler kann ich jetzt abfangen, vielleicht löst das auch dein Problem.
Update kommt dann ...
setstate

jual · 05 Mai 2015, 21:59:39

Das UI wird wirklich immer besser und bietet fast täglich neue Features und Möglichkeiten der Gestaltung. Daher möchte ich als Idee nochmals einen modofizierten Timer bereit stellen. Vor einiger Zeit hatte ich meinen bisherigen Timer ja schon einmal ausführlich präsentiert. Nun habe ich eine kleine Erweiterung und Vereinfachungen vorgenommen, so dass nun im Prinzip ein globaler Timer für die Veränderung von Zeiten eines WeekdayTimers oder eines at-Befehls vorgenommen werden könnten. Ich selbst nutze den Timer aktuell zur Änderung von täglichen Weckzeiten, die mittels WeekdayTimer realisiert wurden.

Bei der Änderung habe ich nun die Auswahl des Tages mittels "select" realisiert und zusätzlich die Optionen "Wochentag", "Wochenende" und "Reset" vorgesehen. Zusätzlich kann man angeben, welche Zeiten man ändern möchte. Hat man zum Beispiel zwei WeekdayTimer für unterschiedliche Funktionen, kann man diese nun definieren und im Timer auswählen.

Beim "Stellen" des Timers wird dann über zwei Dummys und eine Funktion in den 99myutils.pm die Änderung der Timerzeiten umgesetzt.

Nachfolgend nun die ausführliche Darstelllung meiner Lösung (die vom Code her wahrscheinlich noch optimiert werden könnte):

Zunächst ein Dummy für die Speicherung der aktuellen Werte des Timers:

Code Auswählen

define duWeckerTabUI dummy
attr duWeckerTabUI setList stellen
attr duWeckerTabUI userReadings Minute,Stunde,Tag,Timer

Ich bin mir nicht ganz sicher, aber ich die Readings nochmals einzeln mit Werten angelegt, damit diese auch wirklich angelegt werden. Also z.B.:

Code Auswählen

setreading duWeckerTabUI Minute 00

Dann nutze ich ein Dummy, in dem pro Wochentag die aktuellen Timer-Zeiten gespeichert werden. Wenn man mehrere WeekdayTimer verwendet, müsste man entweder für jeden Timer ein eigenes Dummy verwenden oder zusätzliche Readings für jeden Timer anlegen:

Code Auswählen

define Weckzeit dummy

Hier habe ich für jeden Wochentag ein Reading wie folgt erstellt:

Code Auswählen

setreading Weckzeit zwMontag 09:00

Mein WeekdayTimer sieht wie folgt aus:

Code Auswählen

define Aufstehen WeekdayTimer gr_Bewohner 0|".ReadingsVal("Weckzeit","wzSonntag","09:00")."|awoken 1|".ReadingsVal("Weckzeit","wzMontag","09:00")."|awoken 2|".ReadingsVal("Weckzeit","wzDienstag","09:00")."|awoken 3|".ReadingsVal("Weckzeit","wzMittwoch","09:00")."|awoken 4|".ReadingsVal("Weckzeit","wzDonnerstag","09:00")."|awoken 5|".ReadingsVal("Weckzeit","wzFreitag","09:00")."|awoken 6|".ReadingsVal("Weckzeit","wzSamstag","09:00")."|awoken (ReadingsVal("Urlaub_dummy","state","ja") eq "nein")

Mittels notify wird nun beim Klick auf den "Stellen" Button die Funktion "WeckzeitStellen()" in den 99myutils aufgerufen:

Code Auswählen

define notWeckerStellen notify duWeckerTabUI:stellen {WeckerStellen()}

Die Funktion sieht wie folgt aus:

Code Auswählen

sub WeckerStellen()
{
   my $timer = ReadingsVal("duWeckerTabUI", "Timer", "Aufstehen");
   my $Tag = ReadingsVal("duWeckerTabUI","Tag","Reset");
   my $Zeit = sprintf("%02d",ReadingsVal("duWeckerTabUI","Stunde","09")).":".sprintf("%02d",ReadingsVal("duWeckerTabUI","Minute","00"));


   if($Tag eq "Wochentag")
   {
      fhem("setreading Weckzeit wzMontag ".$Zeit);
      fhem("setreading Weckzeit wzDienstag ".$Zeit);
      fhem("setreading Weckzeit wzMittwoch ".$Zeit);
      fhem("setreading Weckzeit wzDonnerstag ".$Zeit);
      fhem("setreading Weckzeit wzFreitag ".$Zeit);
   }
   elsif ($Tag eq "Wochenende")
   {
      fhem("setreading Weckzeit wzSamstag ".$Zeit);
      fhem("setreading Weckzeit wzSonntag ".$Zeit);
   }
   elsif ($Tag eq "Reset")
   {
      if($timer eq "Aufstehen")
      {
         fhem("setreading Weckzeit wzMontag 08:00");
         fhem("setreading Weckzeit wzDienstag 08:00");
         fhem("setreading Weckzeit wzMittwoch 08:00");
         fhem("setreading Weckzeit wzDonnerstag 08:00");
         fhem("setreading Weckzeit wzFreitag 08:00");
         fhem("setreading Weckzeit wzSamstag 09:00");
         fhem("setreading Weckzeit wzSonntag 09:00");
      }
      elsif($timer eq "?")
      {
      #   fhem('modify WeekdayTimer oder at');
      }
   }
   else
   {
      fhem("setreading Weckzeit wz".ReadingsVal("duWeckerTabUI","Tag","Montag")." ".$Zeit);
   }
   fhem("save config");

   if($timer eq "Aufstehen")
   {
      fhem("modify Aufstehen gr_Bewohner 0|".ReadingsVal("Weckzeit","wzSonntag","09:00")."|awoken 1|".ReadingsVal("Weckzeit","wzMontag","09:00")."|awoken 2|".ReadingsVal("Weckzeit","wzDienstag","09:00")."|awoken 3|".ReadingsVal("Weckzeit","wzMittwoch","09:00")."|awoken 4|".ReadingsVal("Weckzeit","wzDonnerstag","09:00")."|awoken 5|".ReadingsVal("Weckzeit","wzFreitag","09:00")."|awoken 6|".ReadingsVal("Weckzeit","wzSamstag","09:00").'|awoken (ReadingsVal("Urlaub_dummy","state","ja") eq "nein")');
   }
   elsif($timer eq "?")
   {
   #   fhem('modify WeekdayTimer oder at');
   }
}

Nun kommt noch der Code aus der index.html. Dieser zeigt einmal die Umsetzung des Weckers und dann noch eine einfache Darstellung der aktuellen Weckzeiten:

Code Auswählen

<li data-row="1" data-col="2" data-sizex="3" data-sizey="3">
	<header>Weckzeit stellen</header>
	
	<div data-type="select" data-device="duWeckerTabUI" data-get="Tag" data-set="Tag" data-cmd="setreading"
		data-items='["Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag","Sonntag","Wochenende","Wochentag","Reset"]'
		class="w3x wider">
	</div>
	<div class="container">
		<div class="container inline right-space">
		   <div data-type="volume" data-device="duWeckerTabUI" data-get="Stunde" data-set="Stunde" data-cmd="setreading" data-min="0" data-max="24"></div>
		   <div data-type="label" class="big" style="margin-top:-15px">Stunde</div>
		</div>
		<div class="container inline">
			<div data-type="volume" data-device="duWeckerTabUI" data-get="Minute" data-set="Minute" data-cmd="setreading" data-min="0" data-max="60"></div>
			<div data-type="label" class="big" style="margin-top:-15px">Minute</div>
		</div>
	</div>
	<div data-type="select" data-device="duWeckerTabUI" data-get="Timer" data-set="Timer" data-cmd="setreading"
		data-items='["Aufstehen","Rolladen hoch","Rolladen runter"]'
		class="w3x wider">
	</div></br>

	<div data-type="push" data-device="duWeckerTabUI" data-cmd="set" data-set="stellen" class="cell"></div>
	<div data-type="label" class="big">Stellen</div>

</li>
<li data-row="1" data-col="4" data-sizex="2" data-sizey="2">
<header>Aktuelle Weckzeiten</header>

	<table width="100%">
        <tr>
			<td class="big right">Montag</td>
            <td>
				<div data-type="label" data-device="Weckzeit" data-get="wzMontag" class="big"></div>
            </td>
        </tr>
        <tr>
			<td class="big right">Dienstag</td>
            <td>
				<div data-type="label" data-device="Weckzeit" data-get="wzDienstag" class="big"></div>
            </td>
        </tr>
        <tr>
			<td class="big right">Mittwoch</td>
            <td>
				<div data-type="label" data-device="Weckzeit" data-get="wzMittwoch" class="big"></div>
            </td>
        </tr>
        <tr>
			<td class="big right">Donnerstag</td>
            <td>
				<div data-type="label" data-device="Weckzeit" data-get="wzDonnerstag" class="big"></div>
            </td>
        </tr>
        <tr>
			<td class="big right">Freitag</td>
            <td>
				<div data-type="label" data-device="Weckzeit" data-get="wzFreitag" class="big"></div>
            </td>
        </tr>
        <tr>
			<td class="big right">Samstag</td>
            <td>
				<div data-type="label" data-device="Weckzeit" data-get="wzSamstag" class="big"></div>
            </td>
        </tr>
        <tr>
			<td class="big right">Sonntag</td>
            <td>
				<div data-type="label" data-device="Weckzeit" data-get="wzSonntag" class="big"></div>
            </td>
        </tr>
		</table>	
</li>

Ich hoffe, dass es einigermaßen verständlich war und würde mich freuen, wenn ihr damit etwas anfangen könnt.

setstate · 05 Mai 2015, 22:37:33

Zitat von: tomster am 01 Mai 2015, 01:17:12
Ich hab mich nicht danach fragen getraut, aber genau DAS hab ich gesucht. Meine Gehversuche waren mehr als bescheiden bislang.
VIELEN Dank!

--edit--
das jetzt noch in einem "pagetab"...
--/edit--

Und da ist es: Update Pagetab Widget Items können jetzt auch 'warn' und zusätzlich 'activate' verstehen.

Code Auswählen


        <div data-type="pagetab" data-device="myDoorBell"
                data-get-on='["0","(?:[1-9][0-9]*)","on"]'
                data-icons='["fa-fax","fa-fax warn","fa-fax warn activate"]'
                data-url="index_door.html" class="cell"></div>
        </div>

Damit könnte man zum Beispiel innerhalb einer Menü-Tab-Leiste die Anzahl des Tür-Klingeln anzeigen (warn) und bei einem bestimmten Reading Wert, automatisch auf die entsprechende Seite umschalten (activate).

(http://knowthelist.github.io/fhem-tablet-ui/phone_warn.png)

tomster · 05 Mai 2015, 22:55:09

Du bist schlichtweg Wahnsinn!

setstate · 06 Mai 2015, 02:18:54

Zitat von: nesges am 05 Mai 2015, 16:48:10
Farben sind im Label bisher nur für numerische Werte in Verbindung mit Limits implementiert. Aber die Idee ist gut!

Und ging auch leicht zu erweitern: Man kann jetzt auch mit RegEx Farben zuweisen (neben den bekannten numerischen größer-gleich Limits)

Code Auswählen


<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay"
        data-limits='[".*be.*"]' data-colors='["#6699FF"]'
        class="cell narrow"></div>

Blödes Beispiel, aber war nur für Testzwecke. Wenn das Reading 'be' enthält, wird der Text blau.

setstate · 06 Mai 2015, 02:53:08

Update: New Widget Level

Ich habe den Slider etwas verbogen und als neues Widget angelegt, damit man schön Levels (Füllstände o.ä.) anzeigen lassen kann

Code Auswählen


    <div class="cell">
        <div data-type="level" data-device='Tablet'  data-get='powerLevel'
            class="horizontal left" >
        </div>
        <div data-type="label" data-device='Tablet'
             data-get='powerLevel'
             data-unit="%" class="top-space left"></div>
    </div>

Geht auch mit dem vom Label Widget bekannten data-limits, um die Farbe zu beeinflussen

Code Auswählen


<li data-row="5" data-col="3" data-sizex="2" data-sizey="1">
   <header>LEVEL</header>
    <div class="cell">
        <div data-type="level" data-device='Tablet'  data-get='powerLevel'
            data-limits='["[12]*[0-9]","[3456][0-9]","([789][0-9]|100)"]'
            data-colors='["#dd3366","#ffcc00","#55aa44"]'
            class="horizontal left" >
        </div>
        <div data-type="label" data-device='Tablet'
             data-get='powerLevel'
             data-unit="%" class="top-space left"></div>
    </div>
    <div class="cell">
        <div data-type="level" data-device='dummy1'
            data-limits='["20","70","95"]'
            data-colors='["#dd3366","#ffcc00","#55aa44"]'
            class="horizontal left" >
        </div>
        <div data-type="label" data-device='dummy1' data-unit="%" class="top-space left"></div>
    </div>
</li>

CoolTux · 06 Mai 2015, 06:57:04

Guten Morgen,

Ich habe Probleme mit der Dimmer Class. Und zwar kann ich das Gerät dahinter (Homematic Unterputz Dimmer) auf einem Tablet nicht ein oder aus schalten. Ich kann zwar dimmen aber nicht on off setzen. Am PC geht das. Beides Chrome Browser.
Gerade fällt mir ein das ein Unterschied sein könnte das ich am PC über den Web Port gehe und am Tablet über den WebTablet Port. Kann das der Grund sein?

Grüße
Leon

New FHEM Tablet UI

Wegwerf