Skip to content

Commit

Permalink
width * height * depth is not nrOfLeds anymore
Browse files Browse the repository at this point in the history 
app.js: only work with jsonValues
index.js: add jsonValues[key].new to check for new

AppModLeds
- width * height * depth is not nrOfLeds anymore (e.g. HSC, ring etc)
- loopFun is not using whd but nrOfLeds
- ledFix: include nrOfLeds
- whd display only
- nrOfLeds: changeDimensions
- add Spiral (WIP)

AppModPinManager
- disable loopFun (temporary)

SysModFiles
- seqNrToName refactor

SysModUI: loopFun: use total count (nrOfLeds) instead of x*y*z (w*h*d)

SysModWeb
- addResponse uses id instead of object
  • Loading branch information
@ewoudwijma
ewoudwijma committed Jul 23, 2023
1 parent 8cd8f58 commit d095fc9
Show file tree
Hide file tree
Showing 15 changed files with 662 additions and 599 deletions.
207 changes: 118 additions & 89 deletions data/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function userFun(userFunId, data) {

// console.log("userFun", leds);

if (leds[2] == 1) {
if (jsonValues.pview && jsonValues.pview.depth == 1) {
if (pview3DNode) pview3DNode.hidden = true;
pviewNode.hidden = false;
preview2D(pviewNode, leds);
Expand Down Expand Up @@ -42,11 +42,11 @@ function preview2D(node, leds) {
let ctx = node.getContext('2d');
let i = 4;
ctx.clearRect(0, 0, node.width, node.height);
if (jsonValues.pview) { // && jsonValues.pview.leds
if (jsonValues.pview) {
let pPL = Math.min(node.width / jsonValues.pview.width, node.height / jsonValues.pview.height); // pixels per LED (width of circle)
let lOf = Math.floor((node.width - pPL*jsonValues.pview.width)/2); //left offeset (to center matrix)
if (jsonValues.pview.leds) {
// console.log(jsonValues.pview.leds);
// console.log("preview2D jsonValues", jsonValues.pview);
for (var led of jsonValues.pview.leds) {
if (leds[i] + leds[i+1] + leds[i+2] > 20) { //do not show nearly blacks
ctx.fillStyle = `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
Expand All @@ -61,31 +61,35 @@ function preview2D(node, leds) {
console.log("preview2D unknown json", jsonValues.pview);
jsonValues.pview = null;
}
jsonValues.pview.new = false;
}
else {
let mW = leds[0]; // matrix width
let mH = leds[1]; // matrix height
let pPL = Math.min(node.width / mW, node.height / mH); // pixels per LED (width of circle)
let lOf = Math.floor((node.width - pPL*mW)/2); //left offeset (to center matrix)
for (y=0.5;y<mH;y++) for (x=0.5; x<mW; x++) {
if (leds[i] + leds[i+1] + leds[i+2] > 20) { //do not show nearly blacks
ctx.fillStyle = `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
ctx.beginPath();
ctx.arc(x*pPL+lOf, y*pPL, pPL*0.4, 0, 2 * Math.PI);
ctx.fill();
}
i+=3;
}
}
// else {
// let mW = leds[0]; // matrix width
// let mH = leds[1]; // matrix height
// let pPL = Math.min(node.width / mW, node.height / mH); // pixels per LED (width of circle)
// let lOf = Math.floor((node.width - pPL*mW)/2); //left offeset (to center matrix)
// for (y=0.5;y<mH;y++) for (x=0.5; x<mW; x++) {
// if (leds[i] + leds[i+1] + leds[i+2] > 20) { //do not show nearly blacks
// ctx.fillStyle = `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
// ctx.beginPath();
// ctx.arc(x*pPL+lOf, y*pPL, pPL*0.4, 0, 2 * Math.PI);
// ctx.fill();
// }
// i+=3;
// }
// }
}

function preview3D(node, leds) {
//3D vars
let mW = leds[0];
let mH = leds[1];
let mD = leds[2];
// let mW = leds[0];
// let mH = leds[1];
// let mD = leds[2];

if (!renderer || (jsonValues.pview &&jsonValues.pview.new)) { //init 3D

console.log("preview3D create new renderer");

if (!renderer) { //init 3D
// node.width = 0;
// node.height = 0;
renderer = new THREE.WebGLRenderer({canvas: node, antialias: true, alpha: true });
Expand All @@ -102,83 +106,108 @@ function preview3D(node, leds) {
scene = new THREE.Scene();
scene.background = null; //new THREE.Color( 0xff0000 );

if (jsonValues.pview) { // && jsonValues.pview.leds
var d = 5; //distanceLED;
var offset_x = -d*(jsonValues.pview.width-1)/2;
var offset_y = -d*(jsonValues.pview.height-1)/2;
var offset_z = -d*(jsonValues.pview.depth-1)/2;

console.log("3D jsonValues", jsonValues.pview);

if (jsonValues.pview.leds) {
console.log(jsonValues.pview.leds);
for (var led of jsonValues.pview.leds) {
const geometry = new THREE.SphereGeometry( 1, 32, 16 );
const material = new THREE.MeshBasicMaterial({transparent: true, opacity: 0.5});
// material.color = new THREE.Color(`${x/mW}`, `${y/mH}`, `${z/mD}`);
const sphere = new THREE.Mesh( geometry, material );
sphere.position.set(offset_x + d*led[0], offset_y + d*led[1], offset_z + d*led[2]);
scene.add( sphere );
}
}
// if (!jsonValues.pview.new) { //default setup only of no json
// var d = 5; //distanceLED;
// var offset_x = -d*(mW-1)/2;
// var offset_y = -d*(mH-1)/2;
// var offset_z = -d*(mD-1)/2;

// for (var x = 0; x < mW; x++) {
// for (var y = 0; y < mH; y++) {
// for (var z = 0; z < mD; z++) {
// const geometry = new THREE.SphereGeometry( 1, 32, 16 );
// const material = new THREE.MeshBasicMaterial({transparent: true, opacity: 0.5});
// // material.color = new THREE.Color(`${x/mW}`, `${y/mH}`, `${z/mD}`);
// const sphere = new THREE.Mesh( geometry, material );
// sphere.position.set(offset_x + d*x, offset_y + d*y, offset_z + d*z);
// scene.add( sphere );
// }
// }
// }
// }
} //new

if (jsonValues.pview && jsonValues.pview.new) { //set the new coordinates
var d = 5; //distanceLED;
var offset_x = -d*(jsonValues.pview.width-1)/2;
var offset_y = -d*(jsonValues.pview.height-1)/2;
var offset_z = -d*(jsonValues.pview.depth-1)/2;

console.log("preview3D new jsonValues", jsonValues.pview);

if (jsonValues.pview.leds) {
console.log(jsonValues.pview.leds);
for (var led of jsonValues.pview.leds) {
const geometry = new THREE.SphereGeometry( 1, 32, 16 );
const material = new THREE.MeshBasicMaterial({transparent: true, opacity: 0.5});
// material.color = new THREE.Color(`${x/mW}`, `${y/mH}`, `${z/mD}`);
const sphere = new THREE.Mesh( geometry, material );
sphere.position.set(offset_x + d*led[0], offset_y + d*led[1], offset_z + d*led[2]);
scene.add( sphere );
}
}
else
{
var d = 5; //distanceLED;
var offset_x = -d*(mW-1)/2;
var offset_y = -d*(mH-1)/2;
var offset_z = -d*(mD-1)/2;

for (var x = 0; x < mW; x++) {
for (var y = 0; y < mH; y++) {
for (var z = 0; z < mD; z++) {
const geometry = new THREE.SphereGeometry( 1, 32, 16 );
const material = new THREE.MeshBasicMaterial({transparent: true, opacity: 0.5});
// material.color = new THREE.Color(`${x/mW}`, `${y/mH}`, `${z/mD}`);
const sphere = new THREE.Mesh( geometry, material );
sphere.position.set(offset_x + d*x, offset_y + d*y, offset_z + d*z);
scene.add( sphere );
}
}
}
else {
console.log("preview3D unknown json", jsonValues.pview);
jsonValues.pview = null;
}
} //new
jsonValues.pview.new = false;
}

let firstLed = 4;
var i = 1;
for (var x = 0; x < mW; x++) {
for (var y = 0; y < mH; y++) {
for (var z = 0; z < mD; z++) {
if (i < scene.children.length) {
scene.children[i].visible = leds[i*3 + firstLed] + leds[i*3 + firstLed + 1] + leds[i*3 + firstLed+2] > 10; //do not show blacks
if (scene.children[i].visible)
scene.children[i].material.color = new THREE.Color(`${leds[i*3 + firstLed]/255}`, `${leds[i*3 + firstLed + 1]/255}`, `${leds[i*3 + firstLed + 2]/255}`);
}
i++;
}
if (jsonValues.pview) {
if (jsonValues.pview.leds) {
// console.log("preview2D jsonValues", jsonValues.pview);
//light up the cube
let firstLed = 4;
var i = 1;
for (var led of jsonValues.pview.leds) {
if (i < scene.children.length) {
scene.children[i].visible = leds[i*3 + firstLed] + leds[i*3 + firstLed + 1] + leds[i*3 + firstLed+2] > 10; //do not show blacks
if (scene.children[i].visible)
scene.children[i].material.color = new THREE.Color(`${leds[i*3 + firstLed]/255}`, `${leds[i*3 + firstLed + 1]/255}`, `${leds[i*3 + firstLed + 2]/255}`);
}
i++;
}
}
// } else {
// //light up the cube
// let firstLed = 4;
// var i = 1;
// for (var x = 0; x < mW; x++) {
// for (var y = 0; y < mH; y++) {
// for (var z = 0; z < mD; z++) {
// if (i < scene.children.length) {
// scene.children[i].visible = leds[i*3 + firstLed] + leds[i*3 + firstLed + 1] + leds[i*3 + firstLed+2] > 10; //do not show blacks
// if (scene.children[i].visible)
// scene.children[i].material.color = new THREE.Color(`${leds[i*3 + firstLed]/255}`, `${leds[i*3 + firstLed + 1]/255}`, `${leds[i*3 + firstLed + 2]/255}`);
// }
// i++;
// }
// }
// }
}

//rotate the 3D view
scene.rotation.x += 0.01;
scene.rotation.y += 0.01;
renderer.render( scene, camera );

}

function previewBoard(node, leds) {
let ctx = node.getContext('2d');
let mW = leds[0]; // matrix width
let mH = leds[1]; // matrix height
let pPL = Math.min(node.width / mW, node.height / mH); // pixels per LED (width of circle)
let lOf = Math.floor((node.width - pPL*mW)/2); //left offeset (to center matrix)
let i = 4;
ctx.clearRect(0, 0, node.width, node.height);
for (y=0.5;y<mH;y++) for (x=0.5; x<mW; x++) {
if (leds[i] + leds[i+1] + leds[i+2] > 20) { //do not show nearly blacks
ctx.fillStyle = `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
ctx.beginPath();
ctx.arc(x*pPL+lOf, y*pPL, pPL*0.4, 0, 2 * Math.PI);
ctx.fill();
}
i+=3;
}
// let ctx = node.getContext('2d');
// let mW = leds[0]; // matrix width
// let mH = leds[1]; // matrix height
// let pPL = Math.min(node.width / mW, node.height / mH); // pixels per LED (width of circle)
// let lOf = Math.floor((node.width - pPL*mW)/2); //left offeset (to center matrix)
// let i = 4;
// ctx.clearRect(0, 0, node.width, node.height);
// for (y=0.5;y<mH;y++) for (x=0.5; x<mW; x++) {
// if (leds[i] + leds[i+1] + leds[i+2] > 20) { //do not show nearly blacks
// ctx.fillStyle = `rgb(${leds[i]},${leds[i+1]},${leds[i+2]})`;
// ctx.beginPath();
// ctx.arc(x*pPL+lOf, y*pPL, pPL*0.4, 0, 2 * Math.PI);
// ctx.fill();
// }
// i+=3;
// }
}
9 changes: 6 additions & 3 deletions data/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ function processUpdate(json) {
console.log("processUpdate lov", key, json[key].lov);
var index = 0;
//remove all old options first
while (gId(key).options.length > 0) {
while (gId(key).options && gId(key).options.length > 0) {
gId(key).remove(0);
}
for (var value of json[key].lov) {
Expand Down Expand Up @@ -264,7 +264,8 @@ function processUpdate(json) {
gId(key).replaceChild(tbodyNode, gId(key).lastChild); //replace <table><tbody>
}
if (json[key].value) { //after lov, in case used
// console.log("processUpdate value", key, json[key].value, gId(key));
if (key=="ledFix" || key =="ledFixGen")
console.log("processUpdate value", key, json[key].value, gId(key));
if (gId(key).nodeName.toLocaleLowerCase() == "span") //display
gId(key).textContent = json[key].value;
else if (gId(key).nodeName.toLocaleLowerCase() == "canvas") {
Expand All @@ -284,9 +285,11 @@ function processUpdate(json) {
//we need to send a request which the server can handle using request variable
let url = `http://${window.location.hostname}/file`;
fetchAndExecute(url, json[key].file, jsonValues, function(jsonValues,text) {
// console.log("fetchAndExecute", text); //in case of invalid json
var ledmapJson = JSON.parse(text);
jsonValues[key] = ledmapJson;
// console.log(jsonValues);
jsonValues[key].new = true;
console.log("fetchAndExecute", jsonValues);
});

}
Expand Down
Loading

0 comments on commit d095fc9

Please sign in to comment.