I am thinking the best I might be able to do is offer an option where I pass the JSON and CSS back to the driver and it does the secure storage. I'd expect it would have it's limitations...
1 Like
Could send the text to an endpoint in the app and have it do the write.
Could write an app.... 
But yes, that is likely where I may end up... I have visions of writing a broader app than just for this editor, so it may hasten that work...
Port 39501 on the driver?
Probably a stretch to expect the dashboard editing to always happen on the same device. Would make it easier... but... An app will make more sense, and drag me into that space, which is a good thing.
1 Like
@vitaliy_kh - I may need to take a little longer to deliver the solution I need to for your (and others) Hub Security setup. I'll need to get back to you when I get this up and running....
This is what I was talking about earlier re an app I had in mind.... not intending to develop the whole thing before releasing it to resolve the hub security issue.... but it will be the app I expect that will encapsulate this option.
No problem, I can wait for the fix,
And Thank You very much for your help and support.
1 Like
Hey, just got back last night and got around to trying this out. I did the update, made some changes to the dashboard and it still did not work. Did some playing around and I think the issue that some are stumbling upon is the case sensitive nature of Unix files.
Somewhere along the way I had blah\blah\dashboard.css in below mentioned box. I don't recall if I put that there from the instructions or it was there from the install. Either way, after changing it to the proper case sensitive name, it started working.
The above picture shows me using port 8080 but it works just as well without that being specified.
Could you explain the meaning of the checkmarks beside the tile. If I click on tile-6 as shown on the right it will deselect the checkbox and then show the various CSS elements to edit, which is the opposite of tile-5 above it.
It would probably become evident if I experimented but I'm sure you are striving for an intuitive experience.
Now I have to experiment to see what I can do.
2 Likes
Think you've probably hit on the major issue right there; at its heart HE is a Linux distro so character case is absolutely a concern.
Thanks for persisting, and nice to hear you got it working. I will look at the case-sensitivity issue. Between Java (Groovy) and Linux, I would expect it to be case-sensitive, as @thebearmay pointed out, there must be something I have missed along the way.
The ticks dotted throughout the editor are there to indicate whether to include the settings in the CSS. They allow you to configure the styling for a tile for part of a tile, e.g. the borders, but not include the settings in the CSS that is applied to the dashboard. You can then simply check the tick-box and the changes are applied next time you Save/Export the CSS and refresh the dashboard.
1 Like
I could probably explain that a little better....
There are two files stored by the editor, the Settings JSON file and the CSS file. These are the two files linked at the top-right of the editor pop-up and stored in the HE hub's local file storage, using the dashboard name as the file name, one with a .json extension, the second with a .css extension.
The Settings JSON file stores a close representation of the details you see on screen. If you see a checkbox, it will likely record a true/false value, if you see a number on screen, it will store that value, etc. This file provides an easy translation between the on-screen detail and storing those for recall next time you open the editor. The information recorded will be as it is on-screen with no "filtering" applied.
The CSS file contains the styling you want to see applied to the dashboard and it's tiles. This takes the settings on-screen and translates those to the CSS code required to apply the settings. If you select to hide the title for a tile, while a value of true may be stored in the Settings file, a slightly more verbose set of code is included in the CSS file. This CSS file is then imported into the dashboard via the import statement in the Custom CSS section of the dashboard setup included in the setup instructions.
The checkboxes dotted throughout the editor allow for settings to be configured and stored in the Settings file, while easily toggling when the settings are translated into the CSS code output in the CSS file. If a complex set of custom CSS text or border setup is configured, the inclusion of this in the CSS applied to the tile / dashboard can be quickly turned off, without losing the settings already crafted, allowing for these to be easily turned back on once they are required, without needing to re-enter all the details again.
I could expand more on this with copying the details from another tile.... but will save that for another day....
2 Likes
When you enter the dashboard, you will see a message in the picture below.
Is there any way to get rid of this?
1 Like
Once you click save and export on the editor this should create the settings and css files. Once this has been done and you refresh the dashboard you should no longer see the warning pop up.
1 Like
It's very successful.Thank you.
1 Like
I have added some more notes to the installation instructions to emphasise this point, so hopefully this will help others. Thanks for pointing this out.
1 Like
Please don't misunderstand; I think this is a wonderful effort and will make things a LOT easier for us going forward.
I encountered a couple of problems using it that I thought I should mention. The biggest problem was entering CSS into the freeform fields. If it encounters and error, it doesn't save the file and you can lose all the work you put into a particular dashboard.
Although you make it much easier to match background colors, it is tedious if you have a number of tiles to go through. It would be great if one could create a color or two and use those in each tile instead of messing with each tile's color selector. Sometimes we can't just copy the formatting from one tile to all the rest.
It would be great if you added the clock tile as special somehow. The hands on the analog clock tend to disappear on some backgrounds.
I ran into a need for hierarchy of formatting. If I copied one tile to another, I lost the formatting I assigned to the tile specifically. It might work better if one could copy the formatting from one tile, then override the copy by changing a selection or two in the tile specifically.
All that aside, this is a great effort and makes a truly custom appearance much, much easier.
2 Likes
Thankyou very much for the great feedback @draythomp. In short, you read my mind, with a few extras thrown in that I fully support 
A very good point and something I will try to deal with as a priority. I'll need to think about exactly how it may work, but can definitely appreciate the frustration that could occur when this happens. The easiest think I expect would be to take a backup of both the CSS and settings JSON file when you first open the editor, but will think about it some more.
Completely agree and this is in fact something I plan to build into a broader plan to create an App for this editor and other dashboard utilities I have created. I would like to, inside the HE custom app, allow for colours to be configured, named and then made available across the "devices" within the app, including this editor. As you describe, I would want some sort of selector alongside the colour picker, providing easy access to the preset colours, and consistency across elements that use them. Great suggestion!!
I wasn't 100% sure what you meant by this? I can kind of get what you are describing as the issue of disappearing hands, but are you asking for a specially constructed clock display, or some way of editing the existing tile template?
Another excellent suggestion, and literally something I am working on at the moment, and hopeful I may be able to release.... soon Here's a sneak peek....
When a tile has it's formatting copied from another, as is shown below, the settings that are copied will be disabled. To adjust a specific setting for the target tile, hover over the title for the setting and click the edit button that appears, enabling the setting to be edited. The value for the setting will then override the value from the copied tile.
I am probably two thirds of the way through developing this, with mostly the storing of the settings and CSS left to go.
Again, thankyou for taking the time to provide such good suggestions and feedback, I really appreciate it.
Simon
1 Like
Yes, I was too vague on the analog clock. I was suggesting that we be able to control the specifics of the existing clock, not that you should build a whole new clock.
I mean, if you want to build a new clock, that would be fun and interesting to play with, but being able to change the color of the existing clock hands would be easier (I think).
On one particular dashboard, I have to have white hands to be able to see them at all and a red second hand is the most visible color I've tried. That led me to using:
#tile-0 > div.tile-contents > div > div.clock-hour {
background-color: white;
}
#tile-0 > div.tile-contents > div > div.clock-minute {
background-color: white;
}
#tile-0 > div.tile-contents > div > div.clock-second {
background-color: red;
}
to get the appearance I needed. Without changing the colors, the clock had no hands in this particular instance. When I used your editor on this dashboard, I simply stuffed that code into the custom CSS and it worked fine.
This is a reasonable way to do it, and could suffice forever. I thought I would bring it up because others may have the same problem.
The way you plan on handling the hierarchy of styles is pretty awesome. I'm looking forward to trying it out.
Now a question that I may have overlooked in this forum thread. How does one hide the CSS editing tile? Is there a preferred way that people have come up with? It would suck if the neighbors kids redesigned my dashboard for me sometime when they're over here.
2 Likes
Not something I have made clear from memory, but you can literally remove the tile and even disassociate the device from the dashboard if you want. The editor is only required while modifying the css file output, but during normal operation of the dashboard is not needed
1 Like
Re the clock, might be down on the list, but happy to take a look at some point.
