SmartVISU

smartVISU website

smartVISU is a framework to create a visualization with simple html-pages.
The communication between smartVISU and DomotiGa is implemented using a Web-Socket connection, so device control and display of values is done instantaneous.


Requirements

smartVISU has the following requirements:
  • DomotiGa 1.0.007 or higher.
  • You have to have a webserver installed, like Apache.


Installation of smartVISU

1a. Download latest stable version of the smartVISU framework.
(This is version 2.7 at time of writing)

$ mkdir ~/install
$ cd ~/install
$ git clone https://github.com/Martin-Gleiss/smartvisu --branch v2.7 --single-branch

1b. Download master/beta version of the smartVISU framework.

This version is needed for DomotiGa 1.0.021 and up

$ git clone https://github.com/Martin-Gleiss/smartvisu

2. Install files

$ sudo cp -rp smartvisu /var/www/smartvisu
$ sudo chown -R www-data:www-data /var/www/smartvisu

NOTE: Some newer Apache installs use /var/www/html as documentroot, so change above paths accordingly.

3. Check smartVISU

Browse to smartVISU pages with your browser
http://serverip/smartvisu

It should display:

Configure smartVISU

Click on the config button.

Configure the DomotiGa websocket connection.

Check if connection is ok by viewing DomotiGa debug log.
It should display the version number check.

2013/08/05 10:38:51 [SmartVISU] Got a connection from client with IP address '192.168.178.87'
2013/08/05 10:38:51 [SmartVISU] > 192.168.178.80:58952 {"cmd": "proto", "ver": "0.2"}
2013/08/05 10:38:51 [SmartVISU] < {"cmd":"proto","ver":"0.2"}
2013/08/05 10:38:51 [SmartVISU] Protocol Version: 0.2

If you see an error message like the one below, click on the error label to read the error, check the settings in both smartVISU and DomotiGa.

Check if you have enabled smartVISU in DomotiGa, if port number matches, and if DomotiGa[Server] is running.

Creating smartVISU pages

Look inside the pages directory of smartVISU, it contains sample pages you can use to create your own.
You can view the layout by selecting them via the 'Pages' combolist on smartVISU's configuration page.

You can make a copy of an existing page set simply by copying it to new directory.

For example:

$ cd pages
$ cp -r _template my_interface

And then select the new page set in the configuration.
After that you can alter the HTML files to your liking.

A few rules to follow, in the HTML you need to replace spaces inside device names with _, the plugin replaces the _ with a space again, and device names are case insensitive.

You can also have a look at the DomotiGa Demo pages attached to this page.
Simply unpack them under pages directory and select them under the interface settings.

Widgets

Main Menu

Each menu title can have status icons, they are for example used to show motion on that floor.

Open file rooms_menu.html:

       <li data-role="list-divider">
        <table width=100%>
            <tr>
                <td align=left>Upstairs</td>
                <td align=right><div class="ui-li-aside">{{ basic.symbol('menu_upstairs', 'Upstairs_motion', '', icon1~'user_available.png', 1) }}</div></td>
            </tr>
        </table>
    </li>

Here it displays the status of the device called 'Upstairs' the '_motion' part needs to be added so DomotiGa knows what to return.
In smartvisu 2.8 there are some errors related to displaying icons. Infact in the file /var/www/smartvisu/index.php the link to the directory of the icons are incorrect or directory doesn't exist.
info in index.php

$twig->addGlobal('icon1', 'icons/bl/');
$twig->addGlobal('icon0', 'icons/sw/');

as only the icons/sw and icons/ws are included the icons referred to icon1 (icon/bl) will be displayed as a empty square. To resolve one need to addapt the index.php file
$twig->addGlobal('icon1', 'icons/ws/');
$twig->addGlobal('icon0', 'icons/sw/');

Room Menu

The Hobby room entry beneath it has a few more:

<li data-icon="false">
        <a href="index.php?page=room_hobby">
            <img class="icon" src='{{ icon0 }}it_pc.png'/><h3>Hobby room</h3>
            <div class="ui-li-aside">
                {{ basic.value('menu_hobbyroom_1', 'Hobbyroom_Sensor_value', '°C') }}
                {{ basic.symbol('menu_hobbyroom_2', 'Hobbyroom_Light_switch', '', icon1~'light_light.png', 1) }}
                {{ basic.symbol('menu_hobbyroom_3', 'Hobbyroom_Heating_switch', '', icon1~'sani_heating.png', 1) }}
            </div>
        </a>
    </li>

It shows the temp of that room in the menu, monitored by device called 'Hobbyroom Sensor' it displays it first value '_value'
You can also specify _value1.

The light in the hobbyroom is on taken from 'Hobbyroom Light' type to return '_switch'

And if heating is on or not device 'Hobbyroom Heating' also using '_switch'

Dimmer

Now we look at the Hobby room page itself, in the file called 'room_hobby.html'

The Hobbyroom light is defined as dimmer and switch with these lines.

<td align=left style="padding-left: 10px;">
    {{ device.dimmer('light_hobby', 'Hobbyroom_Light', 'Hobbyroom_Light_switch', 'Hobbyroom_Light_dimmer', 0, 100, 1) }}
</td>

So you can dim it with the slider, and switch on/off with the light symbol switch.

device.dimmer documentation: http://www.smartvisu.de/docu/2.7/index.php?page=device/widget_device.dimmer

Thermostat (RTR)

Next you find the Room Temperature thermostat

 <div class="block">
  <div data-role="collapsible" data-collapsed="false">
            <h3>Room Temperature</h3>
            {{ device.rtr('Hobbyroom_Thermostat', '', 'Hobbyroom_Thermostat_value2', 'Hobbyroom_Thermostat_setpoint', 
                'Hobbyroom_Thermostat_Comfort', 'Hobbyroom_Thermostat_Night', 'Hobbyroom_Thermostat_Freeze', 'Hobbyroom_Thermostat_switch', null, 0.2) }}
  </div>
 </div>

It uses it's device value2 as current temperature, and value1 (here named as '_setpoint') so DomotiGa knows it has to control the device.

Not sure why display is in Fahrenheit, must investigate...
The _Comfort, _Night and _Freeze options are not implemented yet.

device.rtr documentation: http://www.smartvisu.de/docu/2.7/index.php?page=device/widget_device.rtr

Globalvar

You can also display values, or texts stored in a globalvar, use <globalvarname>_var as id.

 <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>Daily Tagline</h3>
         {{ basic.value('Uptime', 'Tagline_var') }}
     </div>
   </div>
 </div>

Another example is displaying Sunset and Sunrise:

Index.html:

        {% import "clock.html" as clock %}
        {{ clock.digiclock('clock') }}

        <div class="center">
                {{ now|smartdate('l') }}, {{ now|smartdate() }}<br/>
                <img src="lib/weather/pics/sun_up.png" class="sunIcon"/> {{ basic.value('sunrise', 'Sunrise_var') }} <img src="lib/weather/pics/sun_down.png" class="sunIcon"//> {{ basic.value('sunset', 'Sunset_var') }}&nbsp;&nbsp;&nbsp;&nbsp;
                <img src="lib/weather/pics/moon_up.png" class="moonIcon" /> {{ basic.value('moonrise', 'Moonrise_var') }} <img src="lib/weather/pics/moon_down.png" class="moonIcon"//> {{ basic.value('mooonset', 'Moonset_var') }}<br/>
        </div>

Visu.css:

.sunIcon { border: 0px; padding: 0px; vertical-align: text-bottom; width: 35px;}
.moonIcon { border: 0px; padding: 0px; vertical-align: text-bottom; width: 35px;}

Result:

Globalvar changes are not yet pushed to the connected smartVISU clients, they only refresh upon page reload, must be implemented.

basic.value documentation: http://www.smartvisu.de/docu/2.7/index.php?page=basic/widget_basic.value

Trigger

NOTE: Supported from v1.0.021 and up

You can also define buttons which can trigger events or actions, you do this by creating a basic.trigger with a type and an id.

 <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>Action and Events</h3>
         {{ basic.trigger('all-off', 'event', 'All Off', 'home', '5', 'midi') }}
         {{ basic.trigger('all-off', 'action', 'Action2', 'info', '2', 'midi') }}
      </div>
   </div>
 </div>

The first one triggers and event with id 5, has text 'All Off' and uses an 'home' icon symbol.
The second one trigger the action with id 2 and has Action2 as label.

basic.trigger documentation: http://www.smartvisu.de/docu/2.7/index.php?page=basic/widget_basic.trigger

Battery levels

NOTE: Supported from v1.0.021 and up

smartVISU can display dynamic svg type icons depending on linked value.

Simple example:

 {% import "icon.html" as icon %}

 {{ icon.battery('batticon1', '', 'Hobbyroom_Sensor_battery',0,100) }}

A few combined in a block with texts:

{% import "icon.html" as icon %}

<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>Sensor Battery Status</h3>
                                <table width=100%>
                                        <tr>
                                                <td align=left style="padding-left: 10px;" width=1>
                                                        {{ icon.battery('batticon1', '', 'Hobbyroom_Sensor_battery',0,100) }}
                                                </td>
                                                <td align=left>
                                                        Temp Sensor Hobbyroom
                                                </td>
                                        </tr>
                                        <tr>
                                                <td align=left style="padding-left: 10px;" valign=top width=1>
                                                        {{ icon.battery('batticon2', '', 'Temp_Sensor_Bedroom_battery',0,100) }}
                                                </td>
                                                <td align=left>
                                                        Temp Sensor Bedroom
                                                </td>
                                        </tr>
                                        <tr>
                                                <td align=left style="padding-left: 10px;" valign=top width=1>
                                                        {{ icon.battery('batticon3', '', 'Temp_Sensor_Attic_battery',0,100) }}
                                                </td>
                                                <td align=left>
                                                        Humid/Temp Sensor Attic
                                                </td>
                                        </tr>
                                        <tr>
                                                <td align=left style="padding-left: 10px;" valign=top width=1>
                                                        {{ icon.battery('batticon4', '', 'Rain_Meter_battery',0,100) }}
                                                </td>
                                                <td align=left>
                                                        Rain Sensor Garden
                                                </td>
                                        </tr>
                                </table>
                        </div>
                </div>
        </div>

This is the result, icons will change in real-time depending on values.

NOTE: In DomotiGa the batterystatus value can be 'OK', 'Low', 0-100 depending on device type.
The smartVISU plugin converts them to values between 0-100.

Other item notations

There are more widgets available, look in the smartVISU documentation.

In general you have to replace spaces in names with _ they get reversed to spaces by the code, it's some java-script thing, in some parts of smartVISU it doesn't matter others cannot have spaces in names, device names are case sensitive.

Then the last _ part can be:

When DomotiGa find devices value update it looks for widgets with device values for:

"_setpoint"
"_valueX" where X is the valuenumber
"_battery"
NOTE: Supported from v1.0.021 and up
"_motion"
"_switch"
"_dimmer", "_dim"
"_var"

To control/update devices from smartVISU to DomotiGa:

"_switch"
"_dimmer", "_dim"
"_thermostat", "_setpoint"
"_valueX" where X is the valuenumber
NOTE: Supported from v1.0.021 and up
"_shutter"

When a device gets updated the smartVISU code will try to see if the device is on a currently displayed smartVISU page, if so it will send a web-socket packet to update it.
These devices per page are stored in a collection, for this don't place to many devices on one page, and don't keep debugging on for long, it slows down the server.

You can also configure special widgets like Weather and Fritzbox callerlist inside the smartVISU pages.
But these fetch their data completely separate from DomotiGa.

Plot Graphs

You can also embed plot.period graphs into your SmartVISU pages, this is supported from DomotiGa version 1.0.020 and up.

1. First step is to copy over the new io.domotiga.js driver which implements the websocket commands, this will be bundled with a new version of SmartVISU (2.8)

You need to have enough privileges to be able to write in this directory.

$ cd smartvisu/driver
$ wget https://smartvisu.googlecode.com/svn/trunk/driver/io_domotiga.js
$ wget https://smartvisu.googlecode.com/svn/trunk/driver/io_domotiga.min.js

Please note that the compresses io_domotiga.min.js file will be used in preference of the raw io_domotiga.js file, so if you make changes to this raw file you need to recompile it.
You can do that by browsing to http:<your server ip>/make.php

plot.period

2. This shows how to create an entry for a single value temperature value of device named 'bath' and value 1 (plot1)
You can use _value, _valueX and _plotX where X is valuenumber.

The device value need to be logged to the database, so enable this inside the value editor.

{% import "plot.html" as plot %}

<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>Bathroom Temperature Graph</h3>
                <div data-role="collapsible" data-collapsed="false">
                   {{ plot.period('p1', 'bath_plot1', 'avg', '3h') }}
                </div>
        </div>    
    </div>
 </div>

You can also combine up to three values in one graph:

{% import "plot.html" as plot %}

<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>Outside Graph</h3>
                <div data-role="collapsible" data-collapsed="false">
                   {{ plot.period('p2', ['outside_sensor_plot1', 'outside_sensor_plot2', 'temp_sensor3_value1'], 
'avg', '1h', 0, 0, 100, '', '', ['#aa0', '#a00', '#00a'], ['line', 'line', 'line']) }}
                </div>
        </div>
    </div>
 </div>

plot.multiaxis

In SmartVISU 2.8 there will be an option to make plots with multiple Y axis, so you can scale everything a bit better.

Here is an example plot which I made to show the power of my Cubietruck, if it's running on AC power, or on battery power (battery power has it's own plot) and what the voltages and amps are.

The script to get these values in DomotiGa is in the forums, and I will put it on the Cubie page soon also.

<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>AC Power</h3>
                        {{ plot.multiaxes('ACPower',
                        ['DomotiGa_Server_Power_stats_value1',
                        'DomotiGa_Server_Power_stats_value2',
                        'DomotiGa_Server_Power_stats_value3',
                        'DomotiGa_Server_Power_stats_value4'],
                        'avg', '', '',
                        ['0', '0', '0', '0'], [6,2,1,1], '1',
                        ['Present', 'Online', 'AC Volt', 'AC Amp'],
                        ['#0a0','#0f0','#f00','#00a'],
                        ['area', 'area', 'line', 'line'],
                        ['X', 'Y', 'Y2', 'Y3', 'Y4'], '', [3,4,1,0], [0,0,1,1],
                        ['#f00','#00a','#0a0','#0f0']
                        ) }}
                </div>
        </div>
</div>

Upcoming changes.

The SmartVISU plugin is one of the last plugins using a device name as a way to address a dvice, this will be converted to use device id's instead in the near future.

FAQ

The following Frequently Asked Questions should give you answers to most common questions or problems.

Q: Where can I find more information and help about smartVISU
_A: For more help go to the smartVISU website: http://smartvisu.de

Q: I get the message "Could not connect to DomotiGa server"
A: Most likely the supplied IP address or port number is incorrectly or smartVISU is not enabled via DomotiGa settings. Check debug log for more information.

Q: The device values displayed on the smartVISU pages are not updated.
A: The smartVISU uses a special device naming, see creating smartVISU pages above for more info. And check debug log for name mismatches.


Resources

  • Added by mishoboss almost 3 years ago

    Is there a way to get the "Last changed" value of a device in SmartVisu?

    • Added by mommeke almost 2 years ago

      yes there is, the way I do it is by using a bash shell script that retrieves the wanted values via a json-rpc call.
      Requires modules/servers/json-rpc to be enabled.
      to give an idea (note that I changed the default port to 9091 because I already have squeezebox/logitechmediaserver on port 9090. I also remove the seconds from the result with the rev/cut/rev commands):
      #!/bin/bash
      json='application/json'
      request1='{"jsonrpc": "2.0", "method": "device.get", "params": {"device_id": 99}, "id": 1}'
      curl -sS -X POST -H "Content-Type: $json" -H "Accept: $json" -d "$request1" localhost:9091 | jq -r .result.values[].lastchanged | rev | cut -c 4- | rev

      you can use this script as a shell device and use its _valueX to display the lastchanged time in smartvisu.

  • Added by mommeke almost 2 years ago

    (doublepost)

Updated by: SVdHeyden, Updated 12 months ago
Access count: 83986

Attached Files

smartVISU-config.png (18.3 KB) rdnzl, 08/05/2013 12:25 PM

smartVISU-logo.png (4.53 KB) rdnzl, 08/05/2013 12:25 PM

smartVISU-error.png (12.7 KB) rdnzl, 08/05/2013 12:25 PM

domotiga_demo.tar.gz (8.79 KB) rdnzl, 08/05/2013 01:07 PM

smartvisu-first-use.png (119 KB) Alexie, 02/15/2014 12:50 PM

plot-period-graph.png (19.4 KB) rdnzl, 12/09/2014 12:09 PM

plot-period-multi.png (14.5 KB) rdnzl, 12/09/2014 02:04 PM

menu.png (9.34 KB) rdnzl, 12/09/2014 02:36 PM

dimmer.png (9.55 KB) rdnzl, 12/09/2014 02:42 PM

thermostat.png (16.6 KB) rdnzl, 12/09/2014 03:13 PM

globalvar.png (7.83 KB) rdnzl, 12/09/2014 03:19 PM

trigger.png (9.53 KB) rdnzl, 01/03/2015 07:20 PM

sunset.png (20.5 KB) rdnzl, 01/27/2015 02:52 PM

battery.png (21.3 KB) rdnzl, 01/27/2015 08:04 PM

multiaxisplot_acpower.PNG (20.9 KB) wwolkers, 01/28/2015 10:38 PM

Also available in: PDF HTML TXT