Nur Text | Text mit Bildern

FHEM Forum

FHEM => Frontends => fronthem / smartVISU => Thema gestartet von: dev0 am 25 April 2015, 11:49:54

Titel: smartVISU javascript delegate Problem
Beitrag von: dev0 am 25 April 2015, 11:49:54
Folgende Aufgabe versuche ich zu lösen:

Ein Widget liefert in einer Tabelle verschiedene float Werte. Diese Werte möchte ich
je nach Über- oder Unterschreitung eines Schwellwerts entsprechend einfärben.

Ich scheitere aber schon daran einen bestimmten Wert mit $(document).delegate zu selektieren. Folgender Code lässt ALLE floats verschwinden und rot erscheinen. Meine Absicht war aber nur den Temp-Ist Wert zu selektieren und zu färben.

Ihr merkt es sicher schon: Es sind meine ersten js Versuche...

/Uli

js:
Code Auswählen

$(document).delegate('div.xxx > span[data-widget="basic.float"]', {
'update' : function (event, response) {
$('#' + this.id).attr('style',"color: red;");
console.log($(this));
console.log(response);
}
});


console.log():
Code Auswählen

Object[span#category_clima-RTR_LISTST_RTRist]
visu.js (Zeile 64)
[22.2]
visu.js (Zeile 65)
Object[span#category_clima-RTR_LIST2ST_RTRhumidity]
visu.js (Zeile 64)
[45.1]
Object[span#category_clima-RTR_LIST2ST_RTRvalve]
visu.js (Zeile 64)
[0]
visu.js (Zeile 65)
Object[span#category_clima-RTR_LISTST_RTRset]
visu.js (Zeile 64)
[14.5]



widget:
Code Auswählen

{% macro rtr_list2(id, gads, humidity, valve) %}
{% import "basic.html" as basic %}
{% import "widget_my_icon.html" as my_icon %}

{% set desiredTemp = '_Clima.desired-temp' %}
{% set measuredTemp = '_Clima.measured-temp' %}
{% set controlMode = '_Clima.controlMode' %}
{% set valve = '_Clima.valve' %}
{% set battery = '.batteryx10' %}
{% set humidity = '.humidity' %}

<span class="my">
<span class="rtr-list">
<table>

<tr>
<th>Raum</th>
<th>Temp</th><th>&nbsp;</th>
{% if humidity %} <th>rF</th> {% endif %}
{% if valve %} <th>Vent</th> {% endif %}
<th class="settings">Einstellungen</th>
</tr>

<tr><td colspan="0" align="center"><hr></td></tr>

{% for gad in gads %}

<tr>
<td>{{gad[1]}}</td>
<td><div class="xxx">{{ basic.float(id~gad[0]~'ist', gad[0]~measuredTemp, '°', '') }}</div></td>
{% if humidity %}
<td>{{ basic.float(id~gad[0]~'humidity', gad[0]~humidity, '%', '') }}</td> {% endif %}
{% if valve %}
<td>{{ basic.float(id~gad[0]~'valve', gad[0]~valve, '%', '') }}</td><td>&nbsp;</td> {% endif %}
<td>
<div id="{{ uid(page, id~gad[0]) }}" data-widget="device.rtr" data-step="{{ step|default(0.5) }}">
<div class="list">
<a data-role="button" data-icon="minus" data-inline="true" data-iconpos="notext" class="ui-micro"></a>
{{ basic.float(id~gad[0]~'set', gad[0]~desiredTemp, '°' ) }}
<a data-role="button" data-icon="plus" data-inline="true" data-iconpos="notext" class="ui-micro"></a>
<a><img class="space" src="pages/base/pics/trans.png" /></a>
{{ basic.multistate(id~gad[0]~'controlMode', gad[0]~controlMode, ['manual','auto','party'], [icon1~'time_manual_mode.png', icon0~'time_automatic.png', icon1~'time_calendar.png'], 'micro') }}
{{ basic.multistate(id~gad[0]~'lock', gad[0]~controlMode, ['xxx','yyy'], [icon0~'secur_open.png', icon1~'secur_locked.png'], 'micro') }}
{% if battery %} {{ my_icon.battery2(id~gad[0]~'.battery', '', gad[0]~battery, 21, 32) }} {% endif %}
</div>
</div>
</td>
</tr>

<tr><td colspan="0" align="center"><hr></td></tr>

{% endfor %}

</table>
</span>
<span>
{% endmacro %}




entsprechnder html code:
Code Auswählen

<span class="my">
<span class="rtr-list">
<table>

<tr>
<td>Studio</td>

<td>
<div class="xxx">
<span id="category_clima-RTR_LIST2ST_RTRist" data-widget="basic.float" data-item="ST_RTR_Clima.measured-temp" data-unit="°">-.- °</span>
</div>
</td>

<td>
<span id="category_clima-RTR_LIST2ST_RTRhumidity" data-widget="basic.float" data-item="ST_RTR.humidity" data-unit="%">-.- %</span>
</td>

<td>
<span id="category_clima-RTR_LIST2ST_RTRvalve" data-widget="basic.float" data-item="ST_RTR_Clima.valve" data-unit="%">-.- %</span>
</td>

<td>
<div id="category_clima-RTR_LIST2ST_RTR" data-widget="device.rtr" data-step="0.5">
<div class="list">

<a data-role="button" data-icon="minus" data-inline="true" data-iconpos="notext" class="ui-micro">
</a>

<span id="category_clima-RTR_LIST2ST_RTRset" data-widget="basic.float" data-item="ST_RTR_Clima.desired-temp" data-unit="°">-.- °</span>

<a data-role="button" data-icon="plus" data-inline="true" data-iconpos="notext" class="ui-micro">
</a>

<a><img class="space" src="pages/base/pics/trans.png" />
</a>

    <a id="category_clima-RTR_LIST2ST_RTRcontrolMode" data-widget="basic.multistate" data-item="ST_RTR_Clima.controlMode" data-vals="manual, auto, party"  data-img="icons/or/time_manual_mode.png, icons/ws/time_automatic.png, icons/or/time_calendar.png" index-mem="0" class="ui-micro" data-role="button" data-inline="true" data-iconpos="center">
        <img class="icon" src="icons/or/time_manual_mode.png"/>
        </a>

    <a id="category_clima-RTR_LIST2ST_RTRlock" data-widget="basic.multistate" data-item="ST_RTR_Clima.controlMode" data-vals="xxx, yyy"  data-img="icons/ws/secur_open.png, icons/or/secur_locked.png" index-mem="0" class="ui-micro" data-role="button" data-inline="true" data-iconpos="center">
        <img class="icon" src="icons/ws/secur_open.png"/>
        </a>

<svg id="category_clima-RTR_LIST2ST_RTR_battery" data-widget="my_icon.battery2" data-item="ST_RTR.batteryx10, " data-min="21" data-max="32" class="icon icon0" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="15 10 70 70">
<g>
<rect x="44" y="21" width="12" height="3"/>
<rect rx="3" x="35" y="25" width="30" height="45" fill="none"/>
</g>
</svg>

</div>
</div>
</td>
</tr>
...



Bilder des Widgets im Anhang.
Titel: Antw:smartVISU javascript delegate Problem
Beitrag von: vbs am 25 April 2015, 12:34:20
Zitat von: dev0 am 25 April 2015, 11:49:54
Ich scheitere aber schon daran einen bestimmten Wert mit $(document).delegate zu selektieren. Folgender Code lässt ALLE floats verschwinden und rot erscheinen. Meine Absicht war aber nur den Temp-Ist Wert zu selektieren und zu färben.


js:
Code Auswählen

$(document).delegate('div.xxx > span[data-widget="basic.float"]', {
'update' : function (event, response) {
$('#' + this.id).attr('style',"color: red;");
console.log($(this));
console.log(response);
}
});

Bin jetzt auch kein JS-Experte, aber mit deinem Selector "div.xxx > span[data-widget="basic.float"]" selektierst du doch auch erstmal ALLE basic.floats, oder? Ich sehe jetzt da erstmal keine Stelle im Code, wo du die Auswahl auf "Temp-Ist" beschränkst. Und sobald du die Seite aufrufst wird mW 'update' für ALLE GADs aufgerufen.
Titel: Antw:smartVISU javascript delegate Problem
Beitrag von: dev0 am 25 April 2015, 12:43:20
Der IST-Temperaturwert wird von einem <div class="xxx"> </div> eingefasst, die anderen Werte nicht. Deshalb sollte er mMn als als einzigster Wert vom div.xxx selektiert werden. Ist das mein Gedankenfehler?
Titel: Antw:smartVISU javascript delegate Problem
Beitrag von: vbs am 25 April 2015, 12:50:55
Achso, nee nee, sorry, hast du sicherlich Recht. Ich habe gedacht, dass dein div-xxx der übergeordnete Container ist.
Nur Text | Text mit Bildern