Command barUndo/redo buttonsSelect toolPen toolRectangle/Ellipse toolsSave buttonEdit menuUser menuPage menuExpand toolbar buttonPicture opacity controlsResize panes buttonHelpSettings buttonSelected Area IdText EditorElement nameFind buttonPage tabImage tabSelection tabHistory tabNavigation tabText formatting toolbarZoom slider

help

Introduction

The Exd Pic app lets you add interactive elements to pictures and publish them online. This page was made with the app.

Features

How to use

Trace areas that you want to make interactive. Set the content to display for them. When you are finished you can publish your work online as a web page.

This is a screenshot of its UI. Click on anything in it to show help about that part of it. Click on a link in the text to highlight the controls related to it.

The page being edited in the screenshot is online at https://exdpic.com/peter/pocoyo.

Starting the app

The About dialog is displayed when you open the app. You can activate or deactivate a tutorial from here. The tutorial is active by default the first time the app is run only. There is also a link to this Help page.

The tutorial is provided to help get started quickly. It highlights certain core features. This help documentation will be a more comprehensive resource. Check back later as it is as updates are ongoing.

You can reopen the About dialog at any time by Clicking the ? button in the middle bar.

User Interface

The UI is divided into two panes. They can be resized with the resize panes menu on the middle bar. The top pane is for drawing and the bottom pane is for text.

The main command bar is at the top of the window. It has the page name and a number of buttons and menus:

The middle bar has controls related to the how things are displayed. It also has buttons to view information about the app.

The bottom pane has five tabs.

The Page tab is open in the screenshot. It contains a text editor. A similar text editor is in the Selection tab. Page and element content is specified with Markdown. You can use the text command bar to format text and insert media without being familiar with Markdown. However you can use Markdown directly to access more formatting and media options.
The Markdown implementation used is Markdig, with the MediaLinks, SmartyPants, Figures and EmphasisExtras extensions. This is CommonMark compliant.

Link to elements in the picture by using their Ids. When linking within the page, use relative URLs for this purpose - e.g. use #save_button instead of https://exdpic.com/help#save_button. Both styles will work, but only the former will be checked by the Page Validator.
You can open a page with a particular element selected by using its Id in the URL.

The editor command bars contain the following buttons: