Background Image Settings
This simple Shopify block can be used to add a single background image onto which several dials and text can be rendered.
Image
Image picker setting for specifying the image to be displayed.
default: empty
Height
Text setting for specifying the height image to be displayed.
default: 50vh
Clock Settings
This block can be used to render traditional 12 hour circular clocks. It includes
Auto-Start
Checkbox setting that indicates whether the clock should start as soon as it becomes visible. If not set, the clock can only be started by calling the start() method.
default: on
CSS
Text setting for specifying CSS attributes for the entire clock component.
default: display:inline-block;border-radius:100%;position:relative;
CSS - Face
Text setting for specifying CSS attributes for the SVG component that renders the numbers and clock hands.
default: position:absolute;left:0;top:0;width:100%;height:100%;
CSS - Hour Hand
Text setting for specifying CSS attributes for the SVG element that renders the hour hand.
default: stroke:none;fill:#000;
CSS - Hour Marks
Text setting for specifying CSS attributes for the component that renders the hour marks.
default: stroke:#000;stroke-width:15px;display:inline-block;width:100%;height:100%;transform:rotate(-1deg);
CSS - Min/Sec Marks
Text setting for specifying CSS attributes for the component that renders the minute/seconds marks.
default: stroke:#f00;stroke-width:10px;position:absolute;left:0;top:0;width:100%;height:100%;
CSS - Minute Hand
Text setting for specifying CSS attributes for the SVG element that renders the minutes hand.
default: stroke:none;fill:#777;
CSS - Numbers
Text setting for specifying CSS attributes for the SVG element that renders the numbers.
default: stroke:none;fill:#000;font-size:25px;
CSS - Seconds Hand
Text setting for specifying CSS attributes for the SVG element that renders the seconds hand.
default: stroke:#f00;stroke-width:1px;
Hour
Text setting for specifying the current hour on the clock. The value supplied should be a number between 1 and 12 inclusive.
default: empty
HTML Id.
Text setting for specifying the HTML ID of the dial.
default: empty
Minute
Text setting for specifying the current minute on the clock. The value supplied should be a number between 1 and 59 inclusive.
default: empty
Seconds
Text setting for specifying the current second on the clock. The value supplied should be a number between 1 and 59 inclusive.
default: empty
Size
Text setting to specify the width and height of the entire dial component. Any CSS value is allowed.
default: 150px
Time Zone
Text setting to specify the timezone of the clock. Any IANA timezone identifier is supported.
default: empty
Clock Dial Settings
This block can be used to render clock-style dial markings that include 12 hour marks and sixty minute and second marks. It consists of two overlapped dial components with preset values and a limited number properties available for customisation. Please refer to the full dial documentation for more details.
Full Dial Settings
DeDial is a low level component that renders circular gauge dials with distinct ticks. These can be used as part of a larger design for animated effects or clock faces. Additional functionality is provided to animate forward or reverse counting.
This Shopify block is backed by a DeDial Web Component that can be used to automate functionality via JavaScript. More details can be found here.
Auto-Start
Checkbox setting that indicates whether the dial should start counting as soon as it becomes visible. If not present, counting can only be started by calling the start() method.
default: on
Auto-Stop
Checkbox setting that indicates whether the dial should stop counting when it reaches its maximum or minimum value. If not present, counting will restart at 0 or the minimum value.
default: off
Background
Colour picker setting for setting the background of the entire dial component.
default: conic-gradient(#666, #ccc, #666, #ccc, #666)
CSS
Text setting for specifying CSS attributes for the entire dial component.
default: position:relative; display:inline-block; border-radius:100%;
Dial CSS
Text setting for specifying CSS attributes for the dial ticks only.
default: transform:rotate(-90deg);
HTML After Label
Text setting for specifying HTML to display immediately after the dial label.
default: empty
HTML Before Label
Text setting for specifying HTML to display immediately before the dial label.
default: empty
HTML Id
Text setting for specifying the HTML ID of the dial.
default: empty
Fill Colour
Colour picker setting for setting the interior colour of the dial.
default: transparent
Gap Width
Number setting for specifying the relative size of the gaps between ticks.
default: 2
Label CSS
Text setting for specifying CSS attributes for the label only.
default: position:absolute; border-radius:100%; left:50%; top:50%;
transform:translate(-50%, -50%); font-weight:bold;
Label Font Size
Text setting for specifying the font size of the label. Any CSS value is allowed.
default: 32px
Max. Value
Number setting for specifying the total number of ticks on the dial.
default: 20
Reverse Count
Checkbox setting that indicates that the dial should count backwards (-1). If not set, the dial will count forwards (+1).
default: off
Size
Text setting to specify the width and height of the entire dial component. Any CSS value is allowed.
default: 150px
Show Label
Checkbox setting for specifying if the current value of the dial is displayed. By default, it is displayed in the center of the dial but this can be adjusted through CSS styling.
default: on
Text Colour
Colour picker setting for specifying the colour of any text in the dial.
default: #000
Tick Colour
Colour picker setting for specifying the colour of ticks on the dial.
default: #f00
Tick Size
Text setting used to set the length of the dial ticks from the center to the edge of the dial. Since ticks are centered around the dial circumference, it's possible that very long ticks will render outside the visible area. In these cases you can increase the rendering area with the Viewbox setting.
default: 20px
Tick Width
Number setting that indicates the relative width of each tick. This width is relative to the gap width. For example, if both the gap width and the tick width are set to 1, then the dial will be divided into gaps and ticks of equal length. If the tick width is 4 and the gap width is 1, then the dial will be divided into ticks that are 4 times wider than the gaps.
default: 1
Value
Number setting that determines the number of ticks that should currently be displayed. Values greater than the maximum value will revert to 0 whilst values less than 0 will revert to the maximum value.
default: 10
Viewbox Radius
Number setting that determines the size of the SVG rendering area. If large ticks render off the edges of the dial component, this number can be increased to bring rendering back within the bounds of the dial component.
default: 108
Wait Milliseconds
Number setting that determines the amount of time, in milliseconds, that the dial should wait before incrementing to the next value.
default: 100
Hour Dial Settings
This block can be used to render clock-style hour markings that include 12 hour marks. It consists of a single dial component with preset values and a limited number of properties available for customisation. Please refer to the full dial documentation for more details.
Large Dial Settings
This block can be used to render dials with very wide markings. These can be useful when compositing animation effects. It consists of a single dial component with preset values and a limited number of properties available for customisation. Please refer to the full dial documentation for more details.
Minutes/Seconds Dial Settings
This block can be used to render dials with very long markings. These can be useful when compositing animation effects. It consists of a single dial component with preset values and a limited number of properties available for customisation. Please refer to the full dial documentation for more details.
Target Settings
This block can be used to render a target sight. These can be useful when compositing animation effects. It consists of a single dial component with preset values and a limited number of properties available for customisation. Please refer to the full dial documentation for more details.
Text Settings
This simple Shopify block can be used to display text around the DeDial component.
Text
Rich-text setting for specifying the text to be displayed.
default: Some Text!
CSS
Text setting for specifying any CSS styling to be applied to the text.
default: empty
Timer Settings
This block renders a timer split into four dials showing the days, hours, minutes, and seconds to or from a certain date and time. If none is specified, the timer will count from the current time.
24hr Time
String setting to specify the time to count from or to. The time must be in the 24 hour format hh:mm:ss. If none is specified, the current time is used.
default: empty
Auto-Start
Checkbox setting that indicates whether the timer should start as soon as it becomes visible. If not set, the timer can only be started by calling the start() method.
default: on
Counter Size
Text setting to specify the width and height of a single dial. As there are four dials, the total block width will be four times the counter size. Any CSS size value is allowed.
default: 100px
Date
String setting to specify the date to count from or to. The date must be in the format yyyy-mm-dd. If none is specified, the current date is used.
default: empty
HTML Id.
Text setting for specifying the HTML ID of the timer.
default: empty
Label - Days
Text setting for specifying a label for the "days" dial. If no label text is specified, the default "days" label will be used.
default: empty
Label - Hours
Text setting for specifying a label for the "hours" dial. If no label text is specified, the default "hours" label will be used.
default: empty
Label - Minutes
Text setting for specifying a label for the "minutes" dial. If no label text is specified, the default "minutes" label will be used.
default: empty
Label - Seconds
Text setting for specifying a label for the "seconds" dial. If no label text is specified, the default "seconds" label will be used.
default: empty
Colour - Dial Border
Colour picker setting for setting the colour of the external border dials.
default: #f00
Colour - Dial Inactive Marks
Colour picker setting for setting the colour of the "inactive" dial marks.
default: #ddd
Colour - Dial Marks
Colour picker setting for setting the colour of the "active" dial marks.
default: #000
CSS
Text setting for specifying CSS attributes for the entire timer component.
default: font-family: Arial, Helvetica, sans-serif;
CSS - Label
Text setting for specifying CSS attributes for the dial labels.
default: font-size:14px;line-height:14px;
CSS - Value
Text setting for specifying CSS attributes for the dial values and labels.
default: position:absolute;left:0;top:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;font-size:32px;line-height:32px;
Compact Timer Settings
This block renders a compact timer with three concentric dials showing the hours, minutes, and seconds to or from a certain date and time. If none is specified, the timer will count from the current time.
24hr Time
String setting to specify the time to count from or to. The time must be in the 24 hour format hh:mm:ss. If none is specified, the current time is used.
default: empty
Auto-Start
Checkbox setting that indicates whether the timer should start as soon as it becomes visible. If not set, the timer can only be started by calling the start() method.
default: on
Counter Size
Text setting to specify the width and height of the timer. Any CSS size value is allowed.
default: 200px
Date
String setting to specify the date to count from or to. The date must be in the format yyyy-mm-dd. If none is specified, the current date is used.
default: empty
HTML Id.
Text setting for specifying the HTML ID of the timer.
default: empty
Label
Text setting for specifying a label for the timer value.
default: hrs:min:sec
Colour - Dial Border
Colour picker setting for the colour of the external border dial.
default: #f00
Colour - Dial Inactive Marks
Colour picker setting for the colour of the "inactive" dial marks.
default: #ddd
Colour - Dial Marks
Colour picker setting for the colour of the "active" dial marks.
default: #000
CSS
Text setting for specifying CSS attributes for the entire timer component.
default: fill:none;stroke-width:8px;
CSS - Label
Text setting for specifying CSS attributes for the dial labels.
default: font-size:12px;
CSS - Value
Text setting for specifying CSS attributes for the dial values and labels.
default: font-size:16px;font-weight:bold;line-height:16px;