Dashboard UI suitable for tablets

I am trying to get multiple text items into one ohtext widget. I can get that to happen by concatenating them all together into a new text item. However, I can not figure out a way to get line breaks between each one in the dashboard. I tried using html line breaks, but the mark up is escaped. I also tried using ‘\n’ between each text item, but that doesn’t work either.

maybe try it with “<br>” instead of “\n”

EDIT: I just saw that you already tried HTML line breaks.

I think you should define a new widget to complete what you’re trying. I’ve done this with several of my widgets, e.g. the big red one that shows live departure times of 3 buses. I have this dashboard on an iPad in kiosk modus, using the free iOS app Frameless to show it in fullscreen.

What I do, is concatenate all the items I need in one widget in a rule. The following code populates one of the status-widgets on the left side (“kontor”).

Openhab rule:

dashing_kontor.postUpdate(temp_ko.state.format("%.1f").toString
+ "|" + termo_ko.state.format("%.1f").toString	
+ "|" + ovn_ko_e.state.format("%.1f").toString	
+ "|" + humi_ko.state.format("%.1f").toString 
+ "|" + co2_ko.state.format("%.1f").toString)

The trick is to split this string when it arrives in dashing. So the concatenated item “dashing_kontor”, is split into 5 in dashing and used in the html-part of the widget.

E.g. for the blue temperature:

Coffee-script:

@accessor 'temp',
get: -> @_temp ? @get('state').split("|")[0]
set: (key, value) ->
@_temp = value

HTML

<span class="value_temp" data-bind="temp | append '&deg;'"></span>

Here is a screenshot from my Sonos-dashboard.

2 Likes

What is the error you are getting (if any)? Does zone minder use basic authentication or digest/other? As it stands, the ruby script is only set up for basic. I would in any event try to get the ruby code working interactively, directly in a ruby command line interface, and then paste it into the cameras script once you’ve got it working.

If you look earlier in the thread, @apatel put together a dimmer slider.

@poertner You need to put some code into the onData method to tell it to refresh. Have a look at the ohHeating widget, which does something similar.

@smar yes, i already tried that but then the dashboard doesn’t show up at all. just a dark grey screen.
nothing shows up although the html-source code has all elements.

the ohheating has this in onData. i just have “state” in ohtemp so i delete the console lines and the ones dealing with jsonInner (written in bold)

onData: (data) →
#debugger
console.log “data”,data
json = JSON.parse data
@set ‘state’, json.state
jsonInner = JSON.parse json.state
@set ‘temperature’, jsonInner.temperature
@set ‘target’, jsonInner.target
console.log "temperature: “, @get(‘temperature’),”, target: ", @get(‘target’)

so that leaves me with:

onData: (data) →
json = JSON.parse data
@set ‘state’, json.state

and as i said, that breaks my dashboard :confounded:

did you try to change thefont color dynamically?

In the dashboard all I see is a broken image icon

I also see these log messages

rm: cannot remove `assets/images/cameras/snapshot1_old.jpeg': No such file or directory
mv: cannot stat `assets/images/cameras/snapshot1_new.jpeg': No such file or directory
================================================================================
/opt/dash/openhab-dashboard/jobs/cameras.rb:50:in `fetch_image'
/opt/dash/openhab-dashboard/jobs/cameras.rb:68:in `block in <top (required)>'

I do not have any authentication enabled in zoneminder. No login/password required. I was hoping to turn authentication on eventually, but for now I just want to get it working…

I’m trying to setup my dashboard as well, but I noticed a constant stream of errors in the browsers javascript console (F12):
(anonymous function) @ application.js:15019c.dispatchEvent @ application.js:7j @ application.js:7l @ application.js:7 application.js:15014 Connection opened e {type: "open", target: i} application.js:15018 Connection error e {type: "error", target: i} application.js:15019 Uncaught TypeError: Cannot read property 'readyState' of undefined

First I thought it was one of my widgets, but it also happens without any widgets.
Does anybody else see this behavior?

@poertner You have to be very careful with indentation/lining up etc. That is normally the first thing I look for if I get a blank gray screen. Try a copy/paste and just comment out the unnecessary lines (you could keep in the console.log lines and put in something that shows you what is happening when the method is called.

I do change some colours dynamically based on temperature. This is done using the ‘target-style’ accessor in the coffeescript and corresponding CSS.

@mbelleville Those errors are probably because it hasn’t managed to get the images from your camera. You need to look at just getting an image downloaded first. Did you try a simple ruby script that downloads the image? This might be the first thing to do. Once you get this working, then its just a matter of updating the script in the jobs directory. Unfortunately it is difficult to help debug without having the system in front of me, especially as Ruby is not really my forte.

@I_grave Sorry, I haven’t come across those errors before. It looks though as if your system is having a problem connecting. Have you rechecked your connection parameters?

this works:

require ‘open-uri’
open(‘image.jpg’, ‘wb’) do |file|
file << open(‘http://192.168.10.21/cgi-bin/nph-zms?mode=single&monitor=3’).read
end

I tried editing cameras.rb by adding “require ‘open-uri’” to the top of it and changing the following within the fetch_image method

        open(new_file, "wb") do |file|
            file.write(response.body)
  end

to:

  open(new_file, "wb") do |file|
     	      file << open(cam_url).read
  end

but it still doesn’t work…

any ideas?

@mbelleville Instead of using the variable cam_url , try putting in the actual url as per your test script. Also it may be worth wrapping everything with try/catch etc and logging the exceptions to a file. This might give a clue as to what is going wrong.

Documentation on the Net::HTTP class in case you wanted to check this further: http://ruby-doc.org/stdlib-2.2.4/libdoc/net/http/rdoc/Net/HTTP.html

I was having the same problem, I created a ‘cameras’ (mkdir cameras) directory in assets/images and restarted dashing and it is now working.

@federic0 Good catch! I assumed that that folder was already there, but if not, it would certainly explain the problem!

I created the cameras directory. And I changed:

open(new_file, "wb") do |file|
        file << open(cam_url).read
end

to:

open(new_file, "wb") do |file|
	#file << open(cam_url).read
        file << open('http://192.168.10.21/cgi-bin/nph-zms?mode=single&monitor=3').read
end

now in my cameras directory I see snapshot1_new.jpeg and snapshot1_old.jpeg. I don’t see any for the other cameras. If I open the images with an image viewer they look fine, but they still do not appear in my dashboard. All I see is a broken image icon. I restarted dashing, and I also refreshed my browser. Still no working camera images in my dashboard…

I can see that the images are being rotated every 10 seconds by the timestamps on the files. So the image file creation for camera1 seems to be working just fine.

ok, I’ve got it working now. not sure why, but I had to comment out all the other fetch_image calls for the rest of the cameras

new_file1 = fetch_image(@camera1Host,@oldFile1,@newFile1,@camera1Port,@camera1Username,@camera1Password,@camera1URL)
#new_file2 = fetch_image(@camera2Host,@oldFile2,@newFile2,@camera2Port,@camera2Username,@camera2Password,@camera2URL)
#new_file3 = fetch_image(@camera3Host,@oldFile3,@newFile3,@camera3Port,@camera3Username,@camera3Password,@camera3URL)
#new_file4 = fetch_image(@camera4Host,@oldFile4,@newFile4,@camera4Port,@camera4Username,@camera4Password,@camera4URL)
#new_file5 = fetch_image(@camera5Host,@oldFile5,@newFile5,@camera5Port,@camera5Username,@camera5Password,@camera5URL)

Now it is working

I did that too, sorry I didn’t mention it.

Great to hear that you’ve got it sorted.

I was struggling with the weather widget, a few pointers:

  • dashing needs to be restarted after the ohapp.rb file is edited
  • you may need to change /rest/items/Weather?type=json to /rest/WhateverYourWeatherGroupIsNamed?type=json (in ohapp.rb)
  • Any Item that you want to show in the weather widget must belong to the Weather group

I just started using your ohdimmer2 widget. Nice work. The widget works great for sending commands to openhab, but the dashboard does not update when openhab sends updates.

Openhab is indeed sending the updates, below is an example from my logs:

2015-12-21 16:52:39.584 [INFO ] [openhab.model.script.Dashboard] - Item Light_GF_Great_Ceiling has changed state from 0 to: 100
2015-12-21 16:52:39.584 [INFO ] [openhab.model.script.Dashboard] - POSTING: {“auth_token” : “openH4b”, “state” : “100”}
2015-12-21 16:52:39.585 [INFO ] [openhab.model.script.Dashboard] - URI: http://localhost:3030/widgets/Light_GF_Great_Ceiling; JSON = {“auth_token” : “openH4b”, “state” : “100”}

All my other widgets update just fine in the dashboard, it is only ohdimmer2 that will not.

@mbelleville - I haven’t looked at this in quite some time, so I’ll try my best. Can you send or past in the coffee script, as well as your line from the .erb?

I’ve been mostly absent here as i’ve basically moved away from openHAB for my HueLights (because the binding didn’t update the state values correctly) and Weather (they’re missing a ton of cool data from forecast.io) and moved them to rubygems which basically gave me access to those respective APIs. I even added a zWave door sensor that I’m running through node.js, because I coiuldnt get it to work for the life of me. Granted, as i’ve said before, i have zero tech background, as I’m a banker by trade, but can usually figure things out. OpenHAB & zWave I could not, and it wasnt for a lack of effort. The only thing I have openHAB for right now is connection to my Nest.

That said, I’m still running dashing for now, but am in the process of moving to a react.js front end, with a more Material UI theme. Biggest reason is site navigation on dashing is terrible, i mean just awful. But, I’m still using it now, and attached are some screen shots for a dashboard I’m using for my phone, via chrome webapps.