Conquest and html5+js DICOM viewer (DWV), dwv025 below

/**
* @class App
* Main application.
*/
dwv.App = function(mobile)
{
    // Local object
    var self = this;
    // Image
    var image = null;
    // Original image
    var originalImage = null;
    // Image data array
    var imageData = null;

    // Image layer
    var imageLayer = null;
    // Draw layer
    var drawLayer = null;
    // Temporary layer
    var tempLayer = null;
    // Information layer
    var infoLayer = null;

    // Tool box
    var toolBox = new dwv.tool.ToolBox(this);
    // UndoStack
    var undoStack = new dwv.tool.UndoStack(this);

    // Public Methods
    // --------------

    // Get the image
    this.getImage = function() { return image; };

    // Set the image
    this.setImage = function(img) { image = img; };    
    this.restoreOriginalImage = function() { image = originalImage; }; 

    // Get the image data array
    this.getImageData = function() { return imageData; };


    // Get the tool box
    this.getToolBox = function() { return toolBox; };


    // Get the image layer
    this.getImageLayer = function() { return imageLayer; };
    // Get the draw layer
    this.getDrawLayer = function() { return drawLayer; };
    // Get the temporary layer
    this.getTempLayer = function() { return tempLayer; };
    // Get the information layer
    this.getInfoLayer = function() { return infoLayer; };


    // Get the image details
    this.getUndoStack = function() { return undoStack; };


    /**
     * Initialise the HTML for the application.
     */
    this.init = function()
    {
        // bind open files with method
        document.getElementById('imagefiles').addEventListener('change', this.onChangeFiles, false);
        document.getElementById('imageurl').addEventListener('change', this.onChangeURL, false);
    };

    /**
     * Handle key event.
     * - CRTL-Z: undo
     * - CRTL-Y: redo
     * Default behavior. Usually used in tools. 
     * @param event
     */
    this.handleKeyDown = function(event)
    {
        if( event.keyCode === 90 && event.ctrlKey ) // CRTL-Z
        {
            self.getUndoStack().undo();
        }
        else if( event.keyCode === 89 && event.ctrlKey ) // CRTL-Y
        {
            self.getUndoStack().redo();
        }
    };

    /**
     * @public
     */
    this.onChangeFiles = function(evt)
    {
        self.loadFiles(evt.target.files);
    };


    /**
     * @public
     */
    this.loadFiles = function(files) 
    {
        //TODO: for (var i = 0; i < files.length; ++i) {
        if( files[0].type.match("image.*") )
        {
            var reader = new FileReader();
            reader.onload = function(event){
                var image = new Image();
                image.src = event.target.result;
                image.onload = function(e){
                    // parse DICOM
                    var data = dwv.image.getDataFromImage(image, files[0]);
                    // prepare display
                    postLoadInit(data);
                };
            };
            reader.onprogress = dwv.gui.updateProgress;
            reader.onerror = function(){
                alert("An error occurred while reading the image file.");
            };
            reader.readAsDataURL(files[0]);
        }
        else
        {
            var reader = new FileReader();
    		reader.onload = function(event){
    			// parse DICOM
    			var data = dwv.image.getDataFromDicomBuffer(event.target.result);
    			// prepare display
    			postLoadInit(data);
    		};
    		reader.onprogress = dwv.gui.updateProgress;
    		reader.onerror = function(){
                alert("An error occurred while reading the DICOM file.");
            };
    		reader.readAsArrayBuffer(files[0]);
        }
    };

    /**
     * @public
     */
    this.onChangeURL = function(evt)
    {
        self.loadURL(evt.target.value);
    };


    /**
     * @public
     */
    this.loadURL = function(url) 
    {
        var request = new XMLHttpRequest();
        // TODO Verify URL...
        request.open('GET', url, true);
        request.responseType = "arraybuffer"; 
        request.onload = function(ev) {
            // parse buffer
            try {
                var view = new DataView(request.response);
                var isJpeg = view.getUint32(0) === 0xffd8ffe0;
                var isPng = view.getUint32(0) === 0x89504e47;
		var isGif = view.getUint32(0) === 0x47494638;


                if( isJpeg || isPng || isGif ) {
                    // image data
                    var image = new Image();


                    var bytes = new Uint8Array(request.response);
                    var binary = '';
                    for (var i = 0; i < bytes.byteLength; ++i) {
                        binary += String.fromCharCode(bytes[i]);
                    }


                    var imgStr = "unknown";
		    if (isJpeg)
		    {
			imgStr = "jpeg";
    		    }
		    else if (isPng)
		    {
			imgStr = "png";
		    }
	            else if (isGif)
	            {
			imgStr = "gif";
		    }


                    image.src = "data:image/" + imgStr + ";base64," + window.btoa(binary); 
                    image.onload = function(e){
                        // parse image data
                        var data = dwv.image.getDataFromImage(image, 0);
                        // prepare display
                        postLoadInit(data);
                    };
                }
                else {
                    // parse DICOM
                    var data = dwv.image.getDataFromDicomBuffer(request.response);
                    // prepare display
                    postLoadInit(data);
                }
            }
            catch(error) {
                if( error.name && error.message) {
                    alert(error.name+": "+error.message+".");
                }
                else {
                    alert("Error: "+error+".");
                }
                if( error.stack ) {
                    console.log(error.stack);
                }
                return;
            }
        };
        request.onerror = function(){
            alert("An error occurred while retrieving the file.");
        };
        request.onprogress = dwv.gui.updateProgress;
        request.send(null);
    };

    /**
     * Generate the image data and draw it.
     */
    this.generateAndDrawImage = function()
    {         
        // generate image data from DICOM
        self.getImage().generateImageData(imageData);         
        // set the image data of the layer
        self.getImageLayer().setImageData(imageData);
        // draw the image
        self.getImageLayer().draw();
    };

    /**
     * To be called once the image is loaded.
     * Linked with the window.onresize method.
     */
    this.alignLayers = function()
    {
        if( imageLayer ) {
            drawLayer.align(imageLayer);
            tempLayer.align(imageLayer);
            infoLayer.align(imageLayer);

            // align plot
            var plotDiv = document.getElementById("plot");
            plotDiv.style.top = app.getImageLayer().getCanvas().offsetTop
                + app.getImageLayer().getCanvas().height
                - plotDiv.offsetHeight
                - 15;
            plotDiv.style.left = app.getImageLayer().getCanvas().offsetLeft
                + app.getImageLayer().getCanvas().width
                - plotDiv.offsetWidth;
        }
    };

    /**
     * To be called once the image is loaded.
     */
    this.setLayersZoom = function(zoomX,zoomY,cx,cy)
    {
        if( imageLayer ) imageLayer.zoom(zoomX,zoomY,cx,cy);
        if( drawLayer ) drawLayer.zoom(zoomX,zoomY,cx,cy);
    };

    // Private Methods
    // ---------------


    /**
     * @private
     * The general-purpose event handler. This function just determines the mouse 
     * position relative to the canvas element.
     */
    function eventHandler(event)
    {
        // flag not to get confused between touch and mouse
        var handled = false;
        // Store the event position relative to the image canvas
        // in an extra member of the event:
        // event._x and event._y.
        if( mobile )
        {
            if( event.type === "touchstart"
                || event.type === "touchend"
                || event.type === "touchmove")
            {
                event.preventDefault();
                // If there's one or two fingers inside this element
                if (event.targetTouches.length === 1
                        || event.targetTouches.length === 2) {
                  var touch = event.targetTouches[0];
                  // store
                  event._x = touch.pageX - parseInt(app.getImageLayer().getOffset().left, 10);
                  event._y = touch.pageY - parseInt(app.getImageLayer().getOffset().top, 10);
                  // second finger
                  if (event.targetTouches.length === 2) {
                      touch = event.targetTouches[1];
                      // store
                      event._x1 = touch.pageX - parseInt(app.getImageLayer().getOffset().left, 10);
                      event._y1 = touch.pageY - parseInt(app.getImageLayer().getOffset().top, 10);
                  }
                  // set handle event flag
                  handled = true;
                }
            }
        }
        else
        {
            if( event.type === "mousemove"
                || event.type === "mousedown"
                || event.type === "mouseup"
                || event.type === "mousewheel"
                || event.type === "dblclick" 
                || event.type === "DOMMouseScroll" )
            {
                // layerX is for firefox
                event._x = event.offsetX === undefined ? event.layerX : event.offsetX;
                event._y = event.offsetY === undefined ? event.layerY : event.offsetY;
                // set handle event flag
                handled = true;
            }
        }

        // Call the event handler of the tool.
        if( handled )
        {
            var func = self.getToolBox().getSelectedTool()[event.type];
            if( func )
            {
                func(event);
            }
        }
    }

    /**
     * @private
     * To be called once the image is loaded.
     */
    function createLayers(width,height)
    {
        // image layer
        imageLayer = new dwv.html.Layer("imageLayer");
        imageLayer.initialise(width, height);
        imageLayer.fillContext();
        imageLayer.display(true);
        // draw layer
        drawLayer = new dwv.html.Layer("drawLayer");
        drawLayer.initialise(width, height);
        drawLayer.display(true);
        // temp layer
        tempLayer = new dwv.html.Layer("tempLayer");
        tempLayer.initialise(width, height);
        tempLayer.display(true);
        // info layer
        infoLayer = new dwv.html.Layer("infoLayer");
        infoLayer.initialise(width, height);
        infoLayer.display(true);
    }

    /**
     * @private
     * Create the DICOM tags table.
     * @param dataInfo The data information.
     * To be called once the DICOM has been parsed.
     */
    function createTagsTable(dataInfo)
    {
        // tag list table (without the pixel data)
        if(dataInfo.PixelData) dataInfo.PixelData.value = "...";
        // HTML node
        var node = document.getElementById("tags");
        // remove possible previous
        while (node.hasChildNodes()) { 
            node.removeChild(node.firstChild);
        }
        // tags HTML table
        var table = dwv.html.toTable(dataInfo);
        table.className = "tagList";
        // search form
        node.appendChild(dwv.html.getHtmlSearchForm(table));
        // tags table
        node.appendChild(table);
    }

    /**
     * @private
     * To be called once the DICOM has been parsed.
     */
    function postLoadInit(data)
    {
    	// create the DICOM tags table
    	createTagsTable(data.info);

    	// store image
        originalImage = data.image;
        image = originalImage;


        // layout
        var zoomX= 1;
        var zoomY= 1;
        var width = image.getSize().getNumberOfColumns() * zoomX;
        var height = image.getSize().getNumberOfRows() * zoomY;
        createLayers(width, height);
        self.alignLayers();
        self.setLayersZoom(zoomX, zoomY, 0, 0);


        // get the image data from the image layer
        imageData = self.getImageLayer().getContext().getImageData( 
            0, 0, 
            image.getSize().getNumberOfColumns(), 
            image.getSize().getNumberOfRows());


        // initialise the toolbox
        // note: the window/level tool is responsible for doing the first display.
        toolBox.enable(true);
        // add the HTML for the history 
        dwv.gui.appendUndoHtml();


        // Attach event listeners.
        tempLayer.getCanvas().addEventListener('mousedown', eventHandler, false);
        tempLayer.getCanvas().addEventListener('mousemove', eventHandler, false);
        tempLayer.getCanvas().addEventListener('mouseup', eventHandler, false);
        tempLayer.getCanvas().addEventListener('mousewheel', eventHandler, false);
        tempLayer.getCanvas().addEventListener('touchstart', eventHandler, false);
        tempLayer.getCanvas().addEventListener('touchmove', eventHandler, false);
        tempLayer.getCanvas().addEventListener('touchend', eventHandler, false);
        tempLayer.getCanvas().addEventListener('DOMMouseScroll', eventHandler, false);
        tempLayer.getCanvas().addEventListener('dblclick', eventHandler, false);


        // Keydown listener
        window.addEventListener('keydown', eventHandler, true);
    }

};

--
-- DICOM Web Viewer (DWV) lua script for integration in a Conquest PACS server. 
--
-- Usage
-- In the dicom.ini of your web server, create the dwv viewer:
-- >> [dwv]
-- >> source = viewers\dwv.lua
-- And set it as the default viewer:
-- >> [webdefaults]
-- >> ...
-- >> viewer = dwv
-- This script relies on the 'kFactorFile', 'ACRNemaMap' and 'Dictionary' 
-- variables being set correctly.
-- Then copy the 'css', 'src' and 'ext' folders of DWV in a 'dwv' folder
-- in the web folder of your web server.


-- Get ids


local patientid = string.gsub(series2, ':.*$', '')
local seriesuid = string.gsub(series2, '^.*:', '')


-- Functions declaration


function getstudyuid()
  local a, b, s
  s = servercommand('get_param:MyACRNema')
  b = newdicomobject()
  b.PatientID = patientid
  b.SeriesInstanceUID = seriesuid
  b.StudyInstanceUID = ''
  a = dicomquery(s, 'SERIES', b)
  return a[0].StudyInstanceUID
end


function queryimages()
  local images, imaget, b, s
  s = servercommand('get_param:MyACRNema')
  b = newdicomobject()
  b.PatientID = patientid
  b.SeriesInstanceUID = seriesuid
  b.SOPInstanceUID = ''
  images = dicomquery(s, 'IMAGE', b)


  imaget={}
  for k=0,#images-1 do
    imaget[k+1]={}
    imaget[k+1].SOPInstanceUID = images[k].SOPInstanceUID
  end
  table.sort(imaget, function(a,b) return a.SOPInstanceUID < b.SOPInstanceUID end)


  return imaget
end


-- Main


local studyuid = getstudyuid()
local images = queryimages()


local url = webscriptadress
url = url .. '?requestType=WADO&contentType=application/dicom'
url = url .. '&seriesUID=' .. seriesuid
url = url .. '&studyUID=' .. studyuid
url = url .. '&objectUID=' .. images[1].SOPInstanceUID

-- Generate html


HTML('Content-type: text/html\n\n')
--print([[<!DOCTYPE html>]])
print([[<html>]])


print([[<head>]])


print([[<title>DICOM Web Viewer</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="/dwv/css/style.css">
<style>
body { font-size: 80%; }
#toolbox li:first-child { list-style-type: none; padding-bottom: 10px; margin-left: -20px; }
</style>
<link rel="stylesheet" href="/dwv/ext/jquery/ui/1.10.1/themes/ui-darkness/jquery-ui.min.css">]])


print([[<!-- Third party -->  
<script type="text/javascript" src="/dwv/ext/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/dwv/ext/jquery/ui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="/dwv/ext/flot/jquery.flot.min.js"></script>]])


print([[<!-- Local -->
<script type="text/javascript" src="/dwv/src/dwv.js"></script>
<script type="text/javascript" src="/dwv/src/application.js"></script>
<script type="text/javascript" src="/dwv/src/dicom/dicomParser.js"></script>
<script type="text/javascript" src="/dwv/src/dicom/dictionary.js"></script>
<script type="text/javascript" src="/dwv/src/html/gui.js"></script>
<script type="text/javascript" src="/dwv/src/html/gui_ui.js"></script>
<script type="text/javascript" src="/dwv/src/html/html.js"></script>
<script type="text/javascript" src="/dwv/src/html/style.js"></script>
<script type="text/javascript" src="/dwv/src/html/layer.js"></script>
<script type="text/javascript" src="/dwv/src/image/filter.js"></script>
<script type="text/javascript" src="/dwv/src/image/image.js"></script>
<script type="text/javascript" src="/dwv/src/image/luts.js"></script>
<script type="text/javascript" src="/dwv/src/image/reader.js"></script>
<script type="text/javascript" src="/dwv/src/math/shapes.js"></script>
<script type="text/javascript" src="/dwv/src/math/bucketQueue.js"></script>
<script type="text/javascript" src="/dwv/src/math/scissors.js"></script>
<script type="text/javascript" src="/dwv/src/utils/string.js"></script>]])


print([[<!-- Tools: beware order is important... -->
<script type="text/javascript" src="/dwv/src/tools/toolbox.js"></script>
<script type="text/javascript" src="/dwv/src/tools/windowLevel.js"></script>
<script type="text/javascript" src="/dwv/src/tools/draw.js"></script>
<script type="text/javascript" src="/dwv/src/tools/line.js"></script>
<script type="text/javascript" src="/dwv/src/tools/rectangle.js"></script>
<script type="text/javascript" src="/dwv/src/tools/roi.js"></script>
<script type="text/javascript" src="/dwv/src/tools/circle.js"></script>
<script type="text/javascript" src="/dwv/src/tools/livewire.js"></script>
<script type="text/javascript" src="/dwv/src/tools/zoom.js"></script>
<script type="text/javascript" src="/dwv/src/tools/filter.js"></script>
<script type="text/javascript" src="/dwv/src/tools/undo.js"></script>]])


print([[<script type="text/javascript">


function toggle(dialogName)
{
    if( $(dialogName).dialog('isOpen') )
    {
        $(dialogName).dialog('close');
    }
    else
    {
        $(dialogName).dialog('open');
    }
}


function load()
{
  app.loadURL(']]..webscriptadress..[[?requestType=WADO&contentType=application/dicom'+ 
    '&studyUID=]]..studyuid..[[' +
    '&seriesUID=]]..seriesuid..[[' +
    '&objectUID=' + document.forms[0].slice.value);
}


function nextslice()
{ 
  if (document.forms[0].slice.selectedIndex == document.forms[0].slice.length-1)
  {
    document.forms[0].slice.selectedIndex = 0; 
  }
  else 
  {
    document.forms[0].slice.selectedIndex = document.forms[0].slice.selectedIndex + 1;
  }
  load();
}


function previousslice()
{
  if (document.forms[0].slice.selectedIndex == 0) 
  {
    document.forms[0].slice.selectedIndex = document.forms[0].slice.length-1;
  }
  else 
  {
    document.forms[0].slice.selectedIndex = document.forms[0].slice.selectedIndex - 1; 
  }
  load();
}


]])


print([[// main application
var app = new dwv.App();
// jquery
$(document).ready(function(){
    // create buttons and dialogs
    $("button").button();
    $("#openData").dialog({ position: 
        {my: "left top", at: "left top", of: "#pageMain"} });
    $("#toolbox").dialog({ position: 
        {my: "left top+200", at: "left top", of: "#pageMain"} });
    $("#history").dialog({ position: 
        {my: "left top+370", at: "left top", of: "#pageMain"},
        autoOpen: false });
    $("#tags").dialog({ position: 
        {my: "right top", at: "right top", of: "#pageMain"},
        autoOpen: false, width: 500, height: 590 });

    $("#layerContainer").dialog({ position: 
        {my: "center top", at: "center top", of: "#pageMain"},
        width: 570, height: 590 });


    // initialise the application
    app.init();
    // possible load from URL
    app.loadURL("]].. url ..[[");
});
</script>]])


print([[</head>]])
print([[<body style="cursor: auto;">]])
print([[<div id="pageHeader>"]])
print([[<!-- Title -->
<h1>DICOM Web Viewer (<a href="https://github.com/ivmartel/dwv">dwv</a> v0.3b)</h1>
<!-- Buttons -->
<button onclick="toggle('#openData')">File</button>
<button onclick="toggle('#toolbox')">Toolbox</button>
<button onclick="toggle('#history')">History</button>
<button onclick="toggle('#tags')">Tags</button>
<button onclick="toggle('#layerContainer')">Image</button>
]])
print([[</div>]])
print([[
<div id="pageMain">
<!-- Open file -->
<!-- Toolbox -->
<!-- History -->
<!-- Tags -->
<!-- Layer Container -->
</div>]])
print([[<!-- pageMain -->]])
print([[<!-- Open file -->
<div id="openData" title="File">
 <p>
  <form>
   Path: <input type="file" id="imagefiles" multiple />



   URL: <input type="url" id="imageurl" />



   Slice: <input type=button value='<' onclick=previousslice() />
   <select name=slice onchange=load()>]])


   for i=1, #images do
     print('  <option value='..images[i].SOPInstanceUID..'>'..i..'</option>')
   end


   print([[</select>
   <input type=button value='>' onclick=nextslice() />
  </form>]])
 print([[</p>
 <div id="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
  <div class="ui-progressbar-value ui-widget-header ui-corner-left ui-corner-right" style="display: block; width: 100%;"></div>
 </div>
</div>]])


print([[<!-- Toolbox -->
<div id="toolbox" title="Toolbox">
<ul id="toolList"></ul>
</div>


<!-- History -->
<div id="history" title="History"></div>


<!-- Tags -->
<div id="tags" title="Tags" style="display:none;"></div>]])


print([[<!-- Layer Container -->
<div id="layerContainer" title="Image">
<canvas id="imageLayer" width="512" height="512"></canvas>
<canvas id="drawLayer" width="512" height="512"></canvas>
<canvas id="infoLayer" width="512" height="512"></canvas>
<canvas id="tempLayer" width="512" height="512"></canvas>
<div id="plot" style="width:100px;height:70px"></div>
</div>
</div>]])
print([[</body>]])
print([[</html>]])