iio.js is a JavaScript library for HTML5 Canvas development.
This tutorial shows how to get started with iio.js, and how to make a simple "Hello iio" application.
Setup
In order to develop HTML5 applications, we'll need a text editor to create code with.
My favorite editor is Sublime Text. Any version will work.
The only other thing we'll need is the iio.js build file. You can download that file directly (right click Download and "Save Link As..") or get it on Github.
Hello iio
Let's create an app that draws "Hello iio" onto the middle of our screen.
Create a new folder somewhere called iio apps and put the iio.min.js JavaScript file into it.
Then create a new HTML file called hello-iio.html in that folder.
Now open this new HTML file in a text editor and input this code:
<!doctype html>
<body>
<script type="text/javascript" src="iio.min.js"></script>
<script type="text/javascript">
// main application function...
</script>
</body>
</html>
This code defines an HTML document, loads in iio.js, then opens up the script area where we will code our app.
// main application... - a double slash indicates a comment, which is ignored by the code compiler.
Let's now define a main application function. Put this code where the comment is now:
Helloiio = function( app ){
// application code...
}
This is an iio application main function. The parameter app refers to our App object, which is a controller that will help us create and manage all of our application's content.
Creating a Text object is easy, just call the function app.create and give it a position and some text.
// add a Text object to the center of the view app.create( app.center, 'Hello iio' );
All thats left to do is to start our app. Put this code after the closing bracket of the Helloiio function
iio.start( Helloiio );
Now you can save the HTML file, then open the it in a web browser and see the result:
If you can't see the correct result, then try copying and pasting the full tutorial code into your HTML file, saving, then refreshing the page in your web browser.
<!doctype html>
<body>
<script type="text/javascript" src="iio.min.js"></script>
<script type="text/javascript">
Helloiio = function( app ){
// add a Text object to the center of the view
app.create( app.center, 'Hello iio' );
}
// start the app fullscreen
iio.start( Helloiio );
</script>
</body>
</html>
getting help
If you need help with setup or have a question/issue with the source code, post a query via Github