Page 1 of 3
OsiDark theme for smartphone, tablet and desktop [v0.5]
Posted: Monday 01 June 2015 17:30
by osiris
I am working on a new Domoticz theme called OsiDark.
You can download the development version of this theme from https://github.com/basvdijk/domoticz-osidark-theme
Main targets:
- Simplicity / Clean layout
- Optimized for smartphone, tablet and desktop
- Larger tap area's for buttons on smartphone
- Flat design
Know issues / todo:
- Sliders overlap content
- Sliders not styled
Some screenshots of my work in progress (v0.5)
Smartphone dashboard:
Smartphone settings:
Tablet:
Desktop:

Re: OsiDark theme for smartphone, tablet and desktop
Posted: Monday 01 June 2015 18:04
by Heisenberg
I like it!
Re: OsiDark theme for smartphone, tablet and desktop
Posted: Monday 01 June 2015 22:36
by G3rard
Looking good! Let me know if you need some help with testing the skin.
Re: OsiDark theme for smartphone, tablet and desktop
Posted: Monday 01 June 2015 22:51
by osiris
There are some bugs I need to fix first. After this you are more than welcome to test

Re: OsiDark theme for smartphone, tablet and desktop
Posted: Tuesday 02 June 2015 10:26
by blackdog65
Hiya,
I'd like to be a tester too!

Re: OsiDark theme for smartphone, tablet and desktop [update
Posted: Wednesday 03 June 2015 17:18
by DXXPublic
I would love to test this one out. Looks very nice and clean!
Re: OsiDark theme for smartphone, tablet and desktop [downlo
Posted: Thursday 04 June 2015 17:19
by osiris
I have added the download link to the first post. Please keep in mind that you are going to use a development version

Re: OsiDark theme for smartphone, tablet and desktop [downlo
Posted: Thursday 04 June 2015 23:45
by G3rard
osiris wrote:I have added the download link to the first post. Please keep in mind that you are going to use a development version

Looking good!!!
Some first remarks.
For desktop (Chrome):
1) On the Dashboard tab the groups are still shown in the old default style (switches, temp have the new style).
On my iPhone (Dashboard mode for Mobile in Settings) this is shown correctly though.
2) On the Switches tab, blinds are still shown in the old style.
3) On the Switches tab, slider button overlaps with the buttons below.
4) Setup drop down menu: pictures and text are not alligned.
For iPad:
1) Sliders overlap with text on Dashboard tab.
2) Sliders overlap with buttons on Switches tab.
3) The 4 buttons don't fit on one rule on Switches tab.
For iPhone:
1) On Off buttons on Dashboard tab (Light/Switch Devices) are not shown on 1 line.
Keep up the good work!
Re: OsiDark theme for smartphone, tablet and desktop [v0.2]]
Posted: Friday 05 June 2015 11:09
by osiris
Thanks for the feedback. Most issues are fixed in v0.2. I still need to look into the slider overlapping content. What kind of iPhone are you using?
Also fixed the dropdown menu for mobile. It turned out the dropdown menu falls out of the screen with the default theme.
Re: OsiDark theme for smartphone, tablet and desktop [v0.2]
Posted: Friday 05 June 2015 13:49
by Mati24
Hello, thanks for this theme.
I have a problem with an iPad in landscape mode, I don't see the top of elements because menus are on two lines
Thank you

- ImageUploadedByTapatalk1433504965.465295.jpg (58.63 KiB) Viewed 9842 times
Re: OsiDark theme for smartphone, tablet and desktop [v0.3]
Posted: Friday 05 June 2015 16:09
by osiris
Fixed your overlapping problem in v0.3. Unfortunately to fix this the navbar stays on top of the screen i.e. while scrolling it does not stick to the top of your screen.
Re: OsiDark theme for smartphone, tablet and desktop [v0.3]
Posted: Saturday 06 June 2015 0:12
by TimmiT
Nice theme! I found some issues doh,
Blinds don't display correct.
The "dot" on the slider is a bit big (goes in front of the text).
The blue "filling" of the slider is rounded at the start (perhaps a minor issue but it bugs me...

.
The tekst in the electra box issen't displaying correct.
Keep up the good work!
Tim
Re: OsiDark theme for smartphone, tablet and desktop [v0.2]]
Posted: Saturday 06 June 2015 11:10
by G3rard
osiris wrote:Thanks for the feedback. Most issues are fixed in v0.2. I still need to look into the slider overlapping content. What kind of iPhone are you using?
Also fixed the dropdown menu for mobile. It turned out the dropdown menu falls out of the screen with the default theme.
I am using an iPhone 5s.
Re: OsiDark theme for smartphone, tablet and desktop [v0.3]
Posted: Saturday 06 June 2015 11:45
by osiris
@Timmit could you please post a screenshot of your problem with the electra box? The slider is not displaying correct because it has not been styled. See the first post for "know issues".
@G3rard I test this theme on a 4S do you still see iPhone specific issues in v0.3?
Re: OsiDark theme for smartphone, tablet and desktop [v0.3]
Posted: Saturday 06 June 2015 17:37
by TimmiT
osiris wrote:@Timmit could you please post a screenshot of your problem with the electra box? The slider is not displaying correct because it has not been styled. See the first post for "know issues".
I posted some screenshot are they not showing? I guest i missed the slider thing...
Also when i go to "setting -> more options" they display over the setting menu end not beside it. And long test won't fit in the textbox (example for me in dutch "gebruikersinstellingen")
All report consider chrome desktop btw.
Re: OsiDark theme for smartphone, tablet and desktop [v0.3]
Posted: Saturday 06 June 2015 20:29
by osiris
Please try to post screenshots along. It is quite hard to understand from a textual description what is exactly ment

Re: OsiDark theme for smartphone, tablet and desktop [v0.3]
Posted: Saturday 06 June 2015 23:53
by G3rard
osiris wrote:@Timmit could you please post a screenshot of your problem with the electra box? The slider is not displaying correct because it has not been styled. See the first post for "know issues".
@G3rard I test this theme on a 4S do you still see iPhone specific issues in v0.3?
iPhone issues:
* doesn't fit on screen, you can scroll to the right, this seems to be cause by navbar
* dashboard: status of contact (in example below closed) is shown on button, which doesn't fit
* when opening Setup menu, you have to scroll to the right to see the menu. The menu is shown directly under the Setup button instead to the left of it
See the screenshots.

- IMG_2424.png (121.63 KiB) Viewed 9684 times

- IMG_2425.png (66.53 KiB) Viewed 9684 times
Re: OsiDark theme for smartphone, tablet and desktop [v0.3]
Posted: Sunday 07 June 2015 0:42
by osiris
Thanks for the screenshots! On the emulator I can not reproduct your menu problem. This is what the menu looks like on the emulator:

Re: OsiDark theme for smartphone, tablet and desktop [v0.3]
Posted: Sunday 07 June 2015 10:54
by TimmiT
I add some screenshots,
chrome desktop:
The tekst in the electra box issen't displaying correct,

- electra
- domoticz3.png (7.79 KiB) Viewed 9661 times
Blinds don't display correct.

- Blinds
- domoticz1.png (11.94 KiB) Viewed 9661 times
"setting -> more options" they display over the setting menu end not beside it. And long text won't fit in the textbox (example for me in dutch "gebruikersinstellingen")

- settings
- domoticz4.png (36.37 KiB) Viewed 9661 times
Tim
Re: OsiDark theme for smartphone, tablet and desktop [v0.3]
Posted: Sunday 07 June 2015 11:06
by TimmiT
And some for chrome on android,
Same issue as G3rard posted,
G3rard wrote:iPhone issues:
* doesn't fit on screen, you can scroll to the right, this seems to be cause by navbar

- srcoll
- Screenshot_2015-06-07-10-58-51.png (163.98 KiB) Viewed 9368 times
buttons blinds and dimmer (%) don't fit on the dashbord.

- blinds and dimmer
- Screenshot_2015-06-07-08-52-00.png (108.63 KiB) Viewed 9368 times
Weather displays incorrect

- weather
- Screenshot_2015-06-07-08-52-49.png (237.57 KiB) Viewed 9368 times