Issue
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 https://github.com/ivmartel/dwv. I hv tried
html file before Adding css and toolbar
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/dwv-0.22.0.min.js"></script>
<style type="text/css" >
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; }
</style>
<script type="text/javascript">
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
});
</script>
</head>
<body>
<img id="imageHidden" src="<?php echo $imageUrl; ?>" hidden="true">
<div id="dwv">
<!-- Layer Container -->
<div class="layerContainer">
<canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>
</div><!-- /layerContainer -->
</div><!-- /dwv -->
<input type="range" id="sliceRange" value="0">
</body>
</html>
This above code displays image only. When i add css and toolbar js files,it shows nothing html file after adding toolbar files
<!DOCTYPE html>
<html>
<head>
<title>DICOM Web Viewer</title>
<meta charset="UTF-8">
<meta name="description" content="DICOM Web Viewer (DWV) static version">
<meta name="keywords" content="DICOM,HTML5,JavaScript,medical,imaging,DWV">
<link type="text/css" rel="stylesheet" href="<?php echo base_url(); ?>assets/dicom/css/style.css">
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/viewers/static/appgui.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/viewers/static/applauncher.js"></script>
<style type="text/css" >
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%; }
</style>
<link type="text/css" rel="stylesheet" href="<?php echo base_url(); ?>assets/dicom/ext/jquery-ui/themes/ui-darkness/jquery-ui-1.12.1.min.css">
<style type="text/css" >
.ui-widget-content { background-color: #222; background-image: url();}
</style>
<!-- Third party (dwv) -->
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/modernizr/modernizr.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/i18next/i18next.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/i18next/i18nextXHRBackend.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/i18next/i18nextBrowserLanguageDetector.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/konva/konva.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/magic-wand/magic-wand.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/jszip/jszip.min.js"></script>
<!-- Third party (viewer) -->
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/jquery-ui/jquery-ui-1.12.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/flot/jquery.flot.min.js"></script>
<!-- decoders -->
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/pdfjs/jpx.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/pdfjs/util.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/pdfjs/arithmetic_decoder.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/pdfjs/jpg.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/rii-mango/lossless-min.js"></script>
<!-- Local -->
<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/dwv-0.22.0.min.js"></script>
<!-- Launch the app -->
</head>
<body>
<img id="imageHidden" src="<?php echo $imageUrl; ?>" hidden="true">
<!-- DWV -->
<div id="dwv">
<div id="pageHeader">
<!-- Title -->
<h1>DWV <span class="dwv-version"></span></h1>
<!-- Toolbar -->
<div class="toolbar"></div>
</div><!-- /pageHeader -->
<div id="pageMain">
<!-- Open file -->
<div class="openData" title="File">
<div class="loaderlist"></div>
<div id="progressbar"></div>
</div>
<!-- Toolbox -->
<div class="toolList" title="Toolbox"></div>
<!-- History -->
<div class="history" title="History"></div>
<!-- Tags -->
<div class="tags" title="Tags"></div>
<!-- DrawList -->
<div class="drawList" title="Draw list"></div>
<!-- Help -->
<div class="help" title="Help"></div>
<!-- Layer Container -->
<div class="layerDialog" title="Image" id="dwv">
<div class="dropBox"></div>
<div class="layerContainer">
<canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>
<div class="drawDiv"></div>
<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 class="plot"></div>
</div><!-- /infoLayer -->
</div><!-- /layerContainer -->
</div><!-- /layerDialog -->
</div><!-- /pageMain -->
</div><!-- /dwv -->
</body>
</html>
whats wrong in code? any Suggesstions?
Solution
You are missing all the 'AppLauncher' code needed to launch dwv and load the image. The launcher code is the code you have put in the window.onload function of your first html.
Answered By - ivmartel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.