This commit is contained in:
2025-02-26 14:49:25 +07:00
commit 1c1d9c4474
6403 changed files with 1953774 additions and 0 deletions

View File

@@ -0,0 +1,255 @@
/**
* Application GUI.
*/
// Default colour maps.
dwv.tool.colourMaps = {
"plain": dwv.image.lut.plain,
"invplain": dwv.image.lut.invPlain,
"rainbow": dwv.image.lut.rainbow,
"hot": dwv.image.lut.hot,
"hotiron": dwv.image.lut.hot_iron,
"pet": dwv.image.lut.pet,
"hotmetalblue": dwv.image.lut.hot_metal_blue,
"pet20step": dwv.image.lut.pet_20step
};
// Default window level presets.
dwv.tool.defaultpresets = {};
// 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},
"brain": {"center": 40, "width": 80},
"head": {"center": 90, "width": 350}
};
//decode query
dwv.utils.decodeQuery = function (query, callback)
{
if (query.type === "gdrive") {
var gAuth = new dwv.google.Auth();
var gDrive = new dwv.google.Drive();
gDrive.setIds( query.input.split(',') );
// pipeline
gAuth.onload = gDrive.load;
gAuth.onfail = function () {
$("#popupAuth").popup("open");
var authorizeButton = document.getElementById('gauth-button');
// explicit auth from button to allow popup
authorizeButton.onclick = function() {
$("#popupAuth").popup("close");
gAuth.load();
};
};
gDrive.onload = dwv.google.getAuthorizedCallback(callback);
// launch with silent auth
gAuth.loadSilent();
}
else {
// default
dwv.utils.base.decodeQuery(query, callback);
}
};
// Window
dwv.gui.getWindowSize = function () {
return { 'width': ($(window).width()), 'height': ($(window).height() - 147) };
};
// Prompt
dwv.gui.prompt = dwv.gui.base.prompt;
// Progress
/* global NProgress */
dwv.gui.displayProgress = function (percent) {
NProgress.configure({ showSpinner: false });
if( percent < 100 ) {
//$.mobile.loading("show", {text: percent+"%", textVisible: true, theme: "b"} );
NProgress.set(percent/100);
}
else if( percent >= 100 ) {
//$.mobile.loading("hide");
NProgress.done();
}
};
// Focus
dwv.gui.focusImage = function ()
{
$.mobile.changePage("#main");
};
// get element
dwv.gui.getElement = dwv.gui.base.getElement;
// refresh
dwv.gui.refreshElement = function (element) {
if( $(element)[0].nodeName.toLowerCase() === 'select' ) {
$(element).selectmenu('refresh');
}
else {
$(element).enhanceWithin();
}
};
// Slider
dwv.gui.Slider = dwv.gui.base.Slider;
// plot
dwv.gui.plot = function (div, data, options)
{
var plotOptions = {
"bars": { "show": true },
"grid": { "backgroundcolor": null },
"xaxis": { "show": true },
"yaxis": { "show": false }
};
if (typeof options !== "undefined" &&
typeof options.markings !== "undefined") {
plotOptions.grid.markings = options.markings;
}
$.plot(div, [ data ], plotOptions);
};
// Post process table
dwv.gui.postProcessTable = function (table)
{
var tableClass = table.className;
// css
table.className += " table-stripe ui-responsive";
// add columntoggle
table.setAttribute("data-role", "table");
table.setAttribute("data-mode", "columntoggle");
table.setAttribute("data-column-btn-text", dwv.i18n("basics.columns") + "...");
// add priority columns for columntoggle
var addDataPriority = function (cell) {
var text = cell.firstChild.data;
if ( tableClass === "tagsTable" ) {
if ( text !== "value" && text !== "name" ) {
cell.setAttribute("data-priority", "5");
}
}
else if ( tableClass === "drawsTable" ) {
if ( text === "description" ) {
cell.setAttribute("data-priority", "1");
}
else if ( text === "frame" || text === "slice" ) {
cell.setAttribute("data-priority", "5");
}
}
};
if (table.rows.length !== 0) {
var hCells = table.rows.item(0).cells;
for (var c = 0; c < hCells.length; ++c) {
addDataPriority(hCells[c]);
}
}
// return
return table;
};
// Tags table
dwv.gui.DicomTags = dwv.gui.base.DicomTags;
// DrawList table
dwv.gui.DrawList = dwv.gui.base.DrawList;
// Loaders
dwv.gui.Loadbox = dwv.gui.base.Loadbox;
// File loader
dwv.gui.FileLoad = dwv.gui.base.FileLoad;
dwv.gui.FileLoad.prototype.onchange = function (/*event*/) {
$("#popupOpen").popup("close");
};
// Folder loader
dwv.gui.FolderLoad = dwv.gui.base.FolderLoad;
dwv.gui.FolderLoad.prototype.onchange = function (/*event*/) {
$("#popupOpen").popup("close");
};
// Url loader
dwv.gui.UrlLoad = dwv.gui.base.UrlLoad;
dwv.gui.UrlLoad.prototype.onchange = function (/*event*/) {
$("#popupOpen").popup("close");
};
// Toolbox
dwv.gui.Toolbox = function (app)
{
var base = new dwv.gui.base.Toolbox(app);
this.setup = function (list)
{
base.setup(list);
// toolbar
var buttonClass = "ui-btn ui-btn-inline ui-btn-icon-notext ui-mini";
var open = document.createElement("a");
open.href = "#popupOpen";
open.setAttribute("class", buttonClass + " ui-icon-plus");
open.setAttribute("data-rel", "popup");
open.setAttribute("data-position-to", "window");
var undo = document.createElement("a");
undo.setAttribute("class", buttonClass + " ui-icon-back");
undo.onclick = app.onUndo;
var redo = document.createElement("a");
redo.setAttribute("class", buttonClass + " ui-icon-forward");
redo.onclick = app.onRedo;
var toggleInfo = document.createElement("a");
toggleInfo.setAttribute("class", buttonClass + " ui-icon-info");
toggleInfo.onclick = app.onToggleInfoLayer;
var toggleSaveState = document.createElement("a");
toggleSaveState.setAttribute("class", buttonClass + " download-state ui-icon-action");
toggleSaveState.onclick = app.onStateSave;
toggleSaveState.download = "state.json";
var tags = document.createElement("a");
tags.href = "#tags_page";
tags.setAttribute("class", buttonClass + " ui-icon-grid");
var drawList = document.createElement("a");
drawList.href = "#drawList_page";
drawList.setAttribute("class", buttonClass + " ui-icon-edit");
var node = app.getElement("toolbar");
node.appendChild(open);
node.appendChild(undo);
node.appendChild(redo);
node.appendChild(toggleInfo);
node.appendChild(toggleSaveState);
node.appendChild(tags);
node.appendChild(drawList);
dwv.gui.refreshElement(node);
};
this.display = function (flag)
{
base.display(flag);
};
this.initialise = function (list)
{
base.initialise(list);
};
};
// Window/level
dwv.gui.WindowLevel = dwv.gui.base.WindowLevel;
// Draw
dwv.gui.Draw = dwv.gui.base.Draw;
// ColourTool
dwv.gui.ColourTool = dwv.gui.base.ColourTool;
// ZoomAndPan
dwv.gui.ZoomAndPan = dwv.gui.base.ZoomAndPan;
// Scroll
dwv.gui.Scroll = dwv.gui.base.Scroll;
// Filter
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;
// Undo/redo
dwv.gui.Undo = dwv.gui.base.Undo;
// Help
dwv.gui.appendHelpHtml = dwv.gui.base.appendHelpHtml;
// Version
dwv.gui.appendVersionHtml = dwv.gui.base.appendVersionHtml;

View File

@@ -0,0 +1,107 @@
/**
* Application launcher.
*/
// start app function
function startApp() {
// translate page
dwv.i18nPage();
// main application
var myapp = new dwv.App();
// display loading time
var listener = function (event) {
if (event.type === "load-start") {
console.time("load-data");
}
else {
console.timeEnd("load-data");
}
};
// before myapp.init since it does the url load
myapp.addEventListener("load-start", listener);
myapp.addEventListener("load-end", listener);
// also available:
//myapp.addEventListener("load-progress", listener);
//myapp.addEventListener("draw-create", listener);
//myapp.addEventListener("draw-move", listener);
//myapp.addEventListener("draw-change", listener);
//myapp.addEventListener("draw-delete", listener);
//myapp.addEventListener("wl-width-change", listener);
//myapp.addEventListener("wl-center-change", listener);
//myapp.addEventListener("colour-change", listener);
//myapp.addEventListener("position-change", listener);
//myapp.addEventListener("slice-change", listener);
//myapp.addEventListener("frame-change", listener);
//myapp.addEventListener("zoom-change", listener);
//myapp.addEventListener("offset-change", listener);
//myapp.addEventListener("filter-run", listener);
//myapp.addEventListener("filter-undo", listener);
// initialise the application
var options = {
"containerDivId": "dwv",
"fitToWindow": true,
"gui": ["tool", "load", "help", "undo", "version", "tags", "drawList"],
"loaders": ["File", "Url", "GoogleDrive", "Dropbox"],
"tools": ["Scroll", "WindowLevel", "ZoomAndPan", "Draw", "Livewire", "Filter", "Floodfill"],
"filters": ["Threshold", "Sharpen", "Sobel"],
"shapes": ["Arrow", "Ruler", "Protractor", "Rectangle", "Roi", "Ellipse", "FreeHand"],
"isMobile": true,
"helpResourcesPath": "../../resources/help"
//"defaultCharacterSet": "chinese"
};
if ( dwv.browser.hasInputDirectory() ) {
options.loaders.splice(1, 0, "Folder");
}
myapp.init(options);
var size = dwv.gui.getWindowSize();
$(".layerContainer").height(size.height);
}
// Image decoders (for web workers)
dwv.image.decoderScripts = {
"jpeg2000": "../../decoders/pdfjs/decode-jpeg2000.js",
"jpeg-lossless": "../../decoders/rii-mango/decode-jpegloss.js",
"jpeg-baseline": "../../decoders/pdfjs/decode-jpegbaseline.js"
};
// status flags
var domContentLoaded = false;
var i18nInitialised = false;
// launch when both DOM and i18n are ready
function launchApp() {
if ( domContentLoaded && i18nInitialised ) {
startApp();
}
}
// i18n ready?
dwv.i18nOnInitialised( function () {
// call next once the overlays are loaded
var onLoaded = function (data) {
dwv.gui.info.overlayMaps = data;
i18nInitialised = true;
launchApp();
};
// load overlay map info
$.getJSON( dwv.i18nGetLocalePath("overlays.json"), onLoaded )
.fail( function () {
console.log("Using fallback overlays.");
$.getJSON( dwv.i18nGetFallbackLocalePath("overlays.json"), onLoaded );
});
});
// check browser support
dwv.browser.check();
// initialise i18n
dwv.i18nInitialise();
// DOM ready?
$(document).ready( function() {
domContentLoaded = true;
launchApp();
});

View File

@@ -0,0 +1,83 @@
CACHE MANIFEST
# v25 2017-12-21
CACHE:
# html
index.html
# css
/dwv/demo/stable/css/style.css
# js
/dwv/demo/stable/dwv-0.23.0-beta.min.js
applauncher.js
appgui.js
# images
/dwv/demo/stable/resources/icons/dwv-16.png
/dwv/demo/stable/resources/icons/dwv-60.png
/dwv/demo/stable/resources/icons/dwv-128.png
/dwv/demo/stable/resources/help/double_tap.png
/dwv/demo/stable/resources/help/tap_and_hold.png
/dwv/demo/stable/resources/help/tap.png
/dwv/demo/stable/resources/help/touch_drag.png
/dwv/demo/stable/resources/help/twotouch_drag.png
/dwv/demo/stable/resources/help/twotouch_pinch.png
# translations
/dwv/demo/stable/locales/de/translation.json
/dwv/demo/stable/locales/en/translation.json
/dwv/demo/stable/locales/es/translation.json
/dwv/demo/stable/locales/fr/translation.json
/dwv/demo/stable/locales/it/translation.json
/dwv/demo/stable/locales/jp/translation.json
/dwv/demo/stable/locales/ru/translation.json
/dwv/demo/stable/locales/zh/translation.json
# overlays
/dwv/demo/stable/locales/de/overlays.json
/dwv/demo/stable/locales/en/overlays.json
/dwv/demo/stable/locales/es/overlays.json
/dwv/demo/stable/locales/fr/overlays.json
/dwv/demo/stable/locales/it/overlays.json
/dwv/demo/stable/locales/jp/overlays.json
/dwv/demo/stable/locales/ru/overlays.json
/dwv/demo/stable/locales/zh/overlays.json
# third party
# css
/dwv/demo/stable/ext/jquery-mobile/jquery.mobile-1.4.5.min.css
/dwv/demo/stable/ext/jquery-mobile/images/ajax-loader.gif
/dwv/demo/stable/ext/jquery-mobile/images/icons-svg/plus-white.svg
/dwv/demo/stable/ext/jquery-mobile/images/icons-svg/forward-white.svg
/dwv/demo/stable/ext/jquery-mobile/images/icons-svg/back-white.svg
/dwv/demo/stable/ext/jquery-mobile/images/icons-svg/info-white.svg
/dwv/demo/stable/ext/jquery-mobile/images/icons-svg/grid-black.svg
/dwv/demo/stable/ext/jquery-mobile/images/icons-png/plus-white.png
/dwv/demo/stable/ext/jquery-mobile/images/icons-png/forward-white.png
/dwv/demo/stable/ext/jquery-mobile/images/icons-png/back-white.png
/dwv/demo/stable/ext/jquery-mobile/images/icons-png/info-white.png
/dwv/demo/stable/ext/jquery-mobile/images/icons-png/grid-black.png
# js: dwv
/dwv/demo/stable/ext/modernizr/modernizr.js
/dwv/demo/stable/ext/i18next/i18next.min.js
/dwv/demo/stable/ext/i18next/i18nextXHRBackend.min.js
/dwv/demo/stable/ext/i18next/i18nextBrowserLanguageDetector.min.js
/dwv/demo/stable/ext/konva/konva.min.js
/dwv/demo/stable/ext/magic-wand/magic-wand.js
/dwv/demo/stable/ext/jszip/jszip.min.js
# js: viewer
/dwv/demo/stable/ext/jquery/jquery-2.1.4.min.js
/dwv/demo/stable/ext/jquery-mobile/jquery.mobile-1.4.5.min.js
/dwv/demo/stable/ext/jquery-mobile/jquery.mobile-1.4.5.min.map
/dwv/demo/stable/ext/nprogress/nprogress.js
/dwv/demo/stable/ext/flot/jquery.flot.min.js
# js: decoders
/dwv/demo/stable/decoders/pdfjs/jpx.js
/dwv/demo/stable/decoders/pdfjs/arithmetic_decoder.js
/dwv/demo/stable/decoders/pdfjs/decode-jpeg2000.js
/dwv/demo/stable/decoders/pdfjs/util.js
/dwv/demo/stable/decoders/pdfjs/jpg.js
/dwv/demo/stable/decoders/pdfjs/decode-jpegbaseline.js
/dwv/demo/stable/decoders/rii-mango/lossless-min.js
/dwv/demo/stable/decoders/rii-mango/decode-jpegloss.js
NETWORK:
*

View File

@@ -0,0 +1,78 @@
/**
* Dropbox related utils.
* Depends upon:
* - https://www.dropbox.com/static/api/2/dropins.js
* API doc page: https://www.dropbox.com/developers/chooser
*/
var dwv = dwv || {};
/** @namespace */
dwv.dropbox = dwv.dropbox || {};
// external
var Dropbox = Dropbox || {};
/**
* DropboxLoad gui.
* @constructor
*/
dwv.gui.DropboxLoad = function (app)
{
/**
* Setup the dropbox load HTML to the page.
*/
this.setup = function()
{
// associated div
var gdriveLoadDiv = document.createElement("div");
gdriveLoadDiv.className = "dropboxdiv";
gdriveLoadDiv.style.display = "none";
// node
var node = app.getElement("loaderlist");
// append
node.appendChild(gdriveLoadDiv);
// refresh
dwv.gui.refreshElement(node);
};
/**
* Display the file load HTML.
* @param {Boolean} bool True to display, false to hide.
*/
this.display = function (bool)
{
// gdrive div element
var node = app.getElement("loaderlist");
var filediv = node.getElementsByClassName("dropboxdiv")[0];
filediv.style.display = bool ? "" : "none";
if (bool) {
// jquery mobile dependent
$("#popupOpen").popup("close");
app.resetLoadbox();
var options = {
// Required. Called when a user selects an item in the Chooser.
success: function (files) {
var urls = [];
for (var i = 0; i < files.length; ++i) {
urls[urls.length] = files[i].link;
}
app.loadURLs(urls);
},
// Optional. Called when the user closes the dialog without selecting a file
// and does not include any parameters.
cancel: function () {},
// Optional. "preview" (default) is a preview link to the document for sharing,
// "direct" is an expiring link to download the contents of the file. For more
// information about link types, see Link types below.
linkType: "direct", // "preview" or "direct"
// Optional. A value of false (default) limits selection to a single file, while
// true enables multiple file selection.
multiselect: true, // true or false
// Optional. List of file extensions
extensions: ['.dcm']
};
Dropbox.choose(options);
}
};
};

View File

@@ -0,0 +1,331 @@
/**
* Google related utils.
* Depends upon:
* - https://apis.google.com/js/api.js: auth and picker
* - https://apis.google.com/js/client.js: drive and request
*/
var dwv = dwv || {};
/** @namespace */
dwv.google = dwv.google || {};
// external
var gapi = gapi || {};
var google = google || {};
/**
* Google Authentification class.
* Allows to authentificate to google services.
*/
dwv.google.Auth = function ()
{
// closure to self
var self = this;
// immediate mode: behind the scenes token refresh
var immediate = false;
// The Client ID obtained from the Google Developers Console. Replace with your own Client ID.
this.clientId = "544445548355-7pli7rbg578hslnngnkj7ledcg6g5ejo.apps.googleusercontent.com";
// The scope to use to access user's Drive items.
this.scope = ['https://www.googleapis.com/auth/drive.readonly'];
/**
* Load the API and authentify.
*/
this.load = function () {
immediate = false;
gapi.load('auth', {'callback': onApiLoad});
};
/**
* Load the API and authentify silently.
*/
this.loadSilent = function () {
immediate = true;
gapi.load('auth', {'callback': onApiLoad});
};
/**
* Called if the authentification is successful.
* Default does nothing. No input parameters.
*/
this.onload = function () {};
/**
* Callback to be overloaded.
* Default does nothing. No input parameters.
*/
this.onfail = function () {};
/**
* Authentificate.
*/
function onApiLoad() {
// see https://developers.google.com/api-client-library/...
// ...javascript/reference/referencedocs#gapiauthauthorizeparams
gapi.auth.authorize({
'client_id': self.clientId,
'scope': self.scope,
'immediate': immediate
},
handleResult
);
}
/**
* Launch callback if all good.
* @param {Object} authResult An OAuth 2.0 Token Object.
* See https://developers.google.com/api-client-library/...
* ...javascript/reference/referencedocs#OAuth20TokenObject
*/
function handleResult(authResult) {
if (authResult && !authResult.error) {
self.onload();
}
else {
self.onfail();
}
}
};
/**
* Google Picker class.
* Allows to create a picker and handle its result.
*/
dwv.google.Picker = function ()
{
// closure to self
var self = this;
/**
* Load API and create picker.
*/
this.load = function () {
gapi.load('picker', {'callback': onApiLoad});
};
/**
* Called after user picked files.
* @param {Array} ids The list of picked files ids.
*/
this.onload = null;
/**
* Create the picker.
*/
function onApiLoad() {
var view = new google.picker.View(google.picker.ViewId.DOCS);
view.setMimeTypes("application/dicom");
// see https://developers.google.com/picker/docs/reference#PickerBuilder
var picker = new google.picker.PickerBuilder()
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
.setOAuthToken(gapi.auth.getToken().access_token)
.addView(view)
.setCallback(handleResult)
.build();
picker.setVisible(true);
}
/**
* Launch callback if all good.
* @param {Object} data The data returned by the picker.
* See https://developers.google.com/picker/docs/results
*/
function handleResult(data) {
if (data.action === google.picker.Action.PICKED &&
data.docs.length !== 0 ) {
var ids = [];
for (var i = 0; i < data.docs.length; ++i) {
ids[ids.length] = data.docs[i].id;
}
self.onload(ids);
}
}
};
/**
* Google Drive class.
* Allows to request google drive for file download links from a list of file ids.
*/
dwv.google.Drive = function ()
{
// closure to self
var self = this;
// list of ids
var idList = null;
// The Browser API key obtained from the Google Developers Console.
this.apiKey = 'AIzaSyA5YAedAwoQsBZ-TzVEEVkv2ezD5hqe4s0';
/**
* Set the ids to ask for download link.
* @param {Array} ids The list of file ids to ask for download link.
*/
this.setIds = function (ids) {
idList = ids;
};
/**
* Get the ids to ask for download link.
*/
this.getIds = function () {
return idList;
};
/**
* Load API and query drive for download links.
* @param {Array} ids The list of file ids to ask for download link.
*/
this.loadIds = function (ids) {
self.setIds(ids);
self.load();
};
/**
* Load API and query drive for download links.
* The ids to ask for have been provided via the setIds.
*/
this.load = function () {
// set the api key
gapi.client.setApiKey(self.apiKey);
var func = createApiLoad(self.getIds());
gapi.client.load('drive', 'v3', func);
};
/**
* Called after drive response with the file urls.
* @param {Array} urls The list of files urls corresponding to the input ids.
*/
this.onload = null;
/**
* Create an API load handler.
* @param {Array} ids The list of file ids to ask for download link.
*/
function createApiLoad(ids) {
var f = function () { onApiLoad(ids); };
return f;
}
/**
* Run the drive request.
* @param {Array} ids The list of file ids to ask for download link.
*/
function onApiLoad(ids) {
// group requests in batch (ans stay bellow quotas)
var batch = gapi.client.newBatch();
for (var i = 0; i < ids.length; ++i) {
// Can't make it work, HTTPRequest sends CORS error...
// see https://developers.google.com/drive/v3/reference/files/get
//var request = gapi.client.drive.files.get({
// 'fileId': fileId, 'fields': 'webViewLink'
//});
// File path with v2??
// see https://developers.google.com/api-client-library/...
// ...javascript/reference/referencedocs#gapiclientrequestargs
var request = gapi.client.request({
'path': '/drive/v2/files/' + ids[i],
'method': 'GET'
});
// add to batch
batch.add(request);
}
// execute the batch
batch.execute( handleDriveLoad );
}
/**
* Launch callback when all queries have returned.
* @param {Object} resp The batch request response.
* See https://developers.google.com/api-client-library/...
* ...javascript/reference/referencedocs#gapiclientRequestexecute
*/
function handleDriveLoad(resp) {
// link list
var urls = [];
// ID-response map of each requests response
var respKeys = Object.keys(resp);
for ( var i = 0; i < respKeys.length; ++i ) {
urls[urls.length] = resp[respKeys[i]].result.downloadUrl;
}
// call onload
self.onload(urls);
}
};
/**
* Append authorized header to the input callback arguments.
* @param {Function} callback The callback to append headers to.
*/
dwv.google.getAuthorizedCallback = function (callback) {
var func = function (urls) {
//see https://developers.google.com/api-client-library/javascript/features/cors
var header = {
"name": "Authorization",
"value": "Bearer " + gapi.auth.getToken().access_token
};
callback(urls, [header]);
};
return func;
};
/**
* GoogleDriveLoad gui.
* @constructor
*/
dwv.gui.GoogleDriveLoad = function (app)
{
/**
* Setup the gdrive load HTML to the page.
*/
this.setup = function()
{
// behind the scenes authentification to avoid popup blocker
var gAuth = new dwv.google.Auth();
gAuth.loadSilent();
// associated div
var gdriveLoadDiv = document.createElement("div");
gdriveLoadDiv.className = "gdrivediv";
gdriveLoadDiv.style.display = "none";
// node
var node = app.getElement("loaderlist");
// append
node.appendChild(gdriveLoadDiv);
// refresh
dwv.gui.refreshElement(node);
};
/**
* Display the file load HTML.
* @param {Boolean} bool True to display, false to hide.
*/
this.display = function (bool)
{
// gdrive div element
var node = app.getElement("loaderlist");
var filediv = node.getElementsByClassName("gdrivediv")[0];
filediv.style.display = bool ? "" : "none";
if (bool) {
// jquery mobile dependent
$("#popupOpen").popup("close");
app.resetLoadbox();
var gAuth = new dwv.google.Auth();
var gPicker = new dwv.google.Picker();
var gDrive = new dwv.google.Drive();
// pipeline
gAuth.onload = gPicker.load;
gPicker.onload = gDrive.loadIds;
gDrive.onload = dwv.google.getAuthorizedCallback(app.loadURLs);
// launch
gAuth.load();
}
};
};

View File

@@ -0,0 +1,272 @@
<!DOCTYPE html>
<!-- <html manifest="cache.manifest"> -->
<html>
<head>
<title>DICOM Web Viewer</title>
<meta charset="UTF-8">
<meta name="description" content="DICOM Web Viewer (DWV) mobile version">
<meta name="keywords" content="DICOM,HTML5,JavaScript,medical,imaging,DWV">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link type="text/css" rel="stylesheet" href="../../css/style.css" />
<style type="text/css" >
body { margin: 10px; padding: 0; }
.layerContainer { margin: auto; text-align: center; }
.imageLayer { left: 0px; }
.dropBox { margin: 20px auto; }
.inline { display: inline-block !important; }
</style>
<link type="text/css" rel="stylesheet" href="../../ext/jquery-mobile/jquery.mobile-1.4.5.min.css" />
<link type="text/css" rel="stylesheet" href="../../ext/nprogress/nprogress.css" />
<style type="text/css" >
.ui-popup .ui-controlgroup { background-color: #252525; }
.colourLi > .ui-input-text { text-align: center; }
.colourLi > .ui-input-text input { min-height: 2em; width: 7em; display:inline-block }
.lwColourLi > .ui-input-text { text-align: center; }
.lwColourLi > .ui-input-text input { min-height: 2em; width: 7em; display:inline-block }
.ffColourLi > .ui-input-text { text-align: center; }
.ffColourLi > .ui-input-text input { min-height: 2em; width: 7em; display:inline-block }
/* jquery-mobile strip not visible enough */
.table-stripe tbody tr:nth-child(odd) td,
.table-stripe tbody tr:nth-child(odd) th {
background-color: #eeeeee; /* non-RGBA fallback */
background-color: rgba(0,0,0,0.1);
}
</style>
<!-- mobile web app -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="16x16" href="../../resources/icons/dwv-16.png" />
<link rel="shortcut icon" sizes="60x60" href="../../resources/icons/dwv-60.png" />
<link rel="shortcut icon" sizes="128x128" href="../../resources/icons/dwv-128.png" />
<!-- apple specific -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="16x16" href="../../resources/icons/dwv-16.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../../resources/icons/dwv-60.png" />
<link rel="apple-touch-icon" sizes="128x128" href="../../resources/icons/dwv-128.png" />
<!-- Third party (dwv) -->
<script type="text/javascript" src="../../ext/modernizr/modernizr.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18next.min.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18nextXHRBackend.min.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18nextBrowserLanguageDetector.min.js"></script>
<script type="text/javascript" src="../../ext/konva/konva.min.js"></script>
<script type="text/javascript" src="../../ext/magic-wand/magic-wand.js"></script>
<script type="text/javascript" src="../../ext/jszip/jszip.min.js"></script>
<!-- Third party (viewer) -->
<script type="text/javascript" src="../../ext/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../../ext/jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="../../ext/nprogress/nprogress.js"></script>
<script type="text/javascript" src="../../ext/flot/jquery.flot.min.js"></script>
<!-- decoders -->
<script type="text/javascript" src="../../decoders/pdfjs/jpx.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/util.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/arithmetic_decoder.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/jpg.js"></script>
<script type="text/javascript" src="../../decoders/rii-mango/lossless-min.js"></script>
<!-- Local -->
<script type="text/javascript" src="../../src/app/application.js"></script>
<script type="text/javascript" src="../../src/app/drawController.js"></script>
<script type="text/javascript" src="../../src/app/infoController.js"></script>
<script type="text/javascript" src="../../src/app/state.js"></script>
<script type="text/javascript" src="../../src/app/toolboxController.js"></script>
<script type="text/javascript" src="../../src/app/viewController.js"></script>
<script type="text/javascript" src="../../src/dicom/dicomParser.js"></script>
<script type="text/javascript" src="../../src/dicom/dictionary.js"></script>
<script type="text/javascript" src="../../src/gui/filter.js"></script>
<script type="text/javascript" src="../../src/gui/generic.js"></script>
<script type="text/javascript" src="../../src/gui/help.js"></script>
<script type="text/javascript" src="../../src/gui/html.js"></script>
<script type="text/javascript" src="../../src/gui/info.js"></script>
<script type="text/javascript" src="../../src/gui/layer.js"></script>
<script type="text/javascript" src="../../src/gui/loader.js"></script>
<script type="text/javascript" src="../../src/gui/style.js"></script>
<script type="text/javascript" src="../../src/gui/tools.js"></script>
<script type="text/javascript" src="../../src/gui/undo.js"></script>
<script type="text/javascript" src="../../src/image/decoder.js"></script>
<script type="text/javascript" src="../../src/image/dicomBufferToView.js"></script>
<script type="text/javascript" src="../../src/image/domReader.js"></script>
<script type="text/javascript" src="../../src/image/filter.js"></script>
<script type="text/javascript" src="../../src/image/geometry.js"></script>
<script type="text/javascript" src="../../src/image/image.js"></script>
<script type="text/javascript" src="../../src/image/luts.js"></script>
<script type="text/javascript" src="../../src/image/view.js"></script>
<script type="text/javascript" src="../../src/io/filesLoader.js"></script>
<script type="text/javascript" src="../../src/io/urlsLoader.js"></script>
<script type="text/javascript" src="../../src/io/memoryLoader.js"></script>
<script type="text/javascript" src="../../src/io/dicomDataLoader.js"></script>
<script type="text/javascript" src="../../src/io/jsonTextLoader.js"></script>
<script type="text/javascript" src="../../src/io/rawImageLoader.js"></script>
<script type="text/javascript" src="../../src/io/rawVideoLoader.js"></script>
<script type="text/javascript" src="../../src/io/zipLoader.js"></script>
<script type="text/javascript" src="../../src/math/matrix.js"></script>
<script type="text/javascript" src="../../src/math/bucketQueue.js"></script>
<script type="text/javascript" src="../../src/math/point.js"></script>
<script type="text/javascript" src="../../src/math/scissors.js"></script>
<script type="text/javascript" src="../../src/math/shapes.js"></script>
<script type="text/javascript" src="../../src/math/stats.js"></script>
<script type="text/javascript" src="../../src/math/vector.js"></script>
<script type="text/javascript" src="../../src/tools/arrow.js"></script>
<script type="text/javascript" src="../../src/tools/draw.js"></script>
<script type="text/javascript" src="../../src/tools/drawCommands.js"></script>
<script type="text/javascript" src="../../src/tools/editor.js"></script>
<script type="text/javascript" src="../../src/tools/ellipse.js"></script>
<script type="text/javascript" src="../../src/tools/filter.js"></script>
<script type="text/javascript" src="../../src/tools/floodfill.js"></script>
<script type="text/javascript" src="../../src/tools/freeHand.js"></script>
<script type="text/javascript" src="../../src/tools/livewire.js"></script>
<script type="text/javascript" src="../../src/tools/protractor.js"></script>
<script type="text/javascript" src="../../src/tools/rectangle.js"></script>
<script type="text/javascript" src="../../src/tools/roi.js"></script>
<script type="text/javascript" src="../../src/tools/ruler.js"></script>
<script type="text/javascript" src="../../src/tools/scroll.js"></script>
<script type="text/javascript" src="../../src/tools/toolbox.js"></script>
<script type="text/javascript" src="../../src/tools/undo.js"></script>
<script type="text/javascript" src="../../src/tools/windowLevel.js"></script>
<script type="text/javascript" src="../../src/tools/zoomPan.js"></script>
<script type="text/javascript" src="../../src/utils/browser.js" data-cover></script>
<script type="text/javascript" src="../../src/utils/i18n.js"></script>
<script type="text/javascript" src="../../src/utils/listen.js"></script>
<script type="text/javascript" src="../../src/utils/progress.js"></script>
<script type="text/javascript" src="../../src/utils/string.js"></script>
<script type="text/javascript" src="../../src/utils/uri.js"></script>
<script type="text/javascript" src="../../src/utils/thread.js"></script>
<!-- Google -->
<script type="text/javascript" src="https://apis.google.com/js/client.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/api.js"></script>
<script type="text/javascript" src="google.js"></script>
<!-- Dropbox -->
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js"
id="dropboxjs" data-app-key="96u3396jtx3bwr8"></script>
<script type="text/javascript" src="dropbox.js"></script>
<!-- Launch the app -->
<script type="text/javascript" src="appgui.js"></script>
<script type="text/javascript" src="applauncher.js"></script>
</head>
<body>
<!-- Main page -->
<div data-role="page" data-theme="b" id="main">
<!-- pageHeader #dwvversion -->
<div id="pageHeader" data-role="header">
<h1>DWV <span class="dwv-version"></span></h1>
<a href="#help_page" data-icon="carat-r" class="ui-btn-right"
data-transition="slide" data-i18n="basics.help">Help</a>
</div><!-- /pageHeader -->
<!-- DWV -->
<div id="dwv">
<div id="pageMain" data-role="content" style="padding:2px;">
<!-- Toolbar -->
<div class="toolbar"></div>
<!-- Auth popup -->
<div data-role="popup" id="popupAuth">
<a href="#" data-rel="back" data-role="button" data-icon="delete"
data-iconpos="notext" class="ui-btn-right" data-i18n="basics.close">Close</a>
<div style="padding:10px 20px;">
<h3 data-i18n="io.GoogleDrive.auth.title">Google Drive Authorization</h3>
<p data-i18n="io.GoogleDrive.auth.body">Please authorize DWV to access your Google Drive.
<br>This is only needed the first time you connect.</p>
<button id="gauth-button" class="ui-btn" data-i18n="io.GoogleDrive.auth.button">Authorize</button>
</div>
</div><!-- /popup -->
<!-- Open popup -->
<div data-role="popup" id="popupOpen">
<a href="#" data-rel="back" data-role="button" data-icon="delete"
data-iconpos="notext" class="ui-btn-right" data-i18n="basics.close">Close</a>
<div style="padding:10px 20px;">
<h3 data-i18n="basics.open">Open</h3>
<div id="dwv-loaderlist"></div>
</div>
</div><!-- /popup -->
<!-- Layer Container -->
<div class="layerContainer">
<div class="dropBox"></div>
<canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>
<div class="drawDiv"></div>
<div class="infoLayer">
<div class="infotl info"></div>
<div class="infotc infoc"></div>
<div class="infotr info"></div>
<div class="infocl infoc"></div>
<div class="infocr infoc"></div>
<div class="infobl info"></div>
<div class="infobc infoc"></div>
<div class="infobr info"></div>
</div><!-- /infoLayer -->
</div><!-- /layerContainer -->
<!-- History -->
<div class="history" title="History" style="display:none;"></div>
</div><!-- /content -->
<div data-role="footer">
<div data-role="navbar" class="toolList">
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page main -->
</div><!-- /dwv -->
<!-- Tags page -->
<div data-role="page" data-theme="b" id="tags_page">
<div data-role="header">
<a href="#main" data-icon="back" data-transition="slide"
data-direction="reverse" data-i18n="basics.back">Back</a>
<h1 data-i18n="basics.dicomTags">DICOM Tags</h1>
</div><!-- /header -->
<div data-role="content">
<!-- Tags -->
<div id="dwv-tags" title="Tags"></div>
</div><!-- /content -->
</div><!-- /page tags_page-->
<!-- Draw list page -->
<div data-role="page" data-theme="b" id="drawList_page">
<div data-role="header">
<a href="#main" data-icon="back" data-transition="slide"
data-direction="reverse" data-i18n="basics.back">Back</a>
<h1 data-i18n="basics.drawList">Draw list</h1>
</div><!-- /header -->
<div data-role="content">
<!-- DrawList -->
<div id="dwv-drawList" title="Draw list"></div>
</div><!-- /content -->
</div><!-- /page draw-list_page-->
<!-- Help page -->
<div data-role="page" data-theme="b" id="help_page">
<div data-role="header">
<a href="#main" data-icon="back" data-transition="slide"
data-direction="reverse" data-i18n="basics.back">Back</a>
<h1 data-i18n="basics.help">Help</h1>
</div><!-- /header -->
<div data-role="content">
<!-- Help -->
<div id="dwv-help" title="Help"></div>
</div><!-- /content -->
</div><!-- /page help_page-->
</body>
</html>

View File

@@ -0,0 +1,214 @@
/**
* Application GUI.
*/
// Default window level presets.
dwv.tool.defaultpresets = {};
// 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 () {
return { 'width': ($(window).width()), 'height': ($(window).height() - 147) };
};
// Progress
dwv.gui.displayProgress = dwv.gui.base.displayProgress;
// get element
dwv.gui.getElement = dwv.gui.base.getElement;
// refresh
dwv.gui.refreshElement = function (element) {
if( $(element)[0].nodeName.toLowerCase() === 'select' ) {
$(element).selectmenu('refresh');
}
else {
$(element).enhanceWithin();
}
};
// Slider
dwv.gui.Slider = dwv.gui.base.Slider;
// Tags table
dwv.gui.DicomTags = dwv.gui.base.DicomTags;
// Toolbox
dwv.gui.Toolbox = function (app)
{
this.setup = function (/*list*/)
{
var mainFieldset = document.createElement("fieldset");
mainFieldset.className = "mainfieldset";
mainFieldset.setAttribute("data-role", "controlgroup");
mainFieldset.setAttribute("data-type", "horizontal");
var toolFieldset = document.createElement("fieldset");
toolFieldset.className = "toolfieldset";
toolFieldset.setAttribute("data-role", "controlgroup");
toolFieldset.setAttribute("data-type", "horizontal");
toolFieldset.setAttribute("style", "padding-right:10px;");
mainFieldset.appendChild(toolFieldset);
var node = app.getElement("toolbar");
node.appendChild(mainFieldset);
dwv.gui.refreshElement(node);
};
this.display = function (/*bool*/)
{
// does nothing...
};
this.initialise = function (list)
{
// not wonderful: first one should be scroll...
if ( list[0] === false ) {
var inputScroll = app.getElement("scrollLi");
inputScroll.parentNode.style.display = "none";
inputScroll.checked = false;
var inputZoom = app.getElement("zoomLi");
inputZoom.checked = true;
}
// refresh
$("input[type='radio']").checkboxradio("refresh");
var node = app.getElement("toolfieldset");
dwv.gui.refreshElement(node);
};
};
// Window/level
dwv.gui.WindowLevel = function (app)
{
this.setup = function ()
{
var input = document.createElement("input");
input.id = "wlLi";
input.className = "wlLi";
input.name = "radio-choice";
input.type = "radio";
input.value = "WindowLevel";
input.onclick = app.onChangeTool;
var label = document.createElement("label");
label.setAttribute("for", "wlLi");
var image = document.createElement("img");
image.src = "../../resources/img/contrast-64.png";
image.title = dwv.i18n("tool.WindowLevel.name");
label.appendChild(image);
var node = app.getElement("toolfieldset");
$(node).controlgroup("container").append(input);
$(node).controlgroup("container").append(label);
dwv.gui.refreshElement(node);
};
this.display = function (/*bool*/)
{
// does nothing...
};
this.initialise = function ()
{
// clear previous
$(".presetSelect").remove();
$(".presetLabel").remove();
// create preset select
var select = dwv.html.createHtmlSelect("presetSelect",
app.getViewController().getWindowLevelPresetsNames(), "wl.presets", true);
select.onchange = app.onChangeWindowLevelPreset;
select.title = "Select w/l preset.";
select.setAttribute("data-inline","true");
// label as span (otherwise creates new line)
var span = document.createElement("span");
span.className = "presetLabel";
span.appendChild(document.createTextNode(dwv.i18n("basics.presets") + ": "));
var node = app.getElement("mainfieldset");
node.appendChild(span);
node.appendChild(select);
dwv.gui.refreshElement(node);
};
};
// Zoom
dwv.gui.ZoomAndPan = function (app)
{
this.setup = function ()
{
var input = document.createElement("input");
input.id = "zoomLi";
input.className = "zoomLi";
input.name = "radio-choice";
input.type = "radio";
input.value = "ZoomAndPan";
input.onclick = app.onChangeTool;
var label = document.createElement("label");
label.setAttribute("for", "zoomLi");
var image = document.createElement("img");
image.src = "../../ext/jquery-mobile/images/icons-png/search-white.png";
image.title = dwv.i18n("tool.ZoomAndPan.name");
label.appendChild(image);
var node = app.getElement("toolfieldset");
$(node).controlgroup("container").append(input);
$(node).controlgroup("container").append(label);
dwv.gui.refreshElement(node);
};
this.display = function (/*bool*/)
{
// does nothing...
};
};
// Scroll
dwv.gui.Scroll = function (app)
{
this.setup = function ()
{
var input = document.createElement("input");
input.id = "scrollLi";
input.className = "scrollLi";
input.name = "radio-choice";
input.checked = "checked";
input.type = "radio";
input.value = "Scroll";
input.onclick = app.onChangeTool;
var label = document.createElement("label");
label.setAttribute("for", "scrollLi");
var image = document.createElement("img");
image.src = "../../ext/jquery-mobile/images/icons-png/bars-white.png";
image.title = dwv.i18n("tool.Scroll.name");
label.appendChild(image);
var node = app.getElement("toolfieldset");
$(node).controlgroup("container").append(input);
$(node).controlgroup("container").append(label);
dwv.gui.refreshElement(node);
};
this.display = function (/*bool*/)
{
// does nothing...
};
};
//Reset
dwv.gui.appendResetHtml = function (app)
{
var button = document.createElement("button");
button.className = "resetLi";
button.value = "reset";
button.onclick = app.onDisplayReset;
button.appendChild(document.createTextNode(dwv.i18n("basics.reset")));
button.setAttribute("class","ui-btn ui-btn-inline");
var node = app.getElement("mainfieldset");
node.appendChild(button);
dwv.gui.refreshElement(node);
};

View File

@@ -0,0 +1,51 @@
/**
* Application launcher.
*/
// start app function
function startApp() {
// main application
var myapp = new dwv.App();
// initialise the application
myapp.init({
"containerDivId": "dwv",
"fitToWindow": true,
"gui": ["tool"],
"tools": ["Scroll", "ZoomAndPan", "WindowLevel"],
"isMobile": true
});
dwv.gui.appendResetHtml(myapp);
}
// Image decoders (for web workers)
dwv.image.decoderScripts = {
"jpeg2000": "../../decoders/pdfjs/decode-jpeg2000.js",
"jpeg-lossless": "../../decoders/rii-mango/decode-jpegloss.js",
"jpeg-baseline": "../../decoders/pdfjs/decode-jpegbaseline.js"
};
// status flags
var domContentLoaded = false;
var i18nInitialised = false;
// launch when both DOM and i18n are ready
function launchApp() {
if ( domContentLoaded && i18nInitialised ) {
startApp();
}
}
// i18n ready?
dwv.i18nOnInitialised( function () {
i18nInitialised = true;
launchApp();
});
// check browser support
dwv.browser.check();
// initialise i18n
dwv.i18nInitialise();
// DOM ready?
$(document).ready( function() {
domContentLoaded = true;
launchApp();
});

View File

@@ -0,0 +1,129 @@
<!DOCTYPE html>
<html>
<head>
<title>DICOM Web Viewer</title>
<meta charset="UTF-8">
<meta name="description" content="DICOM Web Viewer (DWV) simple version">
<meta name="keywords" content="DICOM,HTML5,JavaScript,medical,imaging,DWV">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link type="text/css" rel="stylesheet" href="../../css/style.css" />
<link type="text/css" rel="stylesheet" href="../../ext/jquery-mobile/jquery.mobile-1.4.5.min.css" />
<!-- mobile web app -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="16x16" href="../../resources/icons/dwv-16.png" />
<link rel="shortcut icon" sizes="60x60" href="../../resources/icons/dwv-60.png" />
<link rel="shortcut icon" sizes="128x128" href="../../resources/icons/dwv-128.png" />
<!-- apple specific -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="16x16" href="../../resources/icons/dwv-16.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../../resources/icons/dwv-60.png" />
<link rel="apple-touch-icon" sizes="128x128" href="../../resources/icons/dwv-128.png" />
<!-- Third party (dwv) -->
<script type="text/javascript" src="../../ext/modernizr/modernizr.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18next.min.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18nextXHRBackend.min.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18nextBrowserLanguageDetector.min.js"></script>
<!-- Third party (viewer) -->
<script type="text/javascript" src="../../ext/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../../ext/jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
<!-- decoders -->
<script type="text/javascript" src="../../decoders/pdfjs/jpx.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/util.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/arithmetic_decoder.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/jpg.js"></script>
<script type="text/javascript" src="../../decoders/rii-mango/lossless-min.js"></script>
<!-- Local -->
<script type="text/javascript" src="../../src/app/application.js"></script>
<script type="text/javascript" src="../../src/app/drawController.js"></script>
<script type="text/javascript" src="../../src/app/infoController.js"></script>
<script type="text/javascript" src="../../src/app/toolboxController.js"></script>
<script type="text/javascript" src="../../src/app/viewController.js"></script>
<script type="text/javascript" src="../../src/dicom/dicomParser.js"></script>
<script type="text/javascript" src="../../src/dicom/dictionary.js"></script>
<script type="text/javascript" src="../../src/gui/filter.js"></script>
<script type="text/javascript" src="../../src/gui/generic.js"></script>
<script type="text/javascript" src="../../src/gui/help.js"></script>
<script type="text/javascript" src="../../src/gui/html.js"></script>
<script type="text/javascript" src="../../src/gui/info.js"></script>
<script type="text/javascript" src="../../src/gui/layer.js"></script>
<script type="text/javascript" src="../../src/gui/loader.js"></script>
<script type="text/javascript" src="../../src/gui/style.js"></script>
<script type="text/javascript" src="../../src/gui/tools.js"></script>
<script type="text/javascript" src="../../src/gui/undo.js"></script>
<script type="text/javascript" src="../../src/image/decoder.js"></script>
<script type="text/javascript" src="../../src/image/dicomBufferToView.js"></script>
<script type="text/javascript" src="../../src/image/domReader.js"></script>
<script type="text/javascript" src="../../src/image/filter.js"></script>
<script type="text/javascript" src="../../src/image/geometry.js"></script>
<script type="text/javascript" src="../../src/image/image.js"></script>
<script type="text/javascript" src="../../src/image/luts.js"></script>
<script type="text/javascript" src="../../src/image/view.js"></script>
<script type="text/javascript" src="../../src/io/filesLoader.js"></script>
<script type="text/javascript" src="../../src/io/urlsLoader.js"></script>
<script type="text/javascript" src="../../src/io/memoryLoader.js"></script>
<script type="text/javascript" src="../../src/io/dicomDataLoader.js"></script>
<script type="text/javascript" src="../../src/io/jsonTextLoader.js"></script>
<script type="text/javascript" src="../../src/io/rawImageLoader.js"></script>
<script type="text/javascript" src="../../src/io/rawVideoLoader.js"></script>
<script type="text/javascript" src="../../src/math/matrix.js"></script>
<script type="text/javascript" src="../../src/math/bucketQueue.js"></script>
<script type="text/javascript" src="../../src/math/point.js"></script>
<script type="text/javascript" src="../../src/math/scissors.js"></script>
<script type="text/javascript" src="../../src/math/shapes.js"></script>
<script type="text/javascript" src="../../src/math/stats.js"></script>
<script type="text/javascript" src="../../src/math/vector.js"></script>
<script type="text/javascript" src="../../src/tools/draw.js"></script>
<script type="text/javascript" src="../../src/tools/drawCommands.js"></script>
<script type="text/javascript" src="../../src/tools/ellipse.js"></script>
<script type="text/javascript" src="../../src/tools/filter.js"></script>
<script type="text/javascript" src="../../src/tools/livewire.js"></script>
<script type="text/javascript" src="../../src/tools/rectangle.js"></script>
<script type="text/javascript" src="../../src/tools/roi.js"></script>
<script type="text/javascript" src="../../src/tools/ruler.js"></script>
<script type="text/javascript" src="../../src/tools/scroll.js"></script>
<script type="text/javascript" src="../../src/tools/toolbox.js"></script>
<script type="text/javascript" src="../../src/tools/undo.js"></script>
<script type="text/javascript" src="../../src/tools/windowLevel.js"></script>
<script type="text/javascript" src="../../src/tools/zoomPan.js"></script>
<script type="text/javascript" src="../../src/utils/browser.js"></script>
<script type="text/javascript" src="../../src/utils/i18n.js"></script>
<script type="text/javascript" src="../../src/utils/listen.js"></script>
<script type="text/javascript" src="../../src/utils/progress.js"></script>
<script type="text/javascript" src="../../src/utils/string.js"></script>
<script type="text/javascript" src="../../src/utils/uri.js"></script>
<script type="text/javascript" src="../../src/utils/thread.js"></script>
<!-- Launch the app -->
<script type="text/javascript" src="appgui.js"></script>
<script type="text/javascript" src="applauncher.js"></script>
</head>
<body>
<!-- Main page -->
<div data-role="page" data-theme="b">
<!-- Main content -->
<div data-role="content">
<!-- DWV -->
<div id="dwv">
<!-- Toolbar -->
<div class="toolbar"></div>
<!-- Layer Container -->
<div class="layerContainer">
<canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>
</div><!-- /layerContainer -->
</div><!-- /dwv -->
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

View File

@@ -0,0 +1,149 @@
// namespaces
var dwv = dwv || {};
dwv.tool = dwv.tool || {};
/**
* Alert tool: demo tool that does a lot of logging and alerts.
* In order to activate it:
* - include it in your html
* - add it in the app tools when calling app.init
* @constructor
* @param {Object} app The associated application.
*/
dwv.tool.Alert = function (app)
{
/**
* Associated GUI.
* @type Object
*/
var gui = null;
/**
* Handle mouse down event.
* @param {Object} event The mouse down event.
*/
this.mousedown = function (event) {
console.log("[alert:tool:mousedown]");
console.log(event);
alert("Alert: mousedown.");
};
/**
* Handle mouse move event.
* @param {Object} event The mouse move event.
*/
this.mousemove = function (event) {
console.log("[alert:tool:mousemove]");
console.log(event);
};
/**
* Handle mouse up event.
* @param {Object} event The mouse up event.
*/
this.mouseup = function (event) {
console.log("[alert:tool:mouseup]");
console.log(event);
alert("Alert: mouseup.");
};
/**
* Setup the tool GUI.
* Called when the app is created.
*/
this.setup = function () {
console.log("[alert:tool:setup]");
gui = new dwv.gui.Alert(app);
gui.setup();
};
/**
* Display the tool.
* Called when switching tools: the last enabled tool is hidden and the current one shown.
* @param {Boolean} bool The flag to display or not.
*/
this.display = function (bool) {
console.log("[alert:tool:display]");
console.log("bool: "+bool);
gui.display(bool);
};
/**
* Initialise the tool.
* Called once an image has been loaded.
*/
this.init = function () {
console.log("[alert:tool:init]");
gui.initialise();
};
}; // Alert class
/**
* Help for this tool.
* @return {Object} The help content.
*/
dwv.tool.Alert.prototype.getHelp = function ()
{
return {
"title": "Alert",
"brief": "Keeps calling alert!",
"mouse": {
"mouse_drag": "This will launch an alert!"
},
"touch": {
"touch_drag": "This will launch an alert!"
}
};
};
/**
* Alert tool GUI.
* @param {Object} app The associated application.
*/
dwv.gui.Alert = function (app)
{
/**
* Setup the tool GUI.
* Called by the tool setup method.
*/
this.setup = function () {
console.log("[alert:gui:setup]");
var button = document.createElement("button");
button.className = "alert-button";
button.value = "Alert";
// let the app handle the tool change
button.onclick = app.onChangeTool;
button.appendChild(document.createTextNode("Alert!"));
// the app handles finding the document HTML element
// so that they are all in the same div.
var node = app.getElement("toolbar");
node.appendChild(button);
};
/**
* Display the tool.
* Called by the tool display method.
* @param {Boolean} bool The flag to display or not.
*/
this.display = function (bool) {
console.log("[alert:gui:display]");
console.log("bool: "+bool);
var button = app.getElement("alert-button");
button.disabled = bool;
};
/**
* Initialise the tool.
* Called by the tool init method.
*/
this.initialise = function () {
console.log("[alert:gui:initialise]");
};
};

View File

@@ -0,0 +1,149 @@
/**
* Application GUI.
*/
// Default window level presets.
dwv.tool.defaultpresets = {};
// 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 = dwv.gui.base.getWindowSize;
// 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(dwv.i18n("tool.WindowLevel.name")));
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(dwv.i18n("basics.presets") + ": "));
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(dwv.i18n("tool.ZoomAndPan.name")));
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(dwv.i18n("tool.Scroll.name")));
var node = app.getElement("toolbar");
node.appendChild(button);
};
this.display = function (bool)
{
var button = app.getElement("scroll-button");
button.disabled = bool;
};
};
//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(dwv.i18n("basics.reset")));
var node = app.getElement("toolbar");
node.appendChild(button);
};

View File

@@ -0,0 +1,51 @@
/**
* Application launcher.
*/
// start app function
function startApp() {
// main application
var myapp = new dwv.App();
// initialise the application
myapp.init({
"containerDivId": "dwv",
"fitToWindow": true,
"gui": ["tool"],
"tools": ["Scroll", "ZoomAndPan", "WindowLevel"],
"isMobile": true
});
dwv.gui.appendResetHtml(myapp);
}
// Image decoders (for web workers)
dwv.image.decoderScripts = {
"jpeg2000": "../../decoders/pdfjs/decode-jpeg2000.js",
"jpeg-lossless": "../../decoders/rii-mango/decode-jpegloss.js",
"jpeg-baseline": "../../decoders/pdfjs/decode-jpegbaseline.js"
};
// status flags
var domContentLoaded = false;
var i18nInitialised = false;
// launch when both DOM and i18n are ready
function launchApp() {
if ( domContentLoaded && i18nInitialised ) {
startApp();
}
}
// i18n ready?
dwv.i18nOnInitialised( function () {
i18nInitialised = true;
launchApp();
});
// check browser support
dwv.browser.check();
// initialise i18n
dwv.i18nInitialise();
// DOM ready?
document.addEventListener("DOMContentLoaded", function (/*event*/) {
domContentLoaded = true;
launchApp();
});

View File

@@ -0,0 +1,128 @@
<!DOCTYPE html>
<html>
<head>
<title>DICOM Web Viewer</title>
<meta charset="UTF-8">
<meta name="description" content="DICOM Web Viewer (DWV) simple version">
<meta name="keywords" content="DICOM,HTML5,JavaScript,medical,imaging,DWV">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link type="text/css" rel="stylesheet" href="../../css/style.css" />
<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>
<!-- mobile web app -->
<meta name="mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" sizes="16x16" href="../../resources/icons/dwv-16.png" />
<link rel="shortcut icon" sizes="60x60" href="../../resources/icons/dwv-60.png" />
<link rel="shortcut icon" sizes="128x128" href="../../resources/icons/dwv-128.png" />
<!-- apple specific -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" sizes="16x16" href="../../resources/icons/dwv-16.png" />
<link rel="apple-touch-icon" sizes="60x60" href="../../resources/icons/dwv-60.png" />
<link rel="apple-touch-icon" sizes="128x128" href="../../resources/icons/dwv-128.png" />
<!-- Third party (dwv) -->
<script type="text/javascript" src="../../ext/modernizr/modernizr.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18next.min.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18nextXHRBackend.min.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18nextBrowserLanguageDetector.min.js"></script>
<!-- decoders -->
<script type="text/javascript" src="../../decoders/pdfjs/jpx.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/util.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/arithmetic_decoder.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/jpg.js"></script>
<script type="text/javascript" src="../../decoders/rii-mango/lossless-min.js"></script>
<!-- Local -->
<script type="text/javascript" src="../../src/app/application.js"></script>
<script type="text/javascript" src="../../src/app/drawController.js"></script>
<script type="text/javascript" src="../../src/app/infoController.js"></script>
<script type="text/javascript" src="../../src/app/toolboxController.js"></script>
<script type="text/javascript" src="../../src/app/viewController.js"></script>
<script type="text/javascript" src="../../src/dicom/dicomParser.js"></script>
<script type="text/javascript" src="../../src/dicom/dictionary.js"></script>
<script type="text/javascript" src="../../src/gui/filter.js"></script>
<script type="text/javascript" src="../../src/gui/generic.js"></script>
<script type="text/javascript" src="../../src/gui/help.js"></script>
<script type="text/javascript" src="../../src/gui/html.js"></script>
<script type="text/javascript" src="../../src/gui/info.js"></script>
<script type="text/javascript" src="../../src/gui/layer.js"></script>
<script type="text/javascript" src="../../src/gui/loader.js"></script>
<script type="text/javascript" src="../../src/gui/style.js"></script>
<script type="text/javascript" src="../../src/gui/tools.js"></script>
<script type="text/javascript" src="../../src/gui/undo.js"></script>
<script type="text/javascript" src="../../src/image/decoder.js"></script>
<script type="text/javascript" src="../../src/image/dicomBufferToView.js"></script>
<script type="text/javascript" src="../../src/image/domReader.js"></script>
<script type="text/javascript" src="../../src/image/filter.js"></script>
<script type="text/javascript" src="../../src/image/geometry.js"></script>
<script type="text/javascript" src="../../src/image/image.js"></script>
<script type="text/javascript" src="../../src/image/luts.js"></script>
<script type="text/javascript" src="../../src/image/view.js"></script>
<script type="text/javascript" src="../../src/io/filesLoader.js"></script>
<script type="text/javascript" src="../../src/io/urlsLoader.js"></script>
<script type="text/javascript" src="../../src/io/memoryLoader.js"></script>
<script type="text/javascript" src="../../src/io/dicomDataLoader.js"></script>
<script type="text/javascript" src="../../src/io/jsonTextLoader.js"></script>
<script type="text/javascript" src="../../src/io/rawImageLoader.js"></script>
<script type="text/javascript" src="../../src/io/rawVideoLoader.js"></script>
<script type="text/javascript" src="../../src/math/matrix.js"></script>
<script type="text/javascript" src="../../src/math/bucketQueue.js"></script>
<script type="text/javascript" src="../../src/math/point.js"></script>
<script type="text/javascript" src="../../src/math/scissors.js"></script>
<script type="text/javascript" src="../../src/math/shapes.js"></script>
<script type="text/javascript" src="../../src/math/stats.js"></script>
<script type="text/javascript" src="../../src/math/vector.js"></script>
<script type="text/javascript" src="../../src/tools/draw.js"></script>
<script type="text/javascript" src="../../src/tools/drawCommands.js"></script>
<script type="text/javascript" src="../../src/tools/ellipse.js"></script>
<script type="text/javascript" src="../../src/tools/filter.js"></script>
<script type="text/javascript" src="../../src/tools/livewire.js"></script>
<script type="text/javascript" src="../../src/tools/rectangle.js"></script>
<script type="text/javascript" src="../../src/tools/roi.js"></script>
<script type="text/javascript" src="../../src/tools/ruler.js"></script>
<script type="text/javascript" src="../../src/tools/scroll.js"></script>
<script type="text/javascript" src="../../src/tools/toolbox.js"></script>
<script type="text/javascript" src="../../src/tools/undo.js"></script>
<script type="text/javascript" src="../../src/tools/windowLevel.js"></script>
<script type="text/javascript" src="../../src/tools/zoomPan.js"></script>
<script type="text/javascript" src="../../src/utils/browser.js"></script>
<script type="text/javascript" src="../../src/utils/i18n.js"></script>
<script type="text/javascript" src="../../src/utils/progress.js"></script>
<script type="text/javascript" src="../../src/utils/listen.js"></script>
<script type="text/javascript" src="../../src/utils/string.js"></script>
<script type="text/javascript" src="../../src/utils/uri.js"></script>
<script type="text/javascript" src="../../src/utils/thread.js"></script>
<!-- Launch the app -->
<script type="text/javascript" src="appgui.js"></script>
<script type="text/javascript" src="applauncher.js"></script>
</head>
<body>
<!-- DWV -->
<div id="dwv">
<!-- Toolbar -->
<div class="toolbar"></div>
<!-- Layer Container -->
<div class="layerContainer">
<canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>
</div><!-- /layerContainer -->
</div><!-- /dwv -->
</body>
</html>

View File

@@ -0,0 +1,292 @@
/**
* Application GUI.
*/
// Default colour maps.
dwv.tool.colourMaps = {
"plain": dwv.image.lut.plain,
"invplain": dwv.image.lut.invPlain,
"rainbow": dwv.image.lut.rainbow,
"hot": dwv.image.lut.hot,
"hotiron": dwv.image.lut.hot_iron,
"pet": dwv.image.lut.pet,
"hotmetalblue": dwv.image.lut.hot_metal_blue,
"pet20step": dwv.image.lut.pet_20step
};
// Default window level presets.
dwv.tool.defaultpresets = {};
// 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},
"brain": {"center": 40, "width": 80},
"head": {"center": 90, "width": 350}
};
//decode query
dwv.utils.decodeQuery = dwv.utils.base.decodeQuery;
// Window
dwv.gui.getWindowSize = function () {
return { 'width': ($('#pageMain').width() - 360), 'height': ($('#pageMain').height() - 75) };
};
// Prompt
dwv.gui.prompt = dwv.gui.base.prompt;
// Progress
dwv.gui.displayProgress = function (percent) {
// jquery-ui progress bar
if( percent <= 100 ) {
$("#progressbar").progressbar({ value: percent });
}
};
// Focus
dwv.gui.focusImage = dwv.gui.base.focusImage;
// get element
dwv.gui.getElement = dwv.gui.base.getElement;
// refresh
dwv.gui.refreshElement = dwv.gui.base.refreshElement;
// Slider
dwv.gui.Slider = function (app)
{
this.append = function ()
{
// nothing to do
};
this.initialise = function ()
{
var min = app.getImage().getDataRange().min;
var max = app.getImage().getDataRange().max;
// jquery-ui slider
$( ".thresholdLi" ).slider({
range: true,
min: min,
max: max,
values: [ min, max ],
slide: function( event, ui ) {
app.onChangeMinMax(
{'min':ui.values[0], 'max':ui.values[1]});
}
});
};
};
// plot
dwv.gui.plot = function (div, data, options)
{
var plotOptions = {
"bars": { "show": true },
"grid": { "backgroundcolor": null },
"xaxis": { "show": true },
"yaxis": { "show": false }
};
if (typeof options !== "undefined" &&
typeof options.markings !== "undefined") {
plotOptions.grid.markings = options.markings;
}
$.plot(div, [ data ], plotOptions);
};
function toggle(dialogId)
{
if( $(dialogId).dialog('isOpen') ) {
$(dialogId).dialog('close');
}
else {
$(dialogId).dialog('open');
}
}
// post process table
dwv.gui.postProcessTable = dwv.gui.base.postProcessTable;
// Tags table
dwv.gui.DicomTags = dwv.gui.base.DicomTags;
// DrawList table
dwv.gui.DrawList = dwv.gui.base.DrawList;
// Loaders
dwv.gui.Loadbox = dwv.gui.base.Loadbox;
// File loader
dwv.gui.FileLoad = dwv.gui.base.FileLoad;
// File loader
dwv.gui.FolderLoad = dwv.gui.base.FolderLoad;
// Url loader
dwv.gui.UrlLoad = dwv.gui.base.UrlLoad;
// Toolbox
dwv.gui.Toolbox = function (app)
{
var base = new dwv.gui.base.Toolbox(app);
this.setup = function(list)
{
base.setup(list);
// toolbar
// open
var openSpan = document.createElement("span");
openSpan.className = "ui-icon ui-icon-plus";
var open = document.createElement("button");
open.appendChild(openSpan);
open.title = dwv.i18n("basics.open");
open.onclick = function() { toggle(".openData"); };
// toolbox
var toolboxSpan = document.createElement("span");
toolboxSpan.className = "ui-icon ui-icon-wrench";
var toolbox = document.createElement("button");
toolbox.appendChild(toolboxSpan);
toolbox.title = dwv.i18n("basics.toolbox");
toolbox.onclick = function() { toggle(".toolList"); };
// history
var historySpan = document.createElement("span");
historySpan.className = "ui-icon ui-icon-clipboard";
var history = document.createElement("button");
history.appendChild(historySpan);
history.title = dwv.i18n("basics.history");
history.onclick = function() { toggle(".history"); };
// DICOM tags
var tagsSpan = document.createElement("span");
tagsSpan.className = "ui-icon ui-icon-tag";
var tags = document.createElement("button");
tags.appendChild(tagsSpan);
tags.title = dwv.i18n("basics.dicomTags");
tags.onclick = function() { toggle(".tags"); };
// draw list
var drawListSpan = document.createElement("span");
drawListSpan.className = "ui-icon ui-icon-pencil";
var drawList = document.createElement("button");
drawList.appendChild(drawListSpan);
drawList.title = dwv.i18n("basics.drawList");
drawList.onclick = function() { toggle(".drawList"); };
// image
var imageSpan = document.createElement("span");
imageSpan.className = "ui-icon ui-icon-image";
var image = document.createElement("button");
image.appendChild(imageSpan);
image.title = dwv.i18n("basics.image");
image.onclick = function() { toggle(".layerDialog"); };
// info
var infoSpan = document.createElement("span");
infoSpan.className = "ui-icon ui-icon-info";
var info = document.createElement("button");
info.appendChild(infoSpan);
info.title = dwv.i18n("basics.info");
info.onclick = app.onToggleInfoLayer;
// help
var helpSpan = document.createElement("span");
helpSpan.className = "ui-icon ui-icon-help";
var help = document.createElement("button");
help.appendChild(helpSpan);
help.title = dwv.i18n("basics.help");
help.onclick = function() { toggle(".help"); };
var node = app.getElement("toolbar");
node.appendChild(open);
node.appendChild(toolbox);
node.appendChild(history);
node.appendChild(tags);
node.appendChild(drawList);
node.appendChild(image);
node.appendChild(info);
node.appendChild(help);
// apply button style
$("button").button();
// save state button
var saveButton = document.createElement("button");
saveButton.appendChild(document.createTextNode(dwv.i18n("basics.downloadState")));
// save state link
var toggleSaveState = document.createElement("a");
toggleSaveState.onclick = app.onStateSave;
toggleSaveState.download = "state.json";
toggleSaveState.id = "download-state";
toggleSaveState.className += "download-state";
toggleSaveState.appendChild(saveButton);
// add to openData window
node = app.getElement("openData");
node.appendChild(toggleSaveState);
};
this.display = function (bool)
{
base.display(bool);
};
this.initialise = function (list)
{
base.initialise(list);
};
};
//Window/level
dwv.gui.WindowLevel = dwv.gui.base.WindowLevel;
// Draw
dwv.gui.Draw = dwv.gui.base.Draw;
// ColourTool
dwv.gui.ColourTool = dwv.gui.base.ColourTool;
// ZoomAndPan
dwv.gui.ZoomAndPan = dwv.gui.base.ZoomAndPan;
// Scroll
dwv.gui.Scroll = dwv.gui.base.Scroll;
// Filter
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;
// Undo/redo
dwv.gui.Undo = dwv.gui.base.Undo;
// Help
dwv.gui.appendHelpHtml = dwv.gui.base.appendHelpHtml;
// Version
dwv.gui.appendVersionHtml = dwv.gui.base.appendVersionHtml;
// special setup
dwv.gui.setup = function () {
$(".toggleInfoLayer").button({ icons:
{ primary: "ui-icon-comment" }, text: false,
appendTo: "#dwv"
});
// create dialogs
$(".openData").dialog({ position:
{my: "left top", at: "left top", of: "#pageMain"},
appendTo: "#dwv"
});
$(".toolList").dialog({ position:
{my: "left top+180", at: "left top", of: "#pageMain"},
appendTo: "#dwv"
});
$(".history").dialog({ position:
{my: "left top+350", at: "left top", of: "#pageMain"},
appendTo: "#dwv"
});
$(".tags").dialog({ position:
{my: "right top", at: "right top", of: "#pageMain"},
autoOpen: false, width: 500, height: 590,
appendTo: "#dwv"
});
$(".drawList").dialog({ position:
{my: "right top", at: "right top", of: "#pageMain"},
autoOpen: false, width: 500, height: 590,
appendTo: "#dwv"
});
$(".help").dialog({ position:
{my: "right top", at: "right top", of: "#pageMain"},
autoOpen: false, width: 500, height: 590,
appendTo: "#dwv"
});
// image dialog
$(".layerDialog").dialog({ position:
{my: "left+320 top", at: "left top", of: "#pageMain"},
appendTo: "#dwv"
});
// default size
$(".layerDialog").dialog({ width: "auto", resizable: false });
// Resizable but keep aspect ratio
// TODO it seems to add a border that bothers getting the cursor position...
//$("#layerContainer").resizable({ aspectRatio: true });
};

View File

@@ -0,0 +1,76 @@
/**
* Application launcher.
*/
// start app function
function startApp() {
// gui setup
dwv.gui.setup();
// main application
var myapp = new dwv.App();
// initialise the application
var options = {
"containerDivId": "dwv",
"fitToWindow": true,
"gui": ["tool", "load", "help", "undo", "version", "tags", "drawList"],
"loaders": ["File", "Url"],
"tools": ["Scroll", "WindowLevel", "ZoomAndPan", "Draw", "Livewire", "Filter", "Floodfill"],
"filters": ["Threshold", "Sharpen", "Sobel"],
"shapes": ["Arrow", "Ruler", "Protractor", "Rectangle", "Roi", "Ellipse", "FreeHand"],
"isMobile": false,
"helpResourcesPath": "../../resources/help"
};
if ( dwv.browser.hasInputDirectory() ) {
options.loaders.splice(1, 0, "Folder");
}
myapp.init(options);
// help
// TODO Seems accordion only works when at end...
$("#accordion").accordion({ collapsible: "true", active: "false", heightStyle: "content" });
}
// Image decoders (for web workers)
dwv.image.decoderScripts = {
"jpeg2000": "../../decoders/pdfjs/decode-jpeg2000.js",
"jpeg-lossless": "../../decoders/rii-mango/decode-jpegloss.js",
"jpeg-baseline": "../../decoders/pdfjs/decode-jpegbaseline.js"
};
// status flags
var domContentLoaded = false;
var i18nInitialised = false;
// launch when both DOM and i18n are ready
function launchApp() {
if ( domContentLoaded && i18nInitialised ) {
startApp();
}
}
// i18n ready?
dwv.i18nOnInitialised( function () {
// call next once the overlays are loaded
var onLoaded = function (data) {
dwv.gui.info.overlayMaps = data;
i18nInitialised = true;
launchApp();
};
// load overlay map info
$.getJSON( dwv.i18nGetLocalePath("overlays.json"), onLoaded )
.fail( function () {
console.log("Using fallback overlays.");
$.getJSON( dwv.i18nGetFallbackLocalePath("overlays.json"), onLoaded );
});
});
// check browser support
dwv.browser.check();
// initialise i18n
dwv.i18nInitialise();
// DOM ready?
$(document).ready( function() {
domContentLoaded = true;
launchApp();
});

View File

@@ -0,0 +1,80 @@
CACHE MANIFEST
# v25 2017-12-21
CACHE:
# html
index.html
# css
/dwv/demo/stable/css/style.css
# js
/dwv/demo/stable/dwv-0.23.0-beta.min.js
applauncher.js
appgui.js
# images
/dwv/demo/stable/resources/icons/dwv-16.png
/dwv/demo/stable/resources/icons/dwv-60.png
/dwv/demo/stable/resources/icons/dwv-128.png
/dwv/demo/stable/resources/help/click.png
/dwv/demo/stable/resources/help/double_click.png
/dwv/demo/stable/resources/help/mouse_drag.png
/dwv/demo/stable/resources/help/mouse_wheel.png
# translations
/dwv/demo/stable/locales/de/translation.json
/dwv/demo/stable/locales/en/translation.json
/dwv/demo/stable/locales/es/translation.json
/dwv/demo/stable/locales/fr/translation.json
/dwv/demo/stable/locales/it/translation.json
/dwv/demo/stable/locales/jp/translation.json
/dwv/demo/stable/locales/ru/translation.json
/dwv/demo/stable/locales/zh/translation.json
# overlays
/dwv/demo/stable/locales/de/overlays.json
/dwv/demo/stable/locales/en/overlays.json
/dwv/demo/stable/locales/es/overlays.json
/dwv/demo/stable/locales/fr/overlays.json
/dwv/demo/stable/locales/it/overlays.json
/dwv/demo/stable/locales/jp/overlays.json
/dwv/demo/stable/locales/ru/overlays.json
/dwv/demo/stable/locales/zh/overlays.json
# third party
# css
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/jquery-ui-1.12.1.min.css
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-bg_glass_20_555555_1x400.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-bg_glass_40_0078a3_1x400.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-bg_glass_40_ffc73d_1x400.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-bg_gloss-wave_25_333333_500x100.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-bg_highlight-soft_80_eeeeee_1x100.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-bg_inset-soft_25_000000_1x100.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-bg_inset-soft_30_f58400_1x100.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-icons_222222_256x240.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-icons_4b8e0b_256x240.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-icons_a83300_256x240.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-icons_cccccc_256x240.png
/dwv/demo/stable/ext/jquery-ui/themes/ui-darkness/images/ui-icons_ffffff_256x240.png
# js: dwv
/dwv/demo/stable/ext/modernizr/modernizr.js
/dwv/demo/stable/ext/i18next/i18next.min.js
/dwv/demo/stable/ext/i18next/i18nextXHRBackend.min.js
/dwv/demo/stable/ext/i18next/i18nextBrowserLanguageDetector.min.js
/dwv/demo/stable/ext/konva/konva.min.js
/dwv/demo/stable/ext/magic-wand/magic-wand.js
/dwv/demo/stable/ext/jszip/jszip.min.js
# js: viewer
/dwv/demo/stable/ext/jquery/jquery-2.1.4.min.js
/dwv/demo/stable/ext/jquery-ui/jquery-ui-1.12.1.min.js
/dwv/demo/stable/ext/flot/jquery.flot.min.js
# js: decoders
/dwv/demo/stable/decoders/pdfjs/jpx.js
/dwv/demo/stable/decoders/pdfjs/arithmetic_decoder.js
/dwv/demo/stable/decoders/pdfjs/decode-jpeg2000.js
/dwv/demo/stable/decoders/pdfjs/util.js
/dwv/demo/stable/decoders/pdfjs/jpg.js
/dwv/demo/stable/decoders/pdfjs/decode-jpegbaseline.js
/dwv/demo/stable/decoders/rii-mango/lossless-min.js
/dwv/demo/stable/decoders/rii-mango/decode-jpegloss.js
NETWORK:
*

View File

@@ -0,0 +1,193 @@
<!DOCTYPE html>
<!-- <html manifest="cache.manifest"> -->
<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="../../css/style.css">
<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="../../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="../../ext/modernizr/modernizr.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18next.min.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18nextXHRBackend.min.js"></script>
<script type="text/javascript" src="../../ext/i18next/i18nextBrowserLanguageDetector.min.js"></script>
<script type="text/javascript" src="../../ext/konva/konva.min.js"></script>
<script type="text/javascript" src="../../ext/magic-wand/magic-wand.js"></script>
<script type="text/javascript" src="../../ext/jszip/jszip.min.js"></script>
<!-- Third party (viewer) -->
<script type="text/javascript" src="../../ext/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../../ext/jquery-ui/jquery-ui-1.12.1.min.js"></script>
<script type="text/javascript" src="../../ext/flot/jquery.flot.min.js"></script>
<!-- decoders -->
<script type="text/javascript" src="../../decoders/pdfjs/jpx.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/util.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/arithmetic_decoder.js"></script>
<script type="text/javascript" src="../../decoders/pdfjs/jpg.js"></script>
<script type="text/javascript" src="../../decoders/rii-mango/lossless-min.js"></script>
<!-- Local -->
<script type="text/javascript" src="../../src/app/application.js"></script>
<script type="text/javascript" src="../../src/app/drawController.js"></script>
<script type="text/javascript" src="../../src/app/infoController.js"></script>
<script type="text/javascript" src="../../src/app/toolboxController.js"></script>
<script type="text/javascript" src="../../src/app/viewController.js"></script>
<script type="text/javascript" src="../../src/app/state.js"></script>
<script type="text/javascript" src="../../src/dicom/dicomParser.js"></script>
<script type="text/javascript" src="../../src/dicom/dictionary.js"></script>
<script type="text/javascript" src="../../src/gui/filter.js"></script>
<script type="text/javascript" src="../../src/gui/generic.js"></script>
<script type="text/javascript" src="../../src/gui/help.js"></script>
<script type="text/javascript" src="../../src/gui/html.js"></script>
<script type="text/javascript" src="../../src/gui/info.js"></script>
<script type="text/javascript" src="../../src/gui/layer.js"></script>
<script type="text/javascript" src="../../src/gui/loader.js"></script>
<script type="text/javascript" src="../../src/gui/style.js"></script>
<script type="text/javascript" src="../../src/gui/tools.js"></script>
<script type="text/javascript" src="../../src/gui/undo.js"></script>
<script type="text/javascript" src="../../src/image/decoder.js"></script>
<script type="text/javascript" src="../../src/image/dicomBufferToView.js"></script>
<script type="text/javascript" src="../../src/image/domReader.js"></script>
<script type="text/javascript" src="../../src/image/filter.js"></script>
<script type="text/javascript" src="../../src/image/geometry.js"></script>
<script type="text/javascript" src="../../src/image/image.js"></script>
<script type="text/javascript" src="../../src/image/luts.js"></script>
<script type="text/javascript" src="../../src/image/view.js"></script>
<script type="text/javascript" src="../../src/io/filesLoader.js"></script>
<script type="text/javascript" src="../../src/io/urlsLoader.js"></script>
<script type="text/javascript" src="../../src/io/memoryLoader.js"></script>
<script type="text/javascript" src="../../src/io/dicomDataLoader.js"></script>
<script type="text/javascript" src="../../src/io/jsonTextLoader.js"></script>
<script type="text/javascript" src="../../src/io/rawImageLoader.js"></script>
<script type="text/javascript" src="../../src/io/rawVideoLoader.js"></script>
<script type="text/javascript" src="../../src/io/zipLoader.js"></script>
<script type="text/javascript" src="../../src/math/matrix.js"></script>
<script type="text/javascript" src="../../src/math/bucketQueue.js"></script>
<script type="text/javascript" src="../../src/math/point.js"></script>
<script type="text/javascript" src="../../src/math/scissors.js"></script>
<script type="text/javascript" src="../../src/math/shapes.js"></script>
<script type="text/javascript" src="../../src/math/stats.js"></script>
<script type="text/javascript" src="../../src/math/vector.js"></script>
<script type="text/javascript" src="../../src/tools/arrow.js"></script>
<script type="text/javascript" src="../../src/tools/draw.js"></script>
<script type="text/javascript" src="../../src/tools/drawCommands.js"></script>
<script type="text/javascript" src="../../src/tools/editor.js"></script>
<script type="text/javascript" src="../../src/tools/ellipse.js"></script>
<script type="text/javascript" src="../../src/tools/filter.js"></script>
<script type="text/javascript" src="../../src/tools/floodfill.js"></script>
<script type="text/javascript" src="../../src/tools/freeHand.js"></script>
<script type="text/javascript" src="../../src/tools/livewire.js"></script>
<script type="text/javascript" src="../../src/tools/protractor.js"></script>
<script type="text/javascript" src="../../src/tools/rectangle.js"></script>
<script type="text/javascript" src="../../src/tools/roi.js"></script>
<script type="text/javascript" src="../../src/tools/ruler.js"></script>
<script type="text/javascript" src="../../src/tools/scroll.js"></script>
<script type="text/javascript" src="../../src/tools/toolbox.js"></script>
<script type="text/javascript" src="../../src/tools/undo.js"></script>
<script type="text/javascript" src="../../src/tools/windowLevel.js"></script>
<script type="text/javascript" src="../../src/tools/zoomPan.js"></script>
<script type="text/javascript" src="../../src/utils/browser.js"></script>
<script type="text/javascript" src="../../src/utils/i18n.js"></script>
<script type="text/javascript" src="../../src/utils/listen.js"></script>
<script type="text/javascript" src="../../src/utils/progress.js"></script>
<script type="text/javascript" src="../../src/utils/string.js"></script>
<script type="text/javascript" src="../../src/utils/uri.js"></script>
<script type="text/javascript" src="../../src/utils/thread.js"></script>
<!-- Launch the app -->
<script type="text/javascript" src="appgui.js"></script>
<script type="text/javascript" src="applauncher.js"></script>
</head>
<body>
<!-- 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">
<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>