How to Use

Welcome to DemiScript!

You have the following options available to you when viewing IIIF documents in this viewer-editor:

Layout
• This container will hold the interactive IIIF-Document.
• Located above the viewer-editor are the overlay and rotation sliders.
• When hovering over the viewer, a navigation bar appears on the top left.
• When hovering over the viewer, a small full view appears on the top right.

Editor-Viewer Key Controls (Top-Right Bar)
• edit Reveal additional editor controls.
• perm_media Curation Manager.
• auto_stories Document page navigation.
• article Plain Text Manager.
• save Download DemiScript document (contains your transcriptions, annotations, and the reference to the IIIF document you used).

Viewer Controls
• Clicking on the viewer, pressing the "+" key, or clicking on the plus sign on the navigation bar will zoom into an area.
• Pressing the "-" key, or clicking the minus sign on the navigation bar will zoom out again.
• The "+" and "-" keys can be held down to continually zoom in or out.
• The mouse wheel can also be used to zoom in or out.
• Clicking and holding the left mouse button down allows the dragging around of the viewer.
• Using the arrow keys likewise moves the viewer around.
• Clicking on the rotation buttons in the navigation bar will rotate the viewer 90°.
• Clicking the home icon in the navigation bar will return the zoom level to default.
• Clicking the full-screen icon in the navigation bar will open the viewer in full-screen mode.
• Moving the overlay slider above the viewer to the left will make the overlay between viewer and viewer objects more transparent and hide all objects when set to 0.
• Moving the rotation slider above the viewer will rotate the viewer freely.

Editor Controls
• playlist_add Add text from the input box as a horizontal text element.
• playlist_add Add text from the input box as a CJK (vertical) text element.
• wrap_text Add text from the input box as a new text element with the same styles as the currently active text element.
• share Create a polygon element. To do so, click on the document once for each polygon point you wish to place, then double-click or click this button again to finish the polygon drawing process.
• rectangle Create a rectangle element. To do so, click on the document once to start drawing, then again to finish drawing. As you move your mouse, the to-be-drawn rectangle will transform accordingly.
• circle Create a circle element. To do so, click on the document once to start drawing, then again to finish drawing. As you move your mouse, the to-be-drawn rectangle will transform accordingly.
• add_photo_alternate Insert an image element using the link pasted into the input box.
• perm_media The curation function is used in a similar fashion to the rectangle function. If a curation folder has been created in the Curation Manager, the contents of the rectangle can then be curated into that folder, where they appear as a linked image file. Clicking on the file will open the corresponding page on the document and zoom to the curated area.
• content_cut The image extraction tool is used in a similar fashion to the rectangle and curation functions. A IIIF-Link to the selected area on the document as a downloadable image file is created and shown on screen.
• location_on The pin function will place a "pin" image pointing to the center of the active object on the document. A lable with the text in the input box will be placed next to the pin. This tool can be used to quickly populare maps or similar illustrated documents with visual references.
• delete_sweep The delete button will prompt the user to delete the selected object.
• format_line_spacing The line spacer can be operated with the adjacent + and - buttons to increase or decrease line spacing. This does not change the spacing between CJK characters, only between horizontal or vertical lines of text.
• colorize The eye-dropper can be used to slot the color fill attribute of the active element into the color picker. New elements will usually have the current color fill of the color picker.
• format_color_fill The bucket tool will set the active element's color fill attribute to the color selected in the color picker.
• The color picker between the bucket tool and ordering tool can be used to pick out a color fill for an element. Note that the transparency of the color can also be set here, allowing for semi to fully transparent shapes and text to be placed on the document. Picking a color will also set the color fill of the active element to this color. For a color to be set to be used by the bucket tool, please click the "choose" button before closing the color picker.
• double_arrow The ordering tool can be used to move an element to the bottom of the element ordering. If a non-active element should appear behind another, this button can be used to create this effect. Active elements will always be shown on top of other elements for ease of use.
• settings_applications The settings tool is powerful but dangerous to use. It allows the direct editing of the attributes of the active element. This enables additional customization of elements. Note that the "comment" field is also contained in these settings. The "comment" field has no influence on the element, but can be used to attach additional information to it that can, for example, be programmatically processed by implementations of DemiScript projects.

Mobile Viewer
• Horizontal viewing is recommended but not strictly necessary.
• Gestures can be used to navigate the viewer and zoomable images.
• Touching the viewer or zoomable images with two fingers and then pinching them together or moving them apart will change the zoom level