Update doc examples

resources/doc/tutorials/examples.md

@@ -1,6 +1,6 @@
 ## Fiddle
 
-Some fiddles for you to play... Some are bundled with the code, scroll below the method arguments to see the example code.
+Some fiddles for you to play... Some are bundled with the code, scroll below the method arguments to see the example code. They all use the `dwv` prefix since the example are run in a pure javascript environment. This is not necessary in an es6 environment where you use the names defined when you import the classes.
 
 DICOM parsing:
  * [parser example #1](./DicomParser.html#DicomParser): parse DICOM data and display a tag

src/app/application.js

@@ -147,9 +147,9 @@ export class AppOptions {
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
+ * const options = new dwv.AppOptions(viewConfigs);
  * app.init(options);
  * // load dicom data
  * app.loadURLs([
@@ -464,9 +464,9 @@ export class App {
    * // create the dwv app
    * const app = new dwv.App();
    * // initialise
-   * const viewConfig0 = new ViewConfig('layerGroup0');
+   * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
    * const viewConfigs = {'*': [viewConfig0]};
-   * const options = new AppOptions(viewConfigs);
+   * const options = new dwv.AppOptions(viewConfigs);
    * options.viewOnFirstLoadItem = false;
    * app.init(options);
    * // render button

src/dicom/dicomWriter.js

@@ -268,18 +268,24 @@ class DefaultTextEncoder {
  * DICOM writer.
  *
  * @example
+ * // add link to html
+ * const link = document.createElement("a");
+ * link.appendChild(document.createTextNode("download"));
+ * const div = document.getElementById("dwv");
+ * div.appendChild(link);
  * // XMLHttpRequest onload callback
  * const onload = function (event) {
- *   const parser = new DicomParser();
+ *   const parser = new dwv.DicomParser();
  *   parser.parse(event.target.response);
- *   // create writer with parser data elements
- *   const writer = new DicomWriter(parser.getDicomElements());
- *   // create modified buffer and put it in a Blol
- *   const blob = new Blob([writer.getBuffer()], {type: 'application/dicom'});
- *   // example download link
- *   const element = document.getElementById("download");
- *   element.href = URL.createObjectURL(blob);
- *   element.download = "anonym.dcm";
+ *   // create writer
+ *   const writer = new dwv.DicomWriter();
+ *   // get buffer using default rules
+ *   const dicomBuffer = writer.getBuffer(parser.getDicomElements());
+ *   // create blob
+ *   const blob = new Blob([dicomBuffer], {type: 'application/dicom'});
+ *   // add blob to download link
+ *   link.href = URL.createObjectURL(blob);
+ *   link.download = "anonym.dcm";
  * };
  * // DICOM file request
  * const request = new XMLHttpRequest();

src/image/view.js

@@ -59,9 +59,9 @@ export function createView(elements, image) {
  *   const dicomParser = new dwv.DicomParser();
  *   dicomParser.parse(event.target.response);
  *   // create the image object
- *   const image = createImage(dicomParser.getDicomElements());
+ *   const image = dwv.createImage(dicomParser.getDicomElements());
  *   // create the view
- *   const view = createView(dicomParser.getDicomElements(), image);
+ *   const view = dwv.createView(dicomParser.getDicomElements(), image);
  *   // setup canvas
  *   const canvas = document.createElement('canvas');
  *   canvas.width = 256;

src/tools/opacity.js

@@ -13,10 +13,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {Opacity: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {Opacity: new dwv.ToolConfig()};
  * app.init(options);
  * // activate tool
  * app.addEventListener('load', function () {

src/tools/scroll.js

@@ -14,10 +14,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {Scroll: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {Scroll: new dwv.ToolConfig()};
  * app.init(options);
  * // activate tool
  * app.addEventListener('load', function () {
@@ -33,10 +33,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {Scroll: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {Scroll: new dwv.ToolConfig()};
  * app.init(options);
  * // create range
  * const range = document.createElement('input');
@@ -51,7 +51,7 @@ import {App} from '../app/application';
  *   const index = vc.getCurrentIndex();
  *   const values = index.getValues();
  *   values[2] = this.value;
- *   vc.setCurrentIndex(new Index(values));
+ *   vc.setCurrentIndex(new dwv.Index(values));
  * }
  * // activate tool and update range max on load
  * app.addEventListener('load', function () {

src/tools/windowLevel.js

@@ -17,10 +17,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {WindowLevel: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {WindowLevel: new dwv.ToolConfig()};
  * app.init(options);
  * // activate tool
  * app.addEventListener('load', function () {

src/tools/zoomPan.js

@@ -14,10 +14,10 @@ import {App} from '../app/application';
  * // create the dwv app
  * const app = new dwv.App();
  * // initialise
- * const viewConfig0 = new ViewConfig('layerGroup0');
+ * const viewConfig0 = new dwv.ViewConfig('layerGroup0');
  * const viewConfigs = {'*': [viewConfig0]};
- * const options = new AppOptions(viewConfigs);
- * options.tools = {ZoomAndPan: new ToolConfig()};
+ * const options = new dwv.AppOptions(viewConfigs);
+ * options.tools = {ZoomAndPan: new dwv.ToolConfig()};
  * app.init(options);
  * // activate tool
  * app.addEventListener('load', function () {

src/utils/string.js

@@ -108,10 +108,6 @@ export function getFlags(inputStr) {
  *
  * @param {string} inputStr The input string.
  * @param {object} values A object of {value, unit}.
- * @example
- *    const values = {"length": { "value": 33, "unit": "cm" } };
- *    const str = "The length is: {length}.";
- *    const res = dwv.replaceFlags(str, values); // "The length is: 33 cm."
  * @returns {string} The result string.
  */
 export function replaceFlags(inputStr, values) {