Old SandTable project

sandtable/static/js/chart.js

@@ -0,0 +1,35 @@
+var body = document.body;
+body.style.margin = 0;
+
+var div = document.getElementById('canvas-div');
+var canvas = document.getElementById('chart');
+canvas.height = div.offsetHeight;
+canvas.width = div.offsetWidth;
+
+var x_center = div.offsetWidth/2
+var y_center = div.offsetWidth/2
+
+var ctx = canvas.getContext("2d");
+
+// sand background
+var sand = new Image();
+sand.src = "static/images/sand.jpg"
+var pat = ctx.createPattern(sand, "repeat")
+ctx.save();
+ctx.beginPath();
+ctx.fillStyle = pat;
+ctx.arc(x_center, y_center, div.offsetWidth/2-5, 0, 2 * Math.PI);
+ctx.fill();
+ctx.strokeStyle = 'white';
+ctx.lineWidth = 5;
+ctx.stroke();
+
+
+
+
+// sand leds
+var leds = ctx.createRadialGradient(x_center, y_center, 0, x_center, y_center, div.offsetWidth/2+50)
+leds.addColorStop(0, "rgba(255,0,255,0.1)")
+leds.addColorStop(1, "rgba(255,0,255,0.3)")
+ctx.fillStyle = leds;
+ctx.fill();

sandtable/static/js/color.js

@@ -0,0 +1,94 @@
+
+var div = document.getElementById('picker')
+var red = document.getElementById('red')
+var green = document.getElementById('green')
+var blue = document.getElementById('blue')
+var white = document.getElementById('white')
+var red_value = red.innerHTML
+var green_value = green.innerHTML
+var blue_value = blue.innerHTML
+var white_value = white.innerHTML
+
+var colorPicker = new iro.ColorPicker('#picker', {
+    // Set the size of the color picker
+    width: div.offsetWidth-40,
+    // Set the initial color to pure red
+    color: {r: red_value, g: green_value, b: blue_value},
+    sliderSize: 100,
+    handleRadius: 35,
+    margin: 20,
+    wheelLightness: false
+});
+
+
+var whitePicker = new iro.ColorPicker('#picker', {
+    width: div.offsetWidth-40,
+    color: {r: white_value, g: white_value, b: white_value},
+    sliderSize: 100,
+    handleRadius: 35,
+    value: 0,
+    layout: [
+        { 
+            component: iro.ui.Slider,
+            options: {
+                sliderType: 'value'
+            }
+        },
+    ]
+});
+
+
+colorPicker.on('input:end', function(color) {
+    // Get RGB values
+    var R = color.rgb['r'];
+    var G = color.rgb['g'];
+    var B = color.rgb['b'];
+
+    // Write value to div
+    red.innerHTML = R;
+    green.innerHTML = G;
+    blue.innerHTML = B;
+
+    // POST values without refreshing
+    const formData = new FormData();
+    formData.append('r', R);
+    formData.append('g', G);
+    formData.append('b', B);
+    formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
+    console.log(formData);
+    fetch('/color/', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log('Success:', data);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+});
+whitePicker.on('input:end', function(color) {
+    // Get white value
+    var W = parseInt(color.value * 2.555);
+
+    // Write value to div
+    white.innerHTML = W;
+
+    // POST values without refreshing
+    const formData = new FormData();
+    formData.append('w', W);
+    formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
+    console.log(formData);
+    fetch('/color/', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        console.log('Success:', data);
+    })
+    .catch(error => {
+        console.error('Error:', error);
+    });
+});