Start switch to cornerstone

anatomy/static/js/anatomy.js

@@ -35,57 +35,22 @@ $(document).ready(function () {
         });
     }
 
-    if($(".dwv-container").length) {
+    if($("#dicom-element").length) {
-        $(".dwv-container").append($('<!-- DWV --> <div id="dwv"> <!-- Toolbar --> <div class="toolbar"></div> <input type="range" id="sliceRange" value="0"><!-- Layer Container --> <div class="layerContainer"> <div class="dropBox"></div> <canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas> <div class="infoLayer"> <div class="infotl"></div> <div class="infotc"></div> <div class="infotr"></div> <div class="infocl"></div> <div class="infocr"></div> <div class="infobl"></div> <div class="infobc"></div> <div class="infobr" style="bottom: 64px;"></div></div></div><!-- /layerContainer -->  <!-- /dwv -->'));
+const element = document.getElementById('dicom-element');
+const imageId = element.dataset.url;
 
-        var app = new dwv.App();
+cornerstone.enable(element);
-        dwvapp = app;
+cornerstone.loadAndCacheImage(imageId).then(function(image) {
-        //DEBUG
+  cornerstone.displayImage(element, image);
-        var listenerWL = function (event) {
-            console.log("event: " + event.type);
-            console.log(event);
-            $(".infotc").text(event.wc);
-        };
-        app.addEventListener("wl-width-change", listenerWL);
-        //app.addEventListener("wl-center-change", listener);
-        app.init({
 
-            "containerDivId": "dwv",
+  // Enable our tools
-            "fitToWindow": true,
+  cornerstoneTools.mouseInput.enable(element);
-            "isMobile": true,
+  cornerstoneTools.mouseWheelInput.enable(element);
-            "gui": ["tool"],
+  cornerstoneTools.wwwc.activate(element, 1); // Left Click
-            "filters": ["Threshold", "Sharpen", "Sobel"],
+  cornerstoneTools.pan.activate(element, 2); // Middle Click
-            "tools": ["Scroll", "WindowLevel", "ZoomAndPan"], // or try "ZoomAndPan"
+  cornerstoneTools.zoom.activate(element, 4); // Right Click
-        });
+  cornerstoneTools.zoomWheel.activate(element); // Mouse Wheel
-
+});
-
-
-
-        var range = document.getElementById("sliceRange");
-        range.min = 0;
-        app.addEventListener("load-end", function () {
-            range.max = app.getImage().getGeometry().getSize().getNumberOfSlices() - 1;
-
-            if(range.max == 0) {
-                $(range).hide();
-            }
-        });
-        app.addEventListener("slice-change", function () {
-            range.value = app.getViewController().getCurrentPosition().k;
-        });
-        range.oninput = function () {
-            var pos = app.getViewController().getCurrentPosition();
-            pos.k = this.value;
-            app.getViewController().setCurrentPosition(pos);
-        }
-
-        try {
-            app.loadURLs([$(".dwv-container").data("url")]);
-        } catch(error) {
-            toastr.error(error.message);
-
-        }
-        dwv.gui.appendResetHtml(app);
     }
 
 });

anatomy/static/js/dwv/appgui.js

@@ -1,174 +0,0 @@
-/**
- * Application GUI.
- */
-
-// Default window level presets.
-dwv.tool.defaultpresets = {
-    "default (127+/-255)": {"center": 127, "width": 255},
-    //"default": {"center": 127, "width": 100},
-};
-dwv.tool.defaultpresets.SC = {
-    "default (127+/-255)": {"center": 127, "width": 255},
-};
-// Default window level presets for CT.
-dwv.tool.defaultpresets.CT = {
-    "mediastinum": {"center": 40, "width": 400},
-    "lung": {"center": -500, "width": 1500},
-    "bone": {"center": 500, "width": 2000},
-};
-
-// decode query
-dwv.utils.decodeQuery = dwv.utils.base.decodeQuery;
-
-// Window
-dwv.gui.getWindowSize = function() {
-d = dwv.gui.base.getWindowSize();
-//return {"width": d["width"], "height": d["height"]+100}
-h = $(window).height() - ($(document).height()-d["height"]) - 100;
-return {"width": d["width"], "height": h}
-}
-
-// Progress
-dwv.gui.displayProgress = function (/*percent*/) { /*does nothing*/ };
-// get element
-dwv.gui.getElement = dwv.gui.base.getElement;
-// refresh
-dwv.gui.refreshElement = dwv.gui.base.refreshElement;
-// Slider
-dwv.gui.Slider = null;
-// Tags table
-dwv.gui.DicomTags = null;
-
-// Toolbox
-dwv.gui.Toolbox = function (app)
-{
-    this.setup = function (/*list*/)
-    {
-        // does nothing
-    };
-    this.display = function (/*bool*/)
-    {
-        // does nothing
-    };
-    this.initialise = function (list)
-    {
-        // not wonderful: first one should be scroll is more than one slice
-        if ( list[0] === false ) {
-            var inputScroll = app.getElement("scroll-button");
-            inputScroll.style.display = "none";
-            var inputZoom = app.getElement("zoom-button");
-            inputZoom.checked = true;
-        }
-    };
-};
-
-// Window/level
-dwv.gui.WindowLevel = function (app)
-{
-    this.setup = function ()
-    {
-        var button = document.createElement("button");
-        button.className = "wl-button";
-        button.value = "WindowLevel";
-        button.onclick = app.onChangeTool;
-        button.appendChild(document.createTextNode("Window/Level"));
-
-        var node = app.getElement("toolbar");
-        node.appendChild(button);
-    };
-    this.display = function (bool)
-    {
-        var button = app.getElement("wl-button");
-        button.disabled = bool;
-    };
-    this.initialise = function ()
-    {
-        // clear previous
-        dwv.html.removeNode(app.getElement("presetSelect"));
-        dwv.html.removeNode(app.getElement("presetLabel"));
-
-        // create preset select
-        var select = dwv.html.createHtmlSelect("presetSelect",
-            app.getViewController().getWindowLevelPresetsNames(), "wl.presets", true);
-        select.className = "presetSelect";
-        select.onchange = app.onChangeWindowLevelPreset;
-        select.title = "Select w/l preset.";
-        select.setAttribute("data-inline","true");
-        var label = document.createElement("label");
-        label.className = "presetLabel";
-        label.setAttribute("for", "presetSelect");
-        label.appendChild(document.createTextNode("Select Preset"));
-
-        var node = app.getElement("toolbar");
-        node.appendChild(label);
-        node.appendChild(select);
-    };
-};
-
-// Zoom
-dwv.gui.ZoomAndPan = function (app)
-{
-    this.setup = function ()
-    {
-        var button = document.createElement("button");
-        button.className = "zoom-button";
-        button.value = "ZoomAndPan";
-        button.onclick = app.onChangeTool;
-        button.appendChild(document.createTextNode("ZoomAndPan"));
-
-        var node = app.getElement("toolbar");
-        node.appendChild(button);
-    };
-    this.display = function (bool)
-    {
-        var button = app.getElement("zoom-button");
-        button.disabled = bool;
-    };
-};
-
-// Scroll
-dwv.gui.Scroll = function (app)
-{
-    this.setup = function ()
-    {
-        var button = document.createElement("button");
-        button.className = "scroll-button";
-        button.value = "Scroll";
-        button.onclick = app.onChangeTool;
-        button.appendChild(document.createTextNode("Scroll"));
-
-        var node = app.getElement("toolbar");
-        node.appendChild(button);
-    };
-    this.display = function (bool)
-    {
-        var button = app.getElement("scroll-button");
-        button.disabled = bool;
-    };
-};
-
-dwv.gui.Slider = dwv.gui.base.Slider;
-// NEEDS UI 
-dwv.gui.Filter = dwv.gui.base.Filter;
-
-
-// Filter: threshold
-dwv.gui.Threshold = dwv.gui.base.Threshold;
-// Filter: sharpen
-dwv.gui.Sharpen = dwv.gui.base.Sharpen;
-// Filter: sobel
-dwv.gui.Sobel = dwv.gui.base.Sobel;
-
-
-//Reset
-dwv.gui.appendResetHtml = function (app)
-{
-    var button = document.createElement("button");
-    button.className = "reset-button";
-    button.value = "reset";
-    button.onclick = app.onDisplayReset;
-    button.appendChild(document.createTextNode("Reset"));
-
-    var node = app.getElement("toolbar");
-    node.appendChild(button);
-};

anatomy/templates/anatomy/base.html

@@ -5,10 +5,15 @@
     <title>Anatomy Quiz</title>
     <link rel="stylesheet" href="{% static 'css/anatomy.css' %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-    <script src="{% static 'js/anatomy.js' %}"></script>
+    <script src="{% static 'js/cornerstone/hammer.js' %}"></script>
-    <script type="text/javascript" src="{% static 'js/dwv/i18next.min.js' %}"></script>
+    <script src="{% static 'js/cornerstone/cornerstone.min.js' %}"></script>
-    <script type="text/javascript" src="{% static 'js/dwv/dwv.min.js' %}"></script>
+    <script src="{% static 'js/cornerstone/dicomParser.min.js' %}"></script>
-    <script type="text/javascript" src="{% static 'js/dwv/appgui.js' %}"></script>
+    <script src="{% static 'js/cornerstone/cornerstoneMath.min.js' %}"></script>
+    <script src="{% static 'js/cornerstone/cornerstoneTools.min.js' %}"></script>
+    <script src="{% static 'js/cornerstone/cornerstoneWebImageLoader.min.js' %}"></script>
+    <script src="{% static 'js/cornerstone/cornerstoneWADOImageLoader.js' %}"></script>
+    <script src="{% static 'js/cornerstone/cornerstone-base64-image-loader.umd.js' %}"></script>
+    <script src="{% static 'js/anatomy.js' %}" defer="defer"></script>
 
 </head>
 

anatomy/templates/anatomy/mark.html

@@ -38,6 +38,6 @@
         {{ form.as_p }}
     </span>
 </form>
-<div class=dwv-container data-url="/media/anatomy/{{ question.image}}" />
+<div id="dicom-element" data-url="/media/anatomy/{{ question.image}}" />
 </div>
 {% endblock %}