Watchmaker Wiki

The ultimate watch maker for Android Wear!

User Tools

Site Tools

Trace:
tips:calendarmargin

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
tips:calendarmargin [2015/01/21 21:46] – created splitbraintips:calendarmargin [2015/02/01 10:23] (current) – splitbrain
Line 3: Line 3:
 The goal is to display a little border on a round watch face to mark the duration of the next 3 events. The goal is to display a little border on a round watch face to mark the duration of the next 3 events.
  
-//This technique is used in my [[http://facerepo.com/app/faces/details/splitbrain-agenda-14adf31197d|Agenda Watch Face]]. I'm still experimenting with the optimal expressions. Screenshots will be added later.//+This technique is used in my [[http://facerepo.com/app/faces/details/splitbrain-agenda-14adf31197d|Agenda Watch Face]].
  
 +This page describes the basic technique only for the margin visualization only. You can of course combine it with other agenda features like actually displaying the events.
 +
 +Before you start, you should create three events today's calendar, otherwise you won't see anything in watchmaker.
  
 ===== Circle Segments ===== ===== Circle Segments =====
  
 +{{ :tips:calendarmargin:screen1.png?100|}}
 For each of the 3 next potential events we will create one circle [[:shape]] with the following properties: For each of the 3 next potential events we will create one circle [[:shape]] with the following properties:
  
 ^ Position X | 0  | ^ Position X | 0  |
 ^ Position Y | 0  | ^ Position Y | 0  |
-^ Width      | 25   | +^ Width      | 512   | 
-^ Height     | 25    |+^ Height     | 512    | 
 + 
 +Also pick a different color for each of them.
  
 +{{ :tips:calendarmargin:screen2.png?100|}}
 Then add a [[:shader#Segment Between]] to each of them using the following properties: Then add a [[:shader#Segment Between]] to each of them using the following properties:
  
Line 21: Line 28:
 ^ % opacity in range      | 80   | ^ % opacity in range      | 80   |
 ^ %opactiy outside range     | 0    | ^ %opactiy outside range     | 0    |
 +
  
 Of course adjust the number in ''{c1br}'' and ''{c1er}'' for each of the segments. Of course adjust the number in ''{c1br}'' and ''{c1er}'' for each of the segments.
  
-You should now have three circle wedges marking the time of the next three events on a twelve hour clock. Some of them may overlap, but thanks to the lowered opacity of 80 it should be obvious where that happens. We'll adjust this later+You should now have three circle wedges marking the time of the next three events on a twelve hour clock. Some of them may overlap, but thanks to the lowered opacity of 80 it should be obvious where that happens. We'll adjust this later.
  
 ===== Inner Circle ===== ===== Inner Circle =====
  
 +{{ :tips:calendarmargin:screen3.png?100|}}
 Now add another circle, slightly smaller than your full watch face: Now add another circle, slightly smaller than your full watch face:
  
 ^ Position X | 0  | ^ Position X | 0  |
 ^ Position Y | 0  | ^ Position Y | 0  |
-^ Width      | 485   | +^ Width      | 480   | 
-^ Height     | 485    |+^ Height     | 480    |
  
 This will cover most of the wedges above, keeping only a small border left. This circle is your base for the rest of the watch face. Of course you could also use an image or any of the [[:images#Watch Backgrounds]]. This will cover most of the wedges above, keeping only a small border left. This circle is your base for the rest of the watch face. Of course you could also use an image or any of the [[:images#Watch Backgrounds]].
Line 39: Line 48:
 ===== Current time ===== ===== Current time =====
  
 +{{ :tips:calendarmargin:screen4.png?100|}}
 You could simply add a [[:image#watch hand]] to show the current time. But let's make it a bit more fancy. We'll use a small triangle to indicate the current time. You could simply add a [[:image#watch hand]] to show the current time. But let's make it a bit more fancy. We'll use a small triangle to indicate the current time.
  
Line 102: Line 112:
   * the second event ends before the first event and before now on a 12h clock   * the second event ends before the first event and before now on a 12h clock
  
-==== Second Segment ====+==== Third Segment ====
  
 <code lua opacity in range> <code lua opacity in range>
tips/calendarmargin.1421876804.txt.gz · Last modified: by splitbrain