Move first help page into a grid layout
[potlatch2.git] / net / systemeD / potlatch2 / help / HelpDialog.mxml
1 <?xml version="1.0" encoding="utf-8"?>
2 <mx:TitleWindow
3         xmlns:mx="" 
4         layout="vertical" showCloseButton="true"
5         horizontalAlign="center" title="Welcome to Potlatch2 for [Website]"
6         width="600" height="400"
7         verticalGap="0">
8   <mx:Script><![CDATA[
9     import mx.managers.PopUpManager;
10     import;
11     import mx.core.Application;
13     public function init():void {
14         PopUpManager.addPopUp(this, Application(Application.application), true);
15         PopUpManager.centerPopUp(this);
16         this.addEventListener(CloseEvent.CLOSE, helpDialog_close);
18         // store whether the user has seen the help dialog before
19         var obj:SharedObject = SharedObject.getLocal("user_state");
20         obj.setProperty("help_shown","true");
21     }
23     private function helpDialog_close(evt:CloseEvent):void {
24         PopUpManager.removePopUp(this);
25     }
27               ]]>
28   </mx:Script>
29   <mx:TabNavigator id="helpTN" width="100%" height="100%" styleName="helpTN">
30     <mx:VBox label="Welcome" width="100%" height="100%">
31       <mx:Grid width="100%"><!-- prepare for a column of icons, at some point -->
32         <mx:GridRow width="100%">
33           <mx:GridItem width="100%">
34             <mx:Text condenseWhite="true" width="100%">
35               <mx:htmlText>
36                 <![CDATA[
37                   <p><b>Potlatch 2</b> is an OpenStreetMap (OSM) editor that allows you to make edits directly through the [Website] website.</p>
38                 ]]>
39               </mx:htmlText>
40             </mx:Text>
41           </mx:GridItem>
42         </mx:GridRow>
43         <mx:GridRow width="100%">
44           <mx:GridItem width="100%">
45             <mx:Text condenseWhite="true" width="100%">
46               <mx:htmlText>
47                 <![CDATA[
48                   <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 (i.e. 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>
49                 ]]>
50               </mx:htmlText>
51             </mx:Text>
52           </mx:GridItem>
53         </mx:GridRow>
54         <mx:GridRow width="100%">
55           <mx:GridItem width="100%">
56             <mx:Label text="Getting Started" textAlign="center" width="100%" styleName="helpPageHeader" />
57           </mx:GridItem>
58         </mx:GridRow>
59         <mx:GridRow width="100%">
60           <mx:GridItem width="100%">
61             <mx:Text condenseWhite="true" width="100%">
62               <mx:htmlText>
63                 <![CDATA[
64                   <p><b>+ For active OpenStreetMap members</b>, please sign in to OSM before editing</b></p>
65                 ]]>
66               </mx:htmlText>
67             </mx:Text>
68           </mx:GridItem>
69         </mx:GridRow>
70         <mx:GridRow width="100%">
71           <mx:GridItem width="100%">
72             <mx:Text condenseWhite="true" width="100%">
73               <mx:htmlText>
74                 <![CDATA[
75                   <p><b>+ For new members</b>, please visit <a href=""></a> to create an account, log in, then return here.</p>
76                 ]]>
77               </mx:htmlText>
78             </mx:Text>
79           </mx:GridItem>
80         </mx:GridRow>
81       </mx:Grid>
82     </mx:VBox>
83     <mx:VBox label="Controls" width="100%" height="100%">
84       <mx:Label text="Interface Controls" textAlign="center" width="100%" styleName="helpPageHeader"/>
85       <mx:Grid width="100%">
86         <mx:GridRow width="100%">
87           <mx:GridItem>
88             <mx:Label width="100%" text="Background" styleName="helpHeaderText" />
89           </mx:GridItem>
90           <mx:GridItem width="100%">
91             <mx:Text condenseWhite="true" width="100%">
92               <mx:htmlText>
93                 <![CDATA[
94                   <p>Choose your map background from one of the items in the list or add your own vector file.</p>
95                 ]]>
96               </mx:htmlText>
97             </mx:Text>
98           </mx:GridItem>
99         </mx:GridRow>
100         <mx:GridRow width="100%">
101           <mx:GridItem>
102             <mx:Label width="100%" text="MapStyle" styleName="helpHeaderText" />
103           </mx:GridItem>
104           <mx:GridItem width="100%">
105             <mx:Text condenseWhite="true" width="100%">
106               <mx:htmlText>
107                 <![CDATA[
108                   <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>
109                 ]]>
110               </mx:htmlText>
111             </mx:Text>
112           </mx:GridItem>
113         </mx:GridRow>
114         <mx:GridRow width="100%">
115           <mx:GridItem>
116             <mx:Label width="100%" text="GPS" styleName="helpHeaderText" />
117           </mx:GridItem>
118           <mx:GridItem width="100%">
119             <mx:Text condenseWhite="true" width="100%">
120               <mx:htmlText>
121                 <![CDATA[
122                   <p>Create OSM map data from a GPS track you upload.</p>
123                 ]]>
124               </mx:htmlText>
125             </mx:Text>
126           </mx:GridItem>
127         </mx:GridRow>
128         <mx:GridRow width="100%">
129           <mx:GridItem>
130             <mx:Label width="100%" text="Undo / Redo" styleName="helpHeaderText" />
131           </mx:GridItem>
132           <mx:GridItem width="100%">
133             <mx:Text condenseWhite="true" width="100%">
134               <mx:htmlText>
135                 <![CDATA[
136                   <p>Made a mistake? Just hit undo and/or redo to correct your edits.</p>
137                 ]]>
138               </mx:htmlText>
139             </mx:Text>
140           </mx:GridItem>
141         </mx:GridRow>
142         <mx:GridRow width="100%">
143           <mx:GridItem>
144             <mx:Label width="100%" text="Help" styleName="helpHeaderText" />
145           </mx:GridItem>
146           <mx:GridItem width="100%">
147             <mx:Text condenseWhite="true" width="100%">
148               <mx:htmlText>
149                 <![CDATA[
150                   <p>Brings up this guide in case you need any information as you begin editing.</p>
151                 ]]>
152               </mx:htmlText>
153             </mx:Text>
154           </mx:GridItem>
155         </mx:GridRow>
156         <mx:GridRow width="100%">
157           <mx:GridItem>
158             <mx:Label width="100%" text="Save" styleName="helpHeaderText" />
159           </mx:GridItem>
160           <mx:GridItem width="100%">
161             <mx:Text condenseWhite="true" width="100%">
162               <mx:htmlText>
163                 <![CDATA[
164                   <p>If you feel confident with your edits, hit save to publish to <a href=""></a>. Most edits take a few hours to show up on OSM and subsequently on [Website].</p>
165                 ]]>
166               </mx:htmlText>
167             </mx:Text>
168           </mx:GridItem>
169         </mx:GridRow>
170       </mx:Grid>
171     </mx:VBox>
172     <mx:VBox label="Adding">
173       <mx:Label text="Adding Features" textAlign="center" width="100%" styleName="helpPageHeader" />
174       <mx:Text condenseWhite="true" width="100%">
175         <mx:htmlText>
176           <![CDATA[
177             <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: Copyright - OpenStreetMap Wiki)</i></p>
178             <p></p>
179             <p>Linear features such as streets, footpaths, railways and building outlines will hereby be referred to as ways.</p>
180             <p><b>To create a point (or node)</b>, just drag and drop the appropriate icon from the sidebar onto the map.</p>
181             <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>
182             <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 double-clicking on the very first point to close the polygon.</p>
183             <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>
184           ]]>
185         </mx:htmlText>
186       </mx:Text>
187     </mx:VBox>
188     <mx:VBox label="Editing (Beg.)">
189       <mx:Label text="Editing Features (Beginner)" textAlign="center" width="100%" styleName="helpPageHeader" />
190       <mx:Text condenseWhite="true" width="100%" height="100%">
191         <mx:htmlText>
192           <![CDATA[
193             <p><b>To add a point to an existing way</b>, select the way and shift+click ad the desired location.</p>
194             <p><b>To delete a point or way</b>, select the way and click the Delete Item button in the bottom right corner or press Delete (Backspace) on your keyboard.</p>
195             <p><b>To delete a point in an existing way</b>, select the point and click the Delete Item button in the bottom right corner or press Delete (Backspace) on your keyboard.</p>
196             <p><b>To move a point</b>, click and drag the point.</p>
197             <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>
198             <p><b>To extend a way</b>, click on one of the end points of the way. Then continue drawing as usual.</p>
199             <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>
200           ]]>
201         </mx:htmlText>
202       </mx:Text>
203     </mx:VBox>
204     <mx:VBox label="Editing (Adv.)">
205       <mx:Label text="Editing Features (Advanced)" textAlign="center" width="100%" styleName="helpPageHeader" />
206       <mx:Text condenseWhite="true" width="100%" height="100%">
207         <mx:htmlText>
208           <![CDATA[
209             <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.</p>
210             <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>
211             <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>
212             <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>
213             <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>
214             <p><i>Visit the Potlatch2/Primer on the OpenStreetMap wiki for even more advanced editing methods and conventions.</i></p>
215           ]]>
216         </mx:htmlText>
217       </mx:Text>
218     </mx:VBox>
219     <mx:VBox label="Tagging">
220     <mx:Label text="Tagging Features" textAlign="center" width="100%" styleName="helpPageHeader" />
221       <mx:Text condenseWhite="true" width="100%" height="100%">
222         <mx:htmlText>
223           <![CDATA[
224             <p>With Potlatch2, tagging features has become relatively easy with its use of graphical menus and dedicated fields/icons.</p>
225             <p><b>Tagging a feature</b></p>
226             <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>
227             <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>
228             <p>The OpenStreetMap wiki also provides an <a href="">extensive list of tags and tag values</a>. Please refer backt o the OSM documentation if you are unsure of which tag to use.</p>
229           ]]>
230         </mx:htmlText>
231       </mx:Text>
232     </mx:VBox>
233   </mx:TabNavigator>
235   <mx:ControlBar>
236     <mx:Spacer width="100%"/>
237     <mx:Button label="Ok" click="PopUpManager.removePopUp(this);"/>
238   </mx:ControlBar>
240 </mx:TitleWindow>