Toni codes .NET

Category Archives: Web

Web

CSS Grid Layout – layout for everyone

08/04/2013 – 11:01 pm

One of the best things about XAML is the ability to create both simple and complex layouts with a handful of container controls. Although clearly inspired by HTML, XAML introduces a bunch of controls that serve mostly for managing layouts rather than displaying some content. If you wanted simple layout and if you wanted to avoid being labeled as “the one who used tables”, you would have to resort to some pretty nasty stuff. But no matter what you did to your floating divs, you could not create a simple 2×2 grid layout.

So if you want the power of tables, but wanted to write correct HTML+CSS, you could use Bootstrap or similar frameworks. You get fluid grid design and you can spend time designing other things instead of battling with HTML and writing your own JS code. Finally, all was well…or at least better. We still lacked “native” solution for designing grid layouts. Browsers are capable of doing that, if only there was a way…

And that way is CSS Grid Layout. The strange thing is that I am testing it in Internet Explorer 10. The same browser made popular by the definition “does it work in IE? No? It is HTML5 feature”. You still need to add -ms- prefix though.

After small fiddling with jsbin, here is a result (remember, only in IE10):
JS Bin

You can read more on Hugo’s blog post: Future of CSS layout: CSS Grid.

Tags , | Permalink | Comment (0)
Web

Combining three.js and KineticJS [updated]

01/04/2013 – 9:27 am

I wrote already how to combine three.js and Kinetic.js in the previous blog post. Since then, both libraries have evolved and the same code won’t work anymore so here is the update.

First, KineticJS is now initialized slightly differently. Instead of passing arguments, you pass a config object. The following code will construct a new KineticJS.Stage object:

stage = new Kinetic.Stage({
    container: "container",
    width: 700,
    height: 700
});

Three.js requires an HTML5 canvas element, not KineticJS wrapper around it. The correct way to initialize it is:

renderer = new THREE.CanvasRenderer({canvas: layer3D.getCanvas().getElement()});

Note: if you want to use WebGLRenderer instead of CanvasRenderer, the above code will not work. I will write a follow up post for that scenario soon.

You can see my new sample here.
Here is a jsfiddle version http://jsfiddle.net/hXw6D/3/.

Tags , , | Permalink | Comment (0)
Web

Combining three.js and KineticJS

10/07/2012 – 9:58 pm

This post may be invalid for you if you are using the latest versions of both libraries. Please read the updated blog post for more information: Combining three.js and KineticJS [updated]

If you are a web developer and you are seeking for an easier way to manage canvas rendering and interaction, I strongly recommend to you an excellent javascript library: KineticJS. With it you can create variety of shapes which can then be dragged around, receive mouse or touch events; in general, it gives you an object oriented access to the canvas elements. It is also very fast.

Since it is so similar to the classic desktop GUI development, you can use it to create GUI for your own apps that heavily rely on canvas rendering. I have already mentioned three.js (in previous post), an excellent library for rendering 3d graphics in your browser.

Let’s say that you want to render 3d scene and you wish to manipulate it in some way. You could design your interface using classic HTML controls, but if you are in full screen mode, it might be preferable to render them in custom way. It is only natural that you would want to combine these two libraries: one gives you 3d rendering for your visualization, the other gives you powerful 2d rendering. read more »

Tags , , | Permalink | Comments (6)
Web

Using an existing canvas element for three.js

10/07/2012 – 8:50 pm

I have started using three.js – an excellent library for 3D graphics. Check it out on github. There is a small example on that page that will get you started. However, the canvas renderer creates a new canvas element and you might want to render to an already existing element, which is necessary in some cases. To avoid that, you can pass an existing canvas element to the constructor. You can see read more »

Tags , | Permalink | Comment (0)
Development Web

HTML5 canvas full view

31/01/2012 – 12:08 am

I just wanted to share this small code sample for embedding HTML5 canvas fully inside the browser window. The simplest HTML looks like this:

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
        <canvas id="myCanvas" style="">
        </canvas>
    </body>
</html>

read more »

Tags , , | Permalink | Comment (0)