Device-Widgets

device.blind device.codepad device.dimmer device.rtr device.rtrslider device.shutter device.smallshut device.roofwindow device.uzsuicon device.uzsugraph device.uzsutable device.window

device.smallshut

Displays a simple shutter control assembly in table format

Parameters

{{ device.smallshut(id, txt, item_move, item_stop, item_position, item_saved, type) }}

id

unique id for this widget (optional)

txt

name of the shutter

item_move

a gad/item for long move

item_stop

a gad/item for stopping movement

item_position

a gad/item for the actual position

item_saved

a gad/item for the saved position (optional)

type

valid types: 'micro', 'mini', 'midi' (optional, default: micro)

The widget creates lines with shutter control elements (up, stop, down, saved position) and a dynamic status icon. Tables can be built by grouping these lines.

The lines take 85% of a blocks width. So e.g. an uzsuicon can be placed inline with the other elements.
To adapt the widget to the needs of your layout, the styles can be overridden in your custom visu.css file.

Styles are:
- .smallshut for the widget properties
- .smallshut .ui-shut-btn for the buttons
- .smallshut .ui-shut-pic for the dynamic icon (with a .icon section to control the icons position)

Example

Hint: click into the shutter to see the status icon changing Hint: to improve readability in the code area, "b.xxx" represents "bath.blind.xxx"

<div class="ui-bar-c ui-li-divider ui-corner-top">Shutter Table</div>

			<div class="ui-fixed ui-body-a ui-corner-bottom">

				{{ device.smallshut('SmS1', 'Wohnzimmer', 'b.move', 'b.stop', 'b.pos', 'b.adjust') }}

				<!-- block space till end of line, remove if uzsu wanted -->

				<span class="ui-shut-btn" style="height: 44px;"> </span>

				<div class="smallshut_wrapper">

				{{ device.smallshut('SmS2', 'Bad', 'bath.blind.move', 'bath.blind.stop', 'bath.blind.pos', '') }}

				{{ device.uzsuicon('uzsu1', 'uzsuitem') }}

				</div>

			</div>

Shutter Table