-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Newui: add sysInfo and Canvas type -> show board on canvas
index.js - add sysInfo - fetchModelForLiveServer: send sysInfo - fetchModelForLiveServer: send board data - receiveData: process sysInfo modules.js - add PinType enum - previewBoard in modules class - add CanvasVariable webbundle: also check data folder
- Loading branch information
1 parent
8fabcba
commit 94107f9
Showing
6 changed files
with
2,088 additions
and
1,881 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -7,6 +7,12 @@ | |
| // @license GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 | ||
| // @license For non GPL-v3 usage, commercial licenses must be purchased. Contact [email protected] | ||
|
|
||
| const pinTypeIO = 0; | ||
| const pinTypeReadOnly = 1; | ||
| const pinTypeReserved = 2; | ||
| const pinTypeSpi = 3; | ||
| const pinTypeInvalid = UINT8_MAX; | ||
|
|
||
| class Modules { | ||
|
|
||
| model = [] //model.json (as send by the server), used by FindVar | ||
|
|
@@ -87,26 +93,127 @@ class Modules { | |
| if (variable.id == id) //found variable | ||
| return variable; //this stops the walkThrough | ||
| }) | ||
|
|
||
| } | ||
|
|
||
| previewBoard(canvasNode, buffer) { | ||
| let boardColor; | ||
| if (controller.sysInfo.board == "esp32s2") boardColor = "purple"; | ||
| else if (controller.sysInfo.board == "esp32s3") boardColor = "blue"; | ||
| else boardColor = "green"; | ||
| // console.log("previewBoard", buffer, controller.sysInfo) | ||
|
|
||
| let ctx = canvasNode.getContext('2d'); | ||
| //assuming 20 pins | ||
| let mW = controller.sysInfo.nrOfPins<=40?2:4; // nr of pin columns | ||
| let mH = controller.sysInfo.nrOfPins / mW; // pins per column | ||
| let pPL = Math.min(canvasNode.width / mW, canvasNode.height / (mH+2)); // pixels per LED (width of circle) | ||
| let bW = pPL*10; | ||
| let bH = mH * pPL; | ||
| let lOf = Math.floor((canvasNode.width - bW) / 2); //left offset (to center matrix) | ||
| // let i = 5; | ||
|
|
||
| let pos = {}; | ||
|
|
||
| ctx.clearRect(0, 0, canvasNode.width, canvasNode.height); | ||
|
|
||
| pos.x = lOf; pos.y = pPL; | ||
| //board | ||
| ctx.beginPath(); | ||
| ctx.fillStyle = boardColor; | ||
| ctx.fillRect(pos.x, pos.y, bW, bH); | ||
|
|
||
| //wifi | ||
| ctx.fillStyle = "darkBlue"; | ||
| if (mW == 2) | ||
| ctx.fillRect(pos.x + 1.5*pPL, 0, pPL * 7, pPL * 3); | ||
| else | ||
| ctx.fillRect(pos.x + 2.5*pPL, 0, pPL * 5, pPL * 3); | ||
|
|
||
| //cpu | ||
| ctx.fillStyle = "gray"; | ||
| if (mW == 2) | ||
| ctx.fillRect(pos.x + 1.5*pPL, pos.y + 3*pPL, pPL * 7, pPL * 7); | ||
| else | ||
| ctx.fillRect(pos.x + 2.5*pPL, pos.y + 3*pPL, pPL * 5, pPL * 5); | ||
|
|
||
|
|
||
| //esp32 text | ||
| ctx.beginPath(); | ||
| ctx.font = pPL *1.5 + "px serif"; | ||
| ctx.fillStyle = "black"; | ||
| ctx.textAlign = "center"; | ||
| ctx.fillText(controller.sysInfo.board, pos.x + 5*pPL, pos.y + 6 * pPL); | ||
|
|
||
| //chip | ||
| if (mW == 2) { //no space if 4 columns | ||
| ctx.fillStyle = "black"; | ||
| ctx.fillRect(pos.x + 6 * pPL, pos.y + 12*pPL, pPL * 2, pPL * 5); | ||
| } | ||
|
|
||
| //usb | ||
| ctx.fillStyle = "grey"; | ||
| ctx.fillRect(pos.x + 3.5 * pPL, bH - pPL, pPL * 3, pPL * 3); | ||
|
|
||
| let index = 0; | ||
| for (let x = 0; x < mW; x++) { | ||
| for (let y = 0; y < mH; y++) { | ||
| let pinType = controller.sysInfo.pinTypes[index]; | ||
| let pinColor = []; | ||
| switch (pinType) { | ||
| case pinTypeIO: | ||
| pinColor = [78,173,50]; // green | ||
| break; | ||
| case pinTypeReadOnly: | ||
| pinColor = [218,139,49];//"orange"; | ||
| break; | ||
| case pinTypeReserved: | ||
| pinColor = [156,50,246];//"purple"; | ||
| break; | ||
| default: | ||
| pinColor = [192,48,38];//"red"; | ||
| } | ||
| ctx.fillStyle = `rgba(${pinColor[0]},${pinColor[1]},${pinColor[2]},${buffer[index + 5]})`; | ||
| pos.y = (y+0.5)*pPL + pPL; | ||
| ctx.beginPath(); | ||
| if ((x == 0 && mW == 2) || (x <= 1 && mW == 4)) | ||
| pos.x = (x+0.5)*pPL + lOf; | ||
| else if (mW == 2) | ||
| pos.x = (x+0.5)*pPL + lOf + 8 * pPL; | ||
| else | ||
| pos.x = (x+0.5)*pPL + lOf + 6 * pPL; | ||
| ctx.arc(pos.x, pos.y, pPL * 0.4, 0, 2 * Math.PI); | ||
| ctx.fill(); | ||
|
|
||
| ctx.beginPath(); | ||
| ctx.font = pPL*0.5 + "px serif"; | ||
| ctx.fillStyle = "black"; | ||
| ctx.textAlign = "center"; | ||
| ctx.fillText(index, pos.x, pos.y + pPL / 4); | ||
|
|
||
| index++; | ||
| } | ||
| } | ||
| } //previewBoard | ||
|
|
||
| } //class Modules | ||
|
|
||
| //see this.otherMethodInThisClass, should be moved in Modules class | ||
| //creates the right class based on variable.type | ||
| function varJsonToClass(variable) { | ||
| switch (variable.type) { | ||
| case "button": | ||
| return new ButtonVariable(variable); | ||
| case "progress": | ||
| return new ProgressVariable(variable); | ||
| case "text": | ||
| return new TextVariable(variable); | ||
| case "select": | ||
| return new SelectVariable(variable); | ||
| case "checkbox": | ||
| return new CheckboxVariable(variable); | ||
| default: | ||
| case "button": | ||
| return new ButtonVariable(variable); | ||
| case "select": | ||
| return new SelectVariable(variable); | ||
| case "progress": | ||
| return new ProgressVariable(variable); | ||
| case "canvas": | ||
| return new CanvasVariable(variable); | ||
| default: | ||
| return new Variable(variable); | ||
| } | ||
| } | ||
|
|
@@ -215,4 +322,16 @@ class ProgressVariable extends Variable { | |
| return super.createHTML(`<progress max="${this.variable.max}" id="${this.variable.id}" class="progress"></progress>`) | ||
| } | ||
|
|
||
| } //class ProgressVariable | ||
| } //class ProgressVariable | ||
|
|
||
| class CanvasVariable extends Variable { | ||
|
|
||
| createHTML() { //base | ||
| return super.createHTML(`<canvas id=${this.variable.id} class="${this.variable.type}" value="${this.variable.value}"></canvas>`); | ||
| } | ||
|
|
||
| generateData() { | ||
| super.generateData(`"value":"${Math.random().toString(36).slice(2)}"`) | ||
| } | ||
|
|
||
| } //class CanvasVariable | ||
Oops, something went wrong.