Definition stationclock in css

[Enz0jacco]

hi guys, (Lokonli probably )

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]

hi guys, (Lokonli probably )

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]

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]

Did you update your Dashticz version?
(git pull)

[Enz0jacco]

oops

[Lokonli]

clocks.jpg (159.83 KiB) Viewed 1062 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]

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]

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

[HansieNL]

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.

[madpatrick]

Maybe this helps

http://www.3quarks.com/en/StationClock/

[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/

[madpatrick]

Those are real cool. !!
Great for the standby screen !

[Lokonli]

ok, can I have your votes please

[madpatrick]

I think these are the names as mentioned on the site
- WALL CLOCK
- SLIDE CLOCK
- CSS VARIABLE-POWERED CLOCK

[HansieNL]

I vote for these ones:
- CSS Clock by Nils Rasmusson
- Apple Watch Clock by Malik Dellidj
- CSS Variable-Powered Clock by Emily Hayman

[Lokonli]

Current set of clocks as of beta 3.6.9

clocks.jpg (68.78 KiB) Viewed 981 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]

Another set to choose from:

https://wpshopmart.com/best-html-css-clock/

[Chris12]

Nice aditions!

I realy like the:
- The QLOCKTWO
- SVG Clock UI
- CSS Rotary Clock
- Analog Digital Clock

[Lokonli]

An additional clock requires at least two votes.

Sent from my SM-A320FL using Tapatalk

[Enz0jacco]

I like the following 2:

12. SVG Clock UI
13. CSS Clock