comparison Applications/Samples/Web/simple-viewer-single-file.html @ 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 daa04d15192c
children
comparison
equal deleted inserted replaced
419:d638d5721f1c 420:8bf717c4e497
1 <!doctype html> 1 <!doctype html>
2 2
3 <html lang="us"> 3 <html lang="us">
4 <head>
5 <meta charset="utf-8" />
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 4
8 <!-- Disable pinch zoom on mobile devices --> 5 <head>
9 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 6 <meta charset="utf-8" />
10 <meta name="HandheldFriendly" content="true" /> 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
11 8
12 <title>Simple Viewer</title> 9 <!-- Disable pinch zoom on mobile devices -->
13 <link href="samples-styles.css" rel="stylesheet" /> 10 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
11 <meta name="HandheldFriendly" content="true" />
12
13 <title>Simple Viewer</title>
14 <link href="samples-styles.css" rel="stylesheet" />
14 15
15 <body> 16 <body>
16 <div id="breadcrumb"> 17 <div id="breadcrumb">
17 <span id="patient-id"></span> 18 <span id="patient-id"></span>
18 <span id="study-description"></span> 19 <span id="study-description"></span>
19 <span id="series-description"></span> 20 <span id="series-description"></span>
20 </div> 21 </div>
21 <div> 22 <div style="height: calc(100% - 50px)">
22 <canvas id="canvas" data-width-ratio="20" data-height-ratio="50"></canvas> 23 <div style="width: 20%; height: 100%; display: inline-block">
23 <canvas id="canvas2" data-width-ratio="70" data-height-ratio="50"></canvas> 24 <canvas id="canvas"></canvas>
25 </div>
26 <div style="width: 70%; height: 100%; display: inline-block">
27 <canvas id="canvas2"></canvas>
28 </div>
24 </div> 29 </div>
25 <div id="toolbox"> 30 <div id="toolbox" style="height: 50px">
26 <input tool-selector="line-measure" type="radio" name="radio-tool-selector" class="tool-selector">line 31 <input tool-selector="line-measure" type="radio" name="radio-tool-selector" class="tool-selector">line
27 <input tool-selector="circle-measure" type="radio" name="radio-tool-selector" class="tool-selector">circle 32 <input tool-selector="circle-measure" type="radio" name="radio-tool-selector" class="tool-selector">circle
28 <button action-trigger="action1" class="action-trigger">action1</button> 33 <button action-trigger="action1" class="action-trigger">action1</button>
29 <button action-trigger="action2" class="action-trigger">action2</button> 34 <button action-trigger="action2" class="action-trigger">action2</button>
30 </div> 35 </div>