Data Structure

#Data Structure

I modeled the file sampleComic.json after how I'd expect this system to return a comic via some REST API. As such, there are some extra fields that aren't currently in use.

Generally speaking, a response has Strips which are made up of Panels which are made up of Lines which have a Format. From top to bottom, here's how to interpret the contents of sampleComic.json:

The file itself is one large object whose only property is strips. This strips field is an array (though currently it only has one item in it), full of Strip objects.

Strip

A Strip can be thought of as one day's published comic, and has:

Field Name	Example Value	Description
id	"comic-0001"	A unique id for this Strip. (used in React)
title	"Example Web Comic"	The title for this Strip. (displayed on page)
date	1234567890	The publication date in epoch time (but I was lazy so picked a placeholder)
panels	[{}]	An array full of Panel objects.

Panel

A Panel represents one image within the strip. It provides the context for a collection of Line objects, and has:

Field Name	Example Value	Description
id	"0001-01"	A unique id for this Panel. (used in React)
image	"https://.../panel1.png"	A path to an image.
naturalWidth	600	The non-scaled pixel dimensions of the image.
ratio	0.75	The result of (image height in pixels) / (image width in pixels)
lines	[{}]	An array full of Line objects.

Line

A Line represents one section of text (visible or hidden). They are listed in reading order within a Panel and each one has:

Field Name	Example Value	Description
id	"01-001"	A unique id for this Line. (used in React)
speaker	"Scene" or "Joe"	The name of who's talking. If "Scene" no text is rendered, but the screen reader will still read the text. Otherwise, just use the character's name.
text	"The scene opens..."	The text to be read/displayed.
format	{}	An object with props related to how the text is displayed.

Format

A Format object contains values for positioning and sizing the text on-screen. While I anticipate adding more options (color, rotation, etc.) in the future, for now each one has:

Field Name	Example Value	Description
x	0	The percentage offset of the left edge of the text. 0 is flush-left, 0.5 is center, 1 flush-right.
y	0	The percentage offset of the top edge of the text. 0 is flush-top, 0.5 is center, 1 flush-bottom.
size	16	A size value for text. 16 means when the image is at 100% scale, the text will be 16px tall.

It's this Format object where most of the magic happens. Eventually I'll have an editor for positioning the text in a panel, but for now the best thing to do is save changes to sampleComic.json and then watch the web browser auto-refresh with the updated values. It's a little tedious, I know, but it works!

Continue to Build