Skip to content

Commit 38da286

Browse files
RockfordWeiRockfordWei
committed
Adding drag / drop / coloured scribble support
1 parent 0a7d224 commit 38da286

File tree

4 files changed

+61
-6
lines changed

4 files changed

+61
-6
lines changed

‎Sources/main.swift‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,12 @@ func handler(data: [String:Any]) throws -> RequestHandler {
113113
response.setHeader(.contentType, value: "text/json")
114114
.appendBody(string: "{\"value\": \"Is it a \(tag)? (Possibility: \(p)%)\"}")
115115
.completed()
116+
print(tag, p)
116117
}catch {
117118
response.setHeader(.contentType, value: "text/json")
118119
.appendBody(string: "{\"value\": \"\(error)\"}")
119120
.completed()
121+
print("\(error)")
120122
}
121123
}
122124
}

‎scrshot1.png‎

26.6 KB
Loading

‎scrshot2.png‎

26.3 KB
Loading

‎webroot/index.html‎

Lines changed: 59 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,13 @@
1414
var x = "black",
1515
y = 2;
1616

17+
function setColor(color) {
18+
x = color;
19+
}
20+
21+
function setPen(size) {
22+
y = size;
23+
}
1724
function init() {
1825
outcome = document.getElementById('Outcome');
1926
canvas = document.getElementById('hwcanvas');
@@ -49,11 +56,40 @@
4956
canvas.addEventListener("mouseout", function (e) {
5057
findxy('out', e)
5158
}, false);
59+
60+
canvas.addEventListener("dragover", function (e) {
61+
e.preventDefault();
62+
}, false);
63+
64+
canvas.addEventListener("drop", function (e) {
65+
reset();
66+
var files = e.dataTransfer.files;
67+
if (files.length > 0) {
68+
var file = files[0];
69+
if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
70+
var reader = new FileReader();
71+
reader.onload = function(e) {
72+
var img = new Image();
73+
img.src = e.target.result;
74+
img.onload = function () {
75+
var w = img.width;
76+
var h = img.height;
77+
var len = w > h ? h : w;
78+
ctx.drawImage(img, 0, 0, h, h, 0, 0, 224, 224);
79+
}//end img
80+
};//end function
81+
reader.readAsDataURL(file);
82+
}//end if
83+
}//end if
84+
e.preventDefault();
85+
}, false);
86+
87+
5288
reset();
5389
}
5490

5591
function draw() {
56-
ctx.fillStyle = "rgb(0,0,0)";
92+
ctx.fillStyle = x;
5793
ctx.beginPath();
5894
ctx.moveTo(prevX, prevY);
5995
ctx.lineTo(currX, currY);
@@ -111,12 +147,29 @@
111147
</script>
112148
</head>
113149
<body onload='init()'>
114-
<H1>Perfect TensorFlow Demo - Computer Vision</H1>
150+
<H1>Perfect TensorFlow Demo - Computer Vision</H1>
115151
<P>Swift program that uses a pre-trained Inception model (http://arxiv.org/abs/1512.00567)</P>
116-
<canvas id="hwcanvas" width=224 height=224></canvas>
117-
<p><input type=Reset onclick='reset()'>
118-
<input type="file" id="file_input">
119-
<input type=button value='Recognize' onclick='recog()'>
152+
<canvas id="hwcanvas" width=224 height=224 style="border:1px solid #000000;"></canvas>
153+
<p>
154+
<input type="range" onchange="setPen(this.value)" value="2" min="1" max="12"><br>
155+
<button style="padding: 4px 8px; background-color: #000000" onclick="setColor('#000000')" tag="Black"></button>
156+
<button style="padding: 4px 8px; background-color: #7bd148" onclick="setColor('#7bd148')" tag="Green"></button>
157+
<button style="padding: 4px 8px; background-color: #5484ed" onclick="setColor('#5484ed')" tag="Bold blue"></button>
158+
<button style="padding: 4px 8px; background-color: #a4bdfc" onclick="setColor('#a4bdfc')" tag="Blue"></button>
159+
<button style="padding: 4px 8px; background-color: #46d6db" onclick="setColor('#46d6db')" tag="Turquoise"></button>
160+
<button style="padding: 4px 8px; background-color: #7ae7bf" onclick="setColor('#7ae7bf')" tag="Light green"></button>
161+
<button style="padding: 4px 8px; background-color: #51b749" onclick="setColor('#51b749')" tag="Bold green"></button>
162+
<br>
163+
<button style="padding: 4px 8px; background-color: #fbd75b" onclick="setColor('#fbd75b')" tag="Yellow"></button>
164+
<button style="padding: 4px 8px; background-color: #ffb878" onclick="setColor('#ffb878')" tag="Orange"></button>
165+
<button style="padding: 4px 8px; background-color: #ff887c" onclick="setColor('#ff887c')" tag="Red"></button>
166+
<button style="padding: 4px 8px; background-color: #dc2127" onclick="setColor('#dc2127')" tag="Bold red"></button>
167+
<button style="padding: 4px 8px; background-color: #dbadff" onclick="setColor('#dbadff')" tag="Purple"></button>
168+
<button style="padding: 4px 8px; background-color: #e1e1e1" onclick="setColor('#e1e1e1')" tag="Gray"></button>
169+
<button style="padding: 4px 8px; background-color: #ffffff" onclick="setColor('#ffffff')" tag="White"></button>
170+
<br>
171+
<input type="file" id="file_input"><br>
172+
<input type=Reset onclick='reset()'><input type=button value='Recognize' onclick='recog()'>
120173
</p><hr>
121174
<H2 id='Outcome'></H2>
122175
</body>

0 commit comments

Comments
 (0)