{"command_bar":"<h1 class=\"section-title\">Command bar</h1>\n<p>The command bar shows the page name on the left side. The right side is divided into three sections:</p>\n<h3>Toolbox:</h3>\n<ul>\n<li>Select</li>\n<li>Pen</li>\n<li>Rectangle</li>\n<li>Ellipse</li>\n</ul>\n<h3>Quick action buttons:</h3>\n<ul>\n<li>Undo</li>\n<li>Redo</li>\n<li>Save</li>\n</ul>\n<h3>Menus:</h3>\n<ul>\n<li>Edit</li>\n<li>User</li>\n<li>Page</li>\n</ul>\n","undoredo_buttons":"<h1 class=\"section-title\">Undo/redo buttons</h1>\n<p>Standard undo/redo functionality.</p>\n<p>You can change the number of changes that can be undone in the app settings. By default you can undo 50 changes.</p>\n<h4>Also accessible by:</h4>\n<ul>\n<li>Hot keys: ctrl+x and ctrl+y.</li>\n<li>Edit menu</li>\n</ul>\n","select_tool":"<h1 class=\"section-title\">Select tool</h1>\n<p>Use the select tool to select interactive areas.<br>\nYou can select multiple areas by clicking and dragging, or clicking them while the ctrl key is pressed.<br>\nDouble click to edit the individual points and lines of an interactive area. This will only work with areas that were drawn with the <a href=\"#pen_tool\">pen</a>.<br>\nStandard editing operations on shapes are available, such as resize, rotate, move etc. You can also group elements into a single element.</p>\n","pen_tool":"<h1 class=\"section-title\">Pen tool</h1>\n<p>Use the pen tool to trace irregular shapes in the image.</p>\n<h3>Add a shape</h3>\n<ol>\n<li>Click the page to start drawing the shape.</li>\n<li>Click to add lines. Do not try to be too precise at this point. Edit it when you have finished instead.</li>\n<li>Click the starting point to complete the shape.</li>\n</ol>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/6a5aa69c-610d-4ad3-b5e6-51a527b9c6bc\" alt=\"Pen tool: Trace mode\" title=\"Pen tool: Trace mode\"></p>\n<figcaption>Pen tool: Trace mode</figcaption>\n</figure>\n<h3>Edit a shape</h3>\n<ol>\n<li>Double-click the shape to go into edit mode</li>\n<li>Drag to square handles to move points.</li>\n<li>Drag the round handles to curve lines.</li>\n<li>Use context menus to add or remove line segments.</li>\n</ol>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/7407a879-dc5d-4d09-80e6-69e8fee7b626\" alt=\"Pen Tool: Edit Mode\" title=\"Pen tool: Edit mode\"></p>\n<figcaption>Pen Tool: Edit Mode</figcaption>\n</figure>\n","rectangleellipse_tools":"<h1 class=\"section-title\">Rectangle/Ellipse tools</h1>\n<p>These are the rectangle and ellipse tools. Use them to trace regular shapes in the image. Click and drag on the picture to draw the selected shape.</p>\n","save_button":"<h1 class=\"section-title\">Save button</h1>\n<p>Save the page locally.</p>\n","edit_menu":"<h1 class=\"section-title\">Edit menu</h1>\n<p>This is the button to display the Edit menu. It contains standard editing commands.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/12f098be-7eca-4aa3-99ca-619eb0015ca8\" alt=\"Edit menu\" title=\"Edit menu\"></p>\n<figcaption>Edit menu</figcaption>\n</figure>\n","user_menu":"<h1 class=\"section-title\">User menu</h1>\n<p>This is the button to display the User menu. Log in and log out via this menu.<br>\nIf you have published a page from a different machine, you can download a local version for editing.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/9d094748-bb6b-4c93-bffc-f6cc90be8686\" alt=\"User menu\" title=\"User menu\"></p>\n<figcaption>User menu</figcaption>\n</figure>\n","page_menu":"<h1 class=\"section-title\">Page menu</h1>\n<p>This is the button to display the page menu.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/5895225d-e7e8-4302-b217-7a53128feac6\" alt=\"Page menu\" title=\"Page menu\"></p>\n<figcaption>Page menu</figcaption>\n</figure>\n<ul>\n<li><strong>Publish</strong> will upload the page to exdpic.com. It will be publicly accessible at https://exdpic.com/&lt;username&gt;/&lt;pagename&gt;.</li>\n<li><strong>View/Test Mode</strong> will let you interact with the page within the app. You can see how the interactive elements will be displayed. The page layout and highlighting are designed to e fit for purpose for testing, and are different to published pages.</li>\n<li><strong>Validate page</strong> identifies certain errors in the page as shown here:</li>\n</ul>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/12ea6da3-f543-41dc-8a2b-eb020ab4e4fb\" alt=\"Validation report\" title=\"Validation report\"></p>\n<figcaption>Validation report</figcaption>\n</figure>\n<ul>\n<li><strong>Delete page</strong> will delete all local versions of the page. It will have no effect on published pages. If you want to delete a published page you will need to contact us to request it. We will always grant requests to delete personal information, but this will not happen immediately. If you do accidentally share something you should not then you can remove it from your page immediately and publish a new version with the personal information removed. This will make it no longer accessible publicly, but you should still contact us to get it removed from the database. If there is no legal or privacy issue with a page being online, then we may decline to delete it.</li>\n</ul>\n","expand_toolbar_button":"<h1 class=\"section-title\">Expand toolbar button</h1>\n<p>If there is not enough space to display all of the buttons on the toolbar, then some of them will be accessible here.<br>\nIt also toggles between displaying the names of the toolbar items and only displaying the icons.</p>\n","picture_opacity_controls":"<h1 class=\"section-title\">Picture opacity controls</h1>\n<p>Increase/decrease the opacity of the image while you are editing the interactive areas. If it is difficult to see the lines and points of interactive areas then you should lower this setting. If it is difficult to see enough detail of the image then you should increase its opacity.<br>\n.</p>\n","resize_panes_button":"<h1 class=\"section-title\">Resize panes button</h1>\n<p>This button displays the options for the sizing of the image and text windows. It is generally convenient to hide the text pane if you are tracing a complex shape of any size.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/8abe1ac7-01df-44fb-89dd-061967aa35b4\" alt=\"Size options\" title=\"Size options\"></p>\n<figcaption>Size options</figcaption>\n</figure>\n","help":"<h1 class=\"section-title\">Help</h1>\n<p>Clicking the Help button shows the About dialog. From here you can start/stop the tutorial or open a link to this Help. It will be displayed automatically the first time you open the app.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/ee7e8721-99b9-4239-a4ce-0b36223a7d09\" alt=\"About/Help\" title=\"About/Help\"></p>\n<figcaption>About/Help</figcaption>\n</figure>\n","settings_button":"<h1 class=\"section-title\">Settings button</h1>\n<p>This button displays the Settings dialog.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/83687a5c-3cf0-46f6-b1c5-426d8edd488a\" alt=\"Settings\" title=\"Settings\"></p>\n<figcaption>Settings</figcaption>\n</figure>\n","selected_area_id":"<h1 class=\"section-title\">Selected Area Id</h1>\n<p>The Id of a selectable area is used to create links to it. It is assigned automatically. Its value is always unique and is derived from the Name of the area.</p>\n<p>To add a link to an element within the page, set the URL as</p>\n<pre><code>&gt; #your_id\n</code></pre>\n<p>To link directly to an element within another page, use a URL like <mark>https://exdpic.com/your_name/your_page#your_id</mark>.</p>\n<p>Ids are changed when the name of the selectable area is changed and when the number of selectable areas sharing the same names changes. When an Id changes, links to it within the page are updated automatically. If you have links to it from other pages, these must be updated manually.</p>\n<p>Use the page validator to find any dead inpage links.</p>\n<p>The Ids are derived as follows:</p>\n<ol>\n<li>If an element has no name, then a number is assigned to it.</li>\n<li>The first element to be given a particular name will have its Id based on that name. All characters will be converted to lowercase, spaces will be replaced with underscores and non-alphanumeric characters will be removed.</li>\n<li>Additional elements with the same name will have their Ids appended with _1, _2 etc.</li>\n</ol>\n","text_editor":"<h1 class=\"section-title\">Text Editor</h1>\n<p>This is where you set the text to display for the selected area. It is specified with Markdown. You can use the text formatting toolbar for the most common formatting and insertion operations without needing any knowledge of Markdown.</p>\n<p>Press Ctrl+T to see how the text will look. Press Ctrl+E to return to Edit mode to continue editing.</p>\n<h2>Technical Information</h2>\n<p><a href=\"https://github.com/xoofx/markdig\">Markdig</a> is used for Markdown processing, with the following extensions:</p>\n<ul>\n<li>SmartyPants</li>\n<li>Media support</li>\n<li>Soft lines as hard lines</li>\n<li>Figures</li>\n<li>Extra emphasis</li>\n</ul>\n<p>Direct HTML content is disabled.</p>\n","element_name":"<h1 class=\"section-title\">Element name</h1>\n<p>The name of the selected element affects the following:</p>\n<ol>\n<li>It is used as the heading of the text that is displayed when an element is selected.</li>\n<li>It is used for the tooltip that is displayed when you hover over the element.</li>\n<li>The Id of the element is derived from the name. The Id is used for navigation to individual elements. The logic used to derive it is described in the text for the Id element.</li>\n</ol>\n<p>While Ids must be unique, duplicate names are allowed. However for the best results, we recommend that they are only used when the following is true:</p>\n<ul>\n<li>The different elements should have different text. If it would make sense for them to display the same content, then group them together into a single element. (Click and drag or use Ctrl+click to select multiple items.)</li>\n<li>It doesn't make sense to give them individual names.</li>\n</ul>\n","find_button":"<h1 class=\"section-title\">Find button</h1>\n<p>This open the Find in Page panel.</p>\n<p>This searches the page content for specified text. When it finds a match, it selects the element that contains it, and highlights the text in its name or text field. Press search again to go onto the next match. (Or press the return key while the cursor is in the Find textbox.) The name of the page itself is excluded from the search results by design. The search is not case-sensitive.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/43a081b1-3d81-4c03-8ae5-fe248f83a58f\" alt=\"Find in page\" title=\"Find in page\"></p>\n<figcaption>Find in page</figcaption>\n</figure>\n<h2>Technical details</h2>\n<p>For searching, it orders the content as follows:</p>\n<ol>\n<li>Page content</li>\n<li>Elements by Z-index, starting with the furthest back.</li>\n</ol>\n<p>When it searches an element, it searches its name first and then its text.</p>\n<p>The starting point of the search is based on the selected element and position of the cursor or selected text within a textbox that is being searched.</p>\n","page_tab":"<h1 class=\"section-title\">Page tab</h1>\n<p>The page tab is similar to the selection tab, but it is used to set the name of the page, and the content to display when no interactive element is selected.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/00b5d51d-987f-403a-84a1-fee5dacd6eda\" alt=\"Page tab\" title=\"Page tab\"></p>\n<figcaption>Page tab</figcaption>\n</figure>\n","image_tab":"<h1 class=\"section-title\">Image tab</h1>\n<p>Select an image for the page here.</p>\n<p>You can set the image with or without uploading it to images.exdpic.com. If you choose to upload it, you will need to log in and the image will be optimized for display on the Web. If you choose not to upload it, you do not need to log in, but you will not be able to use images that exceed a size limit (1080px on the longest size at the time of writing). In this case the image will be uploaded when you publish the page. Publishing the page will require logging in.</p>\n<p>ImageMagick is used to optimize the images when they are uploaded, which gives very good results.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/bb594b36-f84c-46c1-9af6-7fe0d57ed99e\" alt=\"Image tab\" title=\"Image tab\"></p>\n<figcaption>Image tab</figcaption>\n</figure>\n","selection_tab":"<h1 class=\"section-title\">Selection tab</h1>\n<p>This is the selection tab. It lets you set the interactive content to show for the selected area.</p>\n","history_tab":"<h1 class=\"section-title\">History tab</h1>\n<p>This is the History tab. It displays the version history of the page. A new version is created every time the page is saved.<br>\nAnnotations are added for the following:</p>\n<ul>\n<li>The first version of a page</li>\n<li>A download of a published page</li>\n<li>A reversion to an earlier version.</li>\n</ul>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/9f8a9b65-fbf1-4934-ba4e-0d226e1e2fec\" alt=\"History tab\" title=\"History tab\"></p>\n<figcaption>History tab</figcaption>\n</figure>\n<p>Click a version to view it. You can choose to go back to the current version or revert to the old version that you are viewing.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/e594e469-39ee-4f26-bb36-d88e550f45fc\" alt=\"Viewing an old version of a page\" title=\"Viewing an old version of a page\"></p>\n<figcaption>Viewing an old version of a page</figcaption>\n</figure>\n","navigation_tab":"<h1 class=\"section-title\">Navigation tab</h1>\n<p>This is the navigation tab. You can open a different page that is stored on the local machine.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/a5fc2acd-4fcf-495c-badf-b45752795ca6\" alt=\"Navigation page\" title=\"Navigation page\"></p>\n<figcaption>Navigation page</figcaption>\n</figure>\n","text_formatting_toolbar":"<h1 class=\"section-title\">Text formatting toolbar</h1>\n<p>Use this toolbar to help create interactive content.<br>\nYou can also use <a href=\"https://www.markdownguide.org/\">Markdown</a> in the text editor.</p>\n<h2>YouTube</h2>\n<p>YouTube videos are added by specifying the video Id. Please be aware that YouTube's embedded player uses tracking cookies for marketing purposes.</p>\n<h2>Image</h2>\n<p>Images are added by specifying their URL. If it is not online, you can upload an image directly from the Image dialog. The image will be optimized for display on the Web.</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/6f912368-eb9e-486c-bbbf-c8fbb78c1b13\" alt=\"Insert image dialog\" title=\"Insert image dialog\"></p>\n<figcaption>Insert image dialog</figcaption>\n</figure>\n<h2>Link</h2>\n<p>There are several options for links:</p>\n<ul>\n<li>You can select an element on the page by its name in a dropdown.</li>\n<li>You can select a published page using a dropdown.</li>\n<li>You can type a link, including external links.</li>\n</ul>\n<p><em>Please be judicious about linking to external sites. We will remove links that are spam, misleading, inappropriate, or for any other reason. We will generally block accounts for posting undesirable content.</em></p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/e5271491-07eb-4454-a031-4ef25563165c\" alt=\"Insert hyperlink dialog\" title=\"Insert hyperlink dialog\"></p>\n<figcaption>Insert hyperlink dialog</figcaption>\n</figure>\n","zoom_slider":"<h1 class=\"section-title\">Zoom slider</h1>\n<p>Zoom in and out. Click the hyperlink button to select a preset from the following menu:</p>\n<figure>\n<p><img src=\"https://images.exdpic.com/images/fe7e6c8d-868f-4ebe-8dcb-15402a3e4a06\" alt=\"Zoom presets\" title=\"Zoom presets\"></p>\n<figcaption>Zoom presets</figcaption>\n</figure>\n"}