Browse Source

add some documentation for future me or other poor people who have to edit the file again ;)

svn path=/trunk/; revision=34040
tags/stw2018
Max Mehl 2 years ago
parent
commit
53e425c9f5
1 changed files with 110 additions and 0 deletions
  1. 110
    0
      timeline/README.md

+ 110
- 0
timeline/README.md View File

@@ -0,0 +1,110 @@
1
+# Timeline SVG maintenance
2
+
3
+The SVG file of the timeline isn't easy to maintain, mainly because of the 
4
+appearing bubbles and the links when clicking on an event. This document shall 
5
+help you in case you are the poor person having to do that (hi future Me!) ;)
6
+
7
+Alert: I'm using a localised version of Inkscape so maybe some labels are 
8
+different to your English version.
9
+
10
+
11
+## Positioning of elements
12
+
13
+Inkscape will help you with positioning the various elements correctly. Use the 
14
+"Arrange" tool wisely. 
15
+
16
+To set the events at the correct vertical line, dock it to the inner border of 
17
+on of the four the greenish bars, then move it one large (Shift+Arrow) and one 
18
+small (Arrow) to the outer side. Don't ask why, but this is how it was invented 
19
+(shame on you, past Me!).
20
+
21
+
22
+## Name scheme
23
+
24
+The four bars are internally numbered, from 1 to 4 from left to right. This 
25
+will become important when we come to naming the bubbles.
26
+
27
+The only elements that need proper naming are the (invisible) bubbles. They 
28
+consist of 5 digits: $bar_number $month(2) $year(2)
29
+
30
+20815 means: 2nd bar (Policy), 08 2015
31
+
32
+
33
+## Unhide all bubbles
34
+
35
+If you open the file, the bubbles won't be visible and editable. You have to 
36
+unhide them first. Mark the "bubbles" layer, go to "Object" in the menu bar and 
37
+click "Unhide all". You now see all bubbles at once, overlapping each other.
38
+
39
+
40
+## Hide bubbles
41
+
42
+Click on a bubble and open the "object preferences" (Shift+Ctrl+O). Click on 
43
+the "hide" checkbox to make it disappear. To change the visibility status of a 
44
+hidden element, you can find it with the search function if you know its name 
45
+(look at "name scheme" above). You have to check the "include hidden elements" 
46
+box for that.
47
+
48
+
49
+## Setting links
50
+
51
+All items (layer "points") have a link to click on. Just right-click on the 
52
+event and click "link preferences" and edit the "Href" attribute. Remember to 
53
+set the Target to "_blank" to open a link in a new window when you click on it.
54
+
55
+
56
+## Hover bubbles
57
+
58
+When you hover over an event, it makes a bubble appear - and disappear as soon 
59
+as you hover out. This is the trickiest (and most fiddly) part, and needs two 
60
+things: a bubble with the correct name, and an event with the current function.
61
+
62
+First, give the bubble a proper name, following the "name scheme" from above. 
63
+This is tricky because sometimes it selects a single element of the bubble 
64
+instead of the whole group (or something). Sometimes I had to make two double 
65
+clicks in a row on a bubble to get the correct setting mask. If you copy an 
66
+existing bubble, rename it first, then edit it's content! Much easier, trust 
67
+me...
68
+
69
+After that, go to the respective event for this bubble (I assume you have moved 
70
+the bubble to a fitting position). Open the object preferences, click on 
71
+"interactivity". If "onmouseover" and "onmouseout" are blank, try to 
72
+double-click on the event again, and append a single click. For me this worked. 
73
+For your new event, copy the two strings and just update the 5 digits with the 
74
+name you gave the bubble. This name has to be unique! 
75
+
76
+If there are two events from the same month and year in the same bar, append a 
77
+"b" to it or something, and reflect this to the onmouseover/-out settings.
78
+
79
+After that, just hide the bubble (again). Click on it, open the object's 
80
+preferences and mark the hide checkbox.
81
+
82
+Hint: If you can't get to the preferences again because you can just select the 
83
+bubble's text or something, click the Esc button, or on a different element in 
84
+the file. Helps sometimes.
85
+
86
+
87
+## Publish on website
88
+
89
+If you didn't change the page size of the document, you can just commit the new 
90
+SVG file. Please remember to export the file to PNG and also commit that. This 
91
+is important as a fallback for poor old-IE users and non-Javascript users.
92
+
93
+If you changed the size of the page (because you added more years for example), 
94
+you may have to edit the source code of the file to make internet browser show 
95
+the whole document instead of blank nothing. 
96
+
97
+Open the SVG file in a text editor and set following values:
98
+
99
+  viewBox="0 0 $WIDTH $HEIGHT"
100
+
101
+  width="100%"
102
+  height="100%"
103
+
104
+You can get the width and height from the document settings in Inkscape. The 
105
+100% always stay the same. Of course, "$" will have to be removed.
106
+
107
+In the same step you might also want to anonymise the 
108
+"inkscape:export-filename" value since it might reveal your name or the folder 
109
+naming scheme (FSFE's president might not want you to use 
110
+/home/user/shittyFSFEworkCrap/ as the directory name).

Loading…
Cancel
Save