Home Automation Dashboard (HAD)

Yeah, I guess on second look they both have the same basic method structure with setLevel(int) but is the GE Link the one that acts as a hub to actually control the bulbs instead of ST directly controlling them?

Well my refreshes seem to work now oAuth is fixed. Now I have a couple of questions -

I am trying to make this work on a retina iPad, it has plenty of resolution so I am making the tiles a lot smaller so I can fit 7x4 or maybe 7x5 tiles. I can make them smaller OK but am running into the text sizing problem. Iā€™ve had a look around and it looks like a lot of the font sizing is inherited from somewhere - is there a master CSS that I can make changes to to reduce all the text and icon sizes? I havenā€™t found it yet.

Secondly, has anyone perfected a link icon to jump between multiple dashboards?

Thanks!

You can verify that you have the heroku remote by running the following command:

$ git remote -v

There should be a heroku entry. If you donā€™t see that, you can manually add the remote by running this command:

$ heroku git:remote -a your-app-name

If you started the installation on a different machine, you may not have the right SSH keys installed on your current machine. You can check by running this command:

$ heroku keys

And you can create a new on your current workstation by running:

$ heroku keys:add

Hold off on that until (if) heroku / git complains about missing SSH keys, though.

I figured it out - in assets/stylesheets/application.scss, for the majority of text, h1 controls the size, and for the icons, h2 controls the size. Some widgets explicitly override these and would need their individual stylesheets to be edited.

This worked. Thanks!!!

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.

1 Like

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