init

nv/html/dwv/viewers/mobile/appgui.js

@@ -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;

nv/html/dwv/viewers/mobile/applauncher.js

@@ -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();
+});

nv/html/dwv/viewers/mobile/cache.manifest

@@ -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:
+*

nv/html/dwv/viewers/mobile/dropbox.js

@@ -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);
+        }
+    };
+};

nv/html/dwv/viewers/mobile/google.js

@@ -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();
+        }
+    };
+};

nv/html/dwv/viewers/mobile/index.html

@@ -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>