companje/index.html

## index.html
<!-- Disclaimer: This experiment was done in 2 hours. So please beware of crappy code. -->
<!-- feel free to use and improve this code. -->
<!-- Rick Companje, Doodle3D, Aug 24th 2017 -->

<html>
<head>
	<title>Ulti Hue</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimal-ui">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<style>
		html { height: 100%; overflow: hidden; }
		body { height: 100%; overflow: auto; }
	</style>
</head>
<script>

var changed = false;
var hue = 0;
var saturation = 255;
var brightness = 255;

document.onclick = function(event) {
	update(event.x,event.y);
}

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    update(e.touches[0].pageX, e.touches[0].pageY);
});

function update(_x,_y) {
	var x = _x / window.innerWidth;
	var y = _y / window.innerHeight;

	hue = x * 360;
	saturation = y<.5 ? y*512 : 255; //correct for luminance
	brightness = 255 - y * 255;

	changed = true;
}

setInterval(function() {
	if (changed) {
		$.get("led", { hue:hue, saturation: saturation, brightness:brightness }, function(data) { });
		changed = false;
	}
},500);

</script>

<body background="bg.png" style="background-size: 100% 100%;">
	<img src="um.png" width="20%" style="max-width: 300px; min-width: 100px">
</body>
</html>

## index.js
// Disclaimer: This experiment was done in 2 hours. So please beware of crappy code.

var express = require('express');
var app = express();
var http = require('http').Server(app);
var jsonfile = require('jsonfile');
var file = 'auth.json';

var auth = jsonfile.readFileSync(file);
var api = "http://10.0.0.39/api/v1/";

app.use(express.static(__dirname + '/www'));

app.get('/', function(req, res) {
	res.sendFile(__dirname+"/index.html");
});

app.get('/bg.png', function(req, res) {
	res.sendFile(__dirname+"/bg.png");
});

app.get('/um.png', function(req, res) {
	res.sendFile(__dirname+"/um.png");
});

app.get("/request", function(req, res) {

	var data = { application: "Doodle3D", user:"Rick" };

	rest.post(api+"auth/request", { data: data }).on('complete', function(data, response) {
		auth = data;
		jsonfile.writeFileSync(file, auth);
		res.send(data);
	});
});

app.get("/led", function(req, res) {

	var digestRequest = require('request-digest')(auth.id, auth.key);
	digestRequest.request({
	  host: 'http://10.0.0.39',
	  path: '/api/v1/printer/led',
	  port: 80,
	  method: 'PUT',
	  json: true,
	  body: {
		"hue": req.query.hue,
		"saturation": req.query.saturation,
		"brightness": req.query.brightness
	  },
	  headers: {
        'Content-Type': 'application/json'
      }
	}, function (error, response, body) {
	  if (error) res.send(error);
	  else res.send(response);
	});
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});
	<!-- Disclaimer: This experiment was done in 2 hours. So please beware of crappy code. -->
	<!-- feel free to use and improve this code. -->
	<!-- Rick Companje, Doodle3D, Aug 24th 2017 -->

	<html>
	<head>
	<title>Ulti Hue</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimal-ui">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<style>
	html { height: 100%; overflow: hidden; }
	body { height: 100%; overflow: auto; }
	</style>
	</head>
	<script>

	var changed = false;
	var hue = 0;
	var saturation = 255;
	var brightness = 255;

	document.onclick = function(event) {
	update(event.x,event.y);
	}

	document.addEventListener('touchmove', function(e) {
	e.preventDefault();
	update(e.touches[0].pageX, e.touches[0].pageY);
	});

	function update(_x,_y) {
	var x = _x / window.innerWidth;
	var y = _y / window.innerHeight;

	hue = x * 360;
	saturation = y<.5 ? y*512 : 255; //correct for luminance
	brightness = 255 - y * 255;

	changed = true;
	}

	setInterval(function() {
	if (changed) {
	$.get("led", { hue:hue, saturation: saturation, brightness:brightness }, function(data) { });
	changed = false;
	}
	},500);

	</script>

	<body background="bg.png" style="background-size: 100% 100%;">
	<img src="um.png" width="20%" style="max-width: 300px; min-width: 100px">
	</body>
	</html>
	// Disclaimer: This experiment was done in 2 hours. So please beware of crappy code.

	var express = require('express');
	var app = express();
	var http = require('http').Server(app);
	var jsonfile = require('jsonfile');
	var file = 'auth.json';

	var auth = jsonfile.readFileSync(file);
	var api = "http://10.0.0.39/api/v1/";

	app.use(express.static(__dirname + '/www'));

	app.get('/', function(req, res) {
	res.sendFile(__dirname+"/index.html");
	});

	app.get('/bg.png', function(req, res) {
	res.sendFile(__dirname+"/bg.png");
	});

	app.get('/um.png', function(req, res) {
	res.sendFile(__dirname+"/um.png");
	});

	app.get("/request", function(req, res) {

	var data = { application: "Doodle3D", user:"Rick" };

	rest.post(api+"auth/request", { data: data }).on('complete', function(data, response) {
	auth = data;
	jsonfile.writeFileSync(file, auth);
	res.send(data);
	});
	});

	app.get("/led", function(req, res) {

	var digestRequest = require('request-digest')(auth.id, auth.key);
	digestRequest.request({
	host: 'http://10.0.0.39',
	path: '/api/v1/printer/led',
	port: 80,
	method: 'PUT',
	json: true,
	body: {
	"hue": req.query.hue,
	"saturation": req.query.saturation,
	"brightness": req.query.brightness
	},
	headers: {
	'Content-Type': 'application/json'
	}
	}, function (error, response, body) {
	if (error) res.send(error);
	else res.send(response);
	});
	});

	http.listen(3000, function(){
	console.log('listening on *:3000');
	});