From 3729a73028bed5fe0b31a3d8fa4d59f8bcaedc9c Mon Sep 17 00:00:00 2001 From: MatCat Date: Thu, 4 Mar 2021 16:29:46 -0800 Subject: [PATCH] 0.3.10: Added BCD and Decimal modes to the Display element --- README.md | 3 +++ js/baseclasses.js | 7 ++++++ js/elements.js | 57 +++++++++++++++++++++++++++++++++++++------ js/globalfunctions.js | 8 +++--- js/logicengine.js | 9 ++++--- js/main.js | 2 +- 6 files changed, 70 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 4f0d2d7..387cd3e 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,9 @@ To be decided, but at this moment this code is open source and free to use for n ## Changelog +### 0.3.10 +* Added BCD and Decimal options to the 4 bit output display, as well as bit labels in inputs + ### 0.3.9 * Added grid alignment, hold CTRL key while moving to get pixel level positioning. diff --git a/js/baseclasses.js b/js/baseclasses.js index 652a867..f6fe603 100644 --- a/js/baseclasses.js +++ b/js/baseclasses.js @@ -180,6 +180,13 @@ class elementContainer { case "color": contentString += ''; break; + case "list": + contentString += ''; + break; } contentString += ""; } diff --git a/js/elements.js b/js/elements.js index 6204eb8..37d3dca 100644 --- a/js/elements.js +++ b/js/elements.js @@ -1135,7 +1135,35 @@ class output4bitDisplay extends Element { this.Width = 100; this.Height = 100; this.Inputs = [0,0,0,0]; + this.InputLabels = ["3","2","1","0"]; + this.Type = 0; this.removeProperty("Inputs"); + let typeProperty = new ElementProperty("Type","list",{CBObject: this,CBFunction: "setType"},0,0,[{Value: "0", String: "Hex"},{Value: "1", String: "Decimal"},{Value: "2", String: "BCD"}],0,0); + this.Properties.push(typeProperty); + + if (RestoreData) { + if (RestoreData.Properties) { + this.Properties[0].CurrentValue = RestoreData.Properties[0].CurrentValue; + this.Properties[0].Values = RestoreData.Properties[0].Values; + this.setType(this.Properties[0].CurrentValue); + } + } + } + + setType(type) { + this.Properties[0].CurrentValue = type; + switch (type) { + case "0": + this.Type = 0; + break; + case "1": + this.Type = 1; + break; + case "2": + this.Type = 2; + break; + } + this.setInput(0,this.Inputs[0]); // Trigger a proper recalc of the display. } setInput(Input, Value) { @@ -1145,30 +1173,43 @@ class output4bitDisplay extends Element { this.OutputChar = (outchar); switch (outchar) { case 10: - this.OutputChar = 'A'; + if (this.Type == 0) this.OutputChar = 'A'; + if (this.Type == 1) this.OutputChar = '10'; + if (this.Type == 2) this.OutputChar = '0'; break; case 11: - this.OutputChar = 'B'; + if (this.Type == 0) this.OutputChar = 'B'; + if (this.Type == 1) this.OutputChar = '11'; + if (this.Type == 2) this.OutputChar = '1'; break; case 12: - this.OutputChar = 'C'; + if (this.Type == 0) this.OutputChar = 'C'; + if (this.Type == 1) this.OutputChar = '12'; + if (this.Type == 2) this.OutputChar = '2'; break; case 13: - this.OutputChar = 'D'; + if (this.Type == 0) this.OutputChar = 'D'; + if (this.Type == 1) this.OutputChar = '13'; + if (this.Type == 2) this.OutputChar = '3'; break; case 14: - this.OutputChar = 'E'; + if (this.Type == 0) this.OutputChar = 'E'; + if (this.Type == 1) this.OutputChar = '14'; + if (this.Type == 2) this.OutputChar = '4'; break; case 15: - this.OutputChar = 'F'; + if (this.Type == 0) this.OutputChar = 'F'; + if (this.Type == 1) this.OutputChar = '15'; + if (this.Type == 2) this.OutputChar = '5'; break; } - } drawElement(x, y, ctx) { this.drawBorderBox(ctx, x+20,y,this.Width-40,this.Height); - this.drawTextCentered(ctx,x,y,this.Width,this.Height,this.OutputChar,"72px Console"); + let fontStyle = "72px Console"; + if (this.Type == 1) fontStyle = "36px Console"; + this.drawTextCentered(ctx,x,y,this.Width,this.Height,this.OutputChar,fontStyle); this.drawInputs(ctx,x,y); } } diff --git a/js/globalfunctions.js b/js/globalfunctions.js index b83de13..e5e4787 100644 --- a/js/globalfunctions.js +++ b/js/globalfunctions.js @@ -4,8 +4,8 @@ function addElement(RestoreData = null,refClass,props) { if (!RestoreData) { let x = Math.round(logicEngine.Canvas.width / 2); let y = Math.round(logicEngine.Canvas.height / 2); - x = 20 * Math.round(x/20); - y = 20 * Math.round(y/20); + x = logicEngine.Settings.GridSize * Math.round(x/logicEngine.Settings.GridSize); + y = logicEngine.Settings.GridSize * Math.round(y/logicEngine.Settings.GridSize); let width = newElement.Width; let height = newElement.Height; @@ -20,8 +20,8 @@ function addElement(RestoreData = null,refClass,props) { if (y < 0) y = 0; if (x + width > logicEngine.Canvas.width) x = logicEngine.Canvas.width - width; if (y + height > logicEngine.Canvas.height) y = logicEngine.Canvas.height - height; - x = 20 * Math.round(x/20); - y = 20 * Math.round(y/20); + x = logicEngine.Settings.GridSize * Math.round(x/logicEngine.Settings.GridSize); + y = logicEngine.Settings.GridSize * Math.round(y/logicEngine.Settings.GridSize); } } diff --git a/js/logicengine.js b/js/logicengine.js index 61a96e5..a234605 100644 --- a/js/logicengine.js +++ b/js/logicengine.js @@ -8,6 +8,9 @@ class LogicEngineSettings { this.LinkingWidth = "3"; this.LinkingDash = [2,2]; this.ShadowColor = "#222"; + this.InputCircleSize = 10; + this.OutputCircleSize = 10; + this.GridSize = 20; } } @@ -23,7 +26,7 @@ class LogicEngine { gridPlane.height = this.Canvas.height; let Ctx = gridPlane.getContext("2d"); Ctx.save(); - let gridWidth = 20; + let gridWidth = this.Settings.GridSize; for (let x = gridWidth;x < (this.Canvas.width); x+= gridWidth) { Ctx.beginPath(); Ctx.moveTo(x,0); @@ -97,8 +100,8 @@ class LogicEngine { let diffyOffset = this.MovingElementMouseStartY - this.MovingElementStartY; let actualPosX = (this.MovingElementMouseStartX + xOffset) - diffxOffset; let actualPosY = (this.MovingElementMouseStartY + yOffset) - diffyOffset; - if (!this.ControlPressed) actualPosX = Math.round(actualPosX/20)*20; - if (!this.ControlPressed) actualPosY = Math.round(actualPosY/20)*20; + if (!this.ControlPressed) actualPosX = Math.round(actualPosX/this.Settings.GridSize)*this.Settings.GridSize; + if (!this.ControlPressed) actualPosY = Math.round(actualPosY/this.Settings.GridSize)*this.Settings.GridSize; this.MovingElement.X = actualPosX; this.MovingElement.Y = actualPosY; } diff --git a/js/main.js b/js/main.js index 9a7e430..b540ac6 100644 --- a/js/main.js +++ b/js/main.js @@ -2,7 +2,7 @@ MatCat BrowserLogic Simulator */ -let Version = "0.3.9"; +let Version = "0.3.10"; let spanVersion = document.getElementById("version"); spanVersion.innerText = Version; // get the canvas and get the engine object going