Ich habe mich mal an einem Widget versucht, dabei ist was rausgekommen 
Zwei Fragen bleiben:
Gibt es eine zentrale Stelle an der Widgets gesammelt werden oder ziehen die irgendwann automatisch in neue Releases ein?
Ist zum positionieren der Buttons zwangsweise eine separate CSS notwendig? Ich hab von HTML und js nicht so den Plan. Nen Schönheitspreis gewinnt das dadurch leider nicht.
widget_roomba.html
visu.css
README.md
Zwei Fragen bleiben:
Gibt es eine zentrale Stelle an der Widgets gesammelt werden oder ziehen die irgendwann automatisch in neue Releases ein?
Ist zum positionieren der Buttons zwangsweise eine separate CSS notwendig? Ich hab von HTML und js nicht so den Plan. Nen Schönheitspreis gewinnt das dadurch leider nicht.
widget_roomba.html
Code:
/**
* Roomba Control
*
* @param unique id for this widget
* @param the gad/item for clean
* @param the gad/item for stop
* @param the gad/item for dock
* @param the gad/item for forward
* @param the gad/item for backward
* @param the gad/item for left rotation
* @param the gad/item for right rotation
*
* @author Mirko Hirsch
*/
{% macro roomba(id, clean, stop, dock, forward, backward, left, right) %}
{% import "basic.html" as basic %}
{% set uid = uid(page, id) %}
<div id="{{ uid }}" class="roomba">
<div class="roomba_control">
{% if clean %} {{ basic.button(id~'clean', clean, 'Start', icon0~'scene_robo_vac_cleaner.png', '1', 'midi') }} {% endif %}
{% if dock %} {{ basic.button(id~'dock', dock, 'Dock', icon0~'control_building_empty.png', '1', 'midi')}} {% endif %}
</div>
<div class="drive_first">
{% if forward %} {{ basic.button(id~'forward', forward, '', 'arrow-u', 1) }} {% endif %}
</div>
<div class="drive_second">
{% if left %} {{ basic.button(id~'left', left, '', 'back', 1) }} {% endif %}
{% if stop %} {{ basic.button(id~'stop', stop, '', icon0~'message_stop.png', 1) }} {% endif %}
{% if right %} {{ basic.button(id~'right', right, '', 'forward', 1) }} {% endif %}
</div>
<div class="drive_third">
{% if backward %} {{ basic.button(id~'back', backward, '', 'arrow-d', 1) }} {% endif %}
</div>
</div>
{% endmacro %}
Code:
/**
* -----------------------------------------------------------------------------
* @package smartVISU
* @author Martin Gleiß
* @copyright 2012
* @license GPL [http://www.gnu.de]
* -----------------------------------------------------------------------------
*/
@CHARSET "UTF-8";
.roomba .roomba_control {
position: relative;
margin-left: -50%;
}
.roomba .drive_first {
position: relative;
margin-left: auto;
margin-right: auto;
top: 50%;
left: 0;
right: 0;
}
.roomba .drive_second {
position: relative;
margin-left: 0px;
margin-right: auto;
top: 0px;
left: 0;
right: 0;
}
.roomba .drive_third {
position: relative;
margin-left: auto;
margin-right: auto;
top: 0px;
left: 0;
right: 0;
}
README.md
Code:
# Roomba widget
# Supported Commands
<pre>
macro roomba(id, gad_clean, gad_stop, gad_dock, gad_forward, gad_backward, gad_left, gad_right)
</pre>
# Examples
~~~
<div class="block">
<div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
<div data-role="collapsible" data-collapsed="false">
<h3>Roomba</h3>
{% import "widget_roomba.html" as roomba %}
{{ roomba.roomba('roomba_1','roomba.command.clean','roomba.raw.stop','roomba.command.dock','roomba.forward','roomba.backward','roomba.left','roomba.right') }}
</div>
</div>
</div>
~~~
Kommentar