Welcome to the timer utility! |
|---|
| This utility is simple to use and easy to customize. |
| (Click anywhere inside this box to hide this message).
|
Instructions |
| To rename a timer, double click the name column to the left of the "Start Timer" button in each respective row. |
| To start or stop a timer, use the "Start Timer"/"Stop Timer" button to the left of the displayed time. |
| You can also edit the time directly by double clicking the hours, minutes, or seconds. |
|
| Mouse over the right of any given row to display the time in hours with minutes and seconds as a decimal. |
| The total time is the faded time to the left of the "Reset All Timers" button. |
|
| To leave a note or reminder for yourself, simply double click the note container below the timer utility. |
Customization |
| For additional customization, right click anywhere on the screen to access the customization menu. |
| Within this menu, you will find options for customizing the following: |
| background image, background color, utility color, border color, secondary color, text color, button color, and button text color. |
|
| To change the background image, put a url to an image (http...) in the text area and click apply. |
| To use a custom background image, place an image in the same folder as this application (the 'Timer.html' file). |
| Once an image file is in the same folder as this application, you can put the name of that file in the text area and click apply. |
| (Make sure to include the file extension. Example: if your image is named 'background.jpg', you will need to include '.jpg' when typing the file name).
|
|
| You can also customize how the image is stretched across the screen and where it is positioned. |
| Selecting 'Width' or 'Height' stretches the selected image across the screen either horizontally or vertically -- maintaining the image's original aspect ratio. |
| Selecting 'Both' stretches the image across the screen both horizontally and vertically -- ignoring the image's original aspect ratio. |
| Selecting the bullet or arrows below will position the image relative to the top, left, center, right, or bottom of the screen -- in that order. |
|
| Each of the color settings have four options: |
|
| Hue - Adjust this to select the color. |
| Saturation - Adjust this for more or less vibrant colors. |
| Lightness - Adjust this for lighter or darker colors. |
| Opacity - Adjust this to change the transparency of the area or elements being modified. |
|
| You will have to experiment with the color options to see what works best with your chosen background image. |
| Otherwise, thank you for using this timer utility. |
|