Scenic.Clock.Components (scenic_clock v0.11.0-beta.0) View Source

A set of helper functions to make it easy to add, or modify, clocks to a graph.

Link to this section Summary

Functions

Add an analog clock to a graph.

Add an digital clock to a graph.

Link to this section Functions

Link to this function

analog_clock(graph, options \\ [])

View Source

Specs

analog_clock(
  source :: Scenic.Graph.t() | Scenic.Primitive.t(),
  options :: list()
) :: Scenic.Graph.t() | Scenic.Primitive.t()

Add an analog clock to a graph.

There is no required data, only styles.

Styles

Analog Clocks honor the following styles

  • :hidden - If false the clock is rendered. If true, it is skipped. The default is false.
  • :theme - The color set used to draw. See below. The default is :dark

Additional Options

Analog clocks follow the following list of additional options.

  • :radius - the radius of the clock's main circle.
  • :seconds - true or false. Show the seconds hand. Note: Showing the seconds hand uses more energy by rendering the scene every second. The default is false.
  • :ticks - true or false. Show ticks marking the hour positions. Default is true if the radius is >= 30.

Theme

To pass in a custom theme, supply a map with at least the following entries:

  • :border - the color of the ring around the clock
  • :background - the normal background of the clock

The following theme colors are optional. If they are not supplied, :border will be used.

  • :hours - the color of the hours hand
  • :minutes - the color of the minutes hand
  • :seconds - the color of the seconds hand

Examples

The following example creates an analog clock it on the screen.

graph
|> analog_clock( translate: {20, 20} )

The next example makes the same clock as before, but shows the seconds hand.

graph
|> analog_clock( seconds: true, translate: {20, 20} )
Link to this function

digital_clock(graph, options \\ [])

View Source

Specs

digital_clock(
  source :: Scenic.Graph.t() | Scenic.Primitive.t(),
  options :: list()
) :: Scenic.Graph.t() | Scenic.Primitive.t()

Add an digital clock to a graph.

There is no required data, only configuration options.

Styles

Digital Clocks honors all the styles you would expect to render text. This includes

  • :font
  • :font_size
  • :text_align
  • :text_base

Note that you must set the font/text styles directly on the component when you use it in a graph. They are not automatically inherited.

Additional Options

Digital clocks support the following list of options.

  • :format - :hours_12 or :hours_24. The default is :hours_12.

Theme

The Digital clock does not use the current theme for coloring. Add a :fill style instead, just as you would for a text primitive.

Examples

The following example creates an analog clock it on the screen.

graph
|> digital_clock( translate: {20, 20} )