Differences

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

--- tips:calendarmargin [2015/02/01 09:58] – splitbrain
+++ tips: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.
-//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 =====
+{{ :tips:calendarmargin:screen1.png?100|}}
 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.
+{{ :tips:calendarmargin:screen2.png?100|}}
 Then add a [[:shader#Segment Between]] to each of them using the following properties:
@@ Line 23: / Line 28: @@
 ^ % opacity in range      | 80   |
 ^ %opactiy outside range     | 0    |
 Of course adjust the number in ''{c1br}'' and ''{c1er}'' for each of the segments.
@@ Line 30: / Line 36: @@
 ===== Inner Circle =====
+{{ :tips:calendarmargin:screen3.png?100|}}
 Now add another circle, slightly smaller than your full watch face:
@@ Line 41: / Line 48: @@
 ===== 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.