New "progress" theme.

User avatar
htilburgs
Posts: 380
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Stable
Location: Netherland
Contact:

Re: New "progress" theme.

Post by htilburgs » Monday 27 March 2017 12:42

I try to look at it tonight. Currently at work (has to be done also :D )
Hardware:
Raspberry Pi 2B - Aeon Labs Z-Stick GEN5 - Fibaro Dimmer 2 - Fibaro Roller Shutter 2 - Fibaro Smoke Sensor - Yeelight RGBW Led - Neo Coolcam PowerPlug

blauwebuis
Posts: 153
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis » Tuesday 28 March 2017 23:41

Ok, I think I'm getting close. 8-)

Everything seems to be working here.

Please try it (downlink in the first post of this thread) and let me know how it goes! The only thing I haven't been able to test are the Z-wave things, and other possible specific hardware pages.

blauwebuis
Posts: 153
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis » Wednesday 29 March 2017 0:30

Just having some fun..

Image

User avatar
htilburgs
Posts: 380
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Stable
Location: Netherland
Contact:

Re: New "progress" theme.

Post by htilburgs » Wednesday 29 March 2017 13:52

Tested, but the ZWave part is still not OK, see picture.
I'm trying to figure out how Domoticz Dashboard is structured and give it a try with the ZWave page.

Image
Hardware:
Raspberry Pi 2B - Aeon Labs Z-Stick GEN5 - Fibaro Dimmer 2 - Fibaro Roller Shutter 2 - Fibaro Smoke Sensor - Yeelight RGBW Led - Neo Coolcam PowerPlug

Bikey
Posts: 423
Joined: Sunday 22 February 2015 13:19
Target OS: Raspberry Pi
Domoticz version: 3.xxx
Location: Netherlands
Contact:

Re: New "progress" theme.

Post by Bikey » Wednesday 29 March 2017 15:21

Did you clear your browser cache?
I downloaded the new version this morning and I have this result (still missing some spacing between inner and outer blocks):
zwave-settings.png
zwave-settings.png (169.66 KiB) Viewed 1230 times

Blueone
Posts: 160
Joined: Friday 29 November 2013 12:30
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: New "progress" theme.

Post by Blueone » Wednesday 29 March 2017 21:55

Looking good!

I found a minor issue, the temperatuur isn't properly displayed in the dashboard (see screenhot) also the mountain.css is missing in the latest download link.
Attachments
temperatuur.png
temperatuur.png (24.96 KiB) Viewed 1208 times

blauwebuis
Posts: 153
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis » Sunday 02 April 2017 20:17

@blueone: the overlap is something I can't fix with the current HTML. But I've created a patch for dashboard's javascript what will add span-tags around the names and values. It will then be easier to deal with this (it already works here).

The mountain.css is not packaged on purpose, I'm currently working on two themes. When both of those are done it will be relatively easy to add that again. But the new themes also make it relatively easy to add your own background image, and just adding the picture of the mountain already makes it look a lot like the mountain theme ;-)

I've been working with the Domoticz developers to create a new default theme for Domoticz. It will be a dark theme like now. I will also add a new colourful theme.

The last thing I've been working on is a narrow sidebar.

Image

If you hover over it, it expands:
Image

When you click on the setup button, a double-column overlay shows pops up:
Image

All these various features (main menu as sidebar, settings sub-menu as sidebar, bigger hero-buttons on the dashboard) will be optional: by commenting out lines in custom.css you can enable or disable certain aspects.

The new version can be tested by downloading the latest version of the zip-file form the first post in this thread.

User avatar
EdwinK
Posts: 859
Joined: Sunday 22 January 2017 22:46
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New "progress" theme.

Post by EdwinK » Sunday 02 April 2017 21:21

blauwebuis wrote:
Check the readme file inside the folder for other details.
There is no readme file in the zip. Should just copying work?
Running latest BETA on a Pi-3 | Toon Thermostat | RFxcom | Dashticz V2 |

blauwebuis
Posts: 153
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis » Sunday 02 April 2017 23:13

yes, sorry about that. I've updates the file to include an updated readme.txt.

blauwebuis
Posts: 153
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis » Monday 03 April 2017 10:18

A little experiment with showing all the sections as vertical columns. By dragging your favourite devices to the top you get a dashboard with big items. Then just scroll down for the rest of your favourites.

Image

gerard76
Posts: 64
Joined: Wednesday 22 March 2017 10:13
Target OS: Raspberry Pi
Domoticz version: 3.8153
Contact:

Re: New "progress" theme.

Post by gerard76 » Monday 03 April 2017 12:40

Awesome. Activated the classic progress theme. It will stay that way. The icons look very bad if the main menu is on the left, so I put it back on top. Other then that. Love it.

User avatar
htilburgs
Posts: 380
Joined: Tuesday 03 November 2015 12:01
Target OS: Raspberry Pi
Domoticz version: Stable
Location: Netherland
Contact:

Re: New "progress" theme.

Post by htilburgs » Monday 03 April 2017 13:14

Wow! I'm looking into the CSS and HTML as I told, but it's harder than I thought. Not as straight forward as I aspected.
Also experience a lack of time right now, so I've respect for the amount of time and hard work you put into this....

I've linked your/this page on my website if you don't mind...;-)
Hardware:
Raspberry Pi 2B - Aeon Labs Z-Stick GEN5 - Fibaro Dimmer 2 - Fibaro Roller Shutter 2 - Fibaro Smoke Sensor - Yeelight RGBW Led - Neo Coolcam PowerPlug

blauwebuis
Posts: 153
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis » Monday 03 April 2017 14:19

If you want to create your own theme, I would suggest to copy this theme, and then create a new modified version of classic.css or feynman.css. I've designed this theme in such a way as to make theming easier for others. The base.css takes care of the heavy lifting/modifications. And then the 'subtheme' like feynman.css is where I tried to put most of the visual stuff like colours, fonts, etc.

Theming Domoticz currenty really is quite difficult. I've made a wiki page for people who want to theme Domoticz that points out some of the (current) pitfalls. I've also made a lot of code change proposals that will make theming a little easier.
http://domoticz.com/wiki/How_to_theme_Domoticz

About the icons: I've purposefully made them pixelated. The problem is that the base icons are only 16 by 16 pixels. So I had to choose between pixelated or very blurry..

Ideally Domoticz would start using a new default icons set that has higher resolution images. Or it could first look for icons in the theme folder, so that themes could override the default icons.

blauwebuis
Posts: 153
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis » Monday 03 April 2017 19:44

OK, the final feature for the time being: columns.

If your screen is wide enough, this feature will create vertical columns. It's smart about this: it will only do it if it fits comfortably.
Image

If you combine columns with the earlier "highlights" feature, which makes the first three items of each category bigger, you get this:
Image

Form now on it's just about making everything work perfect, and optimizing Domoticz' html.

Other improvements are:
- Sidebar menu feature automatically disables itself for mobile phones.
- There was an issue with the main menu sidebar and the floorplan (making it not show up). That's now fixed.

The latest version can be downloaded in the first post of this thread.

Bikey
Posts: 423
Joined: Sunday 22 February 2015 13:19
Target OS: Raspberry Pi
Domoticz version: 3.xxx
Location: Netherlands
Contact:

Re: New "progress" theme.

Post by Bikey » Monday 03 April 2017 20:11

Getting better each version, great work!
The floorplan now tries to show both of my floors in the same page. Result is 1 1/2 floorplan on the desktop and empty page on mobile....

blauwebuis
Posts: 153
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis » Monday 03 April 2017 20:17

Ooh, I'll quickly look into that.

// Should be fixed. Please test.
Last edited by blauwebuis on Monday 03 April 2017 21:51, edited 1 time in total.

User avatar
EdwinK
Posts: 859
Joined: Sunday 22 January 2017 22:46
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New "progress" theme.

Post by EdwinK » Monday 03 April 2017 20:59

After putting in the latest version, downloaded earlier today, I lost the nice background, and just got an ugly black background.


Liked this background
Image
Running latest BETA on a Pi-3 | Toon Thermostat | RFxcom | Dashticz V2 |

blauwebuis
Posts: 153
Joined: Wednesday 21 December 2016 10:11
Target OS: Raspberry Pi
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis » Monday 03 April 2017 21:53

Haha, I'm glad you like it too :-)

I've fixed that too. I'll make sure to upload the Feynman version from now on.

User avatar
EdwinK
Posts: 859
Joined: Sunday 22 January 2017 22:46
Target OS: Raspberry Pi
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New "progress" theme.

Post by EdwinK » Monday 03 April 2017 22:21

Thanks :) Will download it again
Running latest BETA on a Pi-3 | Toon Thermostat | RFxcom | Dashticz V2 |

Bikey
Posts: 423
Joined: Sunday 22 February 2015 13:19
Target OS: Raspberry Pi
Domoticz version: 3.xxx
Location: Netherlands
Contact:

Re: New "progress" theme.

Post by Bikey » Monday 03 April 2017 22:51

Wow, that was a quick repair, the floorplan now is fixed :-)

Only the settings page is still not really working nicely. In Safari after clicking on settings I only get 1 partial column:
Settings Safari.png
Settings Safari.png (82.42 KiB) Viewed 1008 times
And in Chrome I get 2 columns, but the spacing of the menu items is very wide. Also the menu items do not size into the second column:
Settings Chrome.png
Settings Chrome.png (120.89 KiB) Viewed 1008 times

Post Reply

Who is online

Users browsing this forum: No registered users and 6 guests