basic2.html

/**
* ------Ergänzung von anderen Autoren --------------------------------------------
*/

/**
* LED - shows a LED with a color depending on the value of the gad
* 
* Parameters:
* id:           unique id for this widget
* gad:          a gad/item
* red_value:    the value when the LED shall be red (optional)
* green_value:  the value when the LED shall be green (optional)
* blue_value:   the value when the LED shall be blue (optional)
* yellow_value: the value when the LED shall be yellow (optional)
*
*  The script should be moved to the visu.js of the page
*
*  These styles must be defined in the visu.css of the page
*/

{% macro led(id, gad, red_value, green_value, blue_value, yellow_value) %}
	<div class="LED" 
       id="{{ uid(page, id) }}" 
       data-widget="widget_led.led" 
       data-item="{{ gad }}" 
       data-red-value="{{ red_value }}"
       data-green-value="{{ green_value }}" 
       data-blue-value="{{ blue_value }}"
       data-yellow-value="{{ yellow_value }}"
      >
  </div>

<script type="text/javascript">
 
 $(document).delegate('[data-widget="widget_led.led"]', {
	'update': function (event, response) {
    var led = $('#' + this.id);
    if(response == $(this).attr('data-green-value')) {
      led.removeClass();
      led.addClass("LED LED-green");
    }
    else if(response == $(this).attr('data-red-value')) {
      led.removeClass();
      led.addClass("LED LED-red");
    }
    else if(response == $(this).attr('data-blue-value')) {
      led.removeClass();
      led.addClass("LED LED-blue");
    }
    else if(response == $(this).attr('data-yellow-value')) {
      led.removeClass();
      led.addClass("LED LED-yellow");
    }
    else {
      led.removeClass();
      led.addClass("LED");
    }
		
	}
  
});
</script>
  
{% endmacro %}


/**
* ------Ergänzung von Bernd Gewehr--------------------------------------------
*/

/**
* make div objects visible or hidden by a gad
* 
*/
{% macro pager(id, gad, initial) %}
	<div id="{{ uid(page, id) }}" data-widget="basic.pager" data-item="{{ gad }}" data-val="{{ initial }}" style="visibility:hidden"></div>
{% endmacro %}
	

/**
* execute a http command via a button with ajax
* 
*/
{% macro httpcmd(id, gad, pic, url, type) %}
	<a id="{{ uid(page, id) }}" data-widget="basic.httpcmd" data-item="{{gad}}" data-val="{{ url|default('') }}" class="ui-{{ type|default('mini') }}" data-role="button" data-inline="true" 
		{% if not pic %}
			data-iconpos="nopic">
		{% elseif pic|slice(-4, 4) != '.png' %}
			data-icon="{{ pic }}" data-iconpos="notext">
		{% else %}
			data-iconpos="center"><img class="icon" src="{{ pic }}">
		{% endif %}	
	</a>

{% endmacro %} 
	
	
/**
* display a utf-8-encoded text with some fronthem specific corrections äöü€
*
* @param unique id for this widget
* @param a gad/item
*/
{% macro textrpl(id, gad) %}
	<span id="{{ uid(page, id) }}" data-widget="basic.textrpl" data-item="{{ gad }}">---</span>
{% endmacro %}
	
/**
* Displays a time-Counter when a gad has changed
*
* @param unique id for this widget
* @param a gad/item
*/
{% macro timecounter(id, gad, mode) %}

	<script type="text/javascript">
		function ZeitAnzeigen (objectID, mode, value) {
			var absSekunden = value
			if (absSekunden == 'NaN') {absSekunden = 1};
			var relSekunden = absSekunden % 60;			
			var absMinuten = Math.abs(Math.round((absSekunden - 30) / 60));
			var anzSekunden = "" + ((relSekunden > 9) ? relSekunden : "0" + relSekunden);
			var anzMinuten = "" + ((absMinuten > 9) ? absMinuten : "0" + absMinuten);
			return(anzMinuten + ":" + anzSekunden);
		};
	</script>
	<span id="{{ uid(page, id) }}" data-widget="basic.timecounter" data-item="{{ gad }}" data="{{ mode }}">-:-</span>
	
{% endmacro %}
	
	
/**
* Displays a textinput
*
* @param unique id for this widget
* @param a gad/item
*/
{% macro textinput(id, gad, label) %}

	<label>{{ label }}</label>
	<input type="text" id="{{ uid(page, id) }}" data-widget="basic.textinput" data-item="{{ gad }}" />
	
{% endmacro %}

/**
* Displays a dropdown
*
* @param unique id for this widget
* @param a gad/item
* @param txt0 selection1 [optional]
* @param txt1 selection1 [optional]
* @param txt2 selection2 [optional]
* @param txt3 selection3 [optional]
* @param txt4 selection4 [optional]
* @param txt5 selection5 [optional]
* @param txt6 selection6 [optional]
* @param txt7 selection7 [optional]
* @param txt8 selection8 [optional]
* @param txt9 selection9 [optional]
*/
{% macro selectmenu(id, gad, label, txt0, txt1, txt2, txt3, txt4, txt5, txt6, txt7, txt8, txt9) %}

<div class="ui-field-contain">
	<label for="{{ uid(page, id) }}" class="select">{{ label }}</label>
	<select name ="{{ uid(page, id) }}" id="{{ uid(page, id) }}" data-widget="basic.selectmenu" data-item="{{ gad }}" data-mini="true" data-native-menu="false"  />
		{% if txt0 != '' %}	<option value="{{ txt0 }}">{{ txt0 }}</option>{% endif %}
		{% if txt1 != '' %}	<option value="{{ txt1 }}">{{ txt1 }}</option>{% endif %}
		{% if txt2 != '' %}	<option value="{{ txt2 }}">{{ txt2 }}</option>{% endif %}
		{% if txt3 != '' %}	<option value="{{ txt3 }}">{{ txt3 }}</option>{% endif %}
		{% if txt4 != '' %}	<option value="{{ txt4 }}">{{ txt4 }}</option>{% endif %}
		{% if txt5 != '' %}	<option value="{{ txt5 }}">{{ txt5 }}</option>{% endif %}
		{% if txt6 != '' %}	<option value="{{ txt6 }}">{{ txt6 }}</option>{% endif %}
		{% if txt7 != '' %}	<option value="{{ txt7 }}">{{ txt7 }}</option>{% endif %}
		{% if txt8 != '' %}	<option value="{{ txt8 }}">{{ txt8 }}</option>{% endif %}
		{% if txt9 != '' %}	<option value="{{ txt9 }}">{{ txt9 }}</option>{% endif %}
	</select>
</div>
	
{% endmacro %}

/**
* display a picture with url from a gad
*
* @param unique id for this widget
* @param a gad/item
* @param url prefix  (optional)
* @param url matching RegExp  (optional, for selecting only parts of the given URL)
*/
{% macro img(id, gad_image, gad_prefix, gad_regex) %}

	<img id="{{ uid(page, id) }}" data-widget="basic.img" data-item="{{ gad_image }}" src="{{ gad_prefix }}" alt="{{ gad_regex }}" style="visibility:hidden; width:1px">

{% endmacro %}


/**
* display a button as a symbol
*
* @param unique id for this widget
* @param a gad/item for short press
* @param a gad/item for long press
* @param picture
* @param Value if pressed, default = 1
*/
{% macro lbutton(id, gad, pic, val) %} 
   /** <span class="switch">*/
				<a id="{{ uid(page, id) }}" data-widget="basic.lbutton" data-item="{{ gad }}" data-val="{{ val|default('1') }}" class="ui-{{ type|default('mini') }}"
					{% if not pic %}
						data-iconpos="nopic">
					{% elseif pic|slice(-4, 4) != '.png' %}
						data-icon="{{ pic }}" data-iconpos="notext">
					{% else %}
						data-iconpos="center"><img class="icon" src="{{ pic }}">
					{% endif %}	
				</a>
    /**</span> */
{% endmacro %}