c126d11da071c7d7629f2014622c2e70a52f690c
[potlatch2.git] / net / systemeD / potlatch2 / help / HelpDialog.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:TitleWindow
3         xmlns:fx="http://ns.adobe.com/mxml/2009"
4         xmlns:mx="library://ns.adobe.com/flex/mx"
5         xmlns:help="net.systemeD.potlatch2.help.*"
6         layout="vertical" showCloseButton="true"
7         horizontalAlign="center" title="{getTitleText()}"
8         width="660" height="500"
9         verticalGap="0">
10   <fx:Script><![CDATA[
11     import mx.managers.PopUpManager;
12     import mx.events.CloseEvent;
13     import mx.core.Application;
14     import mx.core.FlexGlobals;
15     import net.systemeD.halcyon.Globals;
16
17         [Bindable] private var application:Object = FlexGlobals.topLevelApplication;
18         [Bindable] private var locale:String = Globals.vars.locale;
19
20     /** Pops up a multi-tabbed help window in the middle of the screen, then remembers that the user has seen it. */
21     public function init():void {
22         PopUpManager.addPopUp(this, Application(application), true);
23         PopUpManager.centerPopUp(this);
24         this.addEventListener(CloseEvent.CLOSE, helpDialog_close);
25
26         // store whether the user has seen the help dialog before
27         var obj:SharedObject = SharedObject.getLocal("user_state");
28         obj.setProperty("help_shown","true");
29
30         buildShortCuts();
31
32         ss.parseCSS(hoverStyles);
33     }
34
35     // Styling the text within an mx:Text can't be done with the Flex style system. Instead the flash.text styleSheet system must be used
36     // and the stylesheet applied to each mx:Text that requires it after its been initialized
37     private var hoverStyles:String = "a:hover { color: #0000ff; text-decoration: underline; } a { color: #0000aa; text-decoration: underline; }";
38     private var ss:StyleSheet = new StyleSheet();
39
40     // perhaps a better way would be to iterate over the TabNavigator and find all the mx:Text children.
41     // If so, you need to do that after all the children have been created. For now, each Text object can call this when initialized
42     private function applyTextStyle(t:Text):void {
43         t.styleSheet = ss;
44     }
45
46     private function helpDialog_close(evt:CloseEvent):void {
47         PopUpManager.removePopUp(this);
48     }
49
50     private function getTitleText():String {
51         var site_name:String = loaderInfo.parameters["site_name"];
52         if (site_name) {
53           return "Welcome to Potlatch2 for " + site_name;
54         }
55         return "Welcome to Potlatch2";
56     }
57
58     private function getIntroText():String {
59         var site_name:String = loaderInfo.parameters["site_name"];
60         if (site_name) {
61           return "<p><b>Potlatch2</b> is an OpenStreetMap (OSM) editor that allows you to make edits directly through the " + site_name + " website.</p>";
62         }
63         return "<p><b>Potlatch2</b> is an OpenStreetMap (OSM) editor that allows you to make edits directly through this website.</p>";
64     }
65
66     private function getSaveText():String {
67         var site_name:String = loaderInfo.parameters["site_name"];
68         if (site_name) {
69           return "<p>If you feel confident with your edits, hit save to publish to <a href=\"http://www.openstreetmap.org\" target=\"_blank\">http://www.openstreetmap.org</a>. Most edits take a few hours to show up on OSM and subsequently on " + site_name + ".</p>";
70         }
71         return "<p>If you feel confident with your edits, hit save to publish to <a href=\"http://www.openstreetmap.org\" target=\"_blank\">http://www.openstreetmap.org</a>. Most edits take a few hours to show up on OSM.</p>"
72     }
73
74     private function buildGrid(text:Array):Grid {
75         var grid:Grid = new Grid()
76         grid.percentWidth=100;
77         grid.setStyle("verticalGap",1);
78         for each (var pair:Array in text) {
79           var gr:GridRow = new GridRow();
80           gr.percentWidth=100;
81           var left:GridItem = new GridItem();
82           var label:Label = new Label();
83           label.styleName = "helpHeaderText";
84           label.percentWidth=100;
85           label.text = pair[0];
86           var right:GridItem = new GridItem();
87           right.percentWidth=100;
88           var rtext:Text = new Text();
89           rtext.condenseWhite=true;
90           rtext.percentWidth=100;
91           rtext.htmlText = pair[1];
92           left.addChild(label);
93           right.addChild(rtext);
94           gr.addChild(left);
95           gr.addChild(right);
96           grid.addChild(gr);
97         }
98         return grid;
99     }
100
101     private function buildShortCuts():void {
102         var text:Array = [["Click+Drag", "Drag the map to move around"],
103                           ["Single Click", "Start a new way"],
104                           ["Double-Click or Return", "Finish drawing way"],
105                           ["Click+Drag at node or way", "Move the node or way"],
106                           ["Shift+Click", "Insert point in a way"],
107                           ["Shift+Click at point", "Create new way from point"],
108                           ["-","Delete point from selected way"],
109                           ["Backspace/Delete", "Delete point"],
110                           ["Shift+Backspace/Delete", "Delete way"],
111                           ["Ctrl+Click", "Select multiple nodes or ways (Command+Click on Mac)"],
112                           ["/", "Cycle through overlapping ways"],
113                           ];
114         var text2:Array =  [["+", "Add new tag"],
115                             [", .", "Cycle through nodes in way"],
116                             ["D", "Dim features"],
117                             ["F", "Follow existing way"],
118                             ["G", "Load GPS points"],
119                             ["M", "Maximise editor"],
120                             ["P", "Create parallel way"],
121                             ["Q", "Make area right-angled"],
122                             ["R", "Repeat tags"],
123                             ["Shift-R", "Repeat relations"],
124                             ];
125         var text3:Array =  [["S", "Save"],
126                             ["T", "Toggle between simple and advanced tags"],
127                             ["V", "Reverse direction of way"],
128                             ["X", "Cut way at node"],
129                             ["Z", "Undo"],
130                             ["Esc", "Cancel edit"],
131                             ["Space", "Hold/drag to realign background image"]
132                             ];
133         shortcuts1.addChild(buildGrid(text));
134         shortcuts2a.addChild(buildGrid(text2));
135         shortcuts2b.addChild(buildGrid(text3));
136     }
137
138               ]]>
139   </fx:Script>
140   <mx:TabNavigator id="helpTN" width="100%" height="100%" styleName="helpTN" creationPolicy="all">
141     <mx:VBox label="Welcome" id="welcome" width="100%" height="100%">
142       <mx:Grid width="100%"><!-- prepare for a column of icons, at some point -->
143         <mx:GridRow width="100%">
144           <mx:GridItem width="100%">
145             <mx:Text condenseWhite="true" width="100%" htmlText="{getIntroText()}" />
146           </mx:GridItem>
147         </mx:GridRow>
148         <mx:GridRow width="100%">
149           <mx:GridItem width="100%">
150             <mx:Text id="whyOpenStreetMap" condenseWhite="true" width="100%">
151               <mx:htmlText>
152                 <![CDATA[
153                   <p><b>Why OpenStreetMap?</b> OSM is a mapping service in which all data is constantly updated and edited by everyday people like you. The obvious benefit is that it's free to use, but it has also become a major player in crisis mapping (e.g. use of OSM data to coordinate earthquake relief efforts in Haiti). Accuracy of this data is critical, and we hope you are able to volunteer some of your time!</p>
154                 ]]>
155               </mx:htmlText>
156             </mx:Text>
157           </mx:GridItem>
158         </mx:GridRow>
159         <mx:GridRow width="100%">
160           <mx:GridItem width="100%">
161             <mx:Label id="gettingStarted" text="Getting Started" textAlign="center" width="100%" styleName="helpPageHeader" />
162           </mx:GridItem>
163         </mx:GridRow>
164         <mx:GridRow width="100%">
165           <mx:GridItem width="100%">
166             <mx:Text condenseWhite="true" width="100%" id="activeMembers">
167               <mx:htmlText>
168                 <![CDATA[
169                   <p><b>+ For active OpenStreetMap members</b>, please sign in to OSM before editing</b></p>
170                 ]]>
171               </mx:htmlText>
172             </mx:Text>
173           </mx:GridItem>
174         </mx:GridRow>
175         <mx:GridRow width="100%">
176           <mx:GridItem width="100%">
177             <mx:Text condenseWhite="true" width="100%" id="newMembersText" initialize="applyTextStyle(newMembersText)">
178               <mx:htmlText>
179                 <![CDATA[
180                   <p><b>+ For new members</b>, please visit <a href="http://www.openstreetmap.org/user/new" target="_blank">http://www.openstreetmap.org</a> to create an account, log in, then return here to allow access to Potlatch 2 and begin editing.</p>
181                 ]]>
182               </mx:htmlText>
183             </mx:Text>
184           </mx:GridItem>
185         </mx:GridRow>
186       </mx:Grid>
187     </mx:VBox>
188
189     <mx:VBox id="introduction" label="Introduction" width="100%" height="100%" hide="introvideo.stopPlaying()" removedFromStage="introvideo.stopPlaying()">
190                 <help:VideoPlayer width="640" height="369" id="introvideo"
191                         file="help/introduction.mp4" 
192                         previewImage="help/introduction.jpg" />
193         </mx:VBox>
194
195     <mx:VBox id="Controls" label="Controls" width="100%" height="100%">
196       <mx:Label id="interfaceControls" text="Interface Controls" textAlign="center" width="100%" styleName="helpPageHeader"/>
197       <mx:Grid width="100%">
198         <mx:GridRow width="100%">
199           <mx:GridItem>
200             <mx:Label id="background" width="100%" text="Background" styleName="helpHeaderText" />
201           </mx:GridItem>
202           <mx:GridItem width="100%">
203             <mx:Text id="mapBackground" condenseWhite="true" width="100%">
204               <mx:htmlText>
205                 <![CDATA[
206                   <p>Choose your map background from one of the items in the list or add your own vector file.</p>
207                 ]]>
208               </mx:htmlText>
209             </mx:Text>
210           </mx:GridItem>
211         </mx:GridRow>
212         <mx:GridRow width="100%">
213           <mx:GridItem>
214             <mx:Label id="mapStyle" width="100%" text="Map Style" styleName="helpHeaderText" />
215           </mx:GridItem>
216           <mx:GridItem width="100%">
217             <mx:Text id="colourStyle" condenseWhite="true" width="100%">
218               <mx:htmlText>
219                 <![CDATA[
220                   <p>Choose the style in which you wish to view the map. Colours and overall style vary and also includes other options like wireframe.</p>
221                 ]]>
222               </mx:htmlText>
223             </mx:Text>
224           </mx:GridItem>
225         </mx:GridRow>
226         <mx:GridRow width="100%">
227           <mx:GridItem>
228             <mx:Label id="gps" width="100%" text="GPS" styleName="helpHeaderText" />
229           </mx:GridItem>
230           <mx:GridItem width="100%">
231             <mx:Text id="createOsmMap" condenseWhite="true" width="100%">
232               <mx:htmlText>
233                 <![CDATA[
234                   <p>Create OSM map data using other people's GPS tracks as a background</p>
235                 ]]>
236               </mx:htmlText>
237             </mx:Text>
238           </mx:GridItem>
239         </mx:GridRow>
240         <mx:GridRow width="100%">
241           <mx:GridItem>
242             <mx:Label id="myGpx" width="100%" text="MyGPX" styleName="helpHeaderText" />
243           </mx:GridItem>
244           <mx:GridItem width="100%">
245             <mx:Text id="displayGps" condenseWhite="true" width="100%">
246               <mx:htmlText>
247                 <![CDATA[
248                   <p>Display GPS traces that you've previously uploaded to OpenStreetMap.</p>
249                 ]]>
250               </mx:htmlText>
251             </mx:Text>
252           </mx:GridItem>
253         </mx:GridRow>
254         <mx:GridRow width="100%">
255           <mx:GridItem>
256             <mx:Label id="undoRedo" width="100%" text="Undo / Redo" styleName="helpHeaderText" />
257           </mx:GridItem>
258           <mx:GridItem width="100%">
259             <mx:Text id="madeMistake" condenseWhite="true" width="100%">
260               <mx:htmlText>
261                 <![CDATA[
262                   <p>Made a mistake? Just hit undo and/or redo to correct your edits.</p>
263                 ]]>
264               </mx:htmlText>
265             </mx:Text>
266           </mx:GridItem>
267         </mx:GridRow>
268         <mx:GridRow width="100%">
269           <mx:GridItem>
270             <mx:Label id="help" width="100%" text="Help" styleName="helpHeaderText" />
271           </mx:GridItem>
272           <mx:GridItem width="100%">
273             <mx:Text id="guideInfomation" condenseWhite="true" width="100%">
274               <mx:htmlText>
275                 <![CDATA[
276                   <p>Brings up this guide in case you need any information as you begin editing.</p>
277                 ]]>
278               </mx:htmlText>
279             </mx:Text>
280           </mx:GridItem>
281         </mx:GridRow>
282         <mx:GridRow width="100%">
283           <mx:GridItem>
284             <mx:Label id="save" width="100%" text="Save" styleName="helpHeaderText" />
285           </mx:GridItem>
286           <mx:GridItem width="100%">
287             <mx:Text id="saveText" condenseWhite="true" width="100%" htmlText="{getSaveText()}" initialize="applyTextStyle(saveText)" />
288           </mx:GridItem>
289         </mx:GridRow>
290       </mx:Grid>
291     </mx:VBox>
292     <mx:VBox label="Adding">
293       <mx:Label id="addingFeatures" text="Adding Features" textAlign="center" width="100%" styleName="helpPageHeader" />
294       <mx:Text condenseWhite="true" width="100%" id="addingFeaturesText" initialize="applyTextStyle(addingFeaturesText)">
295         <mx:htmlText>
296           <![CDATA[
297             <p><i>Before you begin, the first rule you need to know is the use of proprietary data. Data from copyrighted maps or any other proprietary data is strictly prohibited! Copying, tracing or any reproduction of copyrighted work is not allowed! (Source: <a href="http://wiki.openstreetmap.org/wiki/Copyright" target="_blank">Copyright - OpenStreetMap Wiki</a>)</i></p>
298             <p></p>
299             <p>Linear features such as streets, footpaths, railways and building outlines will hereby be referred to as <b>ways</b>.</p>
300             <p>If you suddenly realize your sidebar with all the icons have gone missing, it's because you have a feature selected on the map. Simply deselect by clicking on a blank area of the map to bring up the icons again.</p>
301             <p><b>To create a point (or node)</b>, just drag and drop the appropriate icon from the sidebar onto the map. See Add POIs to learn more about creating a POI (Point of Interest)</p>
302             <p><b>To create a way</b>, begin by clicking on the map at its start point, then click at each successive point. Double-click to finish the line or press Enter.</p>
303             <p><b>To create a polygon</b>, begin by clicking on the map at its start point, then click at each successive point (similar to creating a way), and finish by clicking on the very first point to close the polygon.</p>
304             <p>Remember, if you make a mistake, you can always hit the Undo button. Pressing the Esc key will undo all your edits for the current feature.</p>
305           ]]>
306         </mx:htmlText>
307       </mx:Text>
308     </mx:VBox>
309     <mx:VBox id="editBeg" label="Edit (Beg.)">
310       <mx:Label id="editingFeatures" text="Editing Features (Beginner)" textAlign="center" width="100%" styleName="helpPageHeader" />
311       <mx:Text id="editingFeaturesText" condenseWhite="true" width="100%" height="100%">
312         <mx:htmlText>
313           <![CDATA[
314             <p><b>To add a point to an existing way</b>, select the way and shift+click at the desired location.</p>
315             <p><b>To delete a point</b>, select the way and click the Delete Item button in the bottom right corner or press Delete (or Backspace) on your keyboard.</p>
316             <p><b>To delete a way</b>, select the way and click the Delete Item button in the bottom right corner or press shift+Delete (or shift+Backspace) on your keyboard.</p>
317             <p><b>To move a point</b>, click and drag the point.</p>
318             <p><b>To move a way</b>, click and drag the entire feature (hint: grab a segment where you won't accidentally move a node).</p>
319             <p><b>To extend a way</b>, click on one of the end points of the way. Then continue drawing as usual.</p>
320             <p><b>To add a new way extending from an existing way</b>, shift+click on one of the end points of the way. Then continue drawing as usual.</p>
321           ]]>
322         </mx:htmlText>
323       </mx:Text>
324     </mx:VBox>
325     <mx:VBox id="editAdv" label="Edit (Adv.)">
326       <mx:Label id="editingFeaturesAdv" text="Editing Features (Advanced)" textAlign="center" width="100%" styleName="helpPageHeader" />
327       <mx:Text id="editingFeaturesAdvText" condenseWhite="true" width="100%" height="100%">
328         <mx:htmlText>
329           <![CDATA[
330             <p><b>To split a way</b>, select the point at which you want to cut, and click the Scissor tool or press X on your keyboard. (Hint: Add a node first in order to cut between nodes.)</p>
331             <p><b>To make a junction between two ways</b>, draw as usual until you need to make a junction. Then as you move your mouse over another way, the points will light up blue. Click on one of the blue points or any other desired location on the way to make a junction.</p>
332             <p><b>To disconnect a junction</b>, select the point on the way you wish to alter. The press - on your keyboard to remove the point.</p>
333             <p><b>To reverse the direction of a way</b>, click the Reverse Direction button in the bottom right corner. The direction of a way is only a concern for those features with a "oneway" tag - oneway streets, coastlines, islands, and so on.</p>
334             <p><b>To create a way running parallel</b>, select the way and click the Create Parallel Way button in the bottom right corner or press P on your keyboard.</p>
335             <p><b>To create a way that shares nodes with an existing way</b>, start drawing, click the first two shared nodes, then press F to automatically follow the existing way.</p>
336             <p><i>Visit the <a href="http://wiki.openstreetmap.org/wiki/Potlatch2/Primer" target="_blank">Potlatch2 Primer</a> on the OpenStreetMap wiki for even more advanced editing methods and conventions.</i></p>
337           ]]>
338         </mx:htmlText>
339       </mx:Text>
340     </mx:VBox>
341     <mx:VBox id="tag" label="Tag">
342     <mx:Label id="taggingFeatures" text="Tagging Features" textAlign="center" width="100%" styleName="helpPageHeader" />
343       <mx:Text condenseWhite="true" width="100%" height="100%" id="taggingFeaturesText" initialize="applyTextStyle(taggingFeaturesText)">
344         <mx:htmlText>
345           <![CDATA[
346             <p>With Potlatch2, tagging features has become relatively easy with its use of graphical menus and dedicated fields/icons.</p>
347             <p><b>Tagging a feature</b></p>
348             <p>Select the point or way that you wish to edit, adn choose the appropriate tag from the left sidebar. After tagging the feature, some basic fields should appear such as Name, Speed Limit, and Width, depending on the tag you gave. Fill these out as best you can.</p>
349             <p>Advanced users may notice the absence of a few tags and tag values they occasionally use. If this is the case, click on the Advanced tab at the bottom of the sidebar and edit/add as necessary.</p>
350             <p>The OpenStreetMap wiki also provides an <a href="http://wiki.openstreetmap.org/wiki/Map_features" target="_blank">extensive list of tags and tag values</a>. Please refer back to the OSM documentation if you are unsure of which tag to use.</p>
351           ]]>
352         </mx:htmlText>
353       </mx:Text>
354     </mx:VBox>
355     <mx:VBox label="Shortcuts" id="shortcuts">
356       <mx:Label text="Keyboard Shortcuts" textAlign="center" width="100%" styleName="helpPageHeader" id="keyboardShortcuts" />
357       <mx:HBox id="shortcuts1" width="100%"/>
358       <mx:HBox id="shortcuts2" width="100%">
359         <mx:HBox id="shortcuts2a" width="100%" />
360         <mx:HBox id="shortcuts2b" width="100%" />
361       </mx:HBox>
362     </mx:VBox>
363   </mx:TabNavigator>
364
365   <mx:ControlBar>
366     <mx:VBox>
367       <mx:Label text="Version: {application.version} Build: {application.build_number}" />
368       <mx:Label text="Locale: {locale}" />
369     </mx:VBox>
370     <mx:Spacer width="100%"/>
371     <mx:Button label="Ok" click="PopUpManager.removePopUp(this);" styleName="titleWindowButton" />
372   </mx:ControlBar>
373
374 </mx:TitleWindow>