Concepts

Initial Design: https://prezi.com/view/a1tJgWgr4pUiLwyM4eiP/

Current Implementation:

A Story is comprised of multiple StoryItem objects.

The RootStoryItem contains everything, with each StoryItem potentially containing other StoryItems in a parent-child relationship, forming a conceptual (inverse) tree structure. StoryItems are ordered inside their ParentStoryItem, with the ones closer to their parent appearing visually under other siblings if their bounds overlap.

A parent-child relationship means that the lifetime (its additon to and removal from a Story) and the visual position of a StoryItem depends on its parent. Multiple StoryItems can be loaded or saved (stored) from/to a .readcom file by acting on their parent (or grandparent or grand-grand-parent etc.) item and can be moved and resized all together by manipulating an ancestor StoryItem.

The is only one ActiveStoryItem at any time. In Edit mode it appears with a dashed-line border. Edit Actions (like Cut/Copy/Paste, Flipping or setting Foreground/Background colors) act on the ActiveStoryItem. When in non-Edit mode user actions are confined to the children of the ActiveStoryItem.

A StoryItem can be set to be a StoryPoint. In non-Edit mode the user can only navigate among (activate) StoryPoints. Upon activation of StoryItem that is a StoryPoint, the display gets zoomed to the bounds of that StoryPoint.

There exist different kinds of StoryItems:

• An ImageStoryItem can be used to group other StoryItems and to (optionally) display a background image (either a bitmap - JPEG or PNG - or a vector - SVG - one) underneath.
• A TextStoryItem can display text (with word-wrap and autosizing to fit) with a specific style and alignment.
• An AudioStoryItem is only visible in Edit mode as an icon and in non-Edit mode is hidden but audible.

Parameters of a StoryItem can be edited via a StoryItemOptions popup panel, with common options shared by all StoryItem types.

• Can set a StoryItem as the HomeStoryItem (the first StoryItem zoomed to on Story Loading)
• Can set as a StoryPoint (note that HomeStoryItem is optionally a StoryPoint, if it’s not it’s only shown once, e.g. for instructions and not shown again if user loops the Story after reaching its ending StoryPoint)
• Can set as a Snapping container, centering any item that is dropped on it
• Can set as an Unanchored (Moveable) item. All StoryItems are anchored by default
• Can set a Tag, used to match Moveables to Anchored (Target) StoryItems when they share the same Tag. To proceed to next StoryPoint one has to match Tagged Moveable StoryItems to their Anchored/Target counterparts
• Can set an Action URL that allows navigating to a webpage in the system’s default browser, or loading a remote story (if URL string ends in “.readcom”)
• Can load (replace) a StoryItem and its children (a subtree of the story) or store it as a template to a .readcom file for reuse

Each StoryItem type has in addition its own specific options:

• ImageStoryItemOptions allows capturing an image (currently only on mobile platforms)
• TextStoryItemOptions allows one to align the text (leading/center/trailing) and to set Bold/Italic/Underline/Strikeout font style

Other actions a user can do is to hide all buttons (using the top-left “sandwich” button), to change theme (light/dark), to autoplay the Story using a Timer (currently progresses to Next StoryPoint every 8sec) and to see more information, credits and help (pointing to the app’s wiki) from the About box.