-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (62 loc) · 4.3 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>CA4106 Paint Application</title>
<link rel="shortcut icon" type="image/png" href="images/paint.ico"/>
<link rel="stylesheet" href="styles/style.css">
</head>
<body style="background-color: #7b7b7b;">
<div id="tools">
<button title="Clear" id="clearCanvas" style="background-image: url(images/clear.png)" onclick="clearCanvas()"></button>
<button title="Eraser" id="eraserObject" style="background-image: url(images/eraser.png)" onclick="changeObject('eraser')"></button>
<button title="Fill" id="fillCanvas" style="background-image: url(images/fill.png)" onclick="fillCanvas()"></button>
<button title="Flood Fill" id="floodfill" style="background-image: url(images/flood-fill.png)" onclick="changeObject('floodfill')"></button>
<button title="Line" id="lineObject" style="background-image: url(images/curved-line.png)" onclick="changeObject('line')"></button>
<button title="Straight Line" id="straightlineObject" style="background-image: url(images/line.png)" onclick="changeObject('straightline')"></button>
<button title="Rectangle" id="rectangleObject" style="background-image: url(images/rectangle.png)" onclick="changeObject('rectangle')"></button>
<button title="Circle" id="circleObject" style="background-image: url(images/circle.png)" onclick="changeObject('circle')"></button>
<button title="Revert" id="revert" style="background-image: url(images/revert.png)" onclick="revert()"></button>
<button title="Redo" id="redo" style="background-image: url(images/redo.png)" onclick="redo()"></button>
<button title="Export to PNG" id="exportImage" style="background-image: url(images/export.png)" onclick="exportImage()"></button>
<button title="Import an image" id="importImage" style="background-image: url(images/import.png)" onclick="document.getElementById('imageLoader').click()"></button>
<button title="Save as .paint File" id="saveFile" style="background-image: url(images/save.png)" onclick="saveFile()"></button>
<button title="Load a .paint File" id="loadFile" style="background-image: url(images/load.png)" onclick="document.getElementById('imageLoader').click()"></button>
<input title="Size" type="range" style="margin-left: 5px;width:40px;"id="brushSize" min="1" max="100" value="10">
</div>
<canvas id="canvas" width="1280" height="720"></canvas>
<div class="action-bar" id="action-bar">
Layers
<ul id="dynamic-list"></ul>
</div>
<div id="bottom-bar">
<div id="color-bar">
<div id="current-color">
<button id = "current" onclick="changeColor('black')"></button>
</div>
<div id= "colors">
<button id = "black" onclick="changeColor('black')"></button>
<button id = "grey" onclick="changeColor('grey')"></button>
<button id = "purple" onclick="changeColor('purple')"></button>
<button id = "green" onclick="changeColor('green')"></button>
<button id = "blue" onclick="changeColor('blue')"></button>
<button id = "crimson" onclick="changeColor('crimson')"></button>
<button id = "orange" onclick="changeColor('orange')"></button>
<button id = "yellow" onclick="changeColor('yellow')"></button>
<button id = "yellowgreen" onclick="changeColor('yellowgreen')"></button>
<button id = "aqua" onclick="changeColor('aqua')"></button>
<button id = "pink" onclick="changeColor('pink')"></button>
<button id = "white" onclick="changeColor('white')"></button>
</div>
<a href="./report.html" class="gotoreport">Go to report</a>
</div>
</div>
<input type="file" id="imageLoader" name="imageLoader"/>
<script src="Scripts/Objects/Rectangle.js"></script>
<script src="Scripts/Objects/Line.js"></script>
<script src="Scripts/Objects/StraightLine.js"></script>
<script src="Scripts/Objects/Circle.js"></script>
<script src="Scripts/Objects/FloodFill.js"></script>
<script src="Scripts/Objects/ImageObject.js"></script>
<script src="Scripts/paint.js"></script>
</body>
</html>