title: dicom viewer add tools
body: <p>I am doing one web application for my client. We have one issue. I want to display dicom image on client side. 
  Right now we have used <a href="https://github.com/ivmartel/dwv" rel="nofollow noreferrer">https://github.com/ivmartel/dwv</a>. 
  I hv tried </p>
  
  <p>html file before Adding css and toolbar</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;script src="http://code.jquery.com/jquery-2.1.0.min.js"&gt;&lt;/script&gt;
              &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/js/dwv-0.22.0.min.js"&gt;&lt;/script&gt;
              &lt;style type="text/css" &gt;
                  body { background: #252525; color: #fff; }
                  button {
                      margin: 5px; padding: 10px 10px;
                      border: 0 none; border-radius: 4px;
                      font-size: 14px; font-weight: 600;
                      color: #fff; background-color: #444; }
                  button:hover { background-color: #555; }
                  button:disabled { background-color: #08b; }
                  .toolbar { font: 14px arial, sans-serif; margin-bottom: 5px; text-align: center; }
                  .wl-button, .reset-button { margin-right: 5px; }
                  .layerContainer { margin: auto; text-align: center; }
                  .imageLayer { left: 0px; }      
  
  
  
  
              &lt;/style&gt;
  
              &lt;script type="text/javascript"&gt;
                  window.onload = function() {
                      var imgUrl = document.getElementById("imageHidden").src;
                      dwv.gui.getElement = dwv.gui.base.getElement;
                      dwv.gui.displayProgress = function(percent) {
                      };
  
                      // create the dwv app
                      var app = new dwv.App();
                      // initialise with the id of the container div
                      app.init({
                          "containerDivId": "dwv",
                          "tools": ["WindowLevel"], // or try "ZoomAndPan"
                      });
                      // load dicom data
                      app.loadURLs([imgUrl]);
                      var range = document.getElementById("sliceRange");
                      range.min = 0;
                      app.addEventListener("load-end", function() {
                          range.max = app.getImage().getGeometry().getSize().getNumberOfSlices() - 1;
                      });
                      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);
                      }
  
                  };
                  $(document).ready(function() {
                      // base function to get elements
  
                  });
              &lt;/script&gt;
  
          &lt;/head&gt;
          &lt;body&gt;
   &lt;img id="imageHidden" src="&lt;?php echo $imageUrl; ?&gt;" hidden="true"&gt;
              &lt;div id="dwv"&gt;
  
                  &lt;!-- Layer Container --&gt;
                  &lt;div class="layerContainer"&gt;
                      &lt;canvas class="imageLayer"&gt;Only for HTML5 compatible browsers...&lt;/canvas&gt;
                  &lt;/div&gt;&lt;!-- /layerContainer --&gt;
  
  
              &lt;/div&gt;&lt;!-- /dwv --&gt;
              &lt;input type="range" id="sliceRange" value="0"&gt;
          &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>This above code displays image only. When i add css and toolbar js files,it shows nothing 
  html file after adding toolbar files </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
      &lt;head&gt;
          &lt;title&gt;DICOM Web Viewer&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="description" content="DICOM Web Viewer (DWV) static version"&gt;
          &lt;meta name="keywords" content="DICOM,HTML5,JavaScript,medical,imaging,DWV"&gt;
          &lt;link type="text/css" rel="stylesheet" href="&lt;?php echo base_url(); ?&gt;assets/dicom/css/style.css"&gt;
           &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/viewers/static/appgui.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/viewers/static/applauncher.js"&gt;&lt;/script&gt;
          &lt;style type="text/css" &gt;
              body { background-color: #222; color: white; font-size: 80%; }
              #pageHeader h1 { display: inline-block; margin: 0; color: #fff; }
              #pageHeader a { color: #ddf; }
              #pageHeader .toolbar { display: inline-block; float: right; }
              .toolList ul { padding: 0; }
              .toolList li { list-style-type: none; }
              #pageMain { position: absolute; height: 92%; width: 99%; bottom: 5px; left: 5px; background-color: #333; }
              .infotl { text-shadow: 0 1px 0 #000; }
              .infotc { text-shadow: 0 1px 0 #000; }
              .infotr { text-shadow: 0 1px 0 #000; }
              .infocl { text-shadow: 0 1px 0 #000; }
              .infocr { text-shadow: 0 1px 0 #000; }
              .infobl { text-shadow: 0 1px 0 #000; }
              .infobc { text-shadow: 0 1px 0 #000; }
              .infobr { text-shadow: 0 1px 0 #000; }
              .dropBox { margin: 20px; }
              .ui-icon { zoom: 125%; }
              .tagsTable tr:nth-child(even) { background-color: #333; }
              .drawList tr:nth-child(even) { background-color: #333; }
              button, input, li, table { margin-top: 0.2em; }
              li button, li input { margin: 0; }
              .history_list { width: 100%; }
          &lt;/style&gt;
          &lt;link type="text/css" rel="stylesheet" href="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/jquery-ui/themes/ui-darkness/jquery-ui-1.12.1.min.css"&gt;
          &lt;style type="text/css" &gt;
              .ui-widget-content { background-color: #222; background-image: url();}
          &lt;/style&gt;
          &lt;!-- Third party (dwv) --&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/modernizr/modernizr.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/i18next/i18next.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/i18next/i18nextXHRBackend.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/i18next/i18nextBrowserLanguageDetector.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/konva/konva.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/magic-wand/magic-wand.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/jszip/jszip.min.js"&gt;&lt;/script&gt;
          &lt;!-- Third party (viewer) --&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/jquery/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/jquery-ui/jquery-ui-1.12.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/ext/flot/jquery.flot.min.js"&gt;&lt;/script&gt;
          &lt;!-- decoders --&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/decoders/pdfjs/jpx.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/decoders/pdfjs/util.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/decoders/pdfjs/arithmetic_decoder.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/decoders/pdfjs/jpg.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/dicom/decoders/rii-mango/lossless-min.js"&gt;&lt;/script&gt;
          &lt;!-- Local --&gt;
          &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/js/dwv-0.22.0.min.js"&gt;&lt;/script&gt;
          &lt;!-- Launch the app --&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
   &lt;img id="imageHidden" src="&lt;?php echo $imageUrl; ?&gt;" hidden="true"&gt;
          &lt;!-- DWV --&gt;
          &lt;div id="dwv"&gt;
  
              &lt;div id="pageHeader"&gt;
  
                  &lt;!-- Title --&gt;
                  &lt;h1&gt;DWV &lt;span class="dwv-version"&gt;&lt;/span&gt;&lt;/h1&gt;
  
                  &lt;!-- Toolbar --&gt;
                  &lt;div class="toolbar"&gt;&lt;/div&gt;
  
              &lt;/div&gt;&lt;!-- /pageHeader --&gt;
  
              &lt;div id="pageMain"&gt;
  
                  &lt;!-- Open file --&gt;
                  &lt;div class="openData" title="File"&gt;
                      &lt;div class="loaderlist"&gt;&lt;/div&gt;
                      &lt;div id="progressbar"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Toolbox --&gt;
                  &lt;div class="toolList" title="Toolbox"&gt;&lt;/div&gt;
  
                  &lt;!-- History --&gt;
                  &lt;div class="history" title="History"&gt;&lt;/div&gt;
  
                  &lt;!-- Tags --&gt;
                  &lt;div class="tags" title="Tags"&gt;&lt;/div&gt;
  
                  &lt;!-- DrawList --&gt;
                  &lt;div class="drawList" title="Draw list"&gt;&lt;/div&gt;
  
                  &lt;!-- Help --&gt;
                  &lt;div class="help" title="Help"&gt;&lt;/div&gt;
  
                  &lt;!-- Layer Container --&gt;
                  &lt;div class="layerDialog" title="Image" id="dwv"&gt;
                      &lt;div class="dropBox"&gt;&lt;/div&gt;
                      &lt;div class="layerContainer"&gt;
                          &lt;canvas class="imageLayer"&gt;Only for HTML5 compatible browsers...&lt;/canvas&gt;
                          &lt;div class="drawDiv"&gt;&lt;/div&gt;
                          &lt;div class="infoLayer"&gt;
                              &lt;div class="infotl"&gt;&lt;/div&gt;
                              &lt;div class="infotc"&gt;&lt;/div&gt;
                              &lt;div class="infotr"&gt;&lt;/div&gt;
                              &lt;div class="infocl"&gt;&lt;/div&gt;
                              &lt;div class="infocr"&gt;&lt;/div&gt;
                              &lt;div class="infobl"&gt;&lt;/div&gt;
                              &lt;div class="infobc"&gt;&lt;/div&gt;
                              &lt;div class="infobr" style="bottom: 64px;"&gt;&lt;/div&gt;
                              &lt;div class="plot"&gt;&lt;/div&gt;
                          &lt;/div&gt;&lt;!-- /infoLayer --&gt;
                      &lt;/div&gt;&lt;!-- /layerContainer --&gt;
                  &lt;/div&gt;&lt;!-- /layerDialog --&gt;
  
              &lt;/div&gt;&lt;!-- /pageMain --&gt;
  
          &lt;/div&gt;&lt;!-- /dwv --&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>whats wrong in code? any Suggesstions?</p>