Autor Thema: [Tablet-UI] Bedingte Anzeige einbauen  (Gelesen 6671 mal)

LarsK

  • Gast
[Tablet-UI] Bedingte Anzeige einbauen
« am: 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:
<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

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4356
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #1 am: 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

  • Gast
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #2 am: 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:

<div id ="cont"></div>
Am Ende der Seite folgenden Javascript einfügen:

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

Gruß

Lars

Offline zap

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4361
    • HMCCU
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #3 am: 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.


« Letzte Änderung: 12 Januar 2016, 13:54:09 von zap »
2xCCU3, diverse Komponenten (Fenster, Rolladen, Themostate, Stromzähler, Steckdosen ...)
FHEM mit Raspi für CCU Integration.
IOBroker für UI (VIS), Hue, Sonos usw.
Maintainer der Module FULLY, Meteohub und HMCCU (Schnittstelle CCU-FHEM = best of both worlds approach

Offline stephanr

  • Jr. Member
  • **
  • Beiträge: 82
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #4 am: 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

  • Gast
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #5 am: 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


Offline setstate

  • Hero Member
  • *****
  • Beiträge: 4356
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #6 am: 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:
elem.initData('hideout', '');
elem.initData('hideout-value', 'WERT');
elem.addReading('hideout');

- auf updates warten und reagieren in der update function

//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"
« Letzte Änderung: 13 Januar 2016, 08:18:22 von setstate »

Offline Hauswart

  • Developer
  • Sr. Member
  • ****
  • Beiträge: 913
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #7 am: 13 Januar 2016, 08:12:43 »
Würde sich auch gut im Wiki machen? :)
1. Installation:
KNX, Tasmota (KNX), Sonos, Unifi

2. Installation:
HM-CFG-USB, Unifi (, SIGNALduino 868, MySensors, SIGNALduino 433)

Offline tschimi

  • Jr. Member
  • **
  • Beiträge: 67
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #8 am: 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:<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

Offline Ulm32b

  • Full Member
  • ***
  • Beiträge: 391
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #9 am: 23 April 2018, 11:08:44 »
data-hide oder via class-changer.
Über die Suchfunktion sollten sich hier manche Beispiele finden.

Offline tschimi

  • Jr. Member
  • **
  • Beiträge: 67
Antw:[Tablet-UI] Bedingte Anzeige einbauen
« Antwort #10 am: 24 April 2018, 09:44:19 »
Tja, kaum macht man es richtig, schon funktionierts :-) DANKE!!!

 

decade-submarginal