Elemental Theme

User avatar
nayr
Posts: 430
Joined: Tuesday 11 November 2014 19:42
Target OS: Linux
Domoticz version: github
Location: Denver, CO - USA
Contact:

Elemental Theme

Post by nayr » Wednesday 06 January 2016 22:24

After a long night without internet and then a week of living with the results, came up with this theme. Since its based off element-light I am just calling it elemental as a nod to the original.. Who said OpenSource has to be ugly? Ive seen many attempts to start the UI over and I am guilty of that, yeah we suck, so lets get it done through pure old CSS.

Compact Dashboard (Click to Zoom)
Image

Tested on Chrome, Firefox and Safari, and Mobile Devices. Please test in IE, I have not had a license to Windows since Win2k.

Download v1: https://www.dropbox.com/s/2a23u553ku4un ... 1.zip?dl=1
Download v2: https://www.dropbox.com/s/76yx3hdr2j88y ... 2.zip?dl=1
Download v3: https://www.dropbox.com/s/1fbsizxv1s9hd ... 3.zip?dl=1
Download v3b: https://www.dropbox.com/s/rxal6c53npr8i ... b.zip?dl=1

This may or may not be merged, it could be waiting to simmer before committing.. but its always the latest (of mine):
Update to latest CSS from my Repo (v4+): https://raw.githubusercontent.com/nayrn ... custom.css

Now included in Domoticz by default from v2.4115! Thanks everyone :D
Last edited by nayr on Tuesday 19 January 2016 9:18, edited 26 times in total.
Debian Jessie: CuBox-i4 (Primary) w/Static Routed IP and x509 / BeagleBone with OpenSprinkler / BeagleBone Planted Aquarium / 3x Raspbery Pi2b GPIO Slaves
Elemental Theme - node-domoticz-mqtt - Home Theatre Controller - AndroidTV Simple OSD Remote - x509 TLS Auth

User avatar
remb0
Posts: 801
Joined: Thursday 11 July 2013 22:21
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: Elemental Theme

Post by remb0 » Wednesday 06 January 2016 22:56

very stylish! my compliments.

User avatar
nayr
Posts: 430
Joined: Tuesday 11 November 2014 19:42
Target OS: Linux
Domoticz version: github
Location: Denver, CO - USA
Contact:

Re: Elemental Theme

Post by nayr » Thursday 07 January 2016 1:45

Thank you,

Now for the ToDo list:
  • Figure out missing CSS for Device Highlighting on Update
  • Decide if I want to fix the time/date/sunrise line or keep it hidden, I didnt really miss it so I am thinking of continuing to leave it out.
  • Code Cleanup
Last edited by nayr on Tuesday 12 January 2016 19:30, edited 3 times in total.
Debian Jessie: CuBox-i4 (Primary) w/Static Routed IP and x509 / BeagleBone with OpenSprinkler / BeagleBone Planted Aquarium / 3x Raspbery Pi2b GPIO Slaves
Elemental Theme - node-domoticz-mqtt - Home Theatre Controller - AndroidTV Simple OSD Remote - x509 TLS Auth

User avatar
nayr
Posts: 430
Joined: Tuesday 11 November 2014 19:42
Target OS: Linux
Domoticz version: github
Location: Denver, CO - USA
Contact:

Re: Elemental Theme

Post by nayr » Thursday 07 January 2016 6:34

v2 released, Sensors again flash when sensor is updated, lot more bug fixes and tightening things up..

going to let it simmer for a while and see how it grows on me, I'd very much like to accordion the dashboard items so they can be compacted and expanded, but I dont think I can do it without hacking the main pages.. so poo.
Debian Jessie: CuBox-i4 (Primary) w/Static Routed IP and x509 / BeagleBone with OpenSprinkler / BeagleBone Planted Aquarium / 3x Raspbery Pi2b GPIO Slaves
Elemental Theme - node-domoticz-mqtt - Home Theatre Controller - AndroidTV Simple OSD Remote - x509 TLS Auth

User avatar
proohu01
Posts: 177
Joined: Friday 17 October 2014 12:20
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: Elemental Theme

Post by proohu01 » Thursday 07 January 2016 8:39

looks very good! I like it a lot.
The only problem I have with it so far is that the sliders are out of frame. (I tried it in Chrome 47 and IE11)
frame_slider.png
Frame Size and Slider
frame_slider.png (19.15 KiB) Viewed 9962 times
Pi 2 B | Pi Camera | PiFace 2 | RFXtrx433E (KaKu + Oregon Scientific) | Plugwise (9 Circles) | Aeon Z-Wave stick (Fibaro - dimmers, sockets, RGB, screens/blinds) | RFXMeter (Kwh/water/gaz) | WOL | Onkyo Receiver | RTC | Hikvision | Netatmo | Satel Integra

User avatar
ThinkPad
Posts: 1754
Joined: Tuesday 30 September 2014 8:49
Target OS: Linux
Domoticz version: beta
Location: The Netherlands
Contact:

Re: Elemental Theme

Post by ThinkPad » Thursday 07 January 2016 9:36

Looking good! Maybe create a pull request at the Github page of Domoticz, so it can replace the original Element-Light theme? This one looks much better.
ThinkTheme - theme for Domoticz
My (Dutch) blog: http://thinkpad.tweakblogs.net - My Domoticz scripts: Bitbucket
I'm not (very) active anymore on this forum as i don't use Domoticz anymore.

User avatar
nayr
Posts: 430
Joined: Tuesday 11 November 2014 19:42
Target OS: Linux
Domoticz version: github
Location: Denver, CO - USA
Contact:

Re: Elemental Theme

Post by nayr » Thursday 07 January 2016 11:14

proohu01 wrote:looks very good! I like it a lot.
The only problem I have with it so far is that the sliders are out of frame. (I tried it in Chrome 47 and IE11)
frame_slider.png
In chrome can you right click in that element, inspect and then tell me the table element name, ie: body table#itemtablesmall

I must of missed that one in the css, there's alot of different buttons and its hard to test em all.. those double icon tables probably have a unique name that I missed.
Last edited by nayr on Thursday 07 January 2016 11:24, edited 2 times in total.
Debian Jessie: CuBox-i4 (Primary) w/Static Routed IP and x509 / BeagleBone with OpenSprinkler / BeagleBone Planted Aquarium / 3x Raspbery Pi2b GPIO Slaves
Elemental Theme - node-domoticz-mqtt - Home Theatre Controller - AndroidTV Simple OSD Remote - x509 TLS Auth

User avatar
nayr
Posts: 430
Joined: Tuesday 11 November 2014 19:42
Target OS: Linux
Domoticz version: github
Location: Denver, CO - USA
Contact:

Re: Elemental Theme

Post by nayr » Thursday 07 January 2016 11:17

ThinkPad wrote:Looking good! Maybe create a pull request at the Github page of Domoticz, so it can replace the original Element-Light theme? This one looks much better.
if I did that then I'd need to make an elemental-dark :P not that it would be all that much trouble since the hard part is getting polished.

but yeah, let me flush out any outstanding issues and cleanup the code so its easier to maintain.. dont want another half assed theme teasing people :)
Debian Jessie: CuBox-i4 (Primary) w/Static Routed IP and x509 / BeagleBone with OpenSprinkler / BeagleBone Planted Aquarium / 3x Raspbery Pi2b GPIO Slaves
Elemental Theme - node-domoticz-mqtt - Home Theatre Controller - AndroidTV Simple OSD Remote - x509 TLS Auth

User avatar
proohu01
Posts: 177
Joined: Friday 17 October 2014 12:20
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: Elemental Theme

Post by proohu01 » Thursday 07 January 2016 12:40

In chrome can you right click in that element, inspect and then tell me the table element name, ie: body table#itemtablesmall
body table#itemtablesmalldoubleicon
Pi 2 B | Pi Camera | PiFace 2 | RFXtrx433E (KaKu + Oregon Scientific) | Plugwise (9 Circles) | Aeon Z-Wave stick (Fibaro - dimmers, sockets, RGB, screens/blinds) | RFXMeter (Kwh/water/gaz) | WOL | Onkyo Receiver | RTC | Hikvision | Netatmo | Satel Integra

User avatar
nayr
Posts: 430
Joined: Tuesday 11 November 2014 19:42
Target OS: Linux
Domoticz version: github
Location: Denver, CO - USA
Contact:

Re: Elemental Theme

Post by nayr » Thursday 07 January 2016 23:48

hrmm, it dont appear that I can fix that without first getting a core patch pushed through first.

The problem is all the columns in the table have an ID I can catch and set the padding, but the slider does not have an ID I can catch and pad.

The width of the slider is fixed also, cant seem to override it through css alone.. positioning is off on all sliders, I cant get them to move, but those doubleicon tables show the issue more dramatically.

I'll keep playing with it, see how the default theme is getting by without this being an issue.. might have to resize and respace all the devices.. but for the sake of future theme designers I think the best solution would be give that column an ID.

You can see in the lower screenshot another issue I face, the Device Name color is hardcoded, if I wish to keep highlighting on update I cant over-ride it.. not very theme friendly, im stuck with accepting the hardcoded color scheme.. luckily I made it work, but it wont with a dark version.

I'd also like to see ability to add custom javascript to a style, dont think I can do this as it is.. but I'd like to add some accordion effects to make a more compact version of this that expands as you click.. it would bring domoticz's native UI and my own in-house UI pretty much in line.. I abandoned my custom UI for domo long ago.. The reason I want to add the accordion effect is to get all my devices in one dashboard without scrolling.. better experience for large touch screens IMHO, if you have to drag to scroll you might as well tap to enlarge.
Attachments
Screen Shot 2016-01-07 at 2.47.01 PM.png
Screen Shot 2016-01-07 at 2.47.01 PM.png (21.49 KiB) Viewed 9813 times
Debian Jessie: CuBox-i4 (Primary) w/Static Routed IP and x509 / BeagleBone with OpenSprinkler / BeagleBone Planted Aquarium / 3x Raspbery Pi2b GPIO Slaves
Elemental Theme - node-domoticz-mqtt - Home Theatre Controller - AndroidTV Simple OSD Remote - x509 TLS Auth

User avatar
nayr
Posts: 430
Joined: Tuesday 11 November 2014 19:42
Target OS: Linux
Domoticz version: github
Location: Denver, CO - USA
Contact:

Re: Elemental Theme

Post by nayr » Friday 08 January 2016 5:43

Version 3 released: https://www.dropbox.com/s/1fbsizxv1s9hd ... 3.zip?dl=0

this version came out frustration of spending hours trying to fix the sliders and getting nowhere, try to make a bit more room on the right side of the slider and the slider's fixed with just grows larger to take up that new space :evil: gotta be some javascript messing with me.

Whats New:
- Minor Bug Fixes.
- More Rounded Edges.
- More Transparency.
- No Icons in Main Menu.
- Menu Themed to match.
- more polishing of rough edges.

Screenshots:
Image
Image
Debian Jessie: CuBox-i4 (Primary) w/Static Routed IP and x509 / BeagleBone with OpenSprinkler / BeagleBone Planted Aquarium / 3x Raspbery Pi2b GPIO Slaves
Elemental Theme - node-domoticz-mqtt - Home Theatre Controller - AndroidTV Simple OSD Remote - x509 TLS Auth

raym
Posts: 127
Joined: Tuesday 03 November 2015 6:07
Target OS: Linux
Domoticz version: beta
Contact:

Re: Elemental Theme

Post by raym » Friday 08 January 2016 6:44

This is looking really nice. Thanks for your efforts.

User avatar
proohu01
Posts: 177
Joined: Friday 17 October 2014 12:20
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: Elemental Theme

Post by proohu01 » Friday 08 January 2016 8:22

nayr wrote: this version came out frustration of spending hours trying to fix the sliders and getting nowhere, try to make a bit more room on the right side of the slider and the slider's fixed with just grows larger to take up that new space :evil: gotta be some javascript messing with me.
I'am almost sorry I mentioned the bug :D
Version 3 looks even better. To bad it didn't fix the slider bug. Thank you for the effort.
Pi 2 B | Pi Camera | PiFace 2 | RFXtrx433E (KaKu + Oregon Scientific) | Plugwise (9 Circles) | Aeon Z-Wave stick (Fibaro - dimmers, sockets, RGB, screens/blinds) | RFXMeter (Kwh/water/gaz) | WOL | Onkyo Receiver | RTC | Hikvision | Netatmo | Satel Integra

User avatar
nayr
Posts: 430
Joined: Tuesday 11 November 2014 19:42
Target OS: Linux
Domoticz version: github
Location: Denver, CO - USA
Contact:

Re: Elemental Theme

Post by nayr » Friday 08 January 2016 11:05

Thanks, yeah it just keeps looking better the more I refine it.. I think I am nearing the finish line though, ive gone through everything I can find trying to make it please me more and I am quickly running out of things to refine.

and hot on its heels: elemental_v3b.zip @ https://www.dropbox.com/s/rxal6c53npr8i ... b.zip?dl=1

Changes:
I was not entirely happy with the top menu, keeping with my minimalist approach I redesigned it with vigor.
gone: domoticz name, icon, app version.. was nice knowing yeh, but well.. I know you, and dont need to be reminded on every page.
few font tweaks
fixed background if you resize it larger than the image, now scales (you need a big monitor to do this)

Known Issues due to JavaScript: (fixes likely require more than I can do through css alone)
Slider Position is Funky, would perfer more padding to the right.. Should be able to give column an ID and not impact other themes.
Since Menu Icons are hidden by default, minimizing the theme til the point of loosing text wont restore icons.. Should be able to modify JS that hides text to show icon without impacting other themes.

See Attached screenshot:
Image

Plan: Once I am completely happy with the design (id say >97% there), I will dig into the base code and see if I can make a few small alterations that wont mess with the other themes but will allow me to address the issues with my theme. Then submit it all in a push request so everyone's got it preinstalled and displayed perfectly. The code dig is going to tempt me to get real fancy like with the javascript.. Ive done my best to keep it to just pure CSS, but the theme engine feels kinda tacked on.
Debian Jessie: CuBox-i4 (Primary) w/Static Routed IP and x509 / BeagleBone with OpenSprinkler / BeagleBone Planted Aquarium / 3x Raspbery Pi2b GPIO Slaves
Elemental Theme - node-domoticz-mqtt - Home Theatre Controller - AndroidTV Simple OSD Remote - x509 TLS Auth

User avatar
nayr
Posts: 430
Joined: Tuesday 11 November 2014 19:42
Target OS: Linux
Domoticz version: github
Location: Denver, CO - USA
Contact:

Re: Elemental Theme

Post by nayr » Tuesday 12 January 2016 21:08

merged in with upstream Domoticz, this theme will be included in the next release, there are some more fixes and changes.. largely for mobile devices and small screens.

I'll try to maintain this so it continues to absorb more features, cheers :mrgreen:

https://github.com/domoticz/domoticz/tr ... /elemental

To Update your existing theme with the latest release, just grab this custom.css from the link above and replace it with the one provided in my .zip file.

Displays correctly on mobile:
Image

was able to get a little bit more padding on the side of the sliders, its not ideal (only 5px) but I didnt want to impact other themes too much.. I am still trying to come up with a better solution that will make it less of an issue.

The problem is in the default theme you have a smaller rounded div for the device NAME that floats inside the bigger one, the JavaScript sets the slider width based on the width of that element.. Well if you to go with a full width device NAME on top, well that means now your dimmers are now oversized by about 10px, looking at other non-default themes this problem is a bane plaguing them all.

I am still going to try to fix it the right way, hopefully without causing more problems to existing themes.. and actually helping them out.. Its not your fault @proohu01 that I am obsessed with this issue, I ran into it years ago when first tried to make a domoticz theme, hit this problem and gave up, I am just finally sick of nobody doing anything about it.
Last edited by nayr on Wednesday 13 January 2016 10:18, edited 1 time in total.
Debian Jessie: CuBox-i4 (Primary) w/Static Routed IP and x509 / BeagleBone with OpenSprinkler / BeagleBone Planted Aquarium / 3x Raspbery Pi2b GPIO Slaves
Elemental Theme - node-domoticz-mqtt - Home Theatre Controller - AndroidTV Simple OSD Remote - x509 TLS Auth

User avatar
proohu01
Posts: 177
Joined: Friday 17 October 2014 12:20
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: Elemental Theme

Post by proohu01 » Wednesday 13 January 2016 8:21

nayr wrote: I am still going to try to fix it the right way, hopefully without causing more problems to existing themes.. and actually helping them out.. Its not your fault @proohu01 that I am obsessed with this issue, I ran into it years ago when first tried to make a domoticz theme, hit this problem and gave up, I am just finally sick of nobody doing anything about it.
Still looking good. Thanks for the effort. I like your mentality of biting into this problem :D
Pi 2 B | Pi Camera | PiFace 2 | RFXtrx433E (KaKu + Oregon Scientific) | Plugwise (9 Circles) | Aeon Z-Wave stick (Fibaro - dimmers, sockets, RGB, screens/blinds) | RFXMeter (Kwh/water/gaz) | WOL | Onkyo Receiver | RTC | Hikvision | Netatmo | Satel Integra

User avatar
ThinkPad
Posts: 1754
Joined: Tuesday 30 September 2014 8:49
Target OS: Linux
Domoticz version: beta
Location: The Netherlands
Contact:

Re: Elemental Theme

Post by ThinkPad » Wednesday 13 January 2016 8:31

Woah... you are really putting a good effort into it! Great!!
ThinkTheme - theme for Domoticz
My (Dutch) blog: http://thinkpad.tweakblogs.net - My Domoticz scripts: Bitbucket
I'm not (very) active anymore on this forum as i don't use Domoticz anymore.

jjnj
Posts: 231
Joined: Thursday 31 July 2014 13:51
Target OS: Windows
Domoticz version:
Location: NL
Contact:

Re: Elemental Theme

Post by jjnj » Wednesday 13 January 2016 9:53

It looks great, thank you!

Verstuurd vanaf mijn LG-H960 met Tapatalk

Albsucher
Posts: 72
Joined: Wednesday 17 July 2013 23:05
Target OS: -
Domoticz version:
Contact:

Re: Elemental Theme

Post by Albsucher » Thursday 14 January 2016 9:59

Hello,

Bit of a "newbie" question... You mentioned the theme is included into Domoticz. How do i activate or select this to show up?

Thanksin advance.

User avatar
proohu01
Posts: 177
Joined: Friday 17 October 2014 12:20
Target OS: Raspberry Pi
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: Elemental Theme

Post by proohu01 » Thursday 14 January 2016 10:15

setup -> Settings -> System -> User Interface -> Theme
Pi 2 B | Pi Camera | PiFace 2 | RFXtrx433E (KaKu + Oregon Scientific) | Plugwise (9 Circles) | Aeon Z-Wave stick (Fibaro - dimmers, sockets, RGB, screens/blinds) | RFXMeter (Kwh/water/gaz) | WOL | Onkyo Receiver | RTC | Hikvision | Netatmo | Satel Integra

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests