Skip to content

Instantly share code, notes, and snippets.

@companje companje/index.html
Last active Apr 24, 2019

Embed
What would you like to do?
Ultimaker 3 as Ambient Light - quick demo
<!-- 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');
});
@companje

This comment has been minimized.

Copy link
Owner Author

companje commented Aug 24, 2017

screenshot

Link to the YouTube video:
https://youtu.be/kKGXqZjwn8Y

@companje

This comment has been minimized.

Copy link
Owner Author

companje commented Aug 24, 2017

The assets I used:
bg
um

@ghammat

This comment has been minimized.

Copy link

ghammat commented Aug 28, 2017

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

@companje

This comment has been minimized.

Copy link
Owner Author

companje commented Sep 7, 2017

@ghammat: index.js should be executed with NodeJS (node). It starts a webserver on localhost:3000.

@naxocaballero

This comment has been minimized.

Copy link

naxocaballero commented May 27, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.