wiki:JSON Data Model
Last modified 9 years ago Last modified on 10/10/11 23:15:36

JSON Format

The goal of this page is to define JSON format exported from Sophie components, which is used to generate HTML + JS

* NOTE *
All numerical (double, integer) and boolean values are exported without quotes("")

Book (main)

Book json contains info for book and have paths to pages

  • "title" : title of the book
  • "author" : the name of the author
  • "height" : height of the book
  • "width" : width of the book
  • "audio" : define book audio
  • "pages" : list of all pages in the book

Sample:

{
    "title":"New Book",
    "height":480,
    "width":640,
    "audio":"book_resources/audios/backgroundAudio.mp3"
    "pages":
    [
    {
        "id":"mem___67d40811-41ef-444d-bc4f-94f15aabfc66_Page_kT8Pfh",
        "thumbnail":"videohtml_resources/thumbnails/page1_thumb.gif",
        "url":"book_resources/lib/page.html?json=book_resources/bookData/page1.json"
    },
    {
        "id":"mem___67d40811-41ef-444d-bc4f-94f15aabfc66_Page_kT8Pfk",
        "thumbnail":"videohtml_resources/thumbnails/page2_thumb.gif",
        "url":"book_resources/lib/page.html?json=book_resources/bookData/page2.json"
    }
    ]
}

Format:

{
    "title":"<string>",
    "author":"<string>",
    "height":<integer>,
    "width":<integer>,
    "pages":
    [
    {
        "id":"<string>",
        "thumbnail":"<string>",
        "url":"<string>"
    },
    ....................
    ]
}

Page

Page json contains info for all elements and lifecycles in the page

  • "id" : page id
  • "title" : define page title
  • "height" : define page height
  • "width" : define page width
  • "audioposition" : define start position of book audio for current page
  • "style" : define page style
  • "links" : define all page and frame links
  • "lifeCycle" : define timelines of the page
  • "elements" : define all page elements
  • "groups" : define all page groups

Sample:

{
    "id":"file___C__Users_TAN4ET_1_AppData_Local_Temp_929060eb-ccd2-4b05-a03b-4d3cf4570223_Howl_book_s2_PageQ2SS2G"
    "title":"My Page",
    "height":480,
    "width":640,
    "audioposition":"35"
    "style": {
        "backgroundColor": {
            "color": "rgba(255,255,255,1.0)"
        },
        "border": {
            "borderTop": 0,
            "color": "rgba(0,0,0,1.0)",
            "borderBottom": 0,
            "borderRight": 0,
            "borderLeft": 0
        }
        ...
    },
    "links": [
        {
            "source": "Howl_book_s2_PageQ2SS2G_Frame9zNphJ",
            "event": "MOUSE_PRESSED",
            "target": "this",
            "action": "playTimeline"
        },
        {
            "source": "Howl_book_s2_PageQ2SS2G_FrameAsLNur",
            "event": "MOUSE_PRESSED",
            "target": "this",
            "action": "pauseTimeline"
        }
    ],
    "lifeCycle": {
        "cycles": [
            {
                "time": {
                    "milliseconds": 0,
                    "phase": "INTRO"
                },
                "target": "Howl_book_s2_PageQ2SS2G",
                "value": true,
                "property": "visibility"
            },
            ...
        ]
     },
     "elements": [
        {
            ...
        },
        ...
     ],
     "groups" : []
      
}

Format:

{
"width" : 400,
"height" : 600,
"title" : "My first page built via JSON format",
"audioPosition" : 15,
"style" : 
[
	"border" : {
		"color": "<string>",
                "borderLeft": <integer>,
                "borderRight": <integer>,
                "borderTop": <integer>,
                "borderBottom": <integer>
	}
	"backgroundColor" : {
		-- see details below
	}
	"backgroundImage" : {
		-- see details below
	}
	"backgroundGradient" : {
		-- see details beolow
	} 
],
"elements" : 
[
	{
		<properties>
		-- may contain image, video or embedded book, see details below

		"image" : {
			-- see details below
		}
		"video" : {
			-- see details below
		}
	}
],
"links" : 
[
	-- may contain simple link, or link with if-else conditions
	"link" : {
		-- see details below
	}
]
},
lifeCycle" :
{
        <properties>
}

Sample objects:

{
"width" : <integer>,
"height" : <integer>,
"title" : <string>,
"audioPosition" : <integer>,
"style" : 
[
        <style 1>
        {
                <style properties>
        }
],
"elements" : 
[
	<element 1>
	{
		<element properties>
	}
],
"groups" :
[
        <group 1>
        {
                <group properties>
        }
],
"links" :
[
	<link 1>
	{
		<link properties>
	}
]
},
"lifeCycle" :
{
        "intro" : <integer>,
        "main" : <integer>,
        "outro" : <integer>,
        "looping" : <boolean>,
        "cycles" :
        [
             <cycle1>
             {
                    <cycle properties>
             }
        ]
}

Styles

Borders and backgrounds styles settings must be set in "style" tag.

Border style

Sample border object with defined properties.

"style": {
    "border": {
        "color": "rgba(222, 76, 0, 0.7)",
        "borderLeft" : 2,
        "borderRight" : 3,
        "borderTop" : 4,
        "borderBottom" : 0 
    }

Types of border properties.

"style": {
    "border": {
        "color": "<string>",
        "borderLeft": <integer>,
        "borderRight": <integer>,
        "borderTop": <integer>,
        "borderBottom": <integer>
    }

Background color

Sample backgroundColor object with defined properties.

"style": {
    "backgroundColor": {
        "color": "rgba(222, 76, 0, 0.7)"
    }
}

Types of backgroundColor properties.

"style": {
    "backgroundColor": {
        "color": "<string>"
    }
}

Background image

A sample backgroundImage object with defined properties.

  • "type" : ["streched", "tiled"]. Type of using of the image for background.
  • "backgroundRepeat" (only for tiled): ["no-repeat", "repeat-x", "repeat-y"], otherwise image is repeated. (NOTE: In Sophie the only one supported is "repeat")
  • "backgroundSizeX"/"backgroundSizeY" (only for tiled): Width and height of the tiled images.
  • "backgroundPositionX"/"backgroundPositionY" (only for tiled): Ordinal point coordinates for one of the tiled images.
"style": {
    "backgroundImage": {
        "image": {
            "source": "../assets/images/butterfly.jpg" 
        },
        "type" : "tiled",
        "backgroundSizeX" : 20,
        "backgroundSizeY" : 20,
        "backgroundPositionX" : 10,
        "backgroundPositionY" : 10,
        "backgroundRepeat" : "repeat-y"
    }
}

"style": {
    "backgroundImage": {
        "image": <simple image object> (see below),
        "type": <"stretched" or "tiled">,
        "backgroundSizeX": <integer>,
        "backgroundSizeY": <integer>,
        "backgroundPositionX": <integer>,
        "backgroundPositionY": <integer>,
        "backgroundRepeat": "<string>"
    }
}

Background gradient

  • "type" : ["none", "repeat", "reflective"], otherwise type of the gradient
  • "style" : ["linear", "radial"], otherwise the style of the gradient

Sample linear background gradient object with defined properties.

"style" : {
    "backgroundGradient" : {
        "style": "linear",
        "type": "reflective",
        "startPointX" : 100,
        "startPointY" : 0,
        "endPointX" : 400,
        "endPointY" : 400,
        "colors" : [
            {
                "location" : 0,
                "color" : "rgba(133, 251, 255, 1)" 
            },
            {
                "location" : 26,
                "color" : "rgba(0, 0, 0, 0.21)" 
            },
            {
                "location" : 89,
                "color" : "rgba(255, 173, 173, 1)" 
            } 
        ] 
    } 
}

Sample radial background gradient object with defined properties.

"style" : {
    "backgroundGradient" : {
    "style": "radial",
    "type": "none",
    "startPointX" : 44,
    "startPointY" : 85,
    "endPointX" : 110,
    "endPointY" : 85,
    "colors" : [
        {
            "location" : 0,
            "color" : "rgba(133, 251, 255, 1)" 
        },
        {
            "location" : 26,
            "color" : "rgba(0, 0, 0, 0.21)" 
        },
        {
            "location" : 89,
            "color" : "rgba(255, 173, 173, 1)" 
        } 
    ]
}}

Types of background gradient properties.

"backgroundGradient":
{
        "type": "<string>", 
        "style": "<string>",
        "startPointX": <integer>,
        "startPointY": <integer>,
        "endPointX": <integer>,
        "endPointY": <integer>,
        "colors":
        [
             {
                 "location": <integer>,
                 "color": "<string>"
             }
             .....
         }
}

Elements

Image

<simple image object>

{
        "source" : "boat.jpg"
}
"image":
{
	"source": "<string>"
}

Media

  • "type" : ["video", "audio"]. Describe media format.
  • "start" : <double>. First moment of media.
  • "end" : <double>. Last moment of media.
  • "initialTime" : <double>. Initial time of media. Value must be in range [start, end].
  • "poster" - Url to poster image of a video. For media with video only.
  • "videoTouch" : enabled?. Enables play/pause via touching poster or video. Invisible canvas id drawn over video to catch click event when property is enabled. For media with video only. Not exported for now.
  • "autoplay" : NOT IMPLEMENTABLE. Exported as false.
  • "looping" : determine looping of the media. [BR?
  • "controls" : determine visibility of the play/pause button, stop button and slider for controlling media position.

Sample media object for video

{
    "type" : "video",
    "source" : "pass-countdown.ogg",
    "poster": "video_poster.gif",
    "videoTouch": "enabled",
    "controls" : [
        "play" : false,
        "stop" : false,
        "slider" : true
    ],
    "looping" : false,
    "autoplay" : false,
    "initialTime" : -0.01
}

Sample media object for audio

{
    "type" : "audio",
    "source" : "pass-countdown.mp3",
    "controls" : [
        "play" : true,
        "stop" : false,
        "slider" : false
    ],
    "looping" : true,
    "autoplay" : false,
    "initialTime" : -0.01
}

Types of media properties.

"media":
{
	"id": "<string>",
	"type": "<string>",
	"source": "<string>",
	"poster": "<string>",
	"videoTouch": "<string>",
        "controls":
        [
        	"play" : <boolean>,
                "stop" : <boolean>,
		"slider" : <boolean>
        ],
        "looping" : <boolean>,
	"autoplay" : <boolean>,
        "start" : <double>,
        "end" : <double>,
	"initialTime" : <double>,
}

Book (embedded)

  • "source" - Source of the embedded book.
  • "currentPageIndex" - Index of the page on witch embedded book should be opened. In Sophie it is 0 for each book.
  • Controls - determine visibility of buttons for navigation trough embedded book.

Sample embedded book object:

{
        "source" : "book1.html",
        "currentPageIndex": 2,
        "controls" :
        {
              "nextPage":true,
              "previousPage":false
        }
}

Embedded book object format:

"book":
{
	"source": "<string>",
        "currentPageIndex": <int>,
        "controls":
        {
             "nextPage" : "<boolean>"
             "previousPage" : "<boolean>"
        }
}

Text

The text in a Sophie text frame is represented as a list of segments.

Each segment is a continuous sequence of symbols on a single line.

A new segment starts on every new line and every time the line breaks because of text wrapping around some object.

A line can contains many segments if it is wrapped around some component or justified.

A segments can contains parts of text with equal style.

Each segment contains location(start point of the segment) and parts of text (plain text + styles + xLocation relative to the previous part of the text) which are concatenated.

The styles map may not contain all properties. Each property has a default value that will be used when its value is not explicitly specified.

Default values:

  • fontfamily - Monospace
  • fontsize - 12
  • bold - false
  • italic - false
  • strikethrough - false
  • underlined - false
  • foregroundcolor - black, i.e. "rgba(0,0,0,1)"
  • backgroundcolor - white, i.e. "rgba(1,1,1,1)" (or maybe transparent???)
"text":[
    {
        "location": {
            "y": 16,
            "x": 2 
        },
        "parts": [
            {
                "text": "t",
                "style": {
                    "italic": true,
                    "underlined": true 
                },
                "xLocation": 5,
            },
            {
                "text": "e",
                "style": {
                    "caretattr": true,
                    "italic": true,
                    "underlined": true,
                    "fontsize": 14 
                },
                "xLocation": 0,
            },
            {
                "text": "X",
                "style": {
                    "italic": true,
                    "underlined": true,
                    "fontsize": 16 
                },
                "xLocation": 0,
            },
            {
                "text": "T",
                "style": {
                    "italic": true,
                    "underlined": true 
                },
                "xLocation": 2,
            },
            {
                "text": "tT",
                "style": {
                    "italic": true,
                    "underlined": true,
                    "fontsize": 14 
                },
                "xLocation": 4,
            },
            {
                "text": " o",
                "style": {
                    "italic": true,
                    "underlined": true 
                },
                "xLocation": 0,
            },
            {
                "text": "N TheE ",
                "style": {
                    "strikethrough": true,
                    "italic": true,
                    "underlined": true,
                    "fontsize": 16 
                },
                "xLocation": 2,
            } 
        ] 
    },
    {
        "location": {
            "y": 16.0859375,
            "x": 201.3509979248047 
        },
        "parts": [
            {
                "text": "FIIRRSTT Liine ",
                "style": {
                    "strikethrough": true,
                    "italic": true,
                    "underlined": true,
                    "fontsize": 16 
                },
                "xLocation": 0,
            } 
        ] 
    }
]
{
  "text":
   [
   {
         "location":{"x":<integer>, "y":<integer>},
         "parts":[
         {
             "text":<string>,
             "style":
             { 
                "fontfamily" : <string>,
                 "fontsize" : <integer>,
                 "bold" : <boolean>,
                 "italic" : <boolean>,
                 "strikethrough" : <boolean>,
                 "underlined" : <boolean>,
                 "foregroundcolor" : <string>,
                 "backgroundcolor" : <string>,
              },
              "xLocation": <int>
         },
         ........................................
         ]
  ........................................
  }
  ]
}

Browser

Sample browser object:

"browser":
{
        "source" : "http://www.google.com"
}

Browser object format:

"browser":
{
	"source": "<string>"
}

Comment

Sample comment frame generated from exporter:

"comment":
{
        "service" : "http://asteasolutions.net/~antoni/[service_name]"
}

Sample comment response from the service:

{
    "comments": [
        {
            "id": 13,
            "content": "Nice book it's really very interactive!",
            "date": "2011-04-28 18:13:37",
            "parentId": -1,
            "author": "guest" 
        },
        {
            "id": 12,
            "content": "Hello! This is my first comment!",
            "date": "2011-04-28 18:11:40",
            "parentId": 9,
            "author": "antoni" 
        } 
    ]
}

Frame

  • "x", "y" : Absolute coordinates of the content of frame
  • "width" - Width of the content element.
  • "height" - Height of the content element.
  • "marginTop"/"marginLeft"/"marginBottom"/"marginRight" - Properties are NOT IMPLEMENTED because they have meaning only in author. In reader they are thoughtless.
  • "paddingTop"/"paddingLeft"/"paddingBottom"/"paddingRight" - Define gaps between content and border. Paddings are set outer of element.
  • "rotation" - Rotation of the frame with origin on the top left point of the frame.
  • "zindex" - Z-index of the frame on the page.
  • "visibility" - Visibility of the frame at the beginning of the life cycle of the frame.

Sample frame object for image:

{
    "id": "flower_frame",
    "x": 424,
    "y": 300,
    "width": 290,
    "height": 178,
    "rotation": 5,
    "zindex": 1,
    "visibility": true,
    "marginTop": 5,
    "marginBottom": 5,
    "marginRight": 5,
    "marginLeft": 5,
    "paddingTop": 0,
    "paddingBottom": 0,
    "paddingLeft": 0,
    "paddingRight": 0,
    "style": {
        "backgroundColor": {
            "color": "rgba(0, 222, 222, 0.4)" 
        },
        "border" : {
            "color": "rgba(120, 76, 222, 1)",
            "borderLeft" : 15,
            "borderRight" : 15,
            "borderTop" : 15,
            "borderBottom" : 15 
        }
    },
    "image" : {
        "id": "frame_flower_img",
        "source": "../assets/images/picture.jpg" 
    } 
}

Types of properties for frame object:

"frame":
{
	"id": <string>,
	"x": <integer>,
	"y": <integer>,
	"width": <integer>,
	"height": <integer>,
	"rotation": <float>,
        "visibility": <boolean>,
	"zindex": <integer>,
        "marginLeft": <integer>,
        "marginRight": <integer>,
        "marginTop": <integer>,
        "margintBottom": <integer>,
        "paddingLeft": <integer>,
        "paddingRight": <integer>,
        "paddingTop": <integer>,
        "paddingBottom": <integer>,
        "style" : 
        [
                <style 1>
                {
                         <style properties>
                }
        ],

        "image": <image>,
        "text": <text>,
        "media" : <media>,
        "book" : <book>,
        "browser" : <browser>
        or "comment" : <comment>

	"lifeCycle" :
	[
		--list of changes over time
	]
}

Groups

Group in Sophie is group of frames. Group is used only for activation of them life cycles.

Sample groups object:

"groups" : [
    {
        "id": "group1",
        "frames": [
            "_show_flower_frame2",
            "_hide_flower_frame2",
            "_toggle_flower_frame2" 
        ]
    }
]

Groups object format:

"groups" : [
    {
        "id": "<string>",
        "frames": [
            "<string>",
            .... 
        ]
    } 
]

LifeCycle?

  • "intro": length of the intro phase of the lifecycle
  • "main": length of the main phase of the lifecycle
  • "outro": length of the outro phase of the lifecycle
  • "looping": determine whether life cycle should be looped or when life cycle of the page is finished should go to next page.
  • "cycles": array from the changes in lifecycle
  • "target" - id of the frame
  • "time"
  • "phase": ["OFF", "INTRO", "MAIN", "OUTRO"] - phase in which becomes the change
  • "milliseconds" - millisecond from the phase, in which the change occurs
  • "property" : ["location", "visibility", "mediaState", "activationfor"] - string representation of the change type
  • "value" - new value for the given property; different type for each of them
  • For location value is with format: {"x": <integer>, "y": <integer>}
  • For visibility value is boolean.
  • For media state value is with format: {"position": <integer>, "playing" <boolean>}
  • For activationfor value is same as time property of the cycle.
"lifeCycle":
{
    "intro":<time_in_ms>,
    "main":<time_in_ms>,
    "outro":<time_in_ms>,
    "looping":<boolean>,
    "cycles":[
	{
            "target":<string>,
            "time":
            { 
               "phase": <string>,
               "milliseconds": <moment_in_ms>
            },
	    "property":<string>,
	    "value": --see below--
        }
    ]
}

Sample cycle for activation of the frame lifecycle:

{
    "target": "frameId",
    "time":
    {
         "phase": "INTRO",
         "milliseconds": 6000
    },
    "property": "activationfor",
    "value":
    {
         "phase": "main",
         "milliseconds": 20000
    }
}

Sample cycle for changing location of the frame:

{
    "target": "frameId",
    "time":
    {
         "phase": "INTRO",
         "milliseconds": 6000
    },
    "property": "location",
    "value":
    {
         "x": 0,
         "y": 100
    }
}
}

Sample cycle for changing visibility of the frame:

{
    "target": "frameId",
    "time":
    {
         "phase": "MAIN",
         "milliseconds": 6000
    },
    "property": "visibility",
    "value": true
}

Sample cycle for changing media state of the frame:

{
    "target": "frameId",
    "time":
    {
         "phase": "MAIN",
         "milliseconds": 6000
    },
    "property": "mediastate",
    "value":
    {
         "position": 2000,
         "playing": false
    }
}

Sample link object:

"link":{
    "source": "innerImg",
    "target": "video1",
    "event": "click",
    "action": "play"
}

Link object format:

"link":
{
	"source":<source_id>,
	"target":<target_id>,
	"event":<string>,
	"action":<string>,
        "property":<string>
}

Events

  • "MOUSE_ENTER"
  • "MOUSE_LEAVE"
  • "MOUSE_DOUBLE_CLICK"
  • "MOUSE_PRESSED"
  • "MOUSE_RELEASED"
  • "FRAME_SHOWN"
  • "FRAME_HIDDEN"
  • "PAGE_SHOWN"
  • "PAGE_HIDDEN"

Actions

  • "showFrame" + (frame id in target)
  • "hideFrame" + (frame id in target)
  • "toggleFrame" + (frame id in target)
  • "stopMedia" + (frame id of media in target)
  • "playMedia" + (frame id of media in target)
  • "pauseMedia" + (frame id of media in target)
  • "rewindMedia" + (frame id of media in target)
  • "goToPreviousPage" + ("this" or id of embeded book in target)
  • "goToNextPage" + ("this" or id of embeded book in target)
  • "goToPage" + (page number in property)
  • "openURL" + (url in property)
  • "playTimeline"
  • "stopTimeline"
  • "pauseTimeline"
  • "rewindTimeline"