Let's rock the client

The next image shows how the cameras were displayed in the client browser. So annoying, the image of each camera after the previous, all the same size. Without possibility of any sort of customization. Really very annoying!

So, let's start with a little of rock and roll in this project. Let's use tiny drops of jQuery UI to move and resize the camera images the way we want.

For the times they are a-changin. In the next image we can see how the presentation is now. We can freely move and resize each camera image regardless of the other cameras sizes and positions. We may even overlap then.

The coolest thing is that we can do it all with very few new lines of code.

Some relevant parts of the Jade script:

doctype 5
html
  head
    ...
    link(rel='stylesheet', href='http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css')
    script(src='/javascripts/jquery.min.js')
    script(src='/javascripts/jquery-ui.custom.min.js')
    ...
    script
      $(function() {
        $(".draggable").draggable();
        $(".resizable").resizable({
          aspectRatio: 320 / 240
        });        
      });
  body
    #grid
      .linha
        #cam01.camera.draggable
          .image
            img#img01.resizable(src='#', width=320, height=240) 
          .info
        ...