@hotNipi recently published his delightful dashboard clock as a DB2 template.
This flow is a clock design tool which lets you change the appearance of most components.
It includes a few preset designs as examples.
I will have to post the code separately, it's too big.
This shows the page as displayed in Dashboard 2 v 1.24.0. I'm hoping that v1.25 will allow you to see the slider positions and the titles for dropdowns and text inputs.
Notes
Importing the Flow
There are two CSS files. "CSS Clock Dashboard 2" is HotNiPi's original unaltered, so if you already have his clock installed you can delete this file."Extra CSS for custom clock" contains the new and modified features.
It's declarations are all preceded with ".custom" so it should not impact any other hotNiPi clocks or gauges on the dashboard.
Saving a Design & Making it Static
Once you have designed your clock face click "Export".This will display in a popup the current values for msg.clockparams.
You can add it to the Presets function by giving it a name and pasting the values from the popup.
Don't forget to put a comma after the json. Then add the name to the Presets dropdown.
To use a design in a production dashboard:
-
Delete the links in the clock template to any google fonts you are not using.
-
Edit the Extra CSS template and remove the definitions near the top for clock100 through to clock500.
-
Uncomment the following section, setting the height to your preferred widget size (you can check it in flow variable clockparams.size).
.nrdb-ui-template:has(.g-wrapper){
aspect-ratio: 1;
height: 400px;
}
- Modify the change node "Dynamic settings" to always pass your exported clockparams.
- You can remove the msg.ui-update line.
- Delete everything within the Defaults / Adjustments group.
Size
The clock size is defined quite high in the html code, at nrdb-ui-widget level, so variable height is managed using msg.ui-update to set a class.There are preset classes at 50px intervals from 100px to 500px.
Radius
This specifies how rounded the outer bezel is.The original uses 15%. Round clocks use 50%
Bezel Width
Increasing the bezel width reduces the size of the actual dial plate.The hands are scaled relative to the bezel size.
Bezel Color
The bezel colors are specified in the CSS file and can be a simple color eg.custom .g-body.yellow {
background: #ffff00
}
or effects
.custom .g-body.bronze {
background: linear-gradient(45deg, #844414 0%, #cf7d52 25%, #fcd5be 50%, #cf7d52 75%, #844414 100% );
}
To add your own bezel effect define the CSS and add the class name to the ui dropdown.
Rivets
I have not provided any custom options for rivets.You can either show or hide them.
The size and position of the rivets is affected by the Scale slider.
Dial Face
The dial color is specified as HSL using Hue, Saturation and Lightness sliders.Lightness of 100 gives a fully white face.
Lightness 0 gives a gradient from white at the centre to black at the outside edge.
This gradient is specified in the original CSS file, no customisation is offered. (But see the numerals shadow info below)
Hour Markers
You can choose Arabic or Roman numerals, hour markers or "dots".Hour markers simply use the character I at each hour.
Dots use a star symbol (Unicode?) that I picked from Star Symbols Copy and Paste : ★ ✪ ✦ ✫ ✹ ✴ for 3, 6, 9 & 12; an asterisk for the other hours.
The exact characters used are specified in the clock template file.
Numerals Color
This is specified as a simple color code in the ui dropdown.Font
I have included some widely available fonts eg Times New Roman and some Google Fonts.The code to retrieve these is at the top of the custom clock template.
Some of these are included principally to offer a few different capital I appearances for hour markers.
You can browse google fonts at https://fonts.google.com/
Weight
I don't know if it's my browser or my selection of fonts, but only "Normal" and "Bold" font-weight seem to work.Shadow
There is a pretty sizable shadow on the clock numerals.Depending on the size of your clock this can make a significant difference to the overall dial appearance.
Scale
The font size and distance from the centre is affected by the Scale slider. It also affects the size and placing of the rivets.Numbers Ring
This only adjusts the radius of the ring of numerals or markers.Use scale and num ring together to size and position your hour markers.
Hands
Each hand is basically a div covering the entire dial plate.The visible portion is controlled with a clip path defined in the CSS file.
Since the basic position of a hand is pointing to 9, the clip-path should have an x position from around 0 (left hand side) to 50% (the centre), and y values 50% +/- a small amount.
eg the "skinny" minute hand is defined as
.custom .g-needle.minute.basic {
clip-path: polygon(15% 49.1%, 50% 49.1%, 50% 50.9%, 15% 50.9%);
}
Some hand designs have a second "overlay" div which can define a second visible area.
For example the "red dot" second hand overlay has a circular clip-path with a red background.
.custom .g-needle.second.reddot.overlay {
display: block;
clip-path: circle(2.5% at 12% 50%);
background: red;
}
On other hand designs this overlay is used to provide a contrast between the two hands when they overlap eg at 11:55.
Overlaying the second hand is another div for the centre.
This div rotates with the minute hand but some second hand designs replace it with one rotating with the second hand.
Hand Color
Most of the provided hand colors are defined using linear gradients in the CSS file eg.custom .grey {
background: linear-gradient(to bottom, #f2f6f8 0%,#d8e1e7 50%,#b5c6d0 51%,#e0eff9 100%) !important;
}
