Captographics

3-Panel Slide Show Manager

Captographics is a free Android app that lets you create 3-panel slide shows (2-panel on smartphones), thereby managing your photo collection (with text) and syncing it across multiple devices. It also works on Windows, Mac, Linux, and iOS. Users can pay $1.99 to enable the capability of publishing to the web. Subscribers who exceed the web space quota pay roughly ten cents per unit per year in excess of the quota, where a unit equals one image (100 x 100 pixels) or 1000 words (5 chars. per word) of text.

User Interface

The Captographics user interface consists of 6 user states: menu, folder, slide show, full screen, edit, and grid. The menu state lets the user perform various housekeeping functions, such as syncing with other devices. The folder state displays a grid of subject photos (each subject corresponds to a particular person, place, or thing). The slide show state displays a slide show in which each slide consists of up to 3 panels (all side-by-side or one portrait panel next to 2 panels arranged one on top of the other), and each panel consists of a photo of the current subject. The full screen state displays a single photo. The edit state displays a single slide in edit mode. The grid state (also in edit mode) displays a grid of photos, all of the current subject.

Pictures and Text

Every photo can have arbitrary text below it, including basic HTML (and hypertext links) but no fonts, tables, or embedded images. Use the up/down arrow keys to scroll the current text block in slide show state or full screen state. Swipe the scroll bar up/down under Android. Every panel has a photo, a text block, or both. Press F (or click on magnifying glass icon) to search for text. Press forward slash (or click on ? icon) at any time for context-sensitive help.

Menu State

Use the Esc key to toggle between menu and folder states.
Swipe left to get into menu state under Android, swipe right to get into folder state.

Folder State

Grid has a blue border, otherwise all grid cells are bottom-level photos.
Use the Esc key to toggle between menu and folder states, or to display parent folder.
Swipe left to get into menu state under Android, swipe right to get into folder state.
Use the arrow keys to select current subject photo (up to 2 lines of text appear below grid).
Click on a subject photo (or press Enter) to display child photos or enter slide show state.
Double-click on a subject photo under Android to perform above command.
Drag current subject photo to top (or press P) to promote it to a folder.
Table features: varying row/column widths, merge/split grid cells in future version.

Slide Show State

Use the Esc key to enter folder state.
Swipe up to enter folder state under Android.
Use the left/right arrow keys (or swipe left/right) to change slides.
Click on a slide to toggle between slide show and full screen states.
Press space bar to toggle between slide show and edit states.
Swipe down to enter edit state under Android.

Full Screen State

Use the left/right arrow keys (or swipe left/right) to change photos.
Click on a photo to toggle between slide show and full screen states.
Press Enter (or click on pencil icon) to edit text, if user has proper access rights.

Edit State

Swipe left to enter slide show state under Android.
Press space bar to toggle between slide show and edit states.
Use the left/right arrow keys (or swipe left/right) to select panel.
Use the up/down arrow keys (or swipe up/down) to change slides.
Click on a panel to select it.
Use the Esc key to toggle between edit and grid states.
Click on the X at lower right-hand corner instead of using the Esc key under Android.
Double-click on a panel to access toolbar under Android.
Press Z, Y, X, C, V, D, S (or use toolbar) to perform undo, redo, cut, copy, paste, delete, and swap.
Swap command swaps current slide with slide below it (most recently added slide is at top of stack).

Grid State

Use the Esc key to toggle between edit and grid states.
Click on the X at lower right-hand corner instead of using the Esc key under Android.
Click on a photo (or press Enter) to open current photo and enter edit state.
Double-click on a subject photo under Android to enter edit state.
Use the arrow keys to select current photo.
Swipe up/down to scroll grid under Android.
Swipe left to copy current photo to clipboard under Android.
Swipe right to delete current photo under Android (user must confirm deletion yes/no).
Press C or Ctrl+D to copy/delete current photo, respectively.
Open photo: if photo is not already in a slide, then create a new slide.
Else if photo is in current slide, then display current slide.
Else display bottommost slide which contains photo.

Borders

All photos in folder, edit and grid states are separated by (at least) a 3-pixel wide white border. The currently selected photo is surrounded by a 1-pixel wide yellow border. In grid state, that 1-pixel wide border is blue if the corresponding photo is not selected and belongs to at least one slide, and is green if the corresponding photo is selected and belongs to at least one slide.

JSON File

Every subject photo corresponds to a separate folder, and the folder path names are stored in the zero-th object (which lacks dimension and panel properties) in the JSON array. The JSON file stored on disk consists of an array of objects, one object for each folder, and each object contains an images property, a dimensions property, a line-counts property, and a panels property. The images property consists of an array of folder names and/or image file names. The dimensions property consists of an array of width/height pairs, one pair for each image file (or an index into the folder path list if this is a folder). The line-counts property consists of an array of line counts, which is used to determine which part of the HTML file is required for a given image file. The panels property contains an array of indices into the image property array (3 indices for each slide). Indices of zero correspond to empty panels. Folder path names must not contain a dot character. Every folder has a corresponding HTML file containing the accompanying text, without a header or body tags.

Web Interface

The user can be in one of 3 states: folder, slide show, or full screen. In folder state, a grid of images is displayed, and each image can have a caption containing one or two lines of text. A grid cell can contain only text with no image. A grid cell with a blue border, when clicked on, displays a lower-level grid. Clicking on a grid cell without a blue border switches to full screen state. The Esc key switches back to grid state, or a higher-level grid if already in grid state. Clicking anywhere in full screen state switches to slide show state. Left and right arrow keys in slide show state display the previous/next slide, respectively. Clicking on a slide panel in slide show state switches to full screen state. When not in grid state, 2 icons are displayed at the upper right-hand corner of the browser window: a magnifying glass and a backwards L-shaped arrow pointing up. Those 2 icons enable the user to perform a text search or switch back to grid state. When in grid state, the user must scroll up to the top, if necessary, in order to access those 2 icons. The 2nd icon switches to a higher-level grid.

Image Selection

This command enables the user to select a folder containing image files. The user can optionally select a root folder, and all folders contained therein are searched for image files. The recursive checkbox is checked if the user wishes to create a tree of subjects (each subject, usually a person, place, or thing, corresponds to a folder containing images and possibly other folders).

Facebook App

Users can run a Facebook app which tells Captographics who are the friends of a given user. This enables each subject photo/folder to be hidden to visitors of Captographics.com, except to only that user's friends or just one or more circles of friends, if desired.

Steps Involved

Get Linux part working for 12 photos of one subject
Add linear text search
Port to Windows
Develop Android app
Move to Vancouver
Hire partner: recent computer science grad
Partner to perform Mac port
Partner to develop iPhone app
Simultaneously (with Steps 7, 8) allow publish content to web
Read Django book
Use Python and Django for server-side code
Add indexed search
Develop Facebook app
Handle monetization
Add table features in folder state
Develop Lyvathon

Lyvathon

Merging Captographics with Lyvathon (a new programming language I designed) will enable Captographics users to develop dynamic and not just static websites, all hosted at Captographics.com.

About Me

I am Mike Hahn, the founder of Captographics. On August 9, 2014 I began working on AppaTeach (a tutoring website). I started Lyvathon (a new programming language I designed) on January 4, 2015, after dabbling in its precursors (sporadically) since the mid 90s. On January 24, 2015 I resumed working on AppaTeach, and resumed working on Lyvathon on May 9, 2015. On June 6, 2015 I started developing Captographics. I was previously employed at Brooklyn Computer Systems as a Delphi Programmer and a Technical Writer (I worked there between 1996 and 2013). Just prior to starting Lyvathon I quit my job as a volunteer tutor at Fred Victor on Tuesday afternoons, where for 5 years I taught math, computers, and literacy. I'm now a volunteer computer tutor at West Neighbourhood House. My hobbies are reading the news at cbc.ca and going for walks in my neighbourhood. About twice a year I get together with my sister who lives in Victoria. She comes here or I go out there usually in the summer. At those times I'm much more active, but most of the year I tend to lie on the couch a lot, and not be very active. I do, however, visit my brother once a month or so and listen to or visit my disabled friend (she has schizophrenia and talks to me on the phone).

Contact Info

Mike Hahn
Founder
Captographics
2495 Dundas St. West
Ste. 515
Toronto, ON M6P 1X4
Canada

Phone: 416-533-4417
Email: hahnbytes (AT) gmail (DOT) com

[ Back to Top ]