Dashboard UI suitable for tablets

batfasturd · December 3, 2015, 6:35pm

I was able to get the widget to show up and it reads the current state, however when I change states left or right it loses the text until I reload the page.

naturalblaze · December 3, 2015, 7:18pm

Could you paste widget configs?

batfasturd · December 3, 2015, 7:34pm

Sure,

default.erb

<li data-row="1" data-col="5" data-sizex="1" data-sizey="1">
<div data-id="Scene_General" data-view="Ohsetscenegeneral" data-title="Scene" data-device="Scene_General"></div>
</li>

I will post only the changes I made to the Ohsetfan script.

ohsetscenegeneral.coffee

class Dashing.Ohsetscenegeneral extends Dashing.ClickableWidget

plusLevel: ->
    newLevel = parseInt(@get('state'))+1
    if newLevel > 5
      newLevel = 0
    else if newLevel < 0 
      newLevel = 5
    @set 'state', newLevel
    return @get('state')

  minusLevel: ->
    newLevel = parseInt(@get('state'))-1
    if newLevel > 5
      newLevel = 0
    else if newLevel < 0
      newLevel = 5
    @set 'state', newLevel
    return @get('state')

@accessor 'ohsetscenegeneral-map', ->
     if @get('state') == '0' then 'None'
     if @get('state') == '1' then 'Day'
     if @get('state') == '2' then 'Night'
     if @get('state') == '3' then 'Bedtime'
     if @get('state') == '4' then 'Away'
     else if @get('state') == '5' then 'Home'

ohsetscenegeneral.html

<h2 class="value" data-bind="ohsetscenegeneral-map"></h2>

ohsetscenegeneral.scss

.widget-ohsetscenegeneral {

naturalblaze · December 4, 2015, 3:30am

Thats strange. I don’t see anything with your configs that would cause an issue. Do you see any errors in the logs when you change the value? I think I had debug enabled for the widget. I am by no means an expert at this though. I pretty much hacked this together from some of the configs smar and others contributed until I got mine working.

batfasturd · December 4, 2015, 4:57pm

I will check the logs sometime today. It’s not a big deal I guess as I have switches programmed for the 3 modes that I use the most. I appreciate you looking at it though.

naturalblaze · December 4, 2015, 6:12pm

I did find a github thread for dashing about a similar issue with a number and using the accessor. If you comment out the accessor part where its transforming the number does the actual value show up correctly? Here is a link dashboard #79 to the issue seems very similar.

ralle · December 5, 2015, 9:20am

It seems the ohscenegeneral.scss is incomplete or did I miss something?

BTW: How about sending @smar a pull request on github for all those new widgets so that everyone can just pull them into their local clone?

smar · December 5, 2015, 5:43pm

Sure, please send the request and I will merge into the main repo.

hexakopter · December 7, 2015, 4:34pm

Hello everybody,

thank you for this wonderful app.
I have ien little problem:
Two boxes are not updated: D25_CO2 and ESP_29_CO2. All other widgets will be updated as necessary.

Here’s my Item File:

Number D25_Temp_aussen “Aussen Temperatur[%.1f °C]” (gDashboard, Temperature)
Number D25_Feuchtigkeit_aussen “Aussen Feuchtigkeit [%d %%]” (gDashboard, Temperature)
Number D25_Luftdruck “Luftdruck[%.1f hP]” (Temperature)
Number D25_CO2 “Wohnzimmer Co2[%d PPM]” (gDashboard, Klima)
Number ESP_29_CO2 “Fäkalien[%d PPM]” (gDashboard, Klima)
Here is an extract from the log file:

192.168.0.23 - - [07/Dec/2015 10:37:28] “POST /widgets/ESP_29_CO2 HTTP/1.1” 204 - 0.0005
192.168.0.23 - - [07/Dec/2015 10:37:43] “POST /widgets/ESP_29_CO2 HTTP/1.1” 204 - 0.0004
192.168.0.23 - - [07/Dec/2015 10:37:58] “POST /widgets/ESP_29_CO2 HTTP/1.1” 204 - 0.0005
192.168.0.23 - - [07/Dec/2015 10:38:13] “POST /widgets/ESP_29_CO2 HTTP/1.1” 204 - 0.0004
192.168.0.23 - - [07/Dec/2015 10:38:28] “POST /widgets/ESP_29_CO2 HTTP/1.1” 204 - 0.0004
192.168.0.23 - - [07/Dec/2015 10:38:34] “POST /widgets/D25_Temp_WZ HTTP/1.1” 204 - 0.0005
192.168.0.23 - - [07/Dec/2015 10:38:43] “POST /widgets/ESP_29_CO2 HTTP/1.1” 204 - 0.0004
192.168.0.23 - - [07/Dec/2015 10:38:58] “POST /widgets/ESP_29_CO2 HTTP/1.1” 204 - 0.0004
192.168.0.23 - - [07/Dec/2015 10:39:04] “POST /widgets/D25_Temp_WZ HTTP/1.1” 204 - 0.0004
192.168.0.23 - - [07/Dec/2015 10:39:07] “POST /widgets/Netatmo_Outdoor_Humidity HTTP/1.1” 204 - 0.0005
192.168.0.23 - - [07/Dec/2015 10:39:13] “POST /widgets/ESP_29_CO2 HTTP/1.1” 204 - 0.0005
192.168.0.23 - - [07/Dec/2015 10:39:34] “POST /widgets/D25_Temp_WZ HTTP/1.1” 204 - 0.0005

Here the .erb File:

<li data-row="4" data-col="1" data-sizex="1" data-sizey="1">
  <div data-id="D25_CO2" data-view="Ohhumidity" data-title="CO2" data-device="D25_CO2"></div>
</li>

<li data-row="4" data-col="2" data-sizex="1" data-sizey="1">
  <div data-id="ESP_29_CO2" data-view="Ohhumidity" data-title="Fäkalien" data-device="ESP_29_CO2"></div>
</li>

<li data-row="4" data-col="3" data-sizex="1" data-sizey="1">
  <div data-id="D25_Temp_WZ" data-view="Ohtemp" data-title="Wohnzimmer Temperatur" data-device="D25_Temp_WZ"></div>
</li>

<li data-row="4" data-col="4" data-sizex="1" data-sizey="1">
  <div data-id="D25_Feuchtigkeit_WZ" data-view="Ohhumidity" data-title="Feuchtigkeit" data-device="D25_Feuchtigkeit_WZ"></div>
</li>

Does somebody has any idea?

Greetings Peter

naturalblaze · December 8, 2015, 3:01am

I’m not sure you do that. I am not familiar with github but if you want to point me in the right direction I am more than happy to share

waitz_sebastian · December 11, 2015, 7:34am

Thats not too difficult. You have to fork smars repo into your account. Then do he changes in your repo and commit them.
After that you can create a pull request out of that commit.

poertner · December 11, 2015, 3:52pm

@laurenslammens did you find out why the switches are white and the colors are ignored?

laurenslammens · December 11, 2015, 4:27pm

i did not, i assume there is an error in widget somewhere, to lazy to look for it, so i used the ohdimmer widget and modified it to use as on/off switch for lamps

i uploaded the files → http://www.filedropper.com/ohlamp

Dominic_Bonneau · December 11, 2015, 6:39pm

I really like this interface (the look and everything) but i found it limited… as anyone make more advance thing with it ?

poertner · December 12, 2015, 12:20am

@laurenslammens

thx for your files, comparing them to the ohswitch files, i found the culprit (i think):
in the ohswitch.scss

.widget-Ohswitch {

should be

.widget-ohswitch {

Another thing i changed was:

@accessor ‘state’,
get: → @_state ? ‘0’
set: (key, value) → @_state = value

where i exchanged the OFF for a 0

cheers,
stefan

poertner · December 13, 2015, 2:34am

@smar thx for your work on this!

to make “ohalert” and the background-color change work with my contacts (OPEN / CLOSED) i had to change the ohalert.scss. just in case anybody has problems making it change the bg-color like i did.

from:

&.state-off {
background-color: $widget-background-color !important;
}

&.state-on {
background-color: $widget-background-alert-color !important; //#ff9933 !important;
}

to:

&.state-closed {
background-color: $widget-background-color !important;
}

&.state-open {
background-color: $widget-background-alert-color !important; //#ff9933 !important;
}

mybe that’s obvious, but it took me a while

mbelleville · December 14, 2015, 5:33am

I have been having fun playing around with this dashboard. Very nice work. I am having a good time with it. I created a new pull request for an ohvolume widget.

basically a copy of the ohdimmer widget. Only difference is that it increments/decrements by 5 instead of 10, and that turning it ON from an OFF state will set it to 20 instead of 100. I am using it for squeezebox volume control. Decided it needed to be different from ohdimmer after blowing my eardrums out with an accidental ON press…

mbelleville · December 14, 2015, 5:36am

Also, kinda off topic, but I have been trying to get camera feeds set up like yours @smar . I use a zoneminder install, but I can’t seem to get it working.

@camera1Host = “192.168.10.21” ## CHANGE
@camera1Port = “80” ## CHANGE
@camera1Username = ‘None’ ## CHANGE
@camera1Password = ‘’ ## CHANGE
@camera1URL = “/cgi-bin/nph-zms?mode=single&monitor=3”
@newFile1 = “assets/images/cameras/snapshot1_new.jpeg”
@oldFile1 = “assets/images/cameras/snapshot1_old.jpeg”

the following command works just fine

wget “http://192.168.10.21/cgi-bin/zms?mode=single&monitor=3” -O foo.jpg

so I’m not sure why the cameras widget will not display…

mbelleville · December 14, 2015, 5:48am

what would really be nice is a slider widget. I’m surprised one doesn’t already exist for dashing, but I couldn’t find one. My html/css isn’t quite good enough to make one myself, but if anyone else is up for making one I would be excited about it. I’d like to just be able to tap a position on the slider instead of using increment/decrement buttons.

poertner · December 15, 2015, 10:13pm

hi all,

i borrowed code from “ohheating” to spice up my “ohtemp”.
the color of the temperature digits (not the background) changes depending on the value.

this works quite good with only one drawback:
the color only changes when i reload the page. incoming new temperature values are pushed correctly and change automatically but not the new color.

what could i do to refresh the color when new data arrives?

here is my ohtemp.coffee

class Dashing.Ohtemp extends Dashing.Widget
constructor: →
super
@queryState()

@accessor ‘state’,
get: → if @_state then parseFloat(@_state).toFixed(1) else 0
set: (key, value) →
@_state = value

@accessor ‘value-style’, →
if @_state < 20
‘value-tooCold’
else if @_state > 24
‘value-tooWarm’
else
‘value’

@accessor ‘unit-style’, →
if @_state < 20
‘unit-tooCold’
else if @_state > 24
‘unit-tooWarm’
else
‘unit’

queryState: →
$.get ‘/openhab/dispatch’,
widgetId: @get(‘id’),
deviceId: @get(‘device’),
deviceType: ‘temperature’
(data) =>
json = JSON.parse data
@set ‘state’, json.state

ready: →

onData: (data) →

thanks for your help!
stefan