scottgwald/glass.html

## glass.html
<html style="width:100%; height:100%; overflow:hidden">
<head>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>-->
</head>
<body style="width:100%; height:100%; overflow:hidden; margin:0">
<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
<script>
function showImage(imageDataArray) {
    WS.say("Got your image");
    var image = new Image();
    image.onload = function () {
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, canvas.width, canvas.height);

        var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

        // Now you can access pixel data from imageData.data.
        // It's a one-dimensional array of RGBA values.
        // Here's an example of how to get a pixel's color at (x,y)
        var totalBri = 0;
        for (var x = 0; x < 100; x+=2) {
            for (var y = 0; y < 100; y += 2) {
                var index = (y * imageData.width + x) * 4;
                var red = parseInt(imageData.data[index]);
                var green = parseInt(imageData.data[index + 1]);
                var blue = parseInt(imageData.data[index + 2]);
                var alpha = imageData.data[index + 3];

                var bri = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue);
                totalBri += bri;
            }
        }

        var avgBri = totalBri/(50*50)
        avgBri = Math.floor(avgBri);
        console.log("avgBri: " + avgBri);

        if (avgBri > 125)
            var lightBri = avgBri - 10;
        else if (avgBri < 125)
            var lightBri = avgBri + 10;

        console.log("lightBri: " + lightBri)

        var myData = '{"bri" : 255}';
        var JSONData = JSON.parse(myData);
        JSONData.bri = lightBri;
        myData = JSON.stringify(JSONData);

        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("PUT", "http://192.168.0.100/api/newdeveloper/groups/0/action");
        xmlhttp.setRequestHeader("Content-Type", "application/json");
        xmlhttp.send(myData);
        WS.log("HUEDATA: " + myData);
    };
    image.src = "data:image/jpeg;base64," + imageDataArray;
}

function server() {
    WS.log("Welcome to WearScript2");
    WS.say('Welcome to lighting space ship');
    WS.cameraPhoto("showImage");
    WS.sound("SUCCESS")

}

function main() {
    if (WS.scriptVersion(1)) return;
    ctx = document.getElementById("canvas").getContext("2d");
    WS.serverConnect("{{WSUrl}}", 'server');
}
window.onload = main;
</script>
</body>
</html>
	<html style="width:100%; height:100%; overflow:hidden">
	<head>
	<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.0/zepto.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>-->
	</head>
	<body style="width:100%; height:100%; overflow:hidden; margin:0">
	<canvas id="canvas" width="640" height="360" style="display:block"></canvas>
	<script>
	function showImage(imageDataArray) {
	WS.say("Got your image");
	var image = new Image();
	image.onload = function () {
	var canvas = document.getElementById("canvas");
	var context = canvas.getContext("2d");
	context.drawImage(image, 0, 0, canvas.width, canvas.height);

	var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

	// Now you can access pixel data from imageData.data.
	// It's a one-dimensional array of RGBA values.
	// Here's an example of how to get a pixel's color at (x,y)
	var totalBri = 0;
	for (var x = 0; x < 100; x+=2) {
	for (var y = 0; y < 100; y += 2) {
	var index = (y * imageData.width + x) * 4;
	var red = parseInt(imageData.data[index]);
	var green = parseInt(imageData.data[index + 1]);
	var blue = parseInt(imageData.data[index + 2]);
	var alpha = imageData.data[index + 3];

	var bri = (0.2126 * red) + (0.7152 * green) + (0.0722 * blue);
	totalBri += bri;
	}
	}

	var avgBri = totalBri/(50*50)
	avgBri = Math.floor(avgBri);
	console.log("avgBri: " + avgBri);

	if (avgBri > 125)
	var lightBri = avgBri - 10;
	else if (avgBri < 125)
	var lightBri = avgBri + 10;

	console.log("lightBri: " + lightBri)

	var myData = '{"bri" : 255}';
	var JSONData = JSON.parse(myData);
	JSONData.bri = lightBri;
	myData = JSON.stringify(JSONData);

	var xmlhttp = new XMLHttpRequest();
	xmlhttp.open("PUT", "http://192.168.0.100/api/newdeveloper/groups/0/action");
	xmlhttp.setRequestHeader("Content-Type", "application/json");
	xmlhttp.send(myData);
	WS.log("HUEDATA: " + myData);
	};
	image.src = "data:image/jpeg;base64," + imageDataArray;
	}

	function server() {
	WS.log("Welcome to WearScript2");
	WS.say('Welcome to lighting space ship');
	WS.cameraPhoto("showImage");
	WS.sound("SUCCESS")

	}

	function main() {
	if (WS.scriptVersion(1)) return;
	ctx = document.getElementById("canvas").getContext("2d");
	WS.serverConnect("{{WSUrl}}", 'server');
	}
	window.onload = main;
	</script>
	</body>
	</html>