There are two options to customize the calendar:
In this tutorial, we are going to make a clock with a graphical calendar, like this beautiful Noergaard clock by Steffen Nørgaard Andersen of http://inze.it/
DIfferent from other clocks we have seen:
To make this clock, we create 31 png files for each represents one day, so we’ll have:
cal-d-01.png
cal-d-02.png
cal-d-03.png
.
.
.
cal-d-31.png
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:
"cal-d-offset-x": 0, "cal-d-offset-y": 56,
And the clock is also at center of the screen:
"clock-offset-x": 0, "clock-offset-y": 0,
The full about.json file looks like:
{
"theme": "Noergaard",
"version": "1.0",
"author": "Steffen Nørgaard Andersen",
"website": "http://inze.it/",
"clock-offset-x": 0,
"clock-offset-y": 0,
"cal-d-offset-x": 0,
"cal-d-offset-y": 56,
"remark": ""
}
That’s it. Enjoy!
How to install a theme .zip file via iTunes:
To copy a theme zip file via iTunes, please:
as shown in the following iTunes screen:
Once the theme .zip file is copied, click Refresh and select from one of the Clocks:
(Source: horaceho)
After making a simple theme, we proceed to customize the calendar, like the following Office Board theme:
By default, each calendar can show 3 lines of text:
Now let’s try a theme development feature:
The 3 calendar frames is now visible:
To customize a calendar like the Office Board theme, let’s edit the about.json file:
{
"theme": "Office Board",
"version": "1.0",
"author": "Volkov Evgeny",
"website": "http://the-m2.tumblr.com",
"cal-text-font": "Futura",
"cal-text-size": 20.0,
"cal-text-offset-x": 60,
"cal-text-offset-y": -5,
"cal-text-size-width": 140,
"cal-text-size-height": 40,
"cal-upper-text-font": "Futura",
"cal-upper-text-size": 18.0,
"cal-upper-text-offset-x": 60,
"cal-upper-text-offset-y": -25,
"cal-upper-text-size-width": 140,
"cal-upper-text-size-height": 30,
"cal-lower-text-offset-x": 60,
"cal-lower-text-offset-y": 1000,
"remark": "Cork board and office stuff inspired"
}
The Main calendar line is controlled by:
"cal-text-font": "Futura", "cal-text-size": 20.0, "cal-text-offset-x": 60, "cal-text-offset-y": -5, "cal-text-size-width": 140, "cal-text-size-height": 40,
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:
"cal-lower-text-offset-x": 60, "cal-lower-text-offset-y": 1000,
To set the text color, using css-style color:
"cal-text-color": "#e1e9ef",
To set the text alignment (either Left, Center, or Right):
"cal-text-align": "Right",
Tip:
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.
Enjoy!
Make Your Own Clock (MYOC) is a clock app which supports theming. Let’s start with a simple clock theme …
Simply download the sample Analog.zip theme, unzip it, and check out the content:
about.json background.png background@2x.png clock-face.png clock-face@2x.png clock-glass.png clock-glass@2x.png foreground.png foreground@2x.png hand-hour.png hand-hour@2x.png hand-minute.png hand-minute@2x.png hand-second.png hand-second@2x.png preview.png preview@2x.png
There are some .png files and an about.json file.
The about.json file contains theme information:
{
"theme": "Analog Clock",
"version": "1.0",
"author": "Horace Ho",
"website": "http://ho.race.hk",
"remark": "A sample clock theme"
}
Any .png files with a @2x suffix is for retina display iPhone. The others are for iPhone and iPod with a standard display.
To make it a little bit clear, let’s focus on one resolution first:
background.png clock-face.png clock-glass.png foreground.png hand-hour.png hand-minute.png hand-second.png preview.png
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.
Make clocks and share. Enjoy!