Visu-Element verstecken, wenn item-Wert ein leerer String ist

[Johann.S]

Hallo,

kann man den Type einer Variablen abfragen?

Grund:

Ich bekomme einen String aus fhem der auch leer sein kann!
Wenn er leer übergeben wird, wird der Text NaN ausgegeben!
In basic.print ist es einfach, man gibt den Type 'text' ein!
Wie überprüfe ich das aber in einer if Abfrage?

    {% if 'hm.alarm' > "NaN" %}
        <marquee behavior="scroll" direction="left" height="20" scrollamount="10" bgcolor="red">
        {{ basic.print('laufschrift_a','hm.alarm','text','','','black') }}
        </marquee>
    {% endif %}

Ich habe schon einiges versucht und recherchiert komme aber nicht dahinter!

    {% if 'hm.alarm' > "" %}​

    {% if 'hm.alarm' > 0 %}​

    {% if 'hm.alarm' >= 1 %}​

    {% if 'hm.alarm' != NaN %}​

    {% if 'hm.alarm' != "NaN" %}​

    {% set alarm='hm.alarm'|default("") %}
    {% if alarm != "" %}
        <marquee behavior="scroll" direction="left" height="20" scrollamount="10" bgcolor="red">
        {{ basic.print('laufschrift_a',alarm,'text','','','black') }}
        </marquee>
    {% endif %}

...

Johann

[wvhn]

Moin Johann,

die Twig Template Engine baut serverseitig den statischen Inhalt der html-Seiten zusammen, bevor diese an den Browser ausgeliefert werden. Die Seite wird dann erst im Browser mit Leben gefüllt, also mit den Werten der items verknüpft. Man kann deshalb mit Twig keine dynamischen Variablen abfragen.

Du kannst aber basic.print nutzen, um ein Script auszuführen:

<div id="myPage-myID">
    <marquee id="myID" behavior="scroll" direction="left" height="20" scrollamount="10" bgcolor="red">
        {{ basic.print('laufschrift_a','hm.alarm','text','',' ','black') }}
    </marquee>
</div>
{{basic.print('','hm.alarm','script','VAR1==""?$("#myPage-myID").css("display", "none") : $("#myPage-myID").css("display", "unset")')}}​
​

Wenn Du dies auf mehreren Seiten nutzen willst, musst Du jeweils den aktuellen Seitennamen für "myPage" einsetzen.

Gruß
Wolfram

[Johann.S]

Hallo Wolfram,

Danke, funktioniert genau so wie ich das wollte!
Damit werden jetzt die HomeMatic Service- und Alarmmeldungen auf meiner Hauptseite angezeigt!

    <div id="myServiceID">
        <marquee id="ServiceID" behavior="scroll" direction="left" height="20" scrollamount="10" bgcolor="orange">
            {{ basic.print('laufschrift_a','hm.service','text','','','black') }}
        </marquee>
    </div>
    {{basic.print('','hm.service','script','VAR1==""?$("#myServiceID").css("display", "none") : $("#myServiceID").css("display", "unset")')}}​

    <div id="myAlarmID">
        <marquee id="AlarmID" behavior="scroll" direction="left" height="20" scrollamount="10" bgcolor="red">
            {{ basic.print('laufschrift_a','hm.alarm','text','','','black') }}
        </marquee>
    </div>
    {{basic.print('','hm.alarm','script','VAR1==""?$("#myAlarmID").css("display", "none") : $("#myAlarmID").css("display", "unset")')}}​

Gruß
Johann

[wvhn]

Moin Johann Johann.S ,

der Hack mit basic.print erschien mir doch etwas unhandlich, auch wenn er funktioniert. Es gibt für die Aufgabe noch eine etwas einfachere Lösung unter Einsatz des Widgets status.customstyle.

<div id="{{ uid(page, 'myServiceID') }}">
    <marquee behavior="scroll" direction="left" height="20" scrollamount="10" bgcolor="orange">
        {{ basic.print('laufschrift_a', 'hm.service', 'text', '', '','black') }}
    </marquee>
</div>
{{status.customstyle('myServiceID', 'hm.service','=', 'hide')}}​

Dazu muss die id des divs mit dem Seitennamen verknüpft werden (s. erste Zeile), was eh immer ratsam ist, damit keine gleichen ids über mehre Seiten hinweg auftreten (wichtig wegen des Multipage-Modus von jQuery mobile). Status customstyle macht diese Verknüpfung intern, weshalb dort die id ohne Seitennamen angegeben wird.
Im Widget status.customstyle führt das '=' bei den Vergleichswerten im dritten Parameter dazu, dass die Aktions-Bedingung erfüllt ist, wenn der item-Wert ein leerer String oder eine 0 ist.

Gruß
Wolfram

[Johann.S]

Hallo Wolfram,

funktioniert genauso wie der Hack, ist aber etwas verständlicher für mich!
Nur das mit den 3.Parameter hat etwas länger gedauert um es zu verstehen!
Bei Zahlen ist es mir klahr aber wie ist das bei den Strings?
Würde

,'="autsch"',

funktionieren?

Dank und Gruß
Johann

[Johann.S]

Hallo Wolfram,

habe es jetzt selbst getestet, weder

,'="autsch"',

noch

,'=autsch',

funktioniert!
Sind Stringsvergleiche überhaupt möglich?

Gruß
Johann

[stoepf]

,'=="autsch"',

wäre vermutlich richtig.

[wvhn]

Die Vergleichsoperatoren habe ich im Widget nur für den Vergleich von Zahlenwerten realisiert. Das "=" ist nur der Vollständigkeit halber drin und wird eigentlich nicht benötigt. Im Fall des gesuchten leeren Strings ist es aber sehr hilfreich.

Das Widget akzeptiert in diesem Parameter eine Werteliste und zusätzlich die Angabe von Bedingungen. Mit der Angabe ['<=4‘, 6, '>9'] führt das Widget die angegebene Aktion nur dann nicht aus, wenn der item-Wert 5, 7, 8 oder 9 ist. In der Werteliste können auch Texte stehen. 'autsch' kannst Du ohne Gleichheitszeichen verwenden.

Gruß
Wolfram

[AndreK]

Hallo hier noch eine Idee dazu, eventuell zur Verwendung in der index.html unterhalb des Wetters :

<div id="{{ uid(page, 'Warnings') }}" style="">
  <h2>Warnings</h2>
    <marquee direction="left" behavior="scroll" scrollamount="5" scrolldelay="1" style="color: #FF081A;font-size:30px;font-family:Helvetica;" >
      actual disk usage is : {{basic.print('',' env.system.diskusagepercent' ,'%01,1f %','','','','','')}}
    </marquee>
    <hr>
  </div>
{{status.customstyle('Warnings', 'env.system.diskusagepercent','<70', 'hide')}}​

Spoiler_marqee.gif

Viele Grüße

Andre

[Johann.S]

@Wolfram
Habe jetzt beide Varianten getestet '=="autsch"', und 'autsch' funktioniert aber leider keine von beiden!
Es war aber nur eine theoretische Frage!

@AndreK
Es steht bei mir gleich nach dem updatecheck in der index.html.

{% block content %}

    {{ lib.updatecheck() }}

    <div id={{ uid(page, 'myServiceID') }}>
        <marquee id="ServiceID" behavior="scroll" direction="left" height="20" scrollamount="10" bgcolor="orange">
            {{ basic.print('laufschrift_a','hm.service','text','','','black') }}
        </marquee>
    </div>
    {{status.customstyle('myServiceID', 'hm.service','=', 'hide')}}​

    <div id={{ uid(page, 'myAlarmID') }}>
        <marquee id="AlarmID" behavior="scroll" direction="left" height="20" scrollamount="10" bgcolor="red">
            {{ basic.print('laufschrift_a','hm.alarm','text','','','black') }}
        </marquee>
    </div>
    {{status.customstyle('myAlarmID', 'hm.alarm','=', 'hide')}}​

Gruß
Johann

[Sisamiwe]

AndreK Danke für den Link habe ich gleich eingebaut mit:

    <div id="{{ uid(page, 'Warnings') }}" class="warnings-container">
        <h2>Warnings</h2>
        <div id="disk-usage-warning" class="warning-message" role="alert" aria-live="polite">
            <span id="disk-usage-text">
                Actual disk usage is: <span id="disk-usage-value">{{basic.print('',' env.system.diskusagepercent' ,'%01,1f %','','','','','')}}</span>
            </span>
        </div>
        <hr>
    </div>
    {{status.customstyle('Warnings', 'env.system.diskusagepercent','<70', 'hide')}}

und

<style>
.warnings-container {}

.warning-message {
    color: #FF081A; /* Red color */
    font-size: 1.2em; /* Use relative units */
    font-family: Helvetica, sans-serif; /* Fallback font */
    overflow: hidden; /* Hide text that overflows */
    white-space: nowrap; /* Prevent text from wrapping */
}

/* Keyframes for smooth scrolling */
@keyframes scroll {
    0% { transform: translateX(100%); } /* Start off-screen to the right */
    100% { transform: translateX(-100%); } /* End off-screen to the left */
}

/* Apply animation only if the text overflows */
.warning-message.scrolling {
    animation: scroll 15s linear infinite; /* Adjust duration as needed */
}
</style>

[wvhn]

Johann.S,

ich hab mir den Code nochmal angesehen. Aktuell verträgt das Widget nur items vom Typ bool und num. Und als Schmankerl den leeren string.

Das Widget status.collapse verarbeitet hingegen auch strings - allerdings keine leeren. Die Doku dazu muss ich mal überarbeiten. Leider ist aus historischen Gründen das Handling der IDs dort anders.

<div data-bind="{{ uid(page, 'myID‘) }}">
   … hier der zu versteckende Inhalt …
</div>
{{ status.collapse(uid(page,'myID'), 'myItem',  'autsch', 'hide') }}

Gruß
Wolfram

[Johann.S]

ebenfalls getestet!
Für mich ergibt sich daraus, num oder Leerstring mit status.customstyle und
Textvergleich mit status.collapse!
Damit sind meiner Meinung nach alle Varianten abgedeckt!

Cool

Gruß
Johann

[wvhn]

Danke fürs Testen.
Da status.customstyle ja breit zum Styling von Elementen eingesetzt werden kann, habe ich den Textvergleich nachgerüstet. Allerdings nur als direkte Treffer und ohne Vergleichsoperatoren, die bei Texten IMHO nicht sinnvoll sind (z.B. ist "fünfhundert" als Text größer als "achthundert").

Die Änderung kommt demnächst in den develop branch.

Gruß
Wolfram