Canvas Clockface

Clockface 0x07 is a special type of theme. Unlike the previous ones that are of a specific theme like Mario or Time in Words, this is a blank canvas that is capable of rendering different themes that are described in a JSON file, that's why it is called Canvas .

How does it work?

Clockface 0x07 adds two extra parameters to Clockwise's Settings page, the server address and the name of the file describing the theme:

• [Canvas] Server Address: by default it will point to the Clock-Club repository where the themes are located, but this parameter can be used to point to your machine, so it is possible to develop your themes locally.
• [Canvas] Description file: is the name of the JSON file without extension that describes how the theme will be, more details on how this file is created can be seen below. For example, if the file is called my-theme.json, just enter my-theme.

Once the parameters are filled in correctly, starting Clockwise with the "Canvas" clockface will download the JSON file and render it on the display automatically.

JSON Structure

Root object

{
    "name": "My Theme",   // String. Name of the theme
    "version": 1,         // Number. Version of the theme   
    "author": "@jnthas",  // String. Name, handle or email of the author
    "bgColor": 0,         // Number. Background color of the display. In decimal format.
    "delay": 300,         // Number. Delay in milliseconds 
    "setup": [],          // Obj.Array. The 'setup' array is executed once as the clockface starts up 
    "sprites": [],        // Obj.Array. The 'sprites' array contains the images to be rendered and updated in the clock
    "loop": []            // Obj.Array. The 'loop' array contain elements that will be rendered in every loop respecting the delay param
}

Setup object

The possible values in Setup object are:

Date/Time element

Show date and/or time in the clock

{
    "type": "datetime",     // String. The type of element, must be `datetime`
    "content": "H:i",       // String. The format od date/time. Use any formatting string from [ezTime](https://github.com/ropg/ezTime#getting-date-and-time)
    "font": "",             // String. The font name to be used. Available values are picopixel, square, big, medium or leave it empty to set the default font.
    "fgColor": 65535,       // Number. Foreground color. Use in decimal format.     
    "bgColor": 396,         // Number. Background color. Use in decimal format.
    "x": 34,                // Number. Horizontal position of the element. 0-64.
    "y": 45                 // Number. Vertical position of the element. 0-64.
},

Line element

Draws a line in the clock

{
    "type": "line",         // String. The type of element, must be `line`
    "color": 29582,         // Number. Line color. Use in decimal format.    
    "x": 10,                // Number. Initial position of the line element. 0-64.
    "y": 41,                // Number. Initial position of the line element. 0-64.
    "x1": 54,               // Number. Final position of the line element. 0-64.
    "y1": 41                // Number. Final position of the line element. 0-64.
},

Image element

Renders a PNG image in the clock

{
    "type": "image",        // String. The type of element, must be `image`
    "x": 3,                 // Number. Horizontal position of the element. 0-64.
    "y": 0,                 // Number. Vertical position of the element. 0-64.
    "image": "iVBORw0K"     // String. It's a PNG in base64 format. More details below.
},

Text element

Renders a text in the clock

{
    "type": "text",                 // String. The type of element, must be `text`
    "content": "enjoy your day!",   // String. The text to be displayed
    "font": "picopixel",            // String. The font name to be used. Available values are picopixel, square, big, medium or leave it empty to set the default font.
    "fgColor": 26592,               // Number. Foreground color. Use in decimal format.     
    "bgColor": 396,                 // Number. Background color. Use in decimal format.
    "x": 6,                         // Number. Horizontal position of the element. 0-64.
    "y": 60                         // Number. Vertical position of the element. 0-64.
},

Rect element

Draws a rect in the clock

{
    "type": "rect",         // String. The type of element, must be `rect`
    "color": 29582,         // Number. Rect color. Use in decimal format.    
    "x": 10,                // Number. Horizontal position of the element. 0-64.
    "y": 41,                // Number. Vertical position of the element. 0-64.
    "width": 10,            // Number. Width of the element. 0-64.
    "height": 10            // Number. Height of the element. 0-64.
},

Fillrect element

Draws a fullfilled rect in the clock

{
    "type": "fillrect",     // String. The type of element, must be `fillrect`
    "color": 29582,         // Number. Rect color. Use in decimal format.    
    "x": 10,                // Number. Horizontal position of the element. 0-64.
    "y": 41,                // Number. Vertical position of the element. 0-64.
    "width": 10,            // Number. Width of the element. 0-64.
    "height": 10            // Number. Height of the element. 0-64.
}

Open a Pull Request to Clock-Club and make it available to other users!

Next steps

A visual editor to generate the JSON will be a nice tool.

Common errors

Local server is not running:

[HTTP] GET request to '192.168.3.19/hello-world.json' on port 4443
[  4176][E][ssl_client.cpp:129] start_ssl_client(): socket error on fd 49, errno: 104, "Connection reset by peer"
[  4177][E][WiFiClientSecure.cpp:144] connect(): start_ssl_client: -1
Connection failed
deserializeJson() failed: EmptyInput