New "progress" theme.

Moderator: leecollings

Post Reply
blauwebuis
Posts: 331
Joined: Wednesday 21 December 2016 9:11
Target OS: Raspberry Pi / ODroid
Domoticz version: current
Contact:

New "progress" theme.

Post by blauwebuis »

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

THIS IS OUTDATED, CHECK THE NEW K-TRON THEME INSTEAD

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 Sunday 17 December 2017 10:43, edited 2 times in total.
User avatar
Dynamic
Posts: 109
Joined: Friday 12 July 2013 14:50
Target OS: -
Domoticz version:
Location: Enschede
Contact:

Re: New "progress" theme.

Post by Dynamic »

It looks very good, keep up the good work!
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New "progress" theme.

Post by EdwinK »

Looks nice. Please share
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
User avatar
galadril
Posts: 824
Joined: Monday 07 September 2015 10:32
Target OS: Raspberry Pi / ODroid
Domoticz version: latest
Contact:

Re: New "progress" theme.

Post by galadril »

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: 5
Joined: Thursday 02 July 2015 10:37
Target OS: Raspberry Pi / ODroid
Domoticz version: zelatest
Location: Surahammar/Sweden
Contact:

Re: New "progress" theme.

Post by zeputt »

Nice!

Looking forward to test this :)
blauwebuis
Posts: 331
Joined: Wednesday 21 December 2016 9:11
Target OS: Raspberry Pi / ODroid
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis »

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 17:13, edited 1 time in total.
tontze
Posts: 317
Joined: Thursday 12 January 2017 15:30
Target OS: Linux
Domoticz version: Beta Ch
Location: Finland
Contact:

Re: New "progress" theme.

Post by tontze »

Sweet, thnx !
-----------------------------------------
Smartthings
zigbee2mqtt
RFLink 433mhz / Nrf 2.4Ghz
Mi Light
esp8266MiLight Hub
OpenHab/HomeAssistant/Domoticz
HP T610 & Debian 5.10.19-1 x86_64[/b]
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New "progress" theme.

Post by EdwinK »

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 (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
blauwebuis
Posts: 331
Joined: Wednesday 21 December 2016 9:11
Target OS: Raspberry Pi / ODroid
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis »

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 16:50, edited 1 time in total.
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New "progress" theme.

Post by EdwinK »

Thanks. Redownloading :)
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
blauwebuis
Posts: 331
Joined: Wednesday 21 December 2016 9:11
Target OS: Raspberry Pi / ODroid
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis »

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

Image
User avatar
EdwinK
Posts: 1820
Joined: Sunday 22 January 2017 21:46
Target OS: Raspberry Pi / ODroid
Domoticz version: BETA
Location: Rhoon
Contact:

Re: New "progress" theme.

Post by EdwinK »

I hope they will add this to the official Domoticz release. Good job.
Running latest BETA on a Pi-3 | Toon® Thermostat (rooted) | Hue | Tuya | IKEA tradfri | Dashticz V3 on Lenovo Huawei Tablet | Conbee
blauwebuis
Posts: 331
Joined: Wednesday 21 December 2016 9:11
Target OS: Raspberry Pi / ODroid
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis »

Thanks!
User avatar
remb0
Posts: 499
Joined: Thursday 11 July 2013 22:21
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: The Netherlands
Contact:

Re: New "progress" theme.

Post by remb0 »

much cleaner. very nice job.
tlpeter
Posts: 191
Joined: Wednesday 26 November 2014 18:43
Target OS: Raspberry Pi / ODroid
Domoticz version: Beta
Location: Netherlands
Contact:

Re: New "progress" theme.

Post by tlpeter »

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 12592 times
blauwebuis
Posts: 331
Joined: Wednesday 21 December 2016 9:11
Target OS: Raspberry Pi / ODroid
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis »

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: 108
Joined: Thursday 12 February 2015 7:51
Target OS: Linux
Domoticz version:
Contact:

Re: New "progress" theme.

Post by Awst6000 »

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: 331
Joined: Wednesday 21 December 2016 9:11
Target OS: Raspberry Pi / ODroid
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis »

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 Tuesday 21 March 2017 23:43, edited 1 time in total.
Awst6000
Posts: 108
Joined: Thursday 12 February 2015 7:51
Target OS: Linux
Domoticz version:
Contact:

Re: New "progress" theme.

Post by Awst6000 »

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: 331
Joined: Wednesday 21 December 2016 9:11
Target OS: Raspberry Pi / ODroid
Domoticz version: current
Contact:

Re: New "progress" theme.

Post by blauwebuis »

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 1 guest