Daniel/control panel overhaul (#70)

* major changes * new files * another file * saving for now pattern panel good * lots of work but not done * some work on color picker panel * some work * Lots of work and the color picker is looking nice * lots of work and improvement * things looking good here * color picker fixed and working * pretty stable for now * some fixes * more fixes * sorted out proper resizing and scaling device image * improved some things * More fixes and welcome panel * removed old colorpicker code
Unreal-Dan · Dec 7, 2024 · 5cd87dc · 5cd87dc
1 parent 9cb1c38
commit 5cd87dc
Show file tree

Hide file tree

Showing 22 changed files with 2,476 additions and 731 deletions.
diff --git a/css/styles.css b/css/styles.css
diff --git a/index.html b/index.html
@@ -7,6 +7,5 @@
     <link rel="stylesheet" type="text/css" href="css/styles.css">
   </head>
   <body>
-    <canvas id="lightshowCanvas" width="800" height="600"></canvas>
   </body>
 </html>
diff --git a/js/AboutPanel.js b/js/AboutPanel.js
@@ -1,20 +1,56 @@
-/* AboutPanel.js */
-import Panel from './Panel.js'
+import Panel from './Panel.js';
 
 export default class AboutPanel extends Panel {
-  constructor(lightshow, vortexPort) {
+  constructor(editor) {
     const content = `
-            <label>Made with Vortex Engine&nbsp;&nbsp;</label>
-            <a href="https://github.com/StoneOrbits/VortexEngine" target="_blank" aria-label="View on GitHub">
-                <i class="fab fa-github"></i>
-            </a>
-        `;
-    super('aboutPanel', content);
-    this.lightshow = lightshow
-    this.vortexPort = vortexPort;
+      <div class="about-panel-content">
+        <label class="about-label">Made with Vortex Engine</label>
+        <div class="action-buttons">
+          <button id="githubLinkButton" class="icon-button" aria-label="View on Github">
+            <i class="fab fa-github" title="View on Github"></i>
+          </button>
+          <button id="patternHelpButton" class="icon-button" aria-label="Help">
+            <i class="fas fa-question-circle" title="Help"></i>
+          </button>
+        </div>
+      </div>
+    `;
+    super('aboutPanel', content, 'Help & About');
+    this.editor = editor;
+    this.lightshow = editor.lightshow;
+    this.vortexPort = editor.vortexPort;
   }
 
   initialize() {
-    // ...
+    this.addClickListener('patternHelpButton', this.showHelp);
+    this.addClickListener('githubLinkButton', this.gotoGithub);
+    // collapse the about panel by default
+    this.toggleCollapse(false);
+  }
+
+  addClickListener(buttonId, callback) {
+    const button = document.getElementById(buttonId);
+    if (button) {
+      button.addEventListener('click', callback.bind(this));
+    } else {
+      console.error(`Button with ID ${buttonId} not found.`);
+    }
+  }
+
+  gotoGithub() {
+    try {
+      window.open("https://github.com/StoneOrbits/VortexEngine", '_blank').focus();
+    } catch (error) {
+      console.error("Could not open GitHub link:", error);
+    }
+  }
+
+  showHelp() {
+    try {
+      window.open("https://stoneorbits.github.io/VortexEngine/lightshow_lol.html", '_blank').focus();
+    } catch (error) {
+      console.error("Could not open help link:", error);
+    }
   }
 }
+
diff --git a/js/AnimationPanel.js b/js/AnimationPanel.js
@@ -0,0 +1,143 @@
+import Panel from './Panel.js';
+
+export default class AnimationPanel extends Panel {
+  constructor(editor) {
+    const controls = [
+      {
+        id: 'tickRate',
+        type: 'range',
+        min: 1,
+        max: 30,
+        default: 3,
+        label: 'Speed',
+        update: value => editor.lightshow.tickRate = value,
+      },
+      {
+        id: 'trailSize',
+        type: 'range',
+        min: 1,
+        max: 300,
+        default: 100,
+        label: 'Trail',
+        update: value => editor.lightshow.trailSize = value,
+      },
+      {
+        id: 'dotSize',
+        type: 'range',
+        min: 5,
+        max: 50,
+        default: 25,
+        label: 'Size',
+        update: value => editor.lightshow.dotSize = value,
+      },
+      {
+        id: 'blurFac',
+        type: 'range',
+        min: 1,
+        max: 10,
+        default: 5,
+        label: 'Blur',
+        update: value => editor.lightshow.blurFac = value,
+      },
+      {
+        id: 'circleRadius',
+        type: 'range',
+        min: 0,
+        max: 600,
+        default: 400,
+        label: 'Radius',
+        update: value => editor.lightshow.circleRadius = value,
+      },
+      {
+        id: 'spread',
+        type: 'range',
+        min: 0,
+        max: 100,
+        default: 15,
+        label: 'Spread',
+        update: value => editor.lightshow.spread = parseInt(value),
+      },
+    ];
+
+    const content = `
+      <div class="animation-buttons-container">
+        <button class="animation-button" id="renderCircleButton" title="Circle">
+          <i class="fa fa-circle"></i>
+        </button>
+        <button class="animation-button" id="renderInfinityButton" title="Infinity">
+          <i class="fa fa-infinity"></i>
+        </button>
+        <button class="animation-button" id="renderHeartButton" title="Heart">
+          <i class="fa fa-heart"></i>
+        </button>
+        <button class="animation-button" id="renderBoxButton" title="Box">
+          <i class="fa fa-square"></i>
+        </button>
+      </div>
+      <div id="animationControls">
+        ${AnimationPanel.generateControlsContent(controls)}
+      </div>
+    `;
+
+    super('animationPanel', content, 'Animation');
+
+    this.editor = editor;
+    this.lightshow = editor.lightshow;
+    this.controls = controls;
+    this.isVisible = true;
+  }
+
+  static generateControlsContent(controls) {
+    return controls.map(control => `
+      <div id="${control.id}_div">
+        <input 
+          type="${control.type}" 
+          id="${control.id}" 
+          min="${control.min}" 
+          max="${control.max}" 
+          value="${control.default}" 
+          style="width: 80%;">
+        <label for="${control.id}">${control.label}</label>
+      </div>
+    `).join('');
+  }
+
+  initialize() {
+    const panelElement = document.getElementById('animationPanel');
+
+    // Attach event listeners to controls
+    this.controls.forEach(control => {
+      const element = this.panel.querySelector(`#${control.id}`);
+      element.addEventListener('input', event => {
+        control.update(event.target.value);
+      });
+    });
+
+    // Attach event listeners to shape buttons
+    this.attachShapeButtonListeners();
+
+    // hide the spread slider
+    document.getElementById('spread_div').style.display = 'none';
+
+    // collapse the animation panel by default
+    this.toggleCollapse(false);
+  }
+
+  attachShapeButtonListeners() {
+    const shapes = [
+      { id: 'renderCircleButton', shape: 'circle', label: 'Circle' },
+      { id: 'renderInfinityButton', shape: 'figure8', label: 'Infinity' },
+      { id: 'renderHeartButton', shape: 'heart', label: 'Heart' },
+      { id: 'renderBoxButton', shape: 'box', label: 'Box' },
+    ];
+
+    shapes.forEach(({ id, shape, label }) => {
+      const button = this.panel.querySelector(`#${id}`);
+      button.addEventListener('click', () => {
+        this.lightshow.setShape(shape);
+        this.lightshow.angle = 0; // Reset angle
+      });
+    });
+  }
+}
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,5 @@ @@
         <link rel="stylesheet" type="text/css" href="css/styles.css">
       </head>
       <body>
-        <canvas id="lightshowCanvas" width="800" height="600"></canvas>
       </body>
     </html>