Home Automation Dashboard (HAD)

Any luck with getting this to work on a Kindle Fire? I have one laying around that I would love to put into use.

I’ve been toying around with a more consistent style. It’s checked into the new-style branch, if anyone wants to check it out. Here is what it looks like:

Yep, it mostly worked. I had to edit the stylesheet (instructions listed above) so that it fit more uniformly on the Kindle’s display, but it looked and worked just great.

I didn’t go the last step of setting it up with Motion Detection to turn the screen on, but I got the dashboard itself working great.

Looks great! I love the high contrast look.

Awesome… now I just need to figure out where we put it.

Here is my take on it, I was actually working on something similar when @florianz told me about this earlier tonight.

I kept specific icons, used green for on and orange for alerts (open, unlocked, motion, missing presence)

Ignore my Thermostat it’s a work in progress… or not … also ignore the 0 degrees on the Bath temp for some reason HAD can’t get the temp from it I haven’t troubleshot it much.

2 Likes

I’ll add my WIP thermostat to my GitHub this afternoon for you to test and look at for your own version, I don’t have a real thermostat so it’s hard for me.

@florianz I like it. I don’t want to offend, but I probably like the old way better though :-/ . More specifically, I really, really liked @ronnycarr 's blue/grey/green color scheme and will likely emulate that.

When you do get it added, I’ll jump on any sort of port to a traditional thermostat device type.

OK, I’m a little slow but I have finally got this to fit nicely on my iPad. Here is what I did, and in general this should work for any other tablet. Hopefully this will pull together the various hints in the rest of the thread, apologies for the repetition to those of you who figured this out way ahead of me!

The first thing to realize is that you need to match the tiles to the aspect ratio of the tablet. If you do not, the tablet will zoom to one of the dimensions and the other dimension will require scrolling to see it.

The first step to fixing the aspect ratio is to get the number of tiles close to right. Play with the dashboard and add lines and columns until you are close. You should have less than half a tile scrolling in any direction when you get there. For the iPad Retina, 7 across by 5 wide worked for me.

The next step is fine tuning. Edit the file assets/javascripts/application.coffee and look for a line like the following:

Dashing.widget_base_dimensions ||= [145, 145]

This defines the aspect ratio of the individual tiles, and you need to make a slight change so that they all fit properly. On the iPad, I had around half a tile scrolling to the left and right so I took 7 off the X dimension:

 Dashing.widget_base_dimensions ||= [138, 145]

Now the tiles fit perfectly.

As a last step, I needed to slightly reduce the text and icon sizes for the tiles now they were slightly smaller, and some tiles with more text on were stretching the tile downward. This is done in /assest/stylesheets/application.scss. You are looking for the following code:

h1 {
  margin-bottom: 6px;
  text-align: center;
  font-size: 150%;
  font-weight: 400;
}
h2 {
  text-transform: uppercase;
  font-size: 380%;
  font-weight: 700;
  color: $text-color;
}

h1 defines the size of the text and h2 defines the size of the icons. I changed h1 to 140% and h2 to 340% and everything fit perfectly.

If you are making drastic changes to the tile aspect ratio you may run into trouble with a couple of specific widgets that override these values, for instance Weather, in which case you will need to go in and edit the scss files in the appropriate widgets directory - it wasn’t necessary for the iPad.

As a final point, I am using Kiosk Pro Lite (Free) to display the page without an address bar, its a cool app. The only thing I need to work out now is how to have the screen dim when it isn’t in use. There is a paid for version of Kiosk Pro that might do this, I am still checking.

Hope this helps someone.

Edit: Looks like Kiosk Pro Plus enables screen dimming on idle - the catch is it costs $40!

3 Likes

Ok, can someone tell me the difference between this dashboard on that ActiON dashboard? Are they 2 different dashboards? OR the same w/ 2 different names??

I was looking for a primer to get this started, because there are so many posts and where to start from scratch is a little hard to figure out.

Thanks

Morgan

Go to about post 389 read the next few posts. Gives you my take. There is now another Dashboard from another developer in the works. At the end of the day it’s really a matter of skill and preference.

Nice @mattjfrank that is what i was hoping for. Quick question, are you running these on a home machine and having your tablet connect to those? Are they running any scripting language on the backend or all HTML and javascript ?

Thanks,

Morgan

HAD is hosted on a Heroku Account, it’s html, javascript, and dashing code

actiON is hosted on ST servers via it’s SmartApp, it’s javascript and thml

Ha! No offense taken. You are free to modify the styling to your own preferences, of course. This is just an effort to find a more consistent styling for the dashboard as it lives in the main repo. I felt the old styling was a bit confusing.

Is there an easy way to break the various looks out into easily-selected themes? That way in addition to the actual functionality, people could contribute their own skins for the dashboard.

1 Like

@btk: That would certainly be doable, but honestly it’s not on the top of my priority list. Currently, my primary goal is to make this much easier to install, so that more people can start using this app. I got side tracked with the styling changes, but that was only a days worth of work.

1 Like

@florianz I’ve spent so much time trying to “realize” and easy way of deployment. Anyone have any input?

One of my thoughts was during the SmartApp install you choose your devices, preferences etc and at the end it spits out the code you’d need to add to your .erb file. Then for the Heroku part some type of script that automates the install steps.

Does it have to be hosted on Heroku? The dashing code is just using Ruby and Coffeescript right? Could I just put it on my own server or machine or is there an issue with that?

Are you able to use the free Heroku or do you need to set up a paid account on it?

Morgan

It has to be even easier than that. You should be able to add widgets and setup your dashboards right from within your browser - drag & drop style. The SmartThings app should be published, so that people don’t have to copy & paste the code into the IDE. Lastly, the deployment to Heroku should be super easy, using a “Deploy to Heroku” button. So ideally, all people would have to do would be signing up for a Heroku account, and clicking a button to install the dashboard app.

Not at all, you can install it locally on your server, just like any Rails app. You’ll need to set the config variables in your server environment, and your server will need to be reachable from the SmartThings clouds / internet, so to propagate state changes to your dashboard. Just running dashing start in the hadashboard directory should get you 90% of the way there. You are on your own, though, since I don’t have a local install. Once you get it to work, maybe you can post some step-by-step instructions here, so others can try that as well.
If you deploy this to Heroku, the free instance is all you need. No need to setup a paid account.

1 Like

@florianz I’ll try and do a local install, but i’m going to set up the cloud install first. I’ll need to create a new VM on my local set up, so I can install rails and get it running without interfering w/ my other development. It will be a while, but when i get that running I’ll make step-by-step instructions for people to use that.

What tablets are people using for running this? I’ve seen Nexus 7, iPad… what are people having the best luck with ? I would be curious if there were pros/cons to any of the different tables for it.