-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
107 lines (97 loc) · 3.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Viewer</title>
<script src="lib/webfontloader/webfontloader.js"></script>
<script src="viewer.js"></script>
</head>
<body>
<h1>Image Viewer</h1>
<button onclick="javascript:toDefault();">Default mode</button>
<button onclick="javascript:toEditSolution();">Step 1: Create solution</button>
<button onclick="javascript:toEditAnswer();">Step 2: Give answer</button>
<button onclick="javascript:toShowSolution();">Step 3: Check answer</button>
<button onclick="javascript:toEditAnnotations();">Other: Edit annotations</button>
<button onclick="javascript:toShowAnnotations();">Other: Show annotations</button><br>
<canvas id="viewerCanvas" width="800" height="500" style="border: 1px solid black;"></canvas>
<p>
Select picture:
<ul>
<li><a href="javascript:setImage('example-assets/lena.png');">Lena</a></li>
<li><a href="javascript:setImage('example-assets/target.png');">Target</a></li>
</ul>
</p>
<script>
var imageSrc = 'example-assets/target.png'
, canvasId = 'viewerCanvas'
, myImageViewer = null
, solution = []
, annotations = []
, answer = null;
window.onload = function(){
WebFont.load({
custom: {
families: ['FontAwesome'],
urls: ['css/fonts.css'],
testStrings: {
// Fontawesome does not contain 'normal' characters,
// therefore we need to test 'special ones'
'FontAwesome': '\uf010\uf00e\uf1f8\uf024\uf040\uf047\uf00d\uf1f8'
}
},
fontactive: function() {
// initialize image viewer
myImageViewer = new ImageViewer(canvasId, imageSrc);
}
});
};
// methods to interact with viewer
function saveState(){
answer = myImageViewer.answer;
solution = myImageViewer.exportSolution();
annotations = myImageViewer.exportAnnotations();
}
function toDefault(){
if(myImageViewer !== null){
myImageViewer.dispose();
}
myImageViewer = new ImageViewer(canvasId, imageSrc);
solution = [];
answer = null;
}
function toEditAnswer(){
reloadImageViewer('editAnswer');
}
function toEditSolution(){
reloadImageViewer('editSolution');
}
function toShowSolution(){
reloadImageViewer('showSolution');
}
function toEditAnnotations(){
reloadImageViewer('editAnnotations');
}
function toShowAnnotations(){
reloadImageViewer('showAnnotations');
}
function reloadImageViewer(mode){
if(myImageViewer !== null){
saveState();
myImageViewer.dispose();
}
var options = { mode: mode,
solution: solution,
answer: answer,
annotations: annotations
};
myImageViewer = new ImageViewer(canvasId, imageSrc, options);
}
// change the image
function setImage(newSrc){
imageSrc = newSrc;
myImageViewer.image.src = newSrc;
}
</script>
</body>
</html>