where “cal” is calendar, “d" is day, "31" is the 31st day. In similar way, we can create graphic files for "y" (year), "m" (month), and "w" (weekday). For example, we can create a "Friday" graphic file, as "cal-w-06.png", where "cal-w-01.png" means "Sunday".
Then we define the position for each of the calendar elements. In the above Noergaard clock example, there is only a “day” element, so we define the center for the day element as:
We can customize the font, font color, frame offset, and frame size.
Font and frame size is straight forward. The offset-x and offset-y define the center of each frame. So "cal-text-offset-x": 60 means 60 points right hand side from the screen center. "cal-text-offset-y": -5 means 5 points above the screen center. The screen center is coordinate (0, 0).
To hide the Lower frame, just place it out of the screen:
To set the text alignment (either Left, Center, or Right):
To speed up development, we can enable the “Load Documents folder” option. Such that we don’t have to zip, copy, and reload a theme .zip file every time we change something. When the “Load Documents folder” option is on, the app will load about.json and other .png files from the app’s Documents folder directly. After copying the about.json or any .png file, click the reload button.
Each .png is a Photoshop layer, from bottom to top, MYOC supports the following layers:
Layer Description Default center
----------- ----------------- ----------------
background - the bottommost device
clock-body - the clock body clock
clock-face - the clock face clock
hand-hour - hour hand clock
hand-minute - minute hand clock
hand-second - second hand clock
clock-glass - the clock glass clock
foreground - the topmost layer device
The preview.png is for the clock listing user interface. Any layer is optional. By default, each layer is centered at clock or device. How to customize default centers will be in a coming tutorial.
The default device center is at the middle of the iPhone/iPad.
The default clock center is at the middle of the left yellow square, i.e.:
The content of the calendar is configurable by user inside the app. How to custom the layout and font of the calendar will be in another tutorial.
So please feel free to modify the graphics files in Analog.zip and build your own clocks.
To install a theme, simple click the .zip file download via iPhone’s Safari or email app, then Open in Clocks.