Add displays

src/modules/activation/types/Context.ts

@@ -12,6 +12,7 @@ export interface Context {
   printHex: (value: number, length?: number) => string
   setBinary: (index: number, value: number, bits?: number) => void
   getOutputBinary: (index: number) => number
+  displayBinary: (value: number) => void
   invertBinary: (value: number) => number
   color: (color: string) => void
   innerText: (value: string) => void

src/modules/logic-gate-info/data/descriptions.ts

@@ -7,87 +7,90 @@ const carryExplanation = (half = true) => `
 
 const output = `General purpouse output component.`
 const delay = `
-    The delay is a property of the gate and can be modified by left clicking on the gate in the simulation view.
+  The delay is a property of the gate and can be modified by left clicking on the gate in the simulation view.
 `
 
 export const descriptions: Record<string, string> = {
   not: `
-        The not gate is one of the most basic logic gates.
-        It outputs the inverse of the input
-    `,
+    The not gate is one of the most basic logic gates.
+    It outputs the inverse of the input
+  `,
   and: `
-        The and gate outputs true only if both inputs are true.
-        The and gate is the logic equivalent of f(x, y) = x * y
-    `,
+    The and gate outputs true only if both inputs are true.
+    The and gate is the logic equivalent of f(x, y) = x * y
+  `,
   or: `
-        The or gate outputs true if any of the inputs is true.
-        The or gate is the logic equivalent of f(x, y) = x + y - x * y
-    `,
+    The or gate outputs true if any of the inputs is true.
+    The or gate is the logic equivalent of f(x, y) = x + y - x * y
+  `,
   nand: `
-        The nand gate only outputs true if none or one of the inputs is true.
-        The nand gate is the logic equivalent of f(x, y) = 1 - x * y
-    `,
+    The nand gate only outputs true if none or one of the inputs is true.
+    The nand gate is the logic equivalent of f(x, y) = 1 - x * y
+  `,
   nor: `
-        The nor gate only outputs true if none of the inputs is true.
-        The nor gate is the logic equivalent of f(x, y) = 1 + x * y - (x + y)
-    `,
+    The nor gate only outputs true if none of the inputs is true.
+    The nor gate is the logic equivalent of f(x, y) = 1 + x * y - (x + y)
+  `,
   xor: `
-        The xor gate (also known as the 'exclusive or' gate) only outputs true if one and only one of the inputs is true.
-        The xor gate is the logic equivalent of f(x, y) = x + y - 2 * x * y
-    `,
+    The xor gate (also known as the 'exclusive or' gate) only outputs true if one and only one of the inputs is true.
+    The xor gate is the logic equivalent of f(x, y) = x + y - 2 * x * y
+  `,
   xnor: `
-        The xnor gate (also known as the 'not exlusive or' gate) only outputs true if none or both the inputs are true.
-        The xnor gate is the logic equivalent of f(x, y) = 1 - |x - y|
-    `,
+    The xnor gate (also known as the 'not exlusive or' gate) only outputs true if none or both the inputs are true.
+    The xnor gate is the logic equivalent of f(x, y) = 1 - |x - y|
+  `,
   'half adder': `
-        The half adder is used to add 2 numbers. It outputs a result and a carry.
-        ${carryExplanation()}
-        The half adder is the logic equivalent of f(x, y) = { x + y - 2 * x * y, x * y }
-    `,
+    The half adder is used to add 2 numbers. It outputs a result and a carry.
+    ${carryExplanation()}
+    The half adder is the logic equivalent of f(x, y) = { x + y - 2 * x * y, x * y }
+  `,
   'full adder': `
-        The full adder is the building block for almos all math related circuit.
-        The full adder is used to add 2 number and a carry. It outputs a result and a carry.
-        ${carryExplanation(false)}
-        The full adder is the logic equivalent of f(x, y, z) = {
-            x + y + z + 4 * x * y * z - 2 * (x * y + y * z + z * x),
-            x * y + y * z + z * x - 2 * x * y * z
-        }
-    `,
+    The full adder is the building block for almos all math related circuit.
+    The full adder is used to add 2 number and a carry. It outputs a result and a carry.
+    ${carryExplanation(false)}
+    The full adder is the logic equivalent of f(x, y, z) = {
+        x + y + z + 4 * x * y * z - 2 * (x * y + y * z + z * x),
+        x * y + y * z + z * x - 2 * x * y * z
+    }
+  `,
   comparator: `
-        Compares the 2 inputs. The first input is only true if a > b, the second input is
-        only true if a === b and the 3rd input is only true if a < b.
-    `,
+    Compares the 2 inputs. The first input is only true if a > b, the second input is
+    only true if a === b and the 3rd input is only true if a < b.
+  `,
   'parallel delayer': `
-        Delays the inputs by a amount of time. ${delay}
-    `,
+    Delays the inputs by a amount of time. ${delay}
+  `,
   'sequential delayer': `
-        Delays the input by a certain amount of time relative to the last change. ${delay}
-    `,
+    Delays the input by a certain amount of time relative to the last change. ${delay}
+  `,
   '4 bit encoder': `
-        Encodes the 4 inputs into a single output
-    `,
+    Encodes the 4 inputs into a single output
+  `,
   '4 bit decoder': `
-        Splits the input into 4 outputs
-    `,
+    Splits the input into 4 outputs
+  `,
   'bit merger': `
-        Merges the bits of both inputs into 1 output
-    `,
+    Merges the bits of both inputs into 1 output
+  `,
   'bit splitter': `
-        Splits the bits from the input into 2 chunks of the same length
-    `,
+    Splits the bits from the input into 2 chunks of the same length
+  `,
   button: `
-        Outputs either 0 or 1. Has no inputs. You can change its value by left clicking on it.
-    `,
+    Outputs either 0 or 1. Has no inputs. You can change its value by left clicking on it.
+  `,
   'light bulb': `
-        ${output} The color changes based on the input.
-    `,
+    ${output} The color changes based on the input.
+  `,
   'rgb light': `
-        ${output} The color is a based on the 3 inputs. The first input means red, the second green and the third blue.
-    `,
+    ${output} The color is a based on the 3 inputs. The first input means red, the second green and the third blue.
+  `,
   incrementor: `
-        Outputs the input + 1
-    `,
+    Outputs the input + 1
+  `,
   constant: `
-        Outputs a numeric constant configured (like any other property) by right-clicking the component
-    `
+    Outputs a numeric constant configured (like any other property) by right-clicking the component
+  `,
+  display: `
+    Displays the input value as binary/hexadecimal.
+  `
 }

src/modules/saving/constants.ts

@@ -21,6 +21,7 @@ import bitMergerTemplate from './templates/bitMerger'
 import bitSplitterTemplate from './templates/bitSplitter'
 import incrementorTemplate from './templates/incrementor'
 import constantTemplate from './templates/constant'
+import displayTemplate from './templates/display'
 
 export const defaultSimulationName = 'default'
 export const baseTemplates: DeepPartial<GateTemplate>[] = [
@@ -44,7 +45,8 @@ export const baseTemplates: DeepPartial<GateTemplate>[] = [
   bitMergerTemplate,
   bitSplitterTemplate,
   incrementorTemplate,
-  constantTemplate
+  constantTemplate,
+  displayTemplate
 ]
 
 export const baseSave: RendererState = {

src/modules/saving/templates/constant.ts

@@ -19,12 +19,9 @@ const constTemplate: PartialTemplate = {
       const state = context.getProperty('value')
       const bits = context.getProperty('output bits')
       const length = state.toString(2).length
-      const text = length > 10
-        ? "0x" + context.printHex(state, Math.ceil(length/4))
-        : context.printBinary(state, length)
 
+      context.displayBinary(state)
       context.setBinary(0, state, bits === 0 ? length : bits)
-      context.innerText(text)
     `
   },
   pins: {

src/modules/saving/templates/display.ts

@@ -0,0 +1,31 @@
+import { PartialTemplate } from '../types/PartialTemplate'
+import { categories } from '../data/categories'
+
+/**
+ * The template of the display gate
+ */
+const displayTemplate: PartialTemplate = {
+  metadata: {
+    name: 'display'
+  },
+  material: {
+    fill: '#673AB7',
+    stroke: {
+      normal: '#EDC6FB'
+    }
+  },
+  code: {
+    activation: `
+      context.displayBinary(context.getBinary(0))
+    `
+  },
+  pins: {
+    outputs: {
+      count: 0
+    }
+  },
+  info: [],
+  category: categories.io
+}
+
+export default displayTemplate

src/modules/saving/templates/light.ts

@@ -22,12 +22,10 @@ const lightTemplate: PartialTemplate = {
   },
   code: {
     activation: `
-            const { main, active } = context.colors
+      const { main, active } = context.colors
 
-            const bits = context.get(0)
-
-            context.color(parseInt(context.get(0),2) ? active : main)
-        `
+      context.color(context.getBinary(2) ? active : main)
+    `
   },
   integration: {
     output: true

src/modules/simulation/classes/Gate.ts

@@ -439,11 +439,20 @@ export class Gate {
       }
     }
 
-    return {
+    const context: Context = {
       printBinary: (value: number, bits: number = maxLength) =>
         toLength(value.toString(2), bits),
       printHex: (value: number, bits: number = maxLength) =>
         toLength(value.toString(16), bits),
+      displayBinary: (value: number) => {
+        const length = value.toString(2).length
+        const text =
+          length > 10
+            ? '0x' + context.printHex(value, Math.ceil(length / 4))
+            : context.printBinary(value, length)
+
+        context.innerText(text)
+      },
       get: (index: number) => {
         return this._pins.inputs[index].state.value
       },
@@ -504,6 +513,8 @@ export class Gate {
         ...this.template.material.colors
       }
     }
+
+    return context
   }
 
   /**