Clock's skins are made by vector shapes stored in json format.
You can simply create a new .json file somewhere in your computer, and point Clock to it.
You can start Clock in Preview Mode by passing the -p command line parameter and the path to the skin file you're working on:
CodeMade.Clock.exe -p [path to the json file]
While in preview mode, Clock watches for any changes to the json file and immediately refreshes the preview image. As such, the most productive way to develop skins is to have preview mode side by side with a good text editor, such as Visual Studio Code, Sublime Text or Notepad++:
Once you're happy with your skin, just pass it as a command line parameter (without the -p) to use it:
CodeMade.Clock.exe [path to the json file]
A clock skin is compose hierarchically by one Canvas that contains one or more layers.
Layers can contain other layers or shapes.
When defining elements in json, each object will contain a "$type" property that distinguishes what kind of shape or layer it is.
There are several types of layers:
- The basic layer, is a transparent container of other layers and shapes. It can define a transformation in terms of position and rotation that will be applied to all its children.
- The SolidLayer is essentially the same as the normal Layer but defines a background color.
- The GaussianBlurLayer, which will blur anything that it contains.
- The RotateRepeatLayer, which will draw anything it contains multiple times at various angles.
- The NumbersLayer is useful for drawing the numbers on a clock's face.
Plus of course there are layers that will change with time:
- HoursLayer will rotate according to the hour
- MinutesLayer will rotate according to the minute
- SecondsLayer will rotate according to the second
Everyting that gets drawn by Clock is composed by arranging various types of shapes:
- 🔴 CircleShape
- 🟦 RectangleShape
- 🗯 a generic polygon Shape that is composed by a set of points
- 🖼 a BitmapShape that loads and displays an image
- 🔠 TextShape is used to draw text
Shapes can be filled with solid colors, linear and conical gradients. See how