Hallo Forum!
Ich möchte gern zwei Readings in einem "Kombi-Widget" aus Label und Symbol darstellen.
Dabei soll das Label zentriert im Symbol (Kreisring) stehen.
Wenn ich eine einfache Zahl anstelle eines Label-Widgets nehme, dann funktioniert das auch ...
Hat jemand eine Idee? Danke euch.
Edit:
Ich muss mich ein wenig korrigieren: Es funkioniert prinzipiell mit dem Push-Widget in Kombination mit einer einfachen Zahl. Allerdings kann das Push-Widget meines Wissens keine Readings darstellen.
Push kann neuerdings auch Readings darstellen, nur nicht per default. Du musst data-get und data-get-on angeben.
Die Kombi bekommt man durch Verschachtelung hin. Label innerhalb eines Push
<div data-type="push" ...><div data-type="label" ...></div></div>
Ich hab es mal mit dem Push-Widget ausprobiert.
Leider ist es nicht das, was ich möchte bzw es lässt sich damit nicht realisieren.
Nochmal zur Erläuterung:
Ich möchte ein Symbol-Widget (Kreisring mit reading-gesteuerter Farbe) mit einem Label-Widget so kombinieren, dass das Label (ebenfalls reading-gesteuert) zentriert im Kreisring steht.
Warum das alles? Im Kellergeschoss habe ich Radiatoren, aber im Rest des Hauses Fußbodenheizung. Bei FBH ist der jeweilige Heizkreis entweder geschlossen (blauer Kreisring) oder offen (roter Vollkreis). Radiatoren können aber mehr oder wenig geöffnet sein.
Die Zustände bei FBH und Radiatoren möchte ich einheitlich darstellen: Die Ventilöffnung in einem Kreisring mit variablen Farbtönen und als numerischen Wert.
Das Knob-Widget wäre zur Not auch okay, aber hierbei stört mich der breite untere Rand, und das Thermostat-Widget ist mir zu groß.
Hallo,
ich schlage mich mit einem ähnlichen Problem herum. Ich möchte einen Punkt mit Zahl darin darstellen, aber bis jetzt schaffe ich das nur mit einem kleinen Kniff über "position absolute"
<div
class="bigger compressed"
data-type="symbol"
data-device="DM_7020"
data-get="recordings"
data-icons='["","fa-circle recPuls"]'
data-on-colors='["","dodgerblue"]'
data-get-on='["0","(?!0).+"]'
></div>
<div style="position:absolute; top:1px;left:13px"
class="tall black"
data-type="label"
data-device="DM_7020"
data-get="recordings"
></div>
mit dem verschachteln klappt es irgend wie nicht.
Gruß Rolf
wie ich schon oben geschrieben habe, verschachteln
<div>
<div
data-type="symbol"
data-device="dummy1"
data-get="STATE"
data-icon="none"
data-color='none'
data-background-icons='["none","fa-circle-thin"]'
data-background-colors='["","dodgerblue"]'
data-states='["0","(?!0).+"]'>
<div
data-type="label"
data-device="ftuitest"
data-get="STATE"
data-limits='[0,1,2]' data-colors='["#6699FF","#aa6900","#ad3333"]'
></div>
</div>
</div>
Hallo,
@setstate
Danke für den Tip, jetzt habe ich es hinbekommen. Ein paar kleine Veränderungen habe ich noch angepasst.
<div class="top-space">
<div data-type="symbol"
data-device="DM_7020"
data-get="recordings"
data-icon="none"
data-color='none'
data-background-icons='["none","fa-circle"]'
data-background-colors='["black","dodgerblue"]'
data-limits='["0","(?!0).+"]'>
<div data-type="label"
data-device="DM_7020"
data-get="recordings"
data-color="black"></div>
</div>
</div> Mein problem war das zusätzliche alles umfassende <DIV> das bei Deinem ersten Tip leider nicht so erkennbar war. Ich hatte es nur verschachtelt und da klappt es dann nicht.
Danke Gruß Rolf
Hallo zusammen,
ich habe bei mir mal etwas ähnliches versucht, allerdings übernimmt das Label die Größenklasse nicht, so daß das Ergebnis wie unten aussieht.
Der Wert im Label ist übrigens 40,5°C, wie man unschwer erkennen kann. :o
<div class="cell">
<div data-type="symbol"
data-device="dummy1"
data-limits='["on","off"]'
data-icon="none"
data-color='none'
data-background-icons='["fa-square","fa-square"]'
data-background-colors='["blue","red"]'
onclick="ftui.setFhemStatus('set dummy2 trigger')"
data-states='["off","on"]'
class="bigger">
<div data-type="label"
data-device="dummy3"
data-limits='[0,38,43]'
data-colors='["#f2f2f2","orange","red"]'
data-unit="°C"
data-fix="1"
class="mini">
</div>
</div>
</div>
Hallo,
vielleicht funktioniert es so:
<div style="font-size:40px">
Gruß Rolf
Hatte ich auch schon probiert, hat aber keinen Effekt.
Kann ich nachvollziehen, habe aber noch keine Lösung.
Lösung gefunden ... :D
Super, funktioniert.
Danke setstate.
Dürfen wir auch noch erfahren, was die Lösung war? ;)
Änderung in der famultibutton Lib.
Hallo,
mir ist jetzt aufgefallen das sich die Zahl im Label nur bei einem reload der Seite aktualisiert. Ist das ein problem bei mir?
Gruß Rolf
Guten Abend,
Das Problem dass sich der Wert im Label nur bei einem reloead der Seite aktualisiert habe ich auch.
Kann das Verhalten irgendwie umgangen werden?
Gruß Basti
Das ist tatsächlich ein Bug. Musste auch ganz schön suchen. Problem war: das eingebettete Widget muss initialisiert werden. Warum das vorher ging, und was sich geändert hat, ist mir bis jetzt noch ein Rätsel.
Update kommt später, ich teste die Lösung erst noch auf Nebenwirkungen.
Guten Abend,
Vielen Dank für die schnelle Antwort.
Falls ich was testen soll etc. stehe ich gerne zur Verfügung.
Grüße Basti
Update:
Nach einem Update von FTUI werden die Zahlen jetzt aktualisiert.
Danke für das schnelle Anpassen.
Hallo,
habe ebenfalls das Problem, dass ein in einem Push-Widget eingebettetes Label nicht aktualisiert wird - auch nach soeben durchgeführtem Update von FTUI und FHEM. Komisch dass es bei Basti funktioniert!?
<div data-type="push" data-off-background-color="#aa55ff" data-on-background-color="ffccff" data-icon="" class="">
<div data-type="label" data-device="Bulb1" data-get="pct" data-color="white" data-unit="%" class="mini"></div>
</div>
Mache ich was falsch, wie ist das mit dem Initialisieren des eingebetteten Widgets gemeint?
Danke, Klingelbastler
Moin,
ich habe ein CircleMenü, was wie folgt aufgebaut ist:
<div data-type="circlemenu">
<ul>
<li><div data-type="push" data-icon="">
<div data-type="label" data-device="BOSE_A81B6A15B761" data-get="channel"></div>
</div></li>
<li><div data-type="push" data-device="BOSE_A81B6A15B761" data-set-on="channel 1" data-icon="">1</div></li>
<li><div data-type="push" data-device="BOSE_A81B6A15B761" data-set-on="channel 2" data-icon="">2</div></li>
<li><div data-type="push" data-device="BOSE_A81B6A15B761" data-set-on="channel 3" data-icon="">3</div></li>
<li><div data-type="push" data-device="BOSE_A81B6A15B761" data-set-on="channel 4" data-icon="">4</div></li>
<li><div data-type="push" data-device="BOSE_A81B6A15B761" data-set-on="channel 5" data-icon="">5</div></li>
<li><div data-type="push" data-device="BOSE_A81B6A15B761" data-set-on="channel 6" data-icon="">6</div></li>
</ul>
</div>
wenn ich folgenden Code hinzufüge und das CircleMenü betätige aktualisiert sich das Label aus dem hinzugefügten Code und das Label im CircleMenü.
<div data-type="push" data-icon="">
<div data-type="label" data-device="BOSE_A81B6A15B761" data-get="channel" data-color="white"></div>
</div>
VG
Basti
Danke Basti für die Antwort.
Leider hakt es immer noch bei mir, nutze ebenfalls ein Circle Menu.
Du musst den zweiten Code-Ausschnitt dem ersten noch hinzufügen? Wo genau fügst Du das ein?
Denn eigentlich ist ja auch in Deinem ersten Codeschnippsel schon genau dieser Abschnitt eingebettet, bis auf das fehlende data-color="white".
Danke, Klingelbastler
Kriege es leider nicht hin. So sieht mein Circle Menu aus - eigentlich ziemlich ähnlich wie bei Dir:
<div data-type="circlemenu" data-circle-radius="45" class="inline top-space">
<ul>
<li>
<div data-type="push" data-off-background-color="#aa55ff" data-on-background-color="ffccff" data-icon="">
<div data-type="label" data-device="Bulb1" data-get="pct" data-color="white" data-unit="%" class="mini"></div>
</div>
</li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 1" data-icon="">1</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 20" data-icon="">20</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 40" data-icon="">40</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 60" data-icon="">60</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 100" data-icon="">100</div></li>
</ul>
</div>
Wenn ich einen Menüeintrag anklicke wird das korrekte set Kommando ausgeführt, aber der Wert im Label wird nicht aktualisiert. Erst nach einem kompletten Page Reload.
Wo muss ich den zusätzlichen Code einfügen? Wäre um Hilfe dankbar.
Gruß Klingelbastler
kommt denn die Toast-Message "Full refresh done in ..." ?
Im Header muss dafür <meta name='debug' content='1'> stehen.
Wenn die Nachricht nicht kommt, stimmt etwas nicht mit der HTML-Syntax oder den angegebenen Parametern.
Da hilft die Seite Stück für Stück aufbauen und immer drauf achten, ob die Message kommt.
Ich habe die Seite jetzt komplett runtergestript nur noch auf das Circlemenu, und habe dabei die Vorlage von Basti verwendet (und auch meine eigene versucht).
Es wird die gewünschte Aktion ausgeführt, aber das Label nicht aktualisiert.
Wenn ich im Browser per Taste F5 einen Reload erzwinge, kommt folgende Meldung:
Full refresh done in 0.0s for 4 parameters
Wenn ich mit dem Circlemenu einen Wert ändere, kommt diese Meldung nicht - sollte sie?
Fehler im HTML Code kann ich nicht erkennen, jedes Beginn-Tag hat ein Ende-Tag.
Hier die komplette Seite:
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.5.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2017 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 TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
*/
-->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<script src="js/fhem-tablet-ui.js" defer></script>
<!-- Remove this line to enable for usage with WebViewControl
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="../pgm2/cordova-2.3.0.js" defer></script>
<script src="../pgm2/webviewcontrol.js" defer></script>
<!-- End for WebViewControl -->
<title>FHEM-Tablet-UI</title>
<meta name='debug' content='1'>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="2" data-sizex="3" data-sizey="2"><header>Kinderzimmer Süd</header>
<div data-type="circlemenu">
<ul>
<li><div data-type="push" data-icon="">
<div data-type="label" data-device="Bulb1" data-get="pct"></div>
</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 1" data-icon="">1</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 20" data-icon="">2</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 40" data-icon="">3</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 60" data-icon="">4</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 80" data-icon="">5</div></li>
<li><div data-type="push" data-device="Bulb1" data-set-on="pct 100" data-icon="">6</div></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
Das Problem kann der nicht gesetzte Meta-Tag Longpoll sein.
https://wiki.fhem.de/wiki/FHEM_Tablet_UI_FAQ
(https://wiki.fhem.de/wiki/FHEM_Tablet_UI_FAQ)
Füge bitte folgenden Tag hinzu:
<meta name="longpoll" content="1">
funktioniert
<div data-type="label" data-device="Bulb1" data-get="pct"></div>
ausserhalb vom Circlemenu?
Benutzt du eine Version von nach dem 01.11.17 ?
Tut mir leid dass ich Eure Nerven mit diesem vermutlich banalen Problem strapaziere, bin noch recht neu in FHEM. Danke für Eure Geduld.
Basti:
Das Hinzufügen des Longpolls ändert nichts am Verhalten.
Setstate:
Das Label ausserhalb des Circlemenu funktioniert verlässlich und wird sofort aktualisiert wenn ich einen neuen Wert wähle - dabei erhalte ich übrigens keine Meldung "Full refresh done in ...".
Das eingebettete Label dagegen erfordert einen kompletten Webbrowser Page Reload mit F5.
Wie erkenne ich die Version des Widgets?
Meine FHEM Basisinstallation habe ich vor ~2 Monaten gemacht, also vor dem 01.11.2017.
Anschließende Updates per "update".
Tablet UI wie im Wiki angegeben per
update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Das hab ich die letzten Tage öfters durchgeführt, da sind auch Updates gekommen, aktuell meldet er aber nur "nothing to do".
Verstehe ich es richtig, dass es hier anfangs ein Problem mit eingebetteten Labels gab, dies mittlerweile aber gefixt sein sollte?
Als letzter Ausweg bleibt noch eine komplette Neuinstallation, wenn Ihr sagt dass es eigentlich funktionieren müsste...
Schönen Abend!
Sorry, doch ein Bug.
Das ist schon wieder kaputt-repariert. Seit dem Update zur Vermeidung von Doppel-init funktioniert das nicht mehr. Ich schaue mir das an ...
Bin heute durch Zufall auf das gleiche Problem gestoßen.
Zum Glück wurde schon was dazu geschrieben, hab schon an mir gezweifelt ;D
setstate wir glauben an dich ;) 8)
Schönen Abend!
Ich glaube Setstate war fleissig - gerade kam ein Update und nun geht es!?!?!!!
Ich kann nur sagen herzlichen Dank Setstate für den schnellen Fix - toll was Du und Deine Entwicklerkollegen leistet!
Freue mich über die schönen Knöpfe mit Beschriftung :-)
jepp, jetzt geht es. Aber ich musste gerade nochmal etwas nachbessern.
Nochmal danke, auch nach erneutem Update alles bestens.