Dashboard UI suitable for tablets

hi all,

after installing dashing do i have to create a new dashboard with “dashing new dashboard”, bundle that and THEN copy the dashboard repository to /opt/dashboard? the dashboard i created before is in another directory, so should i copy everything from opt/dashboard to that directory?

i am confused…

thx,
stefan

Hey Stefan,
No need to create a new one. To start with you can directly use the cloned one from @smar’s repo. I ended up having the repo clone in directory to be able to pull and then manually merge the changes to my production dashboard since I made a few changes in the widget.
Despite that check smars docu for installation: https://github.com/smar000/openhab-dashboard

hi sebastian,

now it worked. here is what i did to make it work.

fresh raspbian JESSIE image with openhab

copy the files from github to /opt/dashboard

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install libssl-dev

curl -O http://node-arm.herokuapp.com/node_latest_armhf.deb
sudo dpkg -i node_latest_armhf.deb

sudo apt-get install ruby ruby-dev

echo ‘gem: --no-rdoc --no-ri’ >> ~/.gemrc
sudo gem install bundler dashing

cd /opt/dashboard
“dashing start” did result in errors and after some google-action the following two lines did the trick:

sudo apt-get install postgresql-9.4 postgresql-server-dev-9.4 libpq-dev
sudo apt-get install libsqlite3-dev

bundle install

dashing start

hi @sptzdmnc,

would you be so kind to tell me how you got the “ohmeter” widgets (Leistung, DL Speed etc.) to work?
how and where do you define the min and max values?

i have a simple number item in OH (luftfeuchtigkeit) and added it to group gDashboard.
when i add that to the .erb file i don’t see the value, just an “undefined”.

thx for your help,
stefan

Hi Stefan, first of all i would like to know how your item is formatted,
Luftfeuchtigkeit = humidity, so is it maybe formatted as a string? The
item i use will Display xx.yy without any unit. The unit is defined in my
sitemap. But i can provide you my widget, because i created a method to
round my number to only one digit.

hey dominic,

my humidity item is defined like this:
Number luftfeuchtigkeit "Luftfeuchtigkeit [%.1f%%]" <weather_humidity> (feuchtigkeit_statistik, gDashboard) { mqtt="<[mosquitto:HA/home/arduino/hum/humSensor2:state:default]" }

The number is displayed but not the “circular bar” :wink:

cheers,
stefan

Can we post this sample code in the Github readme, It took me forever to get the weather icons working and it was just the condition id vs common id which is not explained at all? Thank you for your work, I love using this over the openhab app on a wall mounted tablet.

this is my running configuration, simply copy ohmeter to a directory calles ohmeter2 so you can test my configuration.
i also added the items file from openhab and the default.erb (both are shortened)
I did not add any group to the Number item, only for chart generation within openhab.
(i added minimum, maximum values, and a color, but this could be changed)

http://uploaded.net/file/j0rb7dqi
(compressed using 7Zip.)

Has anyone found a scenes widget or made them work yet? I am using Switch items for now which toggle scenes but it’s ugly and bloated.

1 Like

thx @sptzdmnc, that helped a lot!
now it works like a charm

the ohswitch.scss has green color #aaff00 defined for .switch-icon-on but for some reason this is being ignored,
anyone has a clue why?

Isnt scss files compiled down to css files, so you need to run a process to generate the final css files that should be the effective/used files for the browser? is there a ohswitch.css or is the ohswitch.scss included in the browser load?

@naturalblaze: Could you please add your configs as to the thermostats ? I’m trying to do the same, but so far I’m failing…

thx

Here is my configurations for my two theremostats. I have two Z-Wave theremostats. A thing to note is that the thermostats report the mode, fan mode, operating state and fan state as a number that I am transforming. Here is are the widgets I created for the different functions dash-widgets. Below is the dashboards/default.erb entry for the page I have setup for the thermostats. Let me know if you have any questions or problems.

 <!-- Thermostat - Page 4 -->
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-view="Text" data-title="Second Floor Thermostat" style="background-color:#0101DF"></div>
</li>

<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<div data-id="Combined_Temperature_Second" data-view="Ohtextsingle" data-title="Second Floor Temp/Hum" data-device="Combined_Temperature_Second"></div>
</li>

<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_Second_Bat" data-view="Ohbattery" data-title="Second Floor Battery" data-device="Thermostat_Second_Bat" style="background-color:#DF7401"></div>
</li>

<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_Second_Mode" data-view="Ohsetmode" data-title="Second Floor Mode" data-device="Thermostat_Second_Mode"></div>
</li>

<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_Second_CoolSetPoint" data-view="Ohsetpointcool" data-title="Second Floor Cool SetPoint" data-device="Thermostat_Second_CoolSetPoint"></div>
</li>

<li data-row="2" data-col="3" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_Second_HeatSetPoint" data-view="Ohsetpointheat" data-title="Second Floor Heat SetPoint" data-device="Thermostat_Second_HeatSetPoint"></div>
</li>

<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_Second_Fan_Mode" data-view="Ohsetfan" data-title="Second Floor Fan Mode" data-device="Thermostat_Second_Fan_Mode"></div>
</li>

<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_Second_Operating_State" data-view="Ohthermopstate" data-title="Second Floor Op State" data-device="Thermostat_Second_Operating_State"> </div>
</li>

<li data-row="3" data-col="3" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_Second_Fan_State" data-view="Ohfanstate" data-title="Second Floor Fan State" data-device="Thermostat_Second_Fan_State"></div>
</li>

<li data-row="2" data-col="4" data-sizex="1" data-sizey="1">
<div data-view="Image" data-image="/openhab-logo-square.png"></div>
</li>

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<div data-view="Text" data-title="First Floor Thermostat" style="background-color:#0101DF"></div>
</li>

<li data-row="1" data-col="6" data-sizex="1" data-sizey="1">
<div data-id="Combined_Temperature_First" data-view="Ohtextsingle" data-title="First Floor Temp/Hum" data-device="Combined_Temperature_First"></div>
</li>

<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_First_Bat" data-view="Ohbattery" data-title="First Floor Battery" data-device="Thermostat_First_Bat" style="background-color:#DF7401"></div>
</li>

<li data-row="2" data-col="5" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_First_Mode" data-view="Ohsetmode" data-title="First Floor Mode" data-device="Thermostat_First_Mode"></div>
</li>

<li data-row="2" data-col="6" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_First_CoolSetPoint" data-view="Ohsetpointcool" data-title="First Floor Cool SetPoint" data-device="Thermostat_First_CoolSetPoint"></div>
</li>

<li data-row="2" data-col="7" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_First_HeatSetPoint" data-view="Ohsetpointheat" data-title="First Floor Heat SetPoint" data-device="Thermostat_First_HeatSetPoint"></div>
</li>

<li data-row="3" data-col="5" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_First_Fan_Mode" data-view="Ohsetfan" data-title="First Floor Fan Mode" data-device="Thermostat_First_Fan_Mode"></div>
</li>

<li data-row="3" data-col="6" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_First_Operating_State" data-view="Ohthermopstate" data-title="First Floor Op State" data-device="Thermostat_First_Operating_State"> </div>
</li>

<li data-row="3" data-col="7" data-sizex="1" data-sizey="1">
<div data-id="Thermostat_First_Fan_State" data-view="Ohfanstate" data-title="First Floor Fan State" data-device="Thermostat_First_Fan_State"></div>
</li>

<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="cpage1" data-view="Changepage" data-icon="arrow-left" data-title="Home" data-page="1" data-stagger="false" data-fasttransition="true" style="background-color:#085C61"></div>
</li>

<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
<div data-id="cpage2" data-view="Changepage" data-icon="arrow-right" data-title="Lights" data-page="2" data-stagger="false" data-fasttransition="true" style="background-color:#085C61"></div>
</li>

<li data-row="4" data-col="3" data-sizex="1" data-sizey="1">
<div data-id="cpage3" data-view="Changepage" data-icon="arrow-right" data-title="Temperature" data-page="3" data-stagger="false" data-fasttransition="true" style="background-color:#085C61""></div>
</li>

<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
<div data-id="cpage5" data-view="Changepage" data-icon="arrow-right" data-title="Sensors" data-page="5" data-stagger="false" data-fasttransition="true" style="background-color:#085C61""></div>
</li>

<li data-row="4" data-col="5" data-sizex="1" data-sizey="1">
<div data-id="reload" data-view="Reload" data-title="Refresh" ></div>
</li>

<li data-row="4" data-col="6" data-sizex="2" data-sizey="1">
<div data-id="clock2" data-view="Clock"></div>
</li>
</ul>
</div>

@naturalblaze: Works perfectly, thanks…

@naturalblaze : Could this be used for a basic scene controller as well by adding more numbers? I have 5 scenes/states 0-4.

Sure. You can map it to whatever you want. I have another widget I use for some different security profiles like if I want to be alerts for my door sensors or my door and motion sensors. Here is that widget its pretty much the same as the other set widgets with just different mappings. But you could add more you just need to adjust the plusLevel and minusLevel’s in the coffee file so that it loops around at the correct numbers for you. I did find if I have it stop at a number like 0 and you hit - again it will loose the value. I could never figure out why it did that as the temperature setpoints didn’t do that I think it has something to do with the mappings. That’s why i just have it loop around but I kinda like it like that anyway. Let me know if you have any questions or problems.

<li data-row="3" data-col="2" data-sizex="1" data-sizey="1">
  <div data-id="Security_Profile" data-view="Ohsetsecurity" data-title="Security Profile" data-device="Security_Profile"></div>
</li>

Thanks, I modified one of the other ones and am working on it now, Is there something magical I need to do after I create the new widget to make it show up? I added everything but it’s not showing up on my dashboard.

Nevermind, Found it. I had to capitalize the O in Ohsetscenetest in the top of the coffee script.

Although now when I change scenes the text disappears until I refresh/reload the page.

You just need to add the

  • code to your erb file. Adjusting to to
    where you want it located and if you change the name of the widget and
    such.