clock

Configuration is nested like CSS is. To get the actual value for a nested variable he current alarm is first checked. If this is set to the special value inherited then the alarm's Alarm Set is checked for a value. If its value too is inherited then the system configuration is used to get the value. Setting values here reflects immediately in the display, it is not necessary to click any "apply" button.

Configuration is separated into 3 parts. The first part controls the contents of the display,

Display: 12 hour or 24 hour format. (AM and PM are not displayed in 12-hour format)
Seconds: display (or not) the seconds field
Count down: if alarms are set count down to the next alarm rather than going forward

The second box controls the format of the display. This is the section that is inherited by alarms and alarm sets if they are set to "inherit" rather than to a particular value.

Foreground: the foreground color
Background: the background color
Warning: if set to a positive number replaces the selected style with the warning style when the selected number of minutes remains before the next alarm
Bell: Sets the default value for the sound to be played when time expires. The distribution contains a few bells, others can be added by linking to them on the web (see section on Bells)
Font: Select the font to use for display. (monospaced fonts work best)
Bold: Use the bold version of the font, if available
Italic: Use the italic version of the font, if available

The third box holds advanced controls that adjust the running of the clock.

Refresh: The number of milliseconds to wait between screen updates. If this were set to 1000 (one refresh a second) it would possibly skip a second, and be inaccurate by up to a seconds. Setting it too small will slow your browser down. Default is 300ms, about 3 updates per second.
Fudge: On my school chromebook I found the clock ran late by about 1.5 seconds. This is particularly obvious when the school bell rings before the clock says it should. The fudge factor is added to the system time to get a better estimate of the true time. For my school chromebook, setting this to 1500 (1.5 seconds) makes it run just right
Context menu: if selected right click displays a popup menu. Otherwise right cliick gives the system popup menu.

Changes made in this box are implemented immediately. There are two actions which can be taken on the configuration. These are:

save config: Writes just these config values in local machine storage. If this is done the current values will be loaded on next startup. Otherwise changes will be lost next time the user opens the app
restore config: Restores just the base configuration values to the last saved state

Alarms will signal when a particular time is reached, at which point the screen will flash and optionally a sound will be played. All Alarms are associated with an Alarm Set and are activated when that Alarm Set is active and the active box is checked in their definition.

The Alarm configuration screen has the following controls:

Alarm Set dropdown: this duplicates the functionality of the Alarm Set selection panel (see Alarm Sets). Offering it here also is more convenient when editing Alarms in multiple Alarm Sets
Alarm definitions: This is where the alarms can be added, deleted, edited, and activated/deactivated.
- - (delete): deleted the alarm on the current line
- time: sets the trigger time for the alarm on this line. Time is entered using military (24-hour) time, and can be right-truncated. That is, an alarm for 11:00 can be entered as 11, 11:00, or ll:00:00
- name: A name to refer to this Alarm. This is optional, no name is required
- active: if this is checked the Alarm is active and will go off when the time is reached. If it is not checked or if the Alarm Set is not activated it will not go off.
- keep (only for Alarms in the default Alarm Set): If not checked this Alarm is temporary, it will be deleted after the first time it goes off, and it will not be saved with the rest of the configuration. All Alarms not in default are permanent Alarms. They will be saved and after going off will reset for the next day.
- style: This button opens the Alarm style dialogue for this Alarm. It allows setting all the style options described in the System Values: style description
+ (new alarm): adds a new Alarm to the current Alarm Set
Apply button: Changes made in the Alarm definition dialogue do not take effect until the Apply button is pressed
Restore button: reloads the current Alarm Set and all its ALarms from its last saved definition

The Bells configuration tab is where the sounds are that can be associated with Alarms to play when they are triggered. Besides the supplied sounds, you can add custom ones by adding links to mp3 files available on the web. To add a new sound fill in the entire URL in the right text input and a unique name in the left input, and then click add. Once added you can select it and click on test to make sure the definition is correct.

Like Fonts, the order can be rearranged by using the arrow buttons on the right, though also like Fonts the order doesn't make any difference.

The checkbox preceding each Bell can be used to remove that Bell from the random selection. If the box is unchecked you can still explicitly choose an Alarm to sound that bell, but it will not be available to be selected by an Alarm with random bell.

Bells can be added from the network by entering a URL or from the local machine by selecting a file. The Add Bell function uses the URL if it is non-blank, or the File if URL is empty. This lets users add custom mp3 files from their local machine - but there is a downside to this. Because of Javascript security local bells cannot be saved, and must be reentered manually each time the app is started.

Finding URLs can be a little tricky. There are many free mp3 files available, but most are officially available for download, not linking. You need to find the URL of the actual mp3 file on the server to link to it. If you are familiar with the browser debugger, you can open that and with the Network tab open play an mp3 file. The URL should be vavilable in the headers.

If this is too difficult a second way would be to load the app files on your own computer and run off that. Download the app files clock.js and clock.html to a directory on your local machine. You can then run the app in your browser by using the URL file:///path.clock.html'. Any mp3 files put in that directory will then be available my using the file name (including the .mp3 suffix) as the URL.