Custom Clock applet

From SqueezeboxWiki

1 Overview
2 Installation
3 Customization
4 Bugs and new features

Overview

This is a screensaver for Squeezebox Controller/Touch/Radio devices that shows a clock. It is possible to select among a number of different styles and you can configure what kind of date/time information you like to show.

All earth and moon images used in the Daylight and Moon styles are downloaded at runtime from http://www.die.net/earth

Installation

Goto Squeezebox Server Settings/Plugins and make sure the Show all 3rd party plugins checkbox is checked
On the Squeezebox Touch, Radio or Controller goto Settings/Advanced/Applet Installer and select to install Custom Clock applet.
Optionally also install the Custom Clock Helper plugin through Squeezebox Server Settings/Plugins which makes it possible to create your own custom clock styles
If you install the Custom Clock Helper plugin you might also want to look at the available Custom Clock styles

Customization

It's very easy for the developer to add new custom styles on user request, you just have to create the necessary images.

Generally speaking all the text items can be resized, colored and positioned pretty much as you like to make them fit your clock face image.

Post in the 3rd party plugin section of the forum and mention "Custom Clock" in the title of the thread if you have made some images you like to be added as a style.

Custom Clock Helper

If you like to create your own clock style you should install the Custom Clock Helper plugin in your Squeezebox Server. By doing this you will be able to create new styles or edit the existing styles directly in your own setup.

The procedure after installation is as follows:

Goto Squeezebox Server Settings/Plugins/Custom Clock Helper
Select the style you like to change or "New..." if you like to create a new one
Modify any style parameters and click save
On the Controller/Radio/Touch, goto Settings/Screen/Custom Clock Settings/Styles
In the list of styles, first select another style then select the style you just edited. This will load your new style attributes and the next time the screen saver is activated it will use the updated attributes

Note!

I would love to add more styles to the default list, so if you create a new style you are satisfied with, please post it's parameters in the 3rd party plugins section of the forum and it will be included it in a future release.

Sample styles can now be viewed at: http://wiki.slimdevices.com/index.php/Custom_Clock_styles

Digital clocks

In the digital mode there are two possible images:

The background image (optional)
- A non transparent image with the screen resolution, this is typically a standard wallpaper image
  - Touch: 480x272
  - Radio: 320x240
  - Controller: 240x320
The clock face image (optional)
- An image with completely or partly transparent background with the clock face in solid colors. You can design the clock face so it just fills part of the screen or the complete screen. The image will be centered on the screen if it's smaller than the resolution of the Squeezebox display.

The clock will be drawn to the screen as follows:

Draw the background image
Draw the clock face image on top of the background and center it on the screen
Draw all the text items on top of background and clock face

Analog clocks

In the analog mode there are five possible images:

The background image (optional)
- A non transparent image with the screen resolution, this is typically a standard wallpaper image
  - Touch: 480x272
  - Radio: 320x240
  - Controller: 240x320
The clock face image
- An image with completely or partly transparent background with the clock face in solid colors. You can design the clock face so it just fills part of the screen or the complete screen. The image will be centered on the screen if it's smaller than the resolution of the Squeezebox display.
  - It's important that the middle of the clock is in the middle of the image
  - The clock face should be sized as listed below but the actual image can cover the whole screen, the clock face need to match the size of the hand images
  - If you like to display information above and below the clock, it's preferable that the actual face has the maximum size
    - Touch: 180x180
    - Radio: 150x150
    - Controller: 210x210 (sample)
  - If you don't like to display information above and below the clock, you should use a face size with the maximum size
    - Touch: About 250x250 (sample)
    - Radio: About 210x210 (sample)
    - Controller: About 210x210 (sample)
The hour hand image
- A square image with completely or partly transparent background, it should have a size up to the Squeezebox display size, the standard clocks uses 240x240 (7.3) or 176x176 (7.4)
- The hour hand needs to start in the middle of the image and go straight up as when the clock is 12:00:00
- The image will be rotated when shown so the hour hand points in the correct direction according to the current time
- The length of the hour hand should match the clock face image
- Sample
The minute hand image
- A square image with completely or partly transparent background, it should have a size up to the Squeezebox display size, the standard clocks uses 240x240 (7.3) or 176x176 (7.4)
- The minute hand needs to start in the middle of the image and go straight up as when the clock is 12:00:00
- The image will be rotated when shown so the minute hand points in the correct direction according to the current time
- The length of the minute hand should match the clock face image
- Sample
The second hand image (optional)
- A square image with completely or partly transparent background, it should have a size up to the Squeezebox display size, the standard clocks uses 240x240 (7.3) or 176x176 (7.4)
- The second hand needs to start in the middle of the image and go straight up as when the clock is 12:00:00
- The image will be rotated when shown so the hour hand points in the correct direction according to the current time
- The length of the second hand should match the clock face image

The clock will be drawn to the screen as follows:

Draw the background image and resize it to fit the screen if it's smaller or larger than the screen size
Draw the clock face image on top of the background and center it on the screen
Draw the hour image on top of the background and clock face, center it on the screen and rotate it according to current time
Draw the minute image on top of the background and clock face, center it on the screen and rotate it according to current time
Draw the second image on top of the background and clock face, center it on the screen and rotate it according to current time
Draw all the text items on top of the background and clock face