[Tablet-UI] Bedingte Anzeige einbauen

LarsK · 07 Januar 2016, 12:53:06

Hallo,

ich experimentiere gerade mit der FTUI rum. Dabei ist mir eine Idee gekommen und ich weiß nicht wie man das am besten umsetzen kann.

Ich würde gerne Labels (also Readings) in Abhängigkeit zu anderen Readings anzeigen. Ich weiß nur nicht wie ich das in die HTML Seite am besten einbauen kann, perl, php, js etc.

Beispiel: Wenn Reading A = 1 dann zeige Reading B ansonsten Reading C.
Pseudocode einer html seite:

Code Auswählen


<html>
<body>
<li>
if <label data-device="zaehler" "data-get="kontakt"> == 1 {
<label data-device="zaehler" "data-get="kreis1">
} else {
<label data-device="zaehler" "data-get="kreis2">
}
</li>
</body>
</html>

Vielleicht hat ja einer von Euch eine sinnvolle Idee.

Gruß

Lars

setstate · 07 Januar 2016, 14:10:12

Ich würde das per Dummy-Device im FHEM selber implementieren.
Das FTUI Label schaut nur gerade auf das/den Dummy, die Logik dahinter passiert im Hintergrund.

Das Label-Widget kann bis jetzt nur die Farbe verändern in Abhängigkeit eines weiteren Devices:
- **data-colors** : a array of color values to affect the colour of the label according to the limit value
- **data-limits-get** : name of the DEVICE:Reading to colorize the label (default: data-device:data-get)
- **data-limits** : a array of numeric or RegEx values to affect the colour of the label

LarsK · 11 Januar 2016, 07:35:07

Für alle, die ggf. etwas ähnlich vor haben, hier meine Lösung:

An der Stelle wo die Anzeige erfolgen soll:

Code Auswählen

<div id ="cont"></div>

Am Ende der Seite folgenden Javascript einfügen:

Code Auswählen


<script type="text/javascript">
var sum = getDeviceValueByName('DEVICE','READING');
if (sum=='WERT') {     
document.getElementById('cont').innerHTML += '<div data-type="symbol" ...></div>';
}
</script>

Gruß

Lars

zap · 12 Januar 2016, 13:49:01

Cool ! Vielen Dank !
Das habe ich bei Tablet-UI vermisst. Komme von Infopanel, da gibt es solche Bedingungen schon.

Über Dummy Devices wäre wirklich umständlich und auch ziemlich intransparent.

Eine Frage noch: Wie wird das Script angetriggert? Laut einschlägiger Doku soll man innetHTML nicht direkt beim Laden der Seite ansprechen.

stephanr · 12 Januar 2016, 19:52:18

In der Tat kann es problematisch sein innerHTML direkt beim Laden der Seite auszuführen. Ich würde eine Funktion bauen und diese per setTimeout verzögert ausführen.
Beispiel für setTimeout auf folgender Seite http://forum.fhem.de/index.php/topic,34233.3570.html

LarsK · 13 Januar 2016, 07:40:30

Ja stimmt, danke für die Ergänzung. Werde ich auch mal ausprobieren.

Genauso wirds ein Problem sein, wenn das Reading sich ändert. Auch dann wird ohne Refresh, das Symbol nicht einfach verschwinden. Aber für den ersten Ansatz und in meinem Fall rechts erstmal.

Gruß

Lars

setstate · 13 Januar 2016, 08:07:07

Ich würde an deiner Stelle eher das Symbol Widget erweitern mit dem Feature, dass in Abhänigkeit eines beliebigen Readings die Weite und Höhe des Widgets auf 0 oder normal geschaltet wird.

- data Parameter in init function hinzufügen:

Code Auswählen


elem.initData('hideout', '');
elem.initData('hideout-value', 'WERT');
elem.addReading('hideout');

- auf updates warten und reagieren in der update function

Code Auswählen



//extra reading for hide/show
        base.elements.filterDeviceReading('hideout',dev,par)
        .each(function(idx) {
            var elem = $(this);
            var val = elem.getReading('hideout').val;
            if(val) {
                if ( val == elem.data('hideout-value') 
                  elem.hide();
                else
                  elem.show();
            }
        });

im HTML kannst du dann mit data-hideout="DEVICE:READING" arbeiten oder, wenn das Reading vom selben Device kommt einfach nur data-hideout="READING"

Hauswart · 13 Januar 2016, 08:12:43

Würde sich auch gut im Wiki machen?

tschimi · 23 April 2018, 09:54:18

Hi, ich bin gerade über diesen Thread gestolpert, weil ich etwas ähnliches versuche und mittlerweile es fast aufgegeben habe. Ich möchte einfach zwischen zwei Anzeigen wählen können in Abhängigkeit von einer FHEM-Variable. Vorgestellt hab ich mir das so:

Code Auswählen

<script type="text/javascript">
	 if( document.getElementById('myDIENST').innerHTML == 'on') {
	    document.getElementById('wettercont').innerHTML += '<div data-type="weather" data-device="Wetter" data-get="condition" data-warn="myDIENST:state" data-imageset="kleinklima" class="cell mini squareborder">'; 
    } else {
   	 document.getElementById('wettercont').innerHTML += '<div data-type="weather" data-device="Wetter" data-get="condition" data-warn="myDIENST:state" data-imageset="kleinklima" class="cell mini">'; 
    }
    if(document.getElementById('BMWladen').innerHTML=='on'){
   	 document.getElementById('bmwcont').innerHTML += '<div data-type="switch" data-device="Garten" data-icon="fa-automobile" class="tiny"></div><div data-type="label" data-device="BMW_chargingLevelHv" data-get="state" class="inline top-narrow small blink" data-colors="green"></div><div data-type="label" class="inline top-narrow tiny">%</div>'
    } else {
	    document.getElementById('bmwcont').innerHTML += '<div data-type="switch" data-device="Garten" data-icon="fa-automobile" class="tiny"></div><div data-type="label" data-device="BMW_chargingLevelHv" data-get="state" class="inline top-narrow small" data-colors="white"></div><div data-type="label" class="inline top-narrow tiny">%</div>'
    }

</script>

Nun hab ich mittlerweile auch verstanden, das sowohl innerHTML als auch innerTEXT zum Zeitpunkt des Aufbaus noch initial sind. Aber wie komme ich den dann an die Variablen? Ich hab es auch schon mit fui... versucht, aber das Verhalten ist leider das selbe

Wäre schön, wenn jemand dazu eine kurze Erklärung mit einem Beispiel hätte...

Danke euch schon mal im Vorraus, tschimi

Ulm32b · 23 April 2018, 11:08:44

data-hide oder via class-changer.
Über die Suchfunktion sollten sich hier manche Beispiele finden.

tschimi · 24 April 2018, 09:44:19

Tja, kaum macht man es richtig, schon funktionierts

DANKE!!!

[Tablet-UI] Bedingte Anzeige einbauen

LarsK

LarsK

LarsK