-
-
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'); | |
| }); |
The assets I used:
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...
Link to the YouTube video:
https://youtu.be/kKGXqZjwn8Y