How to make graphical calendars

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:

  • The calendar is not text-based, instead there is only a day window.
  • The clock is centered. 

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!

To install a theme .zip file via iTunes

How to install a theme .zip file via iTunes:

  • Copy the theme .zip file via iTunes
  • Open Clocks app, click Refresh icon, then click List icon

To copy a theme zip file via iTunes, please:

  • 1 - Connect iPhone to iTunes
  • 2 - Click on the iPhone under DEVICES
  • 3 - Click Apps 
  • 4 - Scroll down until you see Clocks in Apps 
  • 5 - Click Clocks
  • 6 - Drag the theme zip file to Clocks Documents window

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)

How to customize the calendar

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:

  • Main line, February 26 in the above example
  • Upper line, Sunday
  • Lower line (hidden for this clock theme)

Now let’s try a theme development feature:

  • Open the app information screen by clicking the i icon
  • Scroll to Theme development section
  • Enable “Show calendar frame”
  • Click Done

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!

How to create a simple theme

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!