drawingApp/index.html at master · cuSTEMized/drawingApp · GitHub

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
108
<!DOCTYPE html>
<html>
    <head>
	<link rel="stylesheet" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
    </head>

    <body onload='init()'>
	<div id="popup" style="display: none;">
	</div>

	<nav>
	    <label class="myButton colorBox" onclick="popup()"><img src="icons/folder.svg" width="100%"></label>

	    <div class="vl"></div>

	    <input type="radio" name="pen" value="15" id="bigPen" checked=true/>
	    <label class="myButton colorBox" for="bigPen"><img src="icons/brush.svg" width="100%"></label>

	    <input type="radio" name="pen" value="5" id="smallPen"/>
	    <label class="myButton colorBox" for="smallPen"><img src="icons/pencil.svg" width="100%"></label>

	    <div class="vl"></div>

	    <div id="paletteBox">
	    </div>
	</nav>

	<div id="canvasDiv">
	</div>

	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
	<script type="text/javascript" src="js/drawingApp.js"></script>
	<script type="text/javascript">
	 // Select new image
	 var imageSrc;
	 function popup() {
	     var x = document.getElementById("popup");
	     if (x.style.display === "none") {
		 x.style.display = "block";
	     } else {
		 x.style.display = "none";
	     }
	 }

	 function init() {
	     // Create palette box
	     colors = ["crimson", "orange", "gold", "forestgreen", "steelblue", "darkorchid", "orchid", "white", "grey"]
	     for (var i = 0; i < colors.length; i++) {
	         d = document.getElementById("paletteBox").innerHTML
	         document.getElementById("paletteBox").innerHTML = d + '<input type="radio" name="color" value="' + colors[i] +'" id="' + i + '"/><label class="colorBox" for="' + i + '" style="background-color:' + colors[i] + '"></label>'
	     }
	     // Add black
	     d = document.getElementById("paletteBox").innerHTML
	     document.getElementById("paletteBox").innerHTML = d + '<input checked=true type="radio" name="color" value="black" id="defaultColor"/><label class="colorBox" for="defaultColor" style="background-color:black"></label>'

	     // Select image
	     var images = [
		 'img/astronaut.png',
		 'img/brain.png',
		 'img/butterfly.png',
		 'img/cat.png',
		 'img/elephant.png',
		 'img/lion.png',
		 'img/moth.png',
		 'img/panda.png',
		 'img/rocket.png',
		 'img/rooster.png'
	     ];
	     for (var i = 0; i < images.length; i++) {
	         d = document.getElementById("popup").innerHTML
	         document.getElementById("popup").innerHTML = d + '<input type="radio" name="image" value="' + images[i] +'" id="img' + i + '"/><label class="imageBox" for="img' + i + '"><img src="' + images[i] + '"></label>'
	     };

	     // Random image to initialize
	     imageSrc = images[Math.floor(Math.random() * images.length)];

	     // Create canvas
	     initCanvas(imageSrc);

	     // Check buttons
	     $('input:radio[name=color]').change(function () {
		 color = $(this).val();
	     });
	     $('input:radio[name=pen]').change(function () {
		 radius = $(this).val();
	     });
	     $('input:radio[name=image]').change(function () {
		 imageSrc = $(this).val();
		 popup(); // close popup
		 initCanvas(imageSrc);
		 //console.log(imageSrc);
	     });
	     // Pen size
	     document.getElementById('smallPen').addEventListener('click', function() {
		 penWidth = 5;
	     }, false);
	     document.getElementById('bigPen').addEventListener('click', function() {
		 penWidth = 15;
	     }, false);

	 }

	</script>


    </body>
</html>