- Version: 1.0
- Downloaded: 2867 times
- Viewed: 8682 times
- File Size: 94.14 KB
- File Type: .watch file
- Create Date: August 9, 2015
- Last Updated: August 9, 2015
Full calendar tutorial
This tutorial demonstrates how to show a calendar with all calendar entries, where every entry is completely shown (no truncated text). The idea is to break long lines (intelligently) into several lines and have two tab actions to scroll through the text vertically. Think off this like a text editor, which breaks long lines, shows just a few lines of text and gives you a scroll bar to scroll through the complete text. In this tutorial we do the same where the calendar entries are the text.
The code is very flexible. When using it on your own watchface you just need to decide how many lines of text you want to display and how many characters a line can hold.
Just check the tutorial watchface to see how it looks and work. Press the center to switch between your calendar and a sample calendar (which has 4 entries broken into 8 lines). Use the two tab actions on the right to scroll through the text. Note that a light grey tab action shows that it can be used while dark grey visualizes that you currently can't scroll in that direction.
The code provides the following features:
. all 10 calendar entries WM provides are completely available (i.e. broken into separate lines)
. text can be vertically scrolled with two tab actions
. lines are broken by word boundaries and not in the middle of a word
. calendar entries get a prefix showing start and end time and day (if not for today)
. two tab actions to scroll up and down (if you can't scroll in one direction the tab actions is "switched off" by darken it)
How to use:
I assume that you want to use the calendar as a sub screen of your watchface. If so, just copy everything from the script to your script (except the last section which if just used for a sample calendar). The script is commented, if your script has sections, copy the parts appropriately (for example there is a section to initialise variables, all the functions etc.). The following is important:
1. Set the variable var_numberVisibleLines to the number of lines your calendar should show (a value between 3 and 12 makes sense in my opinion)
2. Use a sample text to see, how.much characters a line can hold. Then set variable var_maxLineLength to this value.
That's all for the script, everything else can be copied without any change.
What you need on your watchface:
1. Add the visible lines. To do, just add text lines with the following text
var_calVisLines[1]
where you replace 1 with the number of the line, i.e 3 for third line etc.
2. To create the tab action to scroll up, use whatever element you prefer and add as 'Tab Action' the folliwing 'script':
scrollCalUp()
As 'Color' use:
var_calIdx == 1 and '555555' or '888888'
And replace 555555 by the color you want if the tab action is inactive. Replace 888888 by the color when the tab action is active.
3. Do the same for the tab action to scroll down with the following changes: The 'Tab Action' is the following script:
scrollCalDown()
As 'Color' use:
var_calIdx >= var_calLines - var_numberVisibleLines + 1 and '555555' or '888888'
and replace 555555 and 888888 as in step 2.
That's it, I hope you find this tutorial useful.
File | |
---|---|
calendar-tutorial.watch |