-
-
Save companje/d2aaf31ca29a38a61996111a4b3cc46d to your computer and use it in GitHub Desktop.
<!-- 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'); | |
}); |
Could you put some comments on the parameters to change to make it work please?
I changed the IP but nothing seems to respond, does it work on browser, or only on phone?
thanks
@ghammat: index.js
should be executed with NodeJS (node
). It starts a webserver on localhost:3000.
Hi, ghammat!!
Good post but... I cannot do it works! I don't know what I'm doing wrong.
I have all files in my server (raspberry pi 3). I can exec with the command "nodejs index.js" the file and I get in the console the text "listening on port *:3000". But, when I get into the web typing the address http://192.168.1.41 (there are the web failes including .js) it shows the color gradient but I cannot doing click. What I'm doing wrong?
Thank you, ghammat.
It would be great to include these commands in Home Assistant... I've already integrated my Ultimaker 3 Extended and... why not giving it a touch of color? :-D
There's a HACS mod to integrate our Ulti in HA...
The assets I used: