This post is about GTW – A new User interface toolkit that is being developed by the Graphtech Labs team.
What is GTW?
One of the more exciting (for us in Graphtech, at least) features of the upcoming HTML5 standard is its hardware accelerated 3D graphics capabilities exposed via the WebGL API. GTW uses this API to deliver a user interface library that enables web developers to build web applications with modern and compelling user interface widgets.
In this post, we will go through an early-bird GTW demonstration that implements a cover-flow style interface to Google Images Search. If you have a WebGL enabled browser – check it out here.
Using GTW
Hopefully we got your attention to see what’s going on under the hood, so here it is. We will demonstrate the usage of GTW using the Google Images Cover Flow above.
This page includes several components:
- A Text Input Area
- A Search button
- An Image View area
Now for the actual steps:
The first step in your HTML file is to define your canvases and setup your initialization function:
<BODY onload="webGLStart();"> <CANVAS id="ilist-canvas" style="border: none;" width="1024" height="700"></CANVAS> <div style="padding: 5px;position:absolute; left: 200px; top: 143px; background-color: #000; opacity: 0.9;height: 20px; width: 400px; border-radius: 5px; border: 1px solid #fff;"> <p style="margin:0;padding:0;padding-bottom: 5px;"> <input type="text" name="myarea" id="txtInput" value="webgl" style="border:1px solid #888;width: 100%" />
Note that this simple page definition includes the following:
- ‘onload’ callback – webGLStart() in our case.
- ‘ilist-canvas’ – our main drawing area
- ‘txtInput’ – a text type input that is used by the image viewer to build it’s url
Next, you need to include few GTW headers – like so:
<SCRIPT type="text/javascript" src="./gtw.js"></SCRIPT>
<SCRIPT type="text/javascript" src="./demo.js"></SCRIPT>
There are two of these headers:
- gtw.js – The GTW toolkit core
- demo.js – Classes that are specific for the demo application
Next, we need to initialize GTW. This initialization includes binding the canvas to GTW’s stage and load a SceneFile (SF). This is the code that does the trick:
<SCRIPT type="text/javascript">
function webGLStart()
{
var canvas = document.getElementById("ilist-canvas");
var stage = gtwStage.prototype.getStage();
stage.init(canvas);
stage.loadSceneFile("demo_imageList.json");
}
</SCRIPT>
The complete HTML file is available here.
The files of this demonstration will be published publicly soon. However, if you would like to have the source code right now, please drop us a line.
Finally, we get to the ‘creative’ part – define your Scene-File. The GTW scene file is a JSON syntax file that defines the UI elements hierarchy. Each element in the hierarchy has a minimum ”type” property which identifies the element, plus a set of type specific elements and their properties. No worries – examples are forthcoming.
The root of our Scene is a ‘gtwGroup’ node. It looks like this:
{
"type" : "gtwGroup",
"children" : [ .... ]
}
Then, we get to the group’s children. The first child that we are going to add is the search button. it’s definition looks like this:
{
"id" : "btnSearch",
"type" : "gtwButton",
"position" : [0.9, 0.85, 0.0],
"size" : [0.2, 0.08, 0.0],
"text" : "Search",
"control" : "btnSearch",
"text_color" : "#000000",
"font_size" : 30,
"texture" : "button_rec.png",
"texture_pressed" : "button_rec_pressed.png"
},
The button is of type ‘gtwButton’ (you are picking the naming convention, right?) and it takes a set of properties that defines it’s look. The same goes for the left and right pan buttons. We will not put them here but you are welcome to check the json file for details. Now, here is where things are getting interesting and WGL goes into action. The next element is a ‘gtwMirror’. The gtwMirror is a group that both renders it’s children (just like gtwGroup) and in addition renders a mirror image of them. In our coverflow, it creates the reflection on the floor. Here is it’s definition:
{
"type" : "gtwMirror",
"position" : [0, 0, 0],
"box" : [0, 0, 0, 1.464,1 ],
"reactive" : false,
"children" : [ .... ],
}
Note the children property of gtwMirror, which are the children that we want to be reflected in the mirror. In our case, the children include the scene background, the stylish, wavy background decoration and the image viewer itself. All are defined as:
{
"type" : "gtwTexture",
"position" : [-0.42, 0.0, -0.5],
"size" : [2.32, 1.5, 0.0],
"filename" : "dark-gradient-background.jpg"
},
{
"type" : "gtwTexture",
"position" : [1.263, 0.93, 0.0],
"size" : [0.2, 0.08, 0.0],
"filename" : "gt_logo.jpg"
},
{
"type" : "gtwMovingTexture",
"position" : [-0.42, 0.0, -0.5],
"size" : [2.32, 1.5, 0.0],
"filename" : "wave.png"
},
{
"id" : "ivGoogle",
"type" : "gtwImageView",
"position" : [0, 0, 0],
"size" : [1.464, 0.5, 0.0],
"filter" : [".jpg",".JPG",".png"],
"url" : "http://127.0.0.1/call/google.images/images?q=",
"control" : "txtInput",
"button_requery" : "btnSearch",
"button_left" : "btnArrowLeft",
"button_right" : "btnArrowRight"
}
The complete Scene Graph (SF) file is available here
What’s Next
Well, obviously the work in GTW is in it’s early stages and there is tons of work to do. Over the next weeks (and months) we will be working on:
- Adding controls such as menus, dialog boxes, scroll lists etc
- Cool visual effects and animations
- WYSIWYG (what you see is what you get) style design tool
If you have ideas for new features and use cases, don’t be shy post a comment !
Credits
At times I find it hard to explain – As 3D graphics engineers, we know how to make crayons, but we don’t know how to paint. The guys that put the magic behind it all are these magnificent artists from ShugaPusher Studio
- Ori Succary
- Erez Bar
That said, Crayons are still required. The engineers that made this happen are:
- Yaron (Haflo) Peleg
- Ehud Katz
- Guy (Chief) Zadikario
[...] A new WebGL library — this one focused less on pure 3D graphics, and more on using WebGL as a rendering engine for a user interface toolkit. [...]