Watchmaker Wiki

The ultimate watch maker for Android Wear!

User Tools

Site Tools


tips:calendarmargin

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
tips:calendarmargin [2015/02/01 10:58]
splitbrain
tips:calendarmargin [2015/02/01 11:23]
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:
  
Line 17: Line 21:
 Also pick a different color for each of them. 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 23: 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.
Line 30: Line 36:
 ===== 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:
  
Line 41: 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.
  
tips/calendarmargin.txt ยท Last modified: 2015/02/01 11:23 by splitbrain