Skip to content

Commit 4413426

Browse files
cvrabiecvrabie
committed
Read and Write work
1 parent 245d1f2 commit 4413426

File tree

6 files changed

+59
-17
lines changed

6 files changed

+59
-17
lines changed

‎js/camera.js

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
var Camera = {
22
ANALYSE_INTERVAL: 500,
33

4-
start: function(elementToAppendTo){
4+
start: function(elementToAppendTo, analyseFrameFunc){
55
var self = this;
66
this.createWebcamVideo(elementToAppendTo,function(video){
7-
self.startVideoTracking(video, self.analyseFrame, self.ANALYSE_INTERVAL);
7+
self.startVideoTracking(video, analyseFrameFunc, self.ANALYSE_INTERVAL);
88
});
99
},
1010

@@ -54,13 +54,6 @@ var Camera = {
5454

5555
}, analyseInterval);
5656
});
57-
},
58-
59-
analyseFrame: function(imageData){
60-
var average = ColorUtils.averageColor(imageData);
61-
var closest = average.closest();
62-
document.getElementById("average").style.cssText = "background-color: "+average.css;
63-
document.getElementById("closest").style.cssText = "background-color: "+closest.css;
6457
}
6558
}
6659

‎js/color.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,17 @@ RGB.prototype.closest = function(){
3838
return this.toLAB().closest();
3939
}
4040

41+
RGB.prototype.eq = function(other){
42+
return other instanceof RGB && this.r == other.r && this.g == other.g && this.b == other.b;
43+
}
44+
45+
RGB.prototype.toByte = function(){
46+
for(var i=0; i<ColorUtils.COLORS.length; ++i){
47+
if(ColorUtils.COLORS[i].eq(this)) return i;
48+
}
49+
return -1;
50+
}
51+
4152
function XYZ(x,y,z){
4253
this.x = x;
4354
this.y = y;
@@ -94,26 +105,24 @@ LAB.prototype.closest = function(){
94105

95106
var ColorUtils = {
96107
COLORS: [
97-
new RGB(0,0,0,"black"),
98108
new RGB(255,0,0,"red"),
99109
new RGB(255,127,0,"orange"),
100110
new RGB(255,255,0,"yellow"),
101111
new RGB(0,255,0,"green"),
102112
new RGB(0,255,0,"blue"),
103-
new RGB(75,0,130,"indigo"),
104113
new RGB(143,0,255,"violet"),
114+
new RGB(0,0,0,"black"),
105115
new RGB(255,255,255,"white")
106116
],
107117

108118
COLORS_LAB: [
109-
new RGB(0,0,0,"black").toLAB(),
110119
new RGB(255,0,0,"red").toLAB(),
111120
new RGB(255,127,0,"orange").toLAB(),
112121
new RGB(255,255,0,"yellow").toLAB(),
113122
new RGB(0,255,0,"green").toLAB(),
114123
new RGB(0,255,0,"blue").toLAB(),
115-
new RGB(75,0,130,"indigo").toLAB(),
116124
new RGB(143,0,255,"violet").toLAB(),
125+
new RGB(0,0,0,"black").toLAB(),
117126
new RGB(255,255,255,"white").toLAB()
118127
],
119128

‎js/utils.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var Utils = {
2+
decimalToOctal: function (nr) {
3+
return parseInt(nr,10).toString(8);
4+
},
5+
decimalToSixth: function (nr) {
6+
return parseInt(nr,10).toString(6);
7+
},
8+
sixthToDecimal: function (nr) {
9+
return parseInt(nr,6).toString(10);
10+
},
11+
octalToDecimal: function (nr) {
12+
return parseInt(nr,8).toString(10);
13+
}
14+
}

‎read.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<title>NFC Color Read</title>
55
<link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
66
<link rel="stylesheet" type="text/css" href="style/nfccolor.css">
7+
<script type="text/javascript" src="js/utils.js"></script>
78
<script type="text/javascript" src="js/color.js"></script>
89
<script type="text/javascript" src="js/camera.js"></script>
910
</head>
@@ -14,10 +15,16 @@
1415
<div id="average"></div>
1516
<div id="closest"></div>
1617
</div>
17-
<a role="button" href="write.html">Back</a>
18+
<a role="button" href="index.html">Back</a>
1819
</div>
1920
<script type="text/javascript">
20-
Camera.start("video");
21+
Camera.start("video", function(imageData){
22+
var average = ColorUtils.averageColor(imageData);
23+
var closest = average.closest();
24+
document.getElementById("average").style.cssText = "background-color: "+average.css;
25+
document.getElementById("closest").style.cssText = "background-color: "+closest.css;
26+
console.log(closest.toByte());
27+
});
2128
</script>
2229
</body>
2330
</html>

‎style/nfccolor.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
html,body,#footer,#colors{
22
width: 100%;
33
}
4+
html,body{
5+
height: 100%;
6+
}
47
#colors div{
58
width: 50%;
69
height: 100px;
@@ -15,4 +18,9 @@ html,body,#footer,#colors{
1518
#closest{
1619
float: right;
1720
background-color: rgb(255,0,0);
21+
}
22+
23+
#canvas{
24+
width: 100%;
25+
height: 100%;
1826
}

‎write.html

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,24 @@
33
<head>
44
<title>NFC Color Write</title>
55
<link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
6+
<link rel="stylesheet" type="text/css" href="style/nfccolor.css">
7+
<script type="text/javascript" src="js/utils.js"></script>
8+
<script type="text/javascript" src="js/color.js"></script>
69
</head>
7-
<body>
10+
<body style="margin:0px; padding:0px;">
811
<div id="canvas">
912

1013
</div>
1114
<div>
12-
<a role="button" href="write.html">Back</a>
15+
<a role="button" href="index.html">Back</a>
1316
</div>
17+
<script type="text/javascript">
18+
var bytes = Utils.decimalToSixth("1234");
19+
var i=0;
20+
window.writeLoop = setInterval( function(){
21+
document.getElementById("canvas").style.cssText = "background-color: "+ColorUtils.COLORS[i].css;
22+
i = (i+1)%6;
23+
},500);
24+
</script>
1425
</body>
1526
</html>

0 commit comments

Comments
 (0)