Home
The HTML5 Storybook Engine facilitates easy creation of interactive books for use on desktop and mobile. An interactive storybook consists of a cover and at least two pages which can include text, images, animations, sound, and more. The book's content is defined in a configuration file and the Storybook Engine handles the navigation between pages, updating and rendering, and resizing of the book on different devices.
A storybook page can contain one to many page elements. Page elements are defined in the content array of the Pages or Cover properties of the configuration object. The definition is a JSON object. It's type property is a string and defines the page element as one of the following:
The following is an example of how page elements are defined in the configuration object. content: [ { type: "TextArea", x: 0, y: 95, align: "center", text: "This is example text." } ]
The Storybook Engine is developed using HTML5, JavaScript, CSS and JSON.
Each storybook requires an HTML file which loads the required JavaScript, CSS and JSON files. The markup should include a div element with id of "pbsStorybookContainer" is where all the required storybook elements will be injected.
<html>
<head>
<title>Storybook Example</title>
</head>
<body>
<!-- Storybook elements will be injected here -->
<div id="pbsStorybookContainer"></div>
</body>
</html>
###CSS The Storybook Engine requires a reference to the engine CSS file to be included in the HTML file.
<!-- Main storybook style -->
<link media="screen, projection" rel="stylesheet" type="text/css" href="../engine/css/engine.css">
The engine CSS file controls fundamental aspects of the storybook positioning and layering of major components of the storybook.
The Storybook Engine requires a reference to the engine JavaScript files, the plugin JavaScript files and the configuration JavaScript file(s).
<!-- Load storybook engine js files -->
<script src="../engine/js/pbs.js"></script>
<script src="../engine/js/eventDispatcher.js"></script>
<script src="../engine/js/interaction.js"></script>
<script src="../engine/js/resourceLoader.js"></script>
<script src="../engine/js/book.js"></script>
<script src="../engine/js/page.js"></script>
<script src="../engine/js/textArea.js"></script>
<script src="../engine/js/view.js"></script>
<script src="../engine/js/sprite.js"></script>
<script src="../engine/js/cycler.js"></script>
<script src="../engine/js/drawingPad.js"></script>
<script src="../engine/js/audioPlayer.js"></script>
<script src="../engine/js/sound.js"></script>
<script src="../engine/js/audible.js"></script>
<!-- Load plugin js files-->
<script src="../engine/plug/williammalone/html5-canvas-drawing-canvas.js"></script>
<!-- Load Implementation js files-->
<script src="config/config-book.js"></script>
The Storybook Engine also needs to be instantiated. The book object is namespaced with PBS.KIDS.storybook and requires the parameters:
- browser's window object
- PBS object
- storybook element
- configuration object
The book object can be instantiated inside a script tag just above the end of the body tag as follows:
<script>
(function (GLOBAL, PBS) {
// Create the storybook
var book = PBS.KIDS.storybook.book(GLOBAL, PBS, GLOBAL.document.getElementById("pbsStorybookContainer"), PBS.KIDS.storybook.config);
} (window, PBS));
</script>
The Storybook Engine requires a JavaScript object called the "configuration object". The configuration object is used to define the storybook's content as well as the look and feel of the storybook. See an Example-Configuration-Object. The configuration object is defined in the storybook namespace and has several properties that can be specified:
The page definitions in the configuration object can be separated into multiple files. To do so use push to the pages array of the configuration files.
PBS.KIDS.storybook.config.pages.push({
background: {
url: "images/wool.jpg"
},
content: [
{
type: "TextArea",
x: 15,
y: 50,
text: "Beware the cleaning."
}
]
};
A storybook built on the HTML5 Storybook Engine is available at: https://rawgit.luolix.top/PBS-KIDS/HTML5-Storybook/master/example/index.html. It includes implementations of Sprites, Text Areas, Drawing Pads and a Cycler.
See the Reference a list of Wiki links.