0.3.10: Added BCD and Decimal modes to the Display element

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.

js/baseclasses.js

@@ -180,6 +180,13 @@ class elementContainer {
         case "color":
           contentString += '<input type="color" id="prop_' + this.Selected.Properties[a].Name + '" value="' + this.Selected.Properties[a].CurrentValue + '" onchange="logicEngine.PropertyChange(' + String.fromCharCode(39) + this.Selected.Properties[a].Name +  String.fromCharCode(39) + ');">';
           break;
+        case "list":
+          contentString += '<select id="prop_' + this.Selected.Properties[a].Name + '" onchange="logicEngine.PropertyChange(' + String.fromCharCode(39) + this.Selected.Properties[a].Name +  String.fromCharCode(39) + ');">';
+          for (let b = 0; b < this.Selected.Properties[a].Values.length; b++) {
+            contentString += '<option value="' + this.Selected.Properties[a].Values[b].Value + '" '+ ((this.Selected.Properties[a].Values[b].Value == this.Selected.Properties[a].CurrentValue) ? ' selected' : '') + '>' + this.Selected.Properties[a].Values[b].String + '</option>';
+          }
+          contentString += '</select>';
+          break;
       }
       contentString += "</td></tr>";
     }

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);
   }
 }

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);
+    x = logicEngine.Settings.GridSize * Math.round(x/logicEngine.Settings.GridSize);
-    y = 20 * Math.round(y/20);
+    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);
+        x = logicEngine.Settings.GridSize * Math.round(x/logicEngine.Settings.GridSize);
-        y = 20 * Math.round(y/20);
+        y = logicEngine.Settings.GridSize * Math.round(y/logicEngine.Settings.GridSize);
 
       }
     }

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) actualPosX = Math.round(actualPosX/this.Settings.GridSize)*this.Settings.GridSize;
-          if (!this.ControlPressed) actualPosY = Math.round(actualPosY/20)*20;
+          if (!this.ControlPressed) actualPosY = Math.round(actualPosY/this.Settings.GridSize)*this.Settings.GridSize;
           this.MovingElement.X = actualPosX;
           this.MovingElement.Y = actualPosY;
         }

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