values displayed

index.html

@@ -188,6 +188,7 @@
 
     <script src="js/script.js"></script>
 
+    <script src="js/Managers/themeManager.js"></script>
     <script src="js/Managers/canvasManager.js"></script>
     <script src="js/Managers/interactionManager.js"></script>
     <script src="js/Managers/eventManager.js"></script>

js/Draw/MLPView.js

@@ -9,16 +9,13 @@ class MlpView extends Draggable {
     this.propsShown = true;
     this.selected = false;
     this.initialized = false;
-    this.buttons = [];
-    this.initializeButtons();
+    this.controlButtons = [];
+    this.initButton;
+    this.createToggleMlpButton();
     this.initializeLayers(initialLayer);
     this.updateBorders();
   }
 
-  getToggleMlpButton() {
-    return this.buttons[0];
-  }
-
   isInitialized() {
     return this.initialized;
   }
@@ -27,12 +24,34 @@ class MlpView extends Draggable {
     const btn = new TextButton("Initialize MLP", () => {
       this.toggleMlp();
     });
-    btn.setDimensions(100, 25).disable();
-    return btn;
+    btn.setDimensions(100, 35).disable();
+    this.initButton = btn;
+  }
+
+  createGoOnceButton() {
+    const btn = new TextButton("Go Once", () => {
+      console.log("go once");
+    });
+    btn.setDimensions(75, 35).setTheme("green");
+    this.controlButtons.push(btn);
+  }
+  createTogglePlayButton() {
+    const btn = new TextButton("Play", () => {
+      console.log("play");
+    });
+    btn.setDimensions(75, 35).setTheme("cyan");
+    this.controlButtons.push(btn);
+  }
+
+  destroyControlButtons() {
+    this.controlButtons.forEach((b) => b.destroy()); // probably no needed
+    this.controlButtons = [];
   }
 
-  initializeButtons() {
-    this.buttons.push(this.createToggleMlpButton());
+  createControlButtons() {
+    this.createGoOnceButton();
+    this.createTogglePlayButton();
+    this.updateButtonsCoordinates();
   }
 
   initializeLayers(initialLayer) {
@@ -42,21 +61,15 @@ class MlpView extends Draggable {
   }
 
   toggleMlp() {
-    if (this.initialized) {
-      this.destroyMlp();
-      this.updateToggleMlpButton("Initialize MLP", "blue");
-    } else {
-      this.createMlp();
-      this.updateToggleMlpButton("Terminate MLP", "red");
-    }
+    this.isInitialized() ? this.destroyMlp() : this.initializeMlp();
     this.toggleLockLayers();
   }
 
   updateToggleMlpButton(text, theme) {
-    this.getToggleMlpButton().setText(text).setTheme(theme);
+    this.initButton.setText(text).setTheme(theme);
   }
 
-  createMlp() {
+  initializeMlp() {
     const layers = this.layers;
     const mlp = new MLP([], this.lr, this.batchSize);
     for (let i = 1; i < layers.length; i++) {
@@ -70,6 +83,8 @@ class MlpView extends Draggable {
     }
     this.setOrigin(mlp);
     this.initialized = true;
+    this.updateToggleMlpButton("Terminate MLP", "red");
+    this.createControlButtons();
   }
 
   clearOrigin() {
@@ -81,6 +96,8 @@ class MlpView extends Draggable {
     this.origin.destroy();
     this.clearOrigin();
     this.initialized = false;
+    this.updateToggleMlpButton("Initialize MLP", "blue");
+    this.destroyControlButtons();
   }
 
   select() {
@@ -102,11 +119,14 @@ class MlpView extends Draggable {
   }
 
   updateButtonsCoordinates() {
-    const buttons = this.buttons;
-    buttons[0].setCoordinates(
-      this.x + this.w - this.buttons[0].w,
-      this.y + this.h + 5,
-    );
+    const initBtn = this.initButton;
+    const y = this.y + this.h + 5;
+    initBtn.setCoordinates(this.x + this.w - initBtn.w, y);
+
+    this.controlButtons.forEach((b, i) => {
+      const x = this.x + (this.w - b.w) / 2 + (i % 2 ? 1 : -1) * 40;
+      b.setCoordinates(x, y);
+    });
   }
 
   setLabel(label) {
@@ -174,8 +194,8 @@ class MlpView extends Draggable {
   }
 
   checkMlpCompleted() {
-    const initializeButton = this.buttons[0];
-    this.isCompleted() ? initializeButton.enable() : initializeButton.disable();
+    const initBtn = this.initButton;
+    this.isCompleted() ? initBtn.enable() : initBtn.disable();
   }
 
   setOrigin(obj) {
@@ -192,15 +212,6 @@ class MlpView extends Draggable {
     this.destroy();
   }
 
-  destroy() {
-    this.getLayers().forEach((l) => l.destroy());
-    this.setLayers([]);
-    if (editMLPOrganizer.getSelected() == this) {
-      editMLPOrganizer.disable();
-    }
-    mainOrganizer.removeMlpView(this);
-  }
-
   pushLayer(layer) {
     layer.parent = this;
     this.getLayers().push(layer);
@@ -237,7 +248,8 @@ class MlpView extends Draggable {
     this.getLayers().forEach((layer) => layer.pressed());
     if (iManager.isBusy()) return;
 
-    this.buttons.forEach((btn) => btn.handlePressed());
+    this.controlButtons.forEach((btn) => btn.handlePressed());
+    this.initButton.handlePressed();
     this.pressed();
   }
 
@@ -281,6 +293,15 @@ class MlpView extends Draggable {
     // So we need to call handleRelease to free iManager
   }
 
+  destroy() {
+    this.getLayers().forEach((l) => l.destroy());
+    this.setLayers([]);
+    if (editMLPOrganizer.getSelected() == this) {
+      editMLPOrganizer.disable();
+    }
+    mainOrganizer.removeMlpView(this);
+  }
+
   showProps() {
     const commands = [
       {
@@ -314,6 +335,7 @@ class MlpView extends Draggable {
     this.show();
     this.isPropsShown() && this.showProps();
     this.getLayers().forEach((layer) => layer.draw());
-    this.buttons.forEach((btn) => btn.draw());
+    this.controlButtons.forEach((btn) => btn.draw());
+    this.initButton.draw();
   }
 }

js/Draw/Minors/Buttons/CanvasButton.js

@@ -32,7 +32,6 @@ class CanvasButton {
 
   destroy() {
     this.onClick = null;
-    this.img = null;
   }
 
   setCoordinates(x, y) {

js/Draw/Minors/Buttons/TextButton.js

@@ -13,17 +13,11 @@ class TextButton extends CanvasButton {
 
   getTheme() {
     const alpha = this.isDisabled() ? 125 : 255;
-    let defaultColor;
-    let activeColor;
-    if (this.theme == "blue") {
-      defaultColor = [0, 86, 179, alpha];
-      activeColor = [0, 123, 255, alpha];
-    } else if (this.theme == "red") {
-      defaultColor = [244, 63, 94, alpha];
-      activeColor = [199, 44, 72, alpha];
-    }
-
-    return { defaultColor, activeColor };
+    const { defaultColor, activeColor } = themeManager.getTheme(this.theme);
+    return {
+      defaultColor: [...defaultColor, alpha],
+      activeColor: [...activeColor, alpha],
+    };
   }
 
   setText(text) {

js/Draw/Minors/Line.js

@@ -19,7 +19,7 @@ class Line {
   }
 
   getWeight() {
-    return this.w?.data.toFixed(4).toString() ?? "";
+    return this.w?.getFixedData(4) ?? "";
   }
 
   destroy() {
@@ -48,7 +48,7 @@ class Line {
     let offsetX = (lineLength - totalTextWidth) / 2;
 
     let x = x1 + cos(angle) * offsetX;
-    let y = y1 + sin(angle) * offsetX;
+    let y = y1 - 2 + sin(angle) * offsetX;
 
     for (let i = 0; i < text.length; i++) {
       const commands = [
@@ -57,6 +57,7 @@ class Line {
           args: [x, y],
         },
         { func: "rotate", args: [angle] },
+        { func: "textSize", args: [8] },
         { func: "text", args: [text[i], 0, 0] },
       ];
       executeDrawingCommands(commands);

js/Draw/NeuronView.js

@@ -5,6 +5,7 @@ class NeuronView {
     this.hidden = false;
     this.lines = [];
     this.origin = null;
+    this.r = 25;
   }
 
   clearOrigin() {
@@ -51,19 +52,26 @@ class NeuronView {
     this.instance = null;
   }
 
-  show() {
+  showOriginProps() {
+    const origin = this.origin;
+    const o = origin.output;
+    const b = origin.b;
     const commands = [
-      { func: "fill", args: [255] },
-      { func: "circle", args: [this.x, this.y, 25, 25] },
-      { func: "fill", args: [0] },
-      {
-        func: "text",
-        args: [this.output?.data.toFixed(2), this.x + 30, this.y],
-      },
+      { func: "textAlign", args: [CENTER, CENTER] },
+      { func: "textSize", args: [8] },
       {
         func: "text",
-        args: [this.output?.grad.toFixed(2), this.x + 30, this.y + 25],
+        args: [b.getFixedData(2), this.x, this.y - this.r / 2 - 5],
       },
+      { func: "text", args: [o.getFixedData(2), this.x, this.y] },
+    ];
+    executeDrawingCommands(commands);
+  }
+
+  show() {
+    const commands = [
+      { func: "fill", args: [255] },
+      { func: "circle", args: [this.x, this.y, this.r] },
     ];
     executeDrawingCommands(commands);
   }
@@ -72,6 +80,7 @@ class NeuronView {
     if (!this.hidden) {
       this.lines.forEach((line) => line.draw());
       this.show();
+      this.origin && this.showOriginProps();
     }
   }
 }

js/MLP/Neuron.js

@@ -5,6 +5,7 @@ class Neuron {
       () => new Value(Math.random() * 2 - 1),
     );
     this.b = new Value(Math.random() * 2 - 1);
+    this.output = new Value(0);
     this.act_func = ActivationFunction.TANH;
   }
 

js/MLP/Value.js

@@ -8,6 +8,14 @@ class Value {
     this.backward = () => {};
   }
 
+  getFixedData(fixedNum) {
+    return this.data.toFixed(fixedNum);
+  }
+
+  getFixedGrad() {
+    return this.grad.toFixed(4);
+  }
+
   convert(val) {
     return val instanceof Value ? val : new Value(val);
   }

js/Managers/themeManager.js

@@ -0,0 +1,53 @@
+class ThemeManager {
+  constructor() {
+    let CYAN;
+    let BLUE;
+    let ROSE;
+    let YELLOW;
+    let GREEN;
+    let WHITE;
+    let GRAY;
+    let SKY;
+  }
+
+  getTheme(themeColor) {
+    let defaultColor;
+    let activeColor;
+
+    switch (themeColor) {
+      case "blue":
+        defaultColor = [0, 86, 179];
+        activeColor = [0, 123, 255];
+        break;
+      case "red":
+        defaultColor = [244, 63, 94];
+        activeColor = [199, 44, 72];
+        break;
+      case "cyan":
+        defaultColor = [5, 156, 176];
+        activeColor = [6, 182, 212];
+        break;
+      case "yellow":
+        defaultColor = [200, 155, 19];
+        activeColor = [250, 204, 21];
+        break;
+      case "green":
+        defaultColor = [60, 141, 96];
+        activeColor = [74, 222, 128];
+        break;
+      case "white":
+        defaultColor = [255, 255, 255];
+        activeColor = [230, 230, 230];
+        break;
+      case "gray":
+        defaultColor = [107, 114, 128];
+        activeColor = [74, 74, 74];
+        break;
+      default:
+        defaultColor = [74, 144, 226];
+        activeColor = [28, 100, 242];
+        break;
+    }
+    return { defaultColor, activeColor };
+  }
+}

js/canvas.js

@@ -4,13 +4,15 @@ let editMLPOrganizer;
 let iManager;
 let tableOrganizer;
 let datasetOrganizer;
+let themeManager;
 
 let canvasManager;
 
 let mainSketch = function (p) {
   p.setup = function () {
     p.createCanvas(p.windowWidth, p.windowHeight).parent(document.body);
 
+    themeManager = new ThemeManager();
     canvasManager = new CanvasManager(p);
     mainOrganizer = new MainOrganizer();
     editMLPOrganizer = new EditMLPOrganizer();