New "progress" theme.

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

New "progress" theme.

Post by blauwebuis » Tuesday 21 March 2017 1:21

The past few days I've worked on creating a new theme for Domoticz.

INSTALLING THE THEME

DOWNLOAD this zip file to your Domoticz server:
https://www.pineapplejazz.com/public/do ... ogress.zip

Check the readme file inside the folder for other details.

Oh, and don't forget to clear your browser cache :-)

THE THEME

The homepage, keeping it simple:
Image

The Switches overview. Moved things around a bit.
Image

I streamlined all the detail pages too, even moving buttons around through CSS (for now ;) ).
Image

The settings page moves the tabs to a vertical list if your screen is wide enough. And yes, I've totally moved everything around, I'll create a pull-request for the new setup.html file, which I've also cleaned up and standardised. It was quite messy.
Image

As you can see I've also created new shortcuts. The end-goal is to make the complex setup-drowpdown menu a bit less full, where possible.
Image

The hardware overview, and all similar pages, have also had some paint.
Image

I couldn't style the event-page much, so I tried to just keep it clean and simple, and let the colorful blocks speak.
Image


Almost all you see here is done through CSS. Only a few things few things will need a pull-request, in the form of a cleaned-up setup.html page. I'll create a pull-request for some cleanup/standardisation to the HTML. I've added things like 'related settings' shortcuts.

The additions don't break the old themes. And this new themes uses a sub-CSS page for the most obvious styling. This means that it will become an easy startingpoint for people who also want to theme Domoticz.

Here's an example of how it changes with a few lines of CSS:

Image
Last edited by blauwebuis on Wednesday 22 March 2017 12:59, edited 1 time in total.

User avatar
Dynamic
Posts: 213
Joined: Friday 12 July 2013 14:50
Target OS: -
Domoticz version:
Location: Enschede
Contact:

Re: New "progress" theme.

Post by Dynamic » Tuesday 21 March 2017 9:13

It looks very good, keep up the good work!

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

Re: New "progress" theme.

Post by EdwinK » Tuesday 21 March 2017 9:21

Looks nice. Please share
Running latest BETA on a Pi-3 | Toon Thermostat | RFxcom | Dashticz V2 |

User avatar
galadril
Posts: 582
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi
Domoticz version: latest
Contact:

Re: New "progress" theme.

Post by galadril » Tuesday 21 March 2017 9:23

Looks great :)
Solar panels of Ginlong, Omnik-Solar, Transenergy or Solarman?? Try my Android app:
https://play.google.com/store/apps/deta ... ongmonitor

zeputt
Posts: 14
Joined: Thursday 02 July 2015 10:37
Target OS: Raspberry Pi
Domoticz version: zelatest
Location: Surahammar/Sweden
Contact:

Re: New "progress" theme.

Post by zeputt » Tuesday 21 March 2017 9:35

Nice!

Looking forward to test this :)

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 21 March 2017 11:36

I've created a pull-request for the theme and for the new setup.html file, so hopefully it will become a part of Domoticz.

INSTALLING THE THEME
In the mean time you can do a manual install:

1. DOWNLOAD this zip file to your Domoticz server:
https://www.pineapplejazz.com/public/do ... ogress.zip

2. COPY the contents of the zip file to your styles folder. So it becomes domoticz/www/styles/progress/custom.css.

3. OPTIONAL: To get the optimal results (related options, reshuffled items), also replace your setup.html file in your www/views folder with the one I've provided. It's important to preserve permissions and rights when you do this, so my recommendation is: On your server open the original setup.html file in a text editor, and paste the contents of the provided file into that. That way all the rights should stay the same. Heads-up: this new setup.html will be replaced by the official Domoticz one when you update. Hopefully my proposed changes will have become part of Domoticz by then :)

(If case something unexpectedly goes wrong in that last part, start a new install of Domoticz, and choose "update" in the menu. That will always change all permissions to be ok again.)

Oh, and don't forget to clear your browser cache :-)
Last edited by blauwebuis on Tuesday 21 March 2017 18:13, edited 1 time in total.

tontze
Posts: 238
Joined: Thursday 12 January 2017 16:30
Target OS: Raspberry Pi
Domoticz version:
Contact:

Re: New "progress" theme.

Post by tontze » Tuesday 21 March 2017 11:38

Sweet, thnx !
-----------------------------------------
Rpi 3 / Razberry 2
RFLink 433mhz / Nrf 2.4Ghz
Mi Light
ESP82xx

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

Re: New "progress" theme.

Post by EdwinK » Tuesday 21 March 2017 14:01

Found a small problem.

Imagewindows screenshot

This two switches both have more options then are now shown

If I switch to the 'switches' tab, I can see them correct.

Imageimage upload
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 » Tuesday 21 March 2017 17:42

Thanks, I've fixed the problem (quite beautifully I might add, using a flexbox, it will automatically change depending on the options available).

Just re-download the zip file.

I could make it wider..
Image
v.s.
Image
Last edited by blauwebuis on Tuesday 21 March 2017 17:50, edited 1 time in total.

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

Re: New "progress" theme.

Post by EdwinK » Tuesday 21 March 2017 17:49

Thanks. Redownloading :)
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 » Tuesday 21 March 2017 17:53

Here's an example of a simpler 'classic' subtheme (also included).

Image

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

Re: New "progress" theme.

Post by EdwinK » Tuesday 21 March 2017 18:10

I hope they will add this to the official Domoticz release. Good job.
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 » Tuesday 21 March 2017 18:14

Thanks!

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

Re: New "progress" theme.

Post by remb0 » Tuesday 21 March 2017 18:56

much cleaner. very nice job.

tlpeter
Posts: 398
Joined: Wednesday 26 November 2014 19:43
Target OS: Raspberry Pi
Domoticz version: Beta
Location: Netherlands
Contact:

Re: New "progress" theme.

Post by tlpeter » Tuesday 21 March 2017 19:59

I like it very much although i found something.
The slider on the bottom is cut off and the open/close for the "garagedeur" is not complete, it is missing one of the two buttons (to close the door)
Also the status is behind the stop button.
I also see that the names are cut off on the right side, could the letter type be smaller?

Keep up the good work :mrgreen:
Attachments
Progress.JPG
Progress.JPG (29.46 KiB) Viewed 5282 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 » Tuesday 21 March 2017 20:35

Thanks for testing.

- The slider is like that on purpose.
- What button are you using for the garage door? Did you clear your browser cache? It looks very odd. Things shouldn't normally be able to overflow the button. Perhaps I missed a button type. Odd.
- The font-size is already as small as I'd like to go (to support mobile users). The thing is that I could allow the text to overflow, but then it may sometimes overlap with a sensor value. Because there is no way for me to discern the various sensor- and button types (no classes in the html), I have to create a one-size-fits-all solution.

The same thing is the source of the status being visible underneath the button. In the case of the button with multiple states I made it so that they cover up the status value, because I can't hide it any other way. I'll see if I can mask it here too.

Awst6000
Posts: 162
Joined: Thursday 12 February 2015 8:51
Target OS: Linux
Domoticz version:
Contact:

Re: New "progress" theme.

Post by Awst6000 » Tuesday 21 March 2017 23:30

I tested with the classic theme and the modified stylesheet.
Looks very nice and much more organized.

I also have the issue with the blinds here, like with the garage door. (I tested on Windows and an Android tablet. In both cases I cleared the browsercache first).

Question 1:
Is it possible to adjust the fontsize ourselves?
(I read your post about mobile users, but in Domoticz there already are settings for mobile users under 'interface'?)

Question 2:
Is it possible to get more items on one line?
(On a normal dashboard there are 4. On a compact dashboard there are 3, but I wish I could select 5 items per line)

Txs in advance!

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 22 March 2017 0:27

Could one of you send me/post the HTML of that garage door opener item? Because I can't test it; I can't create it as a virtual sensor.

I've also updated the design again.
- A smaller font for the name, as requested.
- The name can now stretch full width. That means you are responsible for keeping it short, otherwise name and value will start to overlap. (I tried some experiments, but none looked good).
Last edited by blauwebuis on Wednesday 22 March 2017 0:43, edited 1 time in total.

Awst6000
Posts: 162
Joined: Thursday 12 February 2015 8:51
Target OS: Linux
Domoticz version:
Contact:

Re: New "progress" theme.

Post by Awst6000 » Wednesday 22 March 2017 0:35

On an Android tablet I have an issue with the background of the classic theme. (I haven't tested with other background of this theme yet)
The left side of the screen is grey and I see some sliders 'coming through' that grey.
The right side of the screen looks okee.

On Windows it looks normally.
I hope I can post a screenshot tomorrow.

About the blinds issue?
Can you please be more speciific? What exactly do you need to troubleshoot?
Txs!

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 22 March 2017 0:57

I would be really great if you could send me the HTML and CSS. To get the offending HTML, try this in Chrome:

- right mouse button on the weird part(s).
- choose 'inspect'.

You'll see a pop-up sort of thing that shows the HTML and CSS.

- Copy the entire list on the right side (styles tab) and send it my way.
- Right mouse button in the highlighted HTML element on the left side -> select copy -> copy element. And send that my way too.

A screenshot would also be very handy.

Thanks!

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests