http://www.udev.info
Mail/Login: Password : forgot my password!
[UPDATE MODE]
Back

Graphics in Web with Uniface

Direct link http://www.udev.info/uniface/graphics-in-web-with-uniface
Written by M11 // Tags: uniface canvas html javascript json tutorial

When it comes to animations in webpages you will mostly see the use of flash. Whether it is the simple showcasing of something new or interesting, or a complex GUI, flash is your Way to go.

With HTML5 comes a competitor: the HTML5-Canvas-Element.

The canvas is a container in which you can draw nearly anything with the offered JavaScript functions of the 2d-context. If you are looking for a built-in way of creating animations, canvas is the way to go. What this can look like is this :

Demo from my project
Demo from my project

In the following article I will try to show a possible use of canvas. Furthermore I will make use of JSON and AJAX while controlling the output with Uniface.

Implementation

The first part is about the implementation and what you need to do in order to start drawing. You need to add this to a HTML document.

HTML Implementation SOURCE CODE
Sorry- ... please log-in or register to get this!

This little source defines a canvas element within the HTML. Further we need a bit JavaScript to control that thing.
JavaScript SOURCE CODE
Sorry- ... please log-in or register to get this!

Implementing a canvas into your HTML code is not very difficult as you can see.

Getting Data to draw

In this part I will retrieve data from Uniface via AJAX. The data will be formed as JSON and will represent coordinates within a coordinate plane. With these coordinates we will be able to draw a graph inside the canvas to show some trend information. The data is hard-coded for shortening purposes, it can easily be replaced by data from other origin.

Uniface operation SOURCE CODE
Sorry- ... please log-in or register to get this!

Adjusted en_ulist2json SOURCE CODE
Sorry- ... please log-in or register to get this!


Drawing the data

Now that I have programmed the Uniface-part I can call the function via AJAX. I am using GHANs AJAX object for this (e.g. GHANIFIED! v0.3). It is quite neat for any call-ups you might come up with.
First I'm making an AJAX request and the result of that request is sent to the JavaScript function drawGraph. Everything inside drawGraph is basic drawing with the 2d-context.

Getting and drawing Coordinates SOURCE CODE
Sorry- ... please log-in or register to get this!

Sorry- ... please log-in or register to get this!

You can try this!

On the right hand side of the text, you can see a Box with two buttons (GET A and GET B) within. Pressing those will produce a graphic as coded in the above. Please note, that all this will only work in UP-TO-DATE Browsers who are supporting the canvas element (FireFox, Safari, Chrome, IE9).

This concludes my first Contribution. Yay!

Maybe I peaked your interest and you want to start using the canvas yourself. With the provided tutorial you should be able to make your own basic media. For further help and documentation on all the functions of the 2D drawing context of the canvas element go visit http://www.w3.org/TR/2dcontext/.


If there is enough feedback, I might go further into detail and contribute about how to make a working GUI with the canvas element and its features.

Thanks for reading and goodbye.

M11

Comments

on 2012-04-19 11:32:37 hollerith wrote:

eval? url pls i wnat to pwn ur base :D

1211 view(s) / 2010-12-16 18:23:10 / LAST UPDATED: 2011-01-11 14:50:16