Pogo encoding

Below is an expanded example of how I imagine being able to store/encode the metadata for each pogo. The first section describes the “pogo” in general. It contains an id for the pogo, an id for the user, the Rosetta style they chose, a title or name, how many rows and/or columns should be used to render the pogo, the pattern to read the pogs in, and finally a list of the pogs used in the pogo.

Each pog has an id / sequence position, the name of the pog used and the color it should be displayed in (if not being view with a monochromatic Rosetta). The x, y, pitch, and duration could all be used in a later version & the values used here are mostly just for demonstration / explanatory purposes.

A sample (in a human readable form)

pogo = {
	"id":1,				//Unique database id for the pogo / group of pogs
	"userId":"Todd",		//The user id of the person that created it
	"RosettaStyle":"hex",		//The style of Rosetta they chose to use
	"title":"Demo Encoding",	//A title/name they gave to the pogo
	"height":2,			//How many rows to layout
	"width":2,			//How many columns to layout
	"sequenceStyle":"zigzag",	//The reading pattern to use
	"pogs":				//A "list" (array) of the pogs in the pogo
	[
	{"pogId":1,			//Position in the pogo's sequence
		"name":"L",		//The "name" of the pog used
		"color":"red"		//What color to use on the pog, ignored if the style of Rosetta is monochromatic.
		"x":-1,			//Optional, could be used to specify where on a "canvas" to position a pog. (-1 means ignore)
		"y":-1,			// ...ditto
		"pitch":1,		//The pitch of the tone played
		"duration":50,		//The duration of the tone (in milliseconds)
	},
	{"pogId":2,
		"name":"o",
		"color":"green"
		"x":-1,
		"y":-1,
		"pitch":2,
		"duration":100,
	},
	{"pogId":3,
		"name":"e",
		"color":"purple"
		"x":-1,
		"y":-1,
		"pitch":2,
		"duration":100,
	},
	{"pogId":4,
		"name":"V",
		"color":"blue"
		"x":-1,
		"y":-1,
		"pitch":2,
		"duration":50,
	}
	]
};

Another sample (in a more computer friendly form)

{"id":2,"title":"Languages","Rosetta":"hex","seq":"ltr","height":3,"width":3,"pogs":[{"id":0,"name":"L"},{"id":1,"name":"a"},{"id":2,"name":"n"},{"id":3,"name":"g"},{"id":4,"name":"u"},{"id":5,"name":"a"},{"id":6,"name":"g"},{"id":7,"name":"e"},{"id":8,"name":"s"}]}

Play...

Note that the only letters I “encoded” the positions for are: l,o,v,e,a,n,g,u,e,s,i,f, & (space) and the “Hex” Rosetta. Any other letters will default to the top left of the Rosetta -- which is “B” on the Hex Rosetta

Note also that this may be buggy and may not layout exactly right in every browser, but since it's not really meant to be used. I didn't try to fine tune it too much. It's just to demonstrate the concept of how the encoding would “capture” the pogo, but keep it “fluid” so that the layout and Rosetta can still be manipulated without effecting the original message.

The Bands, Neon, and 2 Ring Rosettas are slightly different sizes, so they won't display correctly, but that is / would be easy enough to correct with a “sprite” image for each Rosetta.

Like This:

Notice that the images are all centered horizontally and have the same height.
This allows you to specify where the desired image is with just a y value (like: 50px, 100px, 150, 200, etc...)
(Note: I added the borders just to outline the sides and these aren't my images.)