ActiON Dashboard 4.6.3 is here! (Now SmartTiles.click)

Assuming you are using the latest, unmodified version 4.4 and stock Weather device, if you clear the cache of the browser, does it solve the issue?

Did you try to create a different instance of the dashboard with just the weather tile selected as a device? If the problem persists, please privately send me the URL of a dashboard that only contains the weather and I will try to debug.

How do you use shortcuts? Are they just for normal web sites? Or is there more that they can do?

Thanks.

I use them to link to different instances of the dashboard application as suggested earlier in the thread. Ie shortcut to different rooms which include shortcuts back to master display. Just declutters the interface if you have a lot if things.

@625alex, I am wonder why you removed the read-only option for the dashboard? Is there another way to simulated it?

I didn’t think this is a useful feature. You are the first one to miss it.

To simulate it (ignore all incoming commands) add return [status:"ok"] right after line #242.

Is someone being naughty?

They are primarily used to link to other dashboards, but can link to any website.

In a future version I will add specialty links to emphasize linking to other dashboards.

Another very interesting use case described by @naq90

On a tablet I am fine using the dashboard, but on my smart phone my fingers tend to flip a switch while scrolling down the page. I figure I can do a read only version on the phone as a status board and links to an active board, if I need to flip a switch or change something.

@DarcRanger @625alex I also missed the read only feature. In my case I have step kids that are share custody. With read only on they can’t mess with the controls when they are not here (more import the wife’s ex can’t mess with them)

@johnosstyn. I went back to ActiON version 3 and copied the viewOnly input statement and added it under preferences. This I adapted the if statement using the new return stay phrase instead of return false And placed it in the same place @625Alex recommended. This way I have one App for ActiON 4.4 and a option to set read-only. The only thing to be aware of adding the return stay line or my additional modifications the buttons appear to move, but do not affect the switches. The do reset to the actual state after the next auto refresh or a manual one.

@625alex,

Thanks! After reading about using multiple dashboards, I am a shortcut master!

Would it be possible to create a tile that contains the name of the dashboard and looks different than a shortcut? I’d like to have a row of buttons that links to the different rooms in my house and would like the buttons to be in the same place on each dahsboard. So, I have Main, Kitchen, Entry, Basement, Hall. When I am on the main screen, I would like it to still say Main, Kitchen, Entry, Basement, Hall, but I want the Main tile to not be a shortcut and to be a different color from the other shortcut tiles so I can tell based on that which screen I am on.
If I tap Kitchen shortcut, then, that dashboard would still say Main, Kitchen, Entry, Basement, Hall, but on that dashboard, Kitchen would look different and not be clickable.

Thanks.
Todd

Figured since the stove, microwave and coffee maker clocks were blue not to mention all the led’s on my GE switches are blue. That I’d go with a blue theme on the dashboard. Icons that are important for me to know the status change red so I can see status at a glance, switches change to a different blue. Sorry about the glare in the picture. Looks so much better in person. I’d love to see how others have changed there dashboards.

2 Likes

I kind of had the same thoughts. I finally figured out how to change the icons (and add color) last night and figured out the tile color today. Still playing around with everything but for me personally I like all (or most) of the tiles the same color and then have them “light up when active”.
This is what I have so far but I am still very early into it:

Loving this more and more. The simplicity of setting it up, then to be able to customize it to everyones taste. Great job @625alex!!!

5 Likes

There are a lot of great UI ideas being shared in the forum… I personally don’t completely understand how/where to change it, nor am I good at design (I just know what I like and don’t). Maybe there is a place everyone could post their UI code so others like myself can plagiarize and offer infinite gratitude?

What would be really cool is if everyone could post it somewhere and have a feature in ActION that allows you to direct it to the different CSS files so you can sample the views and use the one you like most…

A boy can dream…:smile:

I am not good with CSS or any web design for that matter. It took me a while but I finally figured out how to “host” my own css and js files so I could manipulate them the way I wanted. There is a list of icons at Font Awesome that are already linked to this that you can choose from…cool stuff. So far I have only switched icons, added color when active and changed the tile colors. I won’t be able to get into the actual coding but I am more of a “change whats already there” kind of guy :smile:
If I get a chance I may be able to write something up on how to host your own files on GIT but I am still trying to figure out GIT myself and how it all works. Someone smarter and more familiar may do a better job as I will only be able to explain how I did it, that may not be the right way though.
Scott

1 Like

@swindmiller Iook forward to that guide. I have some custom devices that I need to add icons for, and color changing tiles and icons sound like something I could use down the road.

I’ll see what I can do but be warned it will crude :smile:

That would be great @swindmiller! Even crude is better than me trying to re-inventent the same-if-not-slightly-less-round wheel… a lot of times all I need is to be pointed in the right direction to figure something out. I sometimes struggle with where to look because I don’t understand conceptually how the whole thing is plumbed together… case in point, I didn’t realize Github was hosting files for public consumption, I just thought they were there for source code control.

Tons of respect for @625alex and all those that make this look so easy… changing the world one line at a time!

I’m in for being eternally grateful for this too… I spent the last 30 minutes on GitHub going “Hmm…yup that should work” on just about every random button I clicked.

Needless to say, I clicked a bunch of things and not a dang thing happened. (And I’m slightly more confused than I was to begin with.)

Thanks!

##B##

Here is a “dirty” write up of how I fumbled thru changing icons and tile colors. Sorry if I missed steps or if I am not clear and may not be the best for troubleshooting since I barely got thru it…lol, but I will try my best.

So you have to setup a Github account and make sure you confirm your email otherwise the web-hosting wont work.
When it asks you to setup a repository make sure you name it: GitHubUsername.github.io this will be the repository you will host the files on. You can read more about setting that up here: https://pages.github.com/. It will walk you thru everything and recommends creating an index.html file just for testing. As the page says it can take a little bit at first but then updates pretty fast.

I am on Windows so I used the windows client and got really confused using it since I really don’t fully understand Github…lol It will basically create a folder on your hard drive and sync it with your Git repository. Once you make changes to a file locally the Git client will ask you to “commit” the changes and then sync it. FYI…one place I got hung up is it would show me “uncommitted” changes, when I edited a file, and you have to type a summary of the file (I just typed test) and the commit option is available, then you can sync it. I would test to make sure your file is there by browsing to http://username.github.io/WhateverFileYouUploaded and making sure it comes up.

To change the icons I needed: script.min.4.4.js
and the tiles I needed: style.min.4.4.css

The current copies of those are at: https://625alex.github.io/ActiON-Dashboard/script.min.4.4.js and https://625alex.github.io/ActiON-Dashboard/style.min.4.4.css
I opened both the links in IE and was able to download them. Now another place I got screwed up (and am still screwed up) is the formatting of these files, for me there is no formatting. Its all one line which makes reading it very difficult so I just searched and change what I needed. When I did change the formatting at all it did not work and was unusable. I kept a backup of the original to revert back to when I messed up. This may just be my screw up and may not be an issue for you. I am hoping someone more knowledgeable will chime in and tell me what I am doing wrong or how to correctly download the files:)

You will also need to change the pointer to these files in the smartapp. So goto the IDE and edit the app and around line 417 you can point to the new style.min.4.4.css file. Mine looks like this:

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css" />
<link href="https://swindmiller.github.io/style.min.4.4.css?v=4" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet' type='text/css'>

Not sure what the ?v=4 is so I just left it in

script.min.4.4.js is around 428:

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js" type="text/javascript"></script>
<script src="https://625alex.github.io/ActiON-Dashboard/coolclock.min.js" type="text/javascript"></script>
<script src="https://swindmiller.github.io/script.min.4.4.js" type="text/javascript"></script>

Also on 449 is a reference to the style.min.4.4.css file again so I changed that as well (don’t know if it needed):

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css" />
<link href="https://swindmiller.github.io/style.min.4.4.css?v=4" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Mallanna' rel='stylesheet' type='text/css'>

Save and Publish (for Me).

I personally would test if this is working with the unaltered files from 625alex’s site first. Once your sure everything is working with the files from your site then you can edit them and test.

Icons are pulled from Font Awesome here: http://fortawesome.github.io/Font-Awesome/icons/ so just change the name of the icon you want to change in the .js file. Each icon will be referenced twice, once for active and once for inactive. You can also change the color of the icons by adding the name or hex value of the color. So this:

<i class='fa fa-user'>

would be changed to this:

<i class='fa fa-user' style='color:#59FF00'>

Some can also be set opaque like this:
<i class='fa opaque fa-user'>
good for inactive icons.

The tile color is in the .css file right in the beginning. Hopefully that one is self explanatory.

Sorry if this is long winded or incomplete. I wrote this based on how I did it. Is there a better way, probably, and I encourage anyone else who wants to chime in to do so. I am not use to typing up tutorials :slight_smile:

Let me know what I missed :smile:

EDIT: I was able to use http://jsbeautifier.org/ to paste just the JS script to make it more readable and that still works. Dont try this tool with the CSS file though.

5 Likes

@breader3
That was me last night!!!