Skip to content

Commit

Permalink
Introduction of the new plugin system for widgets. New dimmer and sli…
Browse files Browse the repository at this point in the history 
…der widget
  • Loading branch information
@knowthelist
knowthelist committed Mar 21, 2015
1 parent 859cf49 commit 2a2fc4d
Show file tree
Hide file tree
Showing 17 changed files with 1,164 additions and 638 deletions.
91 changes: 64 additions & 27 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ fhem-tablet-ui
========

Just another dashboard for FHEM http://fhem.de/fhem.html
But with a clear intention: Keep it short and simple!


![](http://knowthelist.github.io/fhem-tablet-ui/fhem-tablet-ui-example.png)

Expand Down Expand Up @@ -29,36 +31,36 @@ Change the wiget container according your rooms
<header>KUECHE</header>
<div class="container">
<div class="left">
<div type="thermostat" device='KuecheHeizung_Clima' class="cell"></div>
<div type="thermostat" device='KuecheHeizung2_Clima' class="cell"></div>
<div data-type="thermostat" data-device='KuecheHeizung_Clima' class="cell"></div>
<div data-type="thermostat" data-device='KuecheHeizung2_Clima' class="cell"></div>
</div>
<div class="right">
<div type="switch" device="HerdLicht_Sw" class="cell"></div>
<div type="label" class="cell">HerdLicht</div>
<div type="contact" device="KuechenFenster" class="cell"></div>
<div data-type="switch" data-device="HerdLicht_Sw" class="cell"></div>
<div data-type="label" class="cell">HerdLicht</div>
<div data-type="contact" data-device="KuechenFenster" class="cell"></div>
</div>
</div>
</li>
```
Change the widgets you have and want to see on the dashboard
```html
<div type="thermostat" device='WohnzimmerHeizung_Clima' class="cell"></div>
<div data-type="thermostat" data-device='WohnzimmerHeizung_Clima' class="cell"></div>
```

All widgets have individual parameter settings. Set following attributes according your needs.

####All widgets
- **type** : widget type
- **device** : FHEM device name (call FHEM's 'list' command to get names)
- **class** : css classes for look and formatting of the widget
- **data-type** : widget type
- **data-device** : FHEM device name (call FHEM's 'list' command to get names)
- **class** : css classes for look and formatting of the widget

####Switch widgets
- **data-get** : name of the reading to get from FHEM (default 'STATE')
- **data-get-on** : value for ON status to get. (default 'on')
- **data-get-off** : value for OFF status to get. (default 'off')
- **data-set-on** : value for ON status to set. (default: value of data-get-on)
- **data-set-off** : value for OFF status to set. (default: value of data-get-off)
- **data-icon** : name of the font-awesome icon.
- **data-icon** : name of the font-awesome icon. (default: fa-lightbulb-o)

####Contact widgets
- **data-get** : name of the reading to get from FHEM (default 'STATE')
Expand All @@ -68,9 +70,12 @@ All widgets have individual parameter settings. Set following attributes accordi

####Label widgets
- **data-get** : name of the reading to get from FHEM
- **data-fix** : keeping a specified number of decimals. (default '1')
- **data-fix** : keeping a specified number of decimals. (default '-1' -> non-numeric)
- **data-icon** : name of the font-awesome icon.
- **data-part** : split position of the space separated value to show.
- **data-colors** : a array of color values to affect the colour of the label according to the limit value
- **data-limits** : a array of numeric values to affect the colour of the label
- **data-unit** : add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"

####Push widgets
- **data-set** : command to send to FHEM (set \<device\> \<command\>)
Expand All @@ -92,7 +97,23 @@ All widgets have individual parameter settings. Set following attributes accordi
- **data-get** : name of the reading to get from FHEM (default 'STATE')
- **data-set** : command to send to FHEM (set \<device\> \<command\> \<value\>) (default '')
4 states are valid: 1,2,3 or 4 (1=home,2=night,3=away,4=holiday)


####Slider widgets (currently vertical only)
- **data-get** : name of the reading to get from FHEM (default 'STATE')
- **data-set** : command to send to FHEM (set \<device\> \<command\> \<value\>) (default '')
- **data-min** : minimal value to set (default 0)
- **data-max** : maximal value to set (default 100)

####Dimmer widgets
- **data-get** : name of the reading to get from FHEM (default 'STATE')
- **data-get-on** : value for ON status to get. (default 'on')
- **data-get-off** : value for OFF status to get. (default 'off')
- **data-set-off** : value for OFF status to set. (default: value of data-get-off)
- **data-set** : command to send to FHEM (set \<device\> \<command\> \<value\>) (default '')
- **data-icon** : name of the font-awesome icon. (default: fa-lightbulb-o)

data-get-on and data-get-off accept RegEx values. e.g. data-get-on="[0-9]{1,3}|on" means set switch on if STATE is a numeric value or 'on'.

Select one of over 500 icons from http://fortawesome.github.io/Font-Awesome/icons. Just enter the icon name (with suffix "fa-"), all icons are available. e.g. data-icon="fa-volume-up"

To disable longpoll, set an other value then 1
Expand All @@ -110,23 +131,25 @@ Currently there are 7 types of widgets.
- **push** : e.g. up / down
- **volume** : dial to set a single value (e.g. 0-60)
- **homestatus** : selector for 4 states (1=home,2=night,3=away,4=holiday)
- **dimmer** : toogle button with a setter for on value
- **slider** : vertical slider to select between min/max value

By default the ui gets/sets the fhem parameter 'STATE' (not 'state').

####Thermostat
Configure as device='...' that item which delivers temp and desired-temp as reading.
Configure as data-device='...' that item which delivers temp and desired-temp as reading.

Default parameters are:
```
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
```
Therefor for HomaMatic HM-CC-RT-DN this is sufficient.
```html
<div type="thermostat" device='KH_Clima' class="cell"></div>
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
```
The long format looks like this:
```html
<div type="thermostat" device="KH_Clima" data-get="desired-temp" data-temp="measured-temp" class="cell"></div>
<div data-type="thermostat" data-device="KH_Clima" data-get="desired-temp" data-temp="measured-temp" class="cell"></div>
```
The wigets will show the valve value only in case of a valid data-valve attribute.
The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.
Expand All @@ -137,38 +160,52 @@ Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen
STATE T: 20.0 H: 61
```
```html
<div type="label" device="THSensorWZ" data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div type="label" class="cell">Temperatur</div>
<div type="label" device="THSensorWZ" data-part="4" data-unit="%" class="cell big"></div>
<div type="label" class="cell">Luftfeuchte</div>
<div data-type="label" data-device="THSensorWZ" data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-part="4" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
```
But the same result can reached by getting single readings:
```
humidity 58
temperature 20.1
```
```html
<div type="label" device="THSensorWZ" data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div type="label" class="cell">Temperatur</div>
<div type="label" device="THSensorWZ" data-get="humidity" data-unit="%" class="cell big"></div>
<div type="label" class="cell">Luftfeuchte</div>
<div data-type="label" data-device="THSensorWZ" data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-get="humidity" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
```

Example for how to influence the color of the label according to value limits
```html
<div data-type="label" data-device="OutTemp" data-limits='[-73,10,23]' data-colors='["#6699FF","#AA6900","#FF0000"]' data-unit="%B0C%0A" class="cell big"></div>
```

Example for how to create a widget for shutter via push: show state and set up/down
```html
<div type="switch" device="wzRollo" data-get-on="up" data-get-off="down" data-icon="fa-bars" class="cell" ></div>
<div type="label" class="cell">Rollo</div>
<div data-type="switch" data-device="wzRollo" data-get-on="up" data-get-off="down" data-icon="fa-bars" class="cell" ></div>
<div data-type="label" class="cell">Rollo</div>
```

####Switch
Example for how to create a widget for MILIGHT via toggle button. Usage of RegEx pattern for state request:
```html
<div type="switch" class="cell"
device="MILIGHT_Zone1_Wohnzimmer"
<div data-type="switch" class="cell"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off"></div>
```

####Dimmer
Example for how to create a widget for a dimmer via toggle button incl. dimmer. Usage of RegEx pattern get all values for state on:
```html
<div data-type="dimmer" data-device="MyDimmer1"
data-get-on="[0-9]{1,3}|on"
data-get-off="off"
class="cell"></div>
```

License
-------
This project is licensed under [MIT](http://www.opensource.org/licenses/mit-license.php).
8 changes: 7 additions & 1 deletion css/fhem-tablet-ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ text-align: center;
margin-bottom: -5px !important;
}

.small {
.small {
font-size: 80%;
}

Expand All @@ -57,6 +57,12 @@ input {
visibility:hidden;
}

.slider_vertical{
height: 100px !important;
max-height: 100px !important;
margin:10px 0px 0px 27% !important;
}

.jq-toast-wrap{
z-index:100;
}
Expand Down
Loading

0 comments on commit 2a2fc4d

Please sign in to comment.