Mercurial > hg > orthanc-stone
changeset 420:8bf717c4e497
canvas size is now defined by the parent div size
| author | am@osimis.io |
|---|---|
| date | Mon, 19 Nov 2018 12:45:37 +0100 |
| parents | d638d5721f1c |
| children | f87f28624b96 4fe42ae3653a b70e9be013e4 |
| files | Applications/Samples/SimpleViewer/Wasm/simple-viewer.html Applications/Samples/Web/index.html Applications/Samples/Web/samples-styles.css Applications/Samples/Web/simple-viewer-single-file.html Applications/Samples/Web/single-frame-editor.html Applications/Samples/Web/single-frame.html Platforms/Wasm/wasm-viewport.ts |
| diffstat | 7 files changed, 48 insertions(+), 27 deletions(-) [+] |
line wrap: on
line diff
--- a/Applications/Samples/SimpleViewer/Wasm/simple-viewer.html Thu Nov 15 18:41:50 2018 +0100 +++ b/Applications/Samples/SimpleViewer/Wasm/simple-viewer.html Mon Nov 19 12:45:37 2018 +0100 @@ -18,11 +18,15 @@ <span id="label-study-description"></span> <span id="label-series-description"></span> </div> - <div> - <canvas id="canvasThumbnails" data-width-ratio="20" data-height-ratio="50"></canvas> - <canvas id="canvasMain" data-width-ratio="70" data-height-ratio="50"></canvas> + <div style="height: calc(100% - 50px)"> + <div style="width: 20%; height: 100%; display: inline-block"> + <canvas id="canvasThumbnails"></canvas> + </div> + <div style="width: 70%; height: 100%; display: inline-block"> + <canvas id="canvasMain"></canvas> + </div> </div> - <div id="toolbox"> + <div id="toolbox" style="height: 50px"> <button tool-selector="line-measure" class="tool-selector">line</button> <button tool-selector="circle-measure" class="tool-selector">circle</button> <button tool-selector="crop" class="tool-selector">crop</button>
--- a/Applications/Samples/Web/index.html Thu Nov 15 18:41:50 2018 +0100 +++ b/Applications/Samples/Web/index.html Mon Nov 19 12:45:37 2018 +0100 @@ -10,7 +10,6 @@ <meta name="HandheldFriendly" content="true" /> <title>Wasm Samples</title> - <link href="samples-styles.css" rel="stylesheet" /> <body> <ul>
--- a/Applications/Samples/Web/samples-styles.css Thu Nov 15 18:41:50 2018 +0100 +++ b/Applications/Samples/Web/samples-styles.css Mon Nov 19 12:45:37 2018 +0100 @@ -0,0 +1,16 @@ +html, body { + width: 100%; + height: 100%; + margin: 0px; + border: 0; + overflow: hidden; /* Disable scrollbars */ + display: block; /* No floating content on sides */ + background-color: black; + color: white; + font-family: Arial, Helvetica, sans-serif; +} + +canvas { + left:0px; + top:0px; +} \ No newline at end of file
--- a/Applications/Samples/Web/simple-viewer-single-file.html Thu Nov 15 18:41:50 2018 +0100 +++ b/Applications/Samples/Web/simple-viewer-single-file.html Mon Nov 19 12:45:37 2018 +0100 @@ -1,16 +1,17 @@ <!doctype html> <html lang="us"> - <head> - <meta charset="utf-8" /> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + +<head> + <meta charset="utf-8" /> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <!-- Disable pinch zoom on mobile devices --> - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> - <meta name="HandheldFriendly" content="true" /> + <!-- Disable pinch zoom on mobile devices --> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> + <meta name="HandheldFriendly" content="true" /> - <title>Simple Viewer</title> - <link href="samples-styles.css" rel="stylesheet" /> + <title>Simple Viewer</title> + <link href="samples-styles.css" rel="stylesheet" /> <body> <div id="breadcrumb"> @@ -18,11 +19,15 @@ <span id="study-description"></span> <span id="series-description"></span> </div> - <div> - <canvas id="canvas" data-width-ratio="20" data-height-ratio="50"></canvas> - <canvas id="canvas2" data-width-ratio="70" data-height-ratio="50"></canvas> + <div style="height: calc(100% - 50px)"> + <div style="width: 20%; height: 100%; display: inline-block"> + <canvas id="canvas"></canvas> + </div> + <div style="width: 70%; height: 100%; display: inline-block"> + <canvas id="canvas2"></canvas> + </div> </div> - <div id="toolbox"> + <div id="toolbox" style="height: 50px"> <input tool-selector="line-measure" type="radio" name="radio-tool-selector" class="tool-selector">line <input tool-selector="circle-measure" type="radio" name="radio-tool-selector" class="tool-selector">circle <button action-trigger="action1" class="action-trigger">action1</button>
--- a/Applications/Samples/Web/single-frame-editor.html Thu Nov 15 18:41:50 2018 +0100 +++ b/Applications/Samples/Web/single-frame-editor.html Mon Nov 19 12:45:37 2018 +0100 @@ -13,8 +13,8 @@ <link href="samples-styles.css" rel="stylesheet" /> <body> - <div> - <canvas id="canvas" data-width-ratio="100" data-height-ratio="100"></canvas> + <div style="width: 100%; height: 100%"> + <canvas id="canvas"></canvas> </div> <script type="text/javascript" src="app-single-frame-editor.js"></script> </body>
--- a/Applications/Samples/Web/single-frame.html Thu Nov 15 18:41:50 2018 +0100 +++ b/Applications/Samples/Web/single-frame.html Mon Nov 19 12:45:37 2018 +0100 @@ -13,8 +13,8 @@ <link href="samples-styles.css" rel="stylesheet" /> <body> - <div> - <canvas id="canvas" data-width-ratio="100" data-height-ratio="100"></canvas> + <div style="width: 100%; height: 100%"> + <canvas id="canvas"></canvas> </div> <script type="text/javascript" src="app-single-frame.js"></script> </body>
--- a/Platforms/Wasm/wasm-viewport.ts Thu Nov 15 18:41:50 2018 +0100 +++ b/Platforms/Wasm/wasm-viewport.ts Mon Nov 19 12:45:37 2018 +0100 @@ -137,12 +137,9 @@ this.imageData_ = null; } - // width/height can be defined in percent of window width/height through html attributes like data-width-ratio="50" and data-height-ratio="20" - var widthRatio = Number(this.htmlCanvas_.dataset["widthRatio"]) || 100; - var heightRatio = Number(this.htmlCanvas_.dataset["heightRatio"]) || 100; - - this.htmlCanvas_.width = window.innerWidth * (widthRatio / 100); - this.htmlCanvas_.height = window.innerHeight * (heightRatio / 100); + // width/height is defined by the parent width/height + this.htmlCanvas_.width = this.htmlCanvas_.parentElement.offsetWidth; + this.htmlCanvas_.height = this.htmlCanvas_.parentElement.offsetHeight; console.log("resizing WasmViewport: ", this.htmlCanvas_.width, "x", this.htmlCanvas_.height);