Skip to content

Commit

Permalink
Modules -> App/User/Sys, add user tab, refactor app tab, preview mod
Browse files Browse the repository at this point in the history 
app.js
- userfun: no need to replace canvas for pview as all is three.js
- rename node to canvasNode
- preview3D: renderSetSize if canvas change and updateStyle is false !

index.css
- add mdlContainers for 2, 3 and 4 columns
- add appmod, sysmod and usermod classes

index.htm
- add vUser
- remove instPH

index.js
- remove getView (set by makeWs
- module by AppMod, UserMod and SysMod
- genHTML: no label for module, canvas without specified with
- initColumns, setupModules remove Drag: use gId and childNodes
- setInstanceTableColumns, changeHTMLView: refactor

AppModLeds, AppModPreview: move pview to new module AppModPreview

SysModWeb: wsEvent: sort modules before sending them to ui

Rename initModule to initAppMod, UserMod, SysMod
- add functions in SysodUI
- FixtureGen, AppModLeds, Files, Model, Network, Pins, Print, System, UI, WEB, Modules, Artnet, DDP, E131, Instances
  • Loading branch information
@ewowi
ewowi committed Jan 20, 2024
1 parent 86e411e commit 7049b6e
Show file tree
Hide file tree
Showing 25 changed files with 1,563 additions and 1,566 deletions.
75 changes: 38 additions & 37 deletions data/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,22 @@ function userFun(data) {
let pviewNode = gId("pview");

//replace the canvas: in case we switch from 2D to 3D as they cannot be reused between them
if (jsonValues.pview.new)
{
console.log("replace the canvas!", jsonValues.pview);
let canvasNode = cE("canvas");
canvasNode.width = pviewNode.width;
canvasNode.height = pviewNode.height;
canvasNode.className = pviewNode.className;
canvasNode.draggable = true;
canvasNode.addEventListener('dragstart', (event) => {event.preventDefault(); event.stopPropagation();});

pviewNode.parentNode.replaceChild(canvasNode, pviewNode);
pviewNode = canvasNode;
pviewNode.id = "pview";
pviewNode.addEventListener('dblclick', (event) => {toggleModal(event.target);});
}
//not needed anymore as we do only three.js
// if (jsonValues.pview.new)
// {
// console.log("replace the canvas!", jsonValues.pview);
// let canvasNode = cE("canvas");
// canvasNode.width = pviewNode.width;
// canvasNode.height = pviewNode.height;
// canvasNode.className = pviewNode.className;
// canvasNode.draggable = true;
// canvasNode.addEventListener('dragstart', (event) => {event.preventDefault(); event.stopPropagation();});

// pviewNode.parentNode.replaceChild(canvasNode, pviewNode);
// pviewNode = canvasNode;
// pviewNode.id = "pview";
// pviewNode.addEventListener('dblclick', (event) => {toggleModal(event.target);});
// }

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

Expand All @@ -46,14 +47,14 @@ function userFun(data) {
return false;
}

function preview2D(node, buffer) {
let ctx = node.getContext('2d');
function preview2D(canvasNode, buffer) {
let ctx = canvasNode.getContext('2d');
let i = 5;
let factor = 10;//fixed value: from mm to cm
ctx.clearRect(0, 0, node.width, node.height);
ctx.clearRect(0, 0, canvasNode.width, canvasNode.height);
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)
let pPL = Math.min(canvasNode.width / jsonValues.pview.width, canvasNode.height / jsonValues.pview.height); // pixels per LED (width of circle)
let lOf = Math.floor((canvasNode.width - pPL*jsonValues.pview.width)/2); //left offeset (to center matrix)
if (jsonValues.pview.outputs) {
// console.log("preview2D jsonValues", jsonValues.pview);
for (var output of jsonValues.pview.outputs) {
Expand Down Expand Up @@ -91,7 +92,7 @@ let intersect = null;
let mousePointer = null;

//https://stackoverflow.com/questions/8426822/rotate-camera-in-three-js-with-mouse
function preview3D(node, buffer) {
function preview3D(canvasNode, buffer) {
//3D vars
// let mW = buffer[0];
// let mH = buffer[1];
Expand All @@ -100,7 +101,7 @@ function preview3D(node, buffer) {

function onMouseMove( event ) {

let canvasRect = node.getBoundingClientRect();
let canvasRect = canvasNode.getBoundingClientRect();

if (!mousePointer) mousePointer = new THREE.Vector2();
mousePointer.x = ((event.clientX - canvasRect.left) / canvasRect.width) * 2 - 1;
Expand Down Expand Up @@ -149,16 +150,12 @@ function preview3D(node, buffer) {

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

renderer = new THREE.WebGLRenderer({canvas: node, antialias: true, alpha: true });
renderer = new THREE.WebGLRenderer({canvas: canvasNode, antialias: true, alpha: true });
// THREE.Object3D.DefaultUp = new THREE.Vector3(0,1,1);
renderer.setClearAlpha(0)
renderer.setClearColor( 0x000000, 0 );
// renderer.setSize( 300, 150);
// node.parentNode.appendChild( renderer.domElement );
// rect = renderer.domElement.getBoundingClientRect();

camera = new THREE.PerspectiveCamera( 45, node.width/node.height, 1, 500);
// const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
camera = new THREE.PerspectiveCamera( 45, canvasNode.width/canvasNode.width, 1, 500); //aspectRatio is 1 for the time being
camera.position.set( 0, 0, d*Math.sqrt(jsonValues.pview.width*jsonValues.pview.width + jsonValues.pview.height*jsonValues.pview.height + jsonValues.pview.depth*jsonValues.pview.depth) );
camera.lookAt( 0, 0, 0 );

Expand All @@ -173,8 +170,8 @@ function preview3D(node, buffer) {

raycaster = new THREE.Raycaster();

node.addEventListener( 'mousemove', onMouseMove );
node.addEventListener('mousedown', onMouseDown, false);
canvasNode.addEventListener( 'mousemove', onMouseMove );
canvasNode.addEventListener('mousedown', onMouseDown, false);
//prevent default behavior
// if (gId("canvasMenu").addEventListener) {
// gId("canvasMenu").addEventListener('contextmenu', function (e) {
Expand Down Expand Up @@ -252,8 +249,12 @@ function preview3D(node, buffer) {

//animate / render
if (jsonValues.pview) {
if (renderer.width != gId("pview").width || renderer.height != gId("pview").height)
renderer.setSize( gId("pview").width, gId("pview").height);
//https://stackoverflow.com/questions/29884485/threejs-canvas-size-based-on-container
if (canvasNode.width != canvasNode.clientWidth) { //} || canvasNode.height != canvasNode.clientHeight) {
console.log("3D pview update size", canvasNode.width, canvasNode.clientWidth, canvasNode.height, canvasNode.clientHeight);
renderer.setSize(canvasNode.clientWidth, canvasNode.clientWidth, false); //Setting updateStyle to false prevents any style changes to the output canvas.
}

//light up the cube
let firstLed = 5;
var i = 1;
Expand Down Expand Up @@ -316,15 +317,15 @@ function preview3D(node, buffer) {
}); //import Three
} //preview3D

function previewBoard(node, buffer) {
let ctx = node.getContext('2d');
function previewBoard(canvasNode, buffer) {
let ctx = canvasNode.getContext('2d');
//assuming 20 pins
let mW = 10; // matrix width
let mH = 2; // 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 pPL = Math.min(canvasNode.width / mW, canvasNode.height / mH); // pixels per LED (width of circle)
let lOf = Math.floor((canvasNode.width - pPL*mW)/2); //left offeset (to center matrix)
let i = 5;
ctx.clearRect(0, 0, node.width, node.height);
ctx.clearRect(0, 0, canvasNode.width, canvasNode.height);
for (let y=0.5;y<mH;y++) for (let x=0.5; x<mW; x++) {
if (buffer[i] + buffer[i+1] + buffer[i+2] > 20) { //do not show nearly blacks
ctx.fillStyle = `rgb(${buffer[i]},${buffer[i+1]},${buffer[i+2]})`;
Expand Down
20 changes: 14 additions & 6 deletions data/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,12 +201,20 @@ div {
}

/* drag and drop style */
.mdlContainer {
.mdlContainer2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.mdlContainer3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.mdlContainer4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.module {

.module, .appmod, .sysmod, .usermod {
border: 3px solid var(--border-color);
/* background-color: #ddd; */
/* background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%); */
Expand All @@ -217,9 +225,9 @@ div {
cursor: move;
}

/* .module:hover {
.module.over, .appmod.over, .sysmod.over, .usermod.over {
background-color: #00BFFF;
} */
}

.mdlColumn {
border: 3px solid var(--border-color);
Expand All @@ -229,7 +237,7 @@ div {
/* cursor: move; */
}

.module.over, .mdlColumn.over {
.module.over, .appmod.over, .sysmod.over, .usermod.over, .mdlColumn.over {
border: 3px dotted var(--border-color);
}

Expand Down
6 changes: 3 additions & 3 deletions data/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
<h1>StarMod by MoonModules 💫 <div id="instanceName"></div></h1>
<input type="button" value="App" id="vApp" onclick="setView(this)">
<input type="button" value="Stage" id="vStage" onclick="setView(this)">
<!-- <input type="button" value="User" id="vUser" onclick="setView(this)"> -->
<input type="button" value="User" id="vUser" onclick="setView(this)">
<input type="button" value="System" id="vSys" onclick="setView(this)">
<input type="button" value="All" id="vAll" onclick="setView(this)">
<span> | </span>
Expand All @@ -55,9 +55,9 @@ <h1>StarMod by MoonModules 💫 <div id="instanceName"></div></h1>
<option value="space">Space</option>
<option value="nyan">Nyan</option>
</select>
<div id="instPH"></div>
<!-- <div id="instPH"></div> -->
</div>
<div id="mdlContainer" class="mdlContainer">
<div id="mdlContainer">
<div id="mdlColumn0" class = "mdlColumn">
</div>
<div id="mdlColumn1" class = "mdlColumn">
Expand Down
Loading

0 comments on commit 7049b6e

Please sign in to comment.