• main

• about

• music

• photos

• projects

• • artifitial intelligence
    • K-Fold crossvalind
    • SOMVis
  • communications
    • Simple client/server chat
    • J2ME Booking service
  • demoscene
    • productions
    • KSynth realtime softsynth
    • KTexGen
    • 3D Studio MAX tools
  • robotics
    • LEGO Line follower
    • LEGO Light follower
    • LEGO fighter
  • design
    • calendar09
  • misc
    • games
    • stopwatch
    • AVR calculator

HTML5 DICOM Viewer. Layouts

This is a new work in progress version of the DICOM Viewer I'm working on. I've rewritten a huge part of the code to be able to manage custom layouts. With the new architecture it's very easy to define new layout (I've defined already 13).

Everytime I create UI for a program I really care to make it easy to use, and one obvious step It was to create shortcuts for all the actions. This is something quite simple to implement but I find everyday in my job many application without them, making the UI slower to use by the user.

The new layout implementation let you apply actions to: the current selected layer (by default), all the layers (pressing shift), or the custom selected layers (pressing ctrl+click).

I've also implemented basic layout text overlay which I hope to improve on next WIP

HTML5 Canvas autoresize

While developing the HTML5 DICOM Viewer I got some problems while designing the UI in HTML.

One of those problems was how to manage the canvas resize according to the browser size.

At least for me it wasn't so much trivial :) so I decided to post it so it could be useful for someone else.

Basically what you have to do is to bind the onresize event to your body, once you catch the event you just need to resize the canvas using window.innerWidth and window.innerHeight.

I just needed to add little functionality to preserve aspect ratio and manage the toolbar div.

If you want to try it just click here or check the following video to see how it works:

HTML5 DICOM Viewer. Improvements

I've implemented few rendering techniques for the DICOM Viewer. First of all I tried to implement a simple MPR reconstruction to be able to see the three planes from a CT: axial, sagittal and coronal.

Here's a little video showing this feature:

After that I tried to implement Z-projection rendering like MIP, MinIP, Average, etc. but I found that Canvas it's just so slow for this purpose. So I decided to reimplement all the rendering engine using WebGL.

So I did it and I found a great speed improvement even in my old laptop.

Apart from the Z-Projection technique I implemented an enhance filter in order to sharp the image and get a better result:

And here you could see this last implementation in action (Please note that the bad quality is due to the codec compression while uploading to youtube):