Image
Image

Shopify DeDial Components

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;