Definition stationclock in css

Dashticz, alternative dashboard based on HTML, CSS, jQuery

Moderators: leecollings, htilburgs, robgeerts

Enz0jacco
Posts: 45
Joined: Tuesday 03 March 2020 8:15
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

Definition stationclock in css

Post by Enz0jacco »

hi guys, (Lokonli probably :P)

I'm trying to make the stationclock bigger on the standby screen.
all I manage to do now is center the clock within the screen but i'm unable to make the clock bigger.
this is what i tried:

.standby .stationclock {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 800px !important; }

it seems that the container in which the clock exists is getting bigger but not the clock itself.
am I forgetting something behind the .stationclock?

thnx again!
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Lokonli »

Enz0jacco wrote: Monday 07 December 2020 20:05 hi guys, (Lokonli probably :P)

I'm trying to make the stationclock bigger on the standby screen.
all I manage to do now is center the clock within the screen but i'm unable to make the clock bigger.
this is what i tried:

.standby .stationclock {
display: flex !important;
justify-content: center !important;
align-items: center !important;
height: 800px !important; }

it seems that the container in which the clock exists is getting bigger but not the clock itself.
am I forgetting something behind the .stationclock?

thnx again!
Challenge accepted :)

It was not possible to set the size of the station clock.

I've changed that in latest beta.

By default the size of the stationclock will be the block width.
If needed, you can overrule the size by setting the block parameter 'size' of the station clock block.

Code: Select all

blocks['stationclock'] = {
  size: 100,
  width: 6
}
Enz0jacco
Posts: 45
Joined: Tuesday 03 March 2020 8:15
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Enz0jacco »

thnx for the quick reply (as always) !

unfortunately this doesn't work.
just to be sure, this code is for the config.js right?

i deleted everything in css and just put your code in config.js.
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Lokonli »

Did you update your Dashticz version?
(git pull)
Enz0jacco
Posts: 45
Joined: Tuesday 03 March 2020 8:15
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Enz0jacco »

oops :P
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Lokonli »

clocks.jpg
clocks.jpg (159.83 KiB) Viewed 974 times
Spoiler: show

Code: Select all

blocks['stationclock'] = {
  width: 1,
};
blocks['stationclock2'] = {
  type: 'stationclock',
  width: 2,
};
blocks['stationclock3'] = {
  type: 'stationclock',
  width: 3,
};
blocks['stationclock6'] = {
  type: 'stationclock',
  width: 6,
};
blocks['stationclock12'] = {
  type: 'stationclock',
  width: 12,
};


var columns = {};

columns[1] = {};
columns[1]['blocks'] = [

  'stationclock',
  'stationclock2',
  'stationclock3',
  'stationclock6',
  {type: 'stationclock', width: 12, size: 50},
  {type: 'stationclock', width: 12, size: 250}
];
columns[1]['width'] = 6;

columns[2] = {};
columns[2]['blocks'] = ['stationclock12'];
columns[2]['width'] = 6;
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Lokonli »

Fun fact:
As you can see the station clock is 2 seconds ahead of the digital time in the top bar.

The reason is:
The red second dial of the station clock will make a round in 58 seconds. At the whole minute it will wait two seconds to 'synchronize' the time again. :)
Enz0jacco
Posts: 45
Joined: Tuesday 03 March 2020 8:15
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Enz0jacco »

Haha didn’t notice that one. But I use it on the standby screen anyway. Are there are other layout clocks available as well? The boss doesn’t think this clock is tastefull with the rest of the interior...


Sent from my iPad using Tapatalk
User avatar
HansieNL
Posts: 957
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by HansieNL »

Enz0jacco wrote: Wednesday 09 December 2020 13:30 Haha didn’t notice that one. But I use it on the standby screen anyway. Are there are other layout clocks available as well? The boss doesn’t think this clock is tastefull with the rest of the interior...


Sent from my iPad using Tapatalk
There's also a flipclock. You can add it by adding 'flipclock' to a column.
Blah blah blah
User avatar
madpatrick
Posts: 636
Joined: Monday 26 December 2016 12:17
Target OS: Linux
Domoticz version: 2024.7
Location: Netherlands
Contact:

Re: Definition stationclock in css

Post by madpatrick »

-= HP server GEN8 Xeon(R) E3-1220L_V2 -=- OZW -=- Toon2 (rooted) -=- Domoticz v2024.7 -=- Dashticz v3.12b on Tab8" =-
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Lokonli »

That's indeed the station clock that is used at the moment. I can make available the configuration parameters.

One of the following could also be implemented:
https://freefrontend.com/css-clocks/
User avatar
madpatrick
Posts: 636
Joined: Monday 26 December 2016 12:17
Target OS: Linux
Domoticz version: 2024.7
Location: Netherlands
Contact:

Re: Definition stationclock in css

Post by madpatrick »

Those are real cool. !!
Great for the standby screen !
-= HP server GEN8 Xeon(R) E3-1220L_V2 -=- OZW -=- Toon2 (rooted) -=- Domoticz v2024.7 -=- Dashticz v3.12b on Tab8" =-
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Lokonli »

ok, can I have your votes please :)
User avatar
madpatrick
Posts: 636
Joined: Monday 26 December 2016 12:17
Target OS: Linux
Domoticz version: 2024.7
Location: Netherlands
Contact:

Re: Definition stationclock in css

Post by madpatrick »

I think these are the names as mentioned on the site
- WALL CLOCK
- SLIDE CLOCK
- CSS VARIABLE-POWERED CLOCK
-= HP server GEN8 Xeon(R) E3-1220L_V2 -=- OZW -=- Toon2 (rooted) -=- Domoticz v2024.7 -=- Dashticz v3.12b on Tab8" =-
User avatar
HansieNL
Posts: 957
Joined: Monday 28 September 2015 15:13
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by HansieNL »

I vote for these ones:
- CSS Clock by Nils Rasmusson
- Apple Watch Clock by Malik Dellidj
- CSS Variable-Powered Clock by Emily Hayman
Blah blah blah
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Lokonli »

Current set of clocks as of beta 3.6.9
clocks.jpg
clocks.jpg (68.78 KiB) Viewed 893 times
Spoiler: show

Code: Select all

blocks['stationclock'] = {
  width: 3,
};
blocks['stationclock2'] = {
  type: 'stationclock',
  width: 3,
  boss: 'NoBoss',
  body: 4,
  secondhand: 0
};
blocks['stationclock3'] = {
  type: 'stationclock',
  width: 3,
  body: 0,
  dial: 0,
  secondhand: 1
};
blocks['stationclock4'] = {
  type: 'stationclock',
  width: 3,
  body: 3,
  dial: 1,
  boss: 'ViennaBoss',
  secondhandbehavior: 2
};
blocks['stationclock5'] = {
  type: 'stationclock',
  width: 3,
  boss: 'RedBoss' 
};

blocks['clock'] = {
    width: 4
}

blocks['flipclock'] = {
    width: 8
}

blocks['miniclock'] = {
  width: 4
}

var columns = {};

columns[1] = {};
columns[1]['blocks'] = [
  'stationclock',
  'stationclock2',
  'stationclock3',
  'stationclock4',
  'clock',
  'flipclock',
  'miniclock',

];

Next addition will be - CSS Variable-Powered Clock by Emily Hayman (2 votes)
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Lokonli »

Chris12
Posts: 238
Joined: Tuesday 18 August 2020 8:41
Target OS: NAS (Synology & others)
Domoticz version: 2021.1
Location: NL
Contact:

Re: Definition stationclock in css

Post by Chris12 »

Nice aditions!

I realy like the:
- The QLOCKTWO
- SVG Clock UI
- CSS Rotary Clock
- Analog Digital Clock
Domoticz beta | Dashticz beta | Synology DS415+ | Wall tablet Teclast 11.6inch (Android) | TADO v3 controlled heating
Lokonli
Posts: 2260
Joined: Monday 29 August 2016 22:40
Target OS: Raspberry Pi / ODroid
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Lokonli »

An additional clock requires at least two votes.

Sent from my SM-A320FL using Tapatalk

Enz0jacco
Posts: 45
Joined: Tuesday 03 March 2020 8:15
Target OS: NAS (Synology & others)
Domoticz version:
Contact:

Re: Definition stationclock in css

Post by Enz0jacco »

I like the following 2:

12. SVG Clock UI
13. CSS Clock

:D
Post Reply

Who is online

Users browsing this forum: No registered users and 0 guests