[Codebeispiel] Radiobuttons und Countdown-Anzeige (Icon/Text)

[Tom Bombadil]

Hallo,

bin gerade etwas am 'Ausmisten' - dabei sind mir einige Sachen über den Weg gelaufen, die ich in der Vergangenheit hier im Forum angefragt hatte, mir dann aber selbst 'zusammengefriemelt' habe. Wollte sie eigentlich schon im vergangenen Herbst hier einstellen, für den Fall, dass sie noch jemand als schlechtes Beispiel brauchen kann - ist dann aber irgendwie untergegangen.

Warnung vorweg: jQuery und ich haben beschlossen, dass wir keine Freunde sind, und es auch nie werden. Wer Verbesserungen findet, kann sie gern hier reinkommentieren, vielleicht kann man da ja sogar was zur allgemeingültigen Verwendung draus entwickeln - aber bitte nicht hauen. ;-)

Beispiel 1: Radiobuttons für ein Item aus smarthome.py (benutzt für Dauer einer Helios Stoßlüftung, 45' = 2700s)
4.png

/**
* Displays a group of radio buttons
*
* @param id        a unique id for this widget
* @param gad       the gad/item
* @param labels    the text labels to put on the buttons
* @param vals      the real item values the button / label represents
* It is important that the item is initialized properly with one of the vals during startup (sh.py: e.g. value = 2700)
* sample call when embedded in an html file:
* _self.radiogroup(id~'_boost_duration', 'ventilation.booster.duration', ['15\'','30\'','45\'','1h','90\'','2h'], [900,1800,2700,3600,5400,7200]) }}
*/
{% macro radiogroup(id, gad, labels, vals) %} /** ---------- Radio button macro ---------------- **/
 {% set rid=uid(page,id) %}
 <span data-role="controlgroup" data-type="horizontal">
  {% for nr in 0..labels|length-1 %}
   <span id="{{rid}}-button-{{nr}}" btn-id="{{rid}}_radio_{{nr}}" data-widget="helios.radiobutton" data-item="{{gad}}" data-val="{{vals[nr]}}">
    <input type='radio' id='{{rid}}_radio_{{nr}}' name='{{rid}}_radio' value="{{labels[nr]}}" onclick="set_helios_value_{{id}}({{vals[nr]}})" data-mini="true">
    /** alt: <input data-mini="true" type='radio' id='{{rid}}_radio_{{nr}}' name='{{rid}}_radio' value="{{labels[nr]}}" onclick="io.write({{gad}}, {{vals[nr]}})"> **/
    <label for='{{rid}}_radio_{{nr}}'>{{labels[nr]}}</label>
   </span>
  {% endfor %}
 </span>
 <script type="text/javascript">
  function set_helios_value_{{id}}(newval) {
   io.write('{{gad}}', newval);
   // testing: alert('{{gad}}' + ' -> ' + newval);
  }
  $(document).delegate('span[data-widget="helios.radiobutton"]', {
   'update': function(event, response) {
    if (response == $(this).attr('data-val')) {
     var targetbtn = $(this).attr('btn-id');
     $("input[name='{{rid}}_radio']:checked").removeProp("checked");
     $('#' + targetbtn).prop("checked",true);
     $('#' + targetbtn).click();
    }
   },
  });
 </script>
{% endmacro %}

Beispiel 2: Icon und Restzeitanzeige für einen Countdown (z.B. Treppenlicht o.ä., benutzt für Anzeige der Restzeit einer Stoßlüftung sowie Anzeige wenn Alarm != 0) - verschwindet automatisch, sobald Target-Item wieder auf 0 geht
1.png

/**
* Displays an item value if not 0 or empty
* Useful for device alarm codes, count downs, timers (and probably more ...)
* Optionally displays a specific string in case item is 0 or empty
*
* @param id        a unique id for this widget
* @param gad       the gad/item
* @param unit      optional unit, like '\'' for remaining ' (minutes) in a count down
* @param zerostr   optional string if item is 0 or empty (like ---). by default a white space  
*/
{% macro value_notzero(id, gad, unit, zerostr) %}
 <span id="{{ uid(page, id) }}" data-widget="helios.value_notzero" data-item="{{ gad }}" data-unit="{{ unit }}" data-zero-val="{{ zerostr|default('&#160;') }}">[text]</span>
 <script type="text/javascript">
  $(document).delegate('span[data-widget="helios.value_notzero"]', {
   'update': function(event, response) {
    if (response !=0 && response !="") {
     $('#' + this.id).html(response + $(this).attr('data-unit'));
    } else {
     $('#' + this.id).html($(this).attr('data-zero-val'));
    }
   },
  });
 </script>
{% endmacro %}


/**
* Displays an icon if an item is not 0 or empty
* Useful for device alarm codes, count downs, timers (and probably more ...)
* Optionally displays a specific string as hint
* Optionally links to a URL or Popup window on click
*
* @param id        a unique id for this widget
* @param gad       the gad/item
* @param img       the icon
* @param hint      optional string for hint text
* @param link      optional link on click (use e.g. #mypopupname or http://www.mywebsite.com?args)
*/
{% macro symbol_notzero(id, gad, img, hint, link) %}
 <span id="{{ uid(page, id) }}" data-widget="helios.symbol_notzero" data-item="{{ gad }}">[symbol]</span>
 <script type="text/javascript">
  $(document).delegate('span[data-widget="helios.symbol_notzero"]', {
   'update': function(event, response) {
    head = ''; tail = '';
    {% if link %} head = '<a class="ui-link" data-rel="popup" href="{{ link }}">'; tail = '</a>'; {% endif %}
    img = '<img class="icon" src="{{ img }}" title="{{ hint }}">';
    invis_img = '<img class="icon" src="{{ img }}" style="opacity:0">';
    if (response !=0 && response !="") {
     $('#' + this.id).html(head + img + tail);
    } else {
     $('#' + this.id).html(invis_img);
    }  
   },
  });
 </script>
{% endmacro %}

Ich hoffe, jemand kann's brauchen, bis bald,

/tom