Question

I have an input string like this:

{ (3200, 1080), (1280, 0) ; (1280, 1024), (0, 0) }

which is basically an input I get from my c# program which takes the coordinates of my screens.

The numbers in brackets are coordinates of the lower right and upper left point and define a rectangle. For example:

(1280, 1024), (0, 0) 

means that the first screen has dimensions 1280 x 1024 and starts in the upper left point (0,0). Next to it is the second screen which upper left point is at coordinate (1280, 0) and its lower right coordinate is at point (3200, 1080) – and they form a rectangle.

What I have to do is draw these screen in an web application – nothing fancy just two different colored rectangles would do. Now, I did a little research and saw that html5 canvas might be the way to go, but I want to hear what you think and maybe give me a push in the right direction. If you could give some jsfiddle example that would be appreciated!

Answer 1

You could just use DIVs with position: absolute, as detailed on this jsFiddle (jQuery used for the sake of simplicity, but the same can easily be accomplished without jQuery).

edit (I just added the code if for some reason your jsfiddle gets deleted!):

HTML:

<div id="screens">
    <div id="screen0" class="screen"></div>
    <div id="screen1" class="screen"></div>
</div>

CSS:

#screens { position: relative }
.screen {position: absolute }

#screen0 { background: blue; }
#screen1 { background: green; }

JS:

var originalScreens = [
    {
        position: [0,0],
        dimensions: [1280,1024]
    },
    {
        position: [1280,0],
        dimensions: [1090,1080]
    }
];
var scale = 0.1;
for(var i=0; i<originalScreens.length; i++) {
    $('#screen' + i).css('left', (originalScreens[i].position[0] * scale) + 'px');
    $('#screen' + i).css('top', (originalScreens[i].position[1] * scale) + 'px');

    $('#screen' + i).css('width', (originalScreens[i].dimensions[0] * scale) + 'px');
    $('#screen' + i).css('height', (originalScreens[i].dimensions[1] * scale) + 'px');
}