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

Both sides previous revisionPrevious revision
Next revision		Previous revision
Last revisionBoth sides next revision
tips:calendarmargin [2015/02/01 09:49] – splitbraintips:calendarmargin [2015/02/01 10:15] – 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.
  
  
 ===== 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:
  
Line 15: Line 18:
 ^ Height     | 512    | ^ 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 27:
 ^ % 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 47:
 ===== 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.
  
tips/calendarmargin.txt · Last modified: 2015/02/01 10:23 by splitbrain