Improved JS Structure

coreyhsGames · Aug 29, 2024 · 0e73ac4 · 0e73ac4
1 parent bbf6467
commit 0e73ac4
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 81 deletions.
diff --git a/src/LivelyInfo.json b/src/LivelyInfo.json
@@ -9,7 +9,7 @@
   "Contact": "",
   "Type": 1,
   "FileName": "wallpaper.html",
-  "Arguments": " --audio --system-information --system-nowplaying",
+  "Arguments": " --audio --system-nowplaying",
   "IsAbsolutePath": false,
   "Id": null,
   "Tags": null,

diff --git a/src/LivelyProperties.json b/src/LivelyProperties.json
@@ -1,7 +1,7 @@
 {
     "label1": {
         "type": "label",
-        "value": "General"
+        "value": "Background"
     },
     "imgOverlay": {
         "max": 100,
@@ -19,6 +19,15 @@
         "folder": "images"
     },
     "label2": {
+        "type": "label",
+        "value": "Location"
+    },
+    "city": {
+        "type": "textbox",
+        "text": "City",
+        "value": "London"
+    },
+    "label3": {
         "type": "label",
         "value": "Audio Visualiser"
     },

diff --git a/src/data/weather.json b/src/data/weather.json
diff --git a/src/js/config.js b/src/js/config.js
@@ -0,0 +1,35 @@
+// Define a global object if it doesn't exist
+window.config = window.config || {};
+
+function livelyPropertyListener(name, val) {
+    if (name === "color1") {
+        window.config.inputColor1 = val;
+    } else if (name === "color2") {
+        window.config.inputColor2 = val;
+    } else if (name === "glow") {
+        window.config.glow = val;
+    } else if (name === "glowStrength") {
+        window.config.glowStrength = val;
+    } else if (name === "opacity") {
+        window.config.opacity = val / 100;
+    } else if (name === "imgPath") {
+        window.config.imgName = val;
+        document.getElementById("backgroundImg").src = "/" + val;
+    } else if (name === "imgOverlay") {
+        window.config.imageOverlayDarkness = val / 100;
+        document.getElementById('backgroundOverlay').style.backgroundColor = `rgba(0, 0, 0, ${val / 100})`;
+    } else if (name === "albumSize") {
+        window.config.albumSize = val;
+        document.querySelector('.song-icon').style.width = `${val}px`;
+    } else if (name === "city") {
+        window.config.city = val;
+    }
+}
+
+function hexToRGB(hex) {
+    let r = parseInt(hex.slice(1, 3), 16);
+    let g = parseInt(hex.slice(3, 5), 16);
+    let b = parseInt(hex.slice(5, 7), 16);
+
+    return r + "," + g + "," + b;
+}
diff --git a/src/js/music.js b/src/js/music.js
@@ -4,18 +4,8 @@ const headerArtist = document.getElementById('song-artist');
 const headerTitle = document.getElementById('song-name');
 
 var numberOfFrequencies = 1;
-var inputColor1 = "#5603fc";
-var inputColor2 = "#fc0303";
-var glow = true;
-var glowStrength = 10;
 var amplitude = 300;
 var spectrumScale = 1;
-var spectrumX = 0.5;
-var sprcctrumY = 0.5;
-var opacity = 1;
-var imgName = "";
-var imageOverlayDarkness = 0.3;
-var albumSize = 200;
 
 async function livelyCurrentTrack(data) {
     let obj = JSON.parse(data);
@@ -32,82 +22,47 @@ async function livelyCurrentTrack(data) {
     }
 }
 
-function livelyPropertyListener(name, val) {
-    // or switch-case...
-    if (name == "color1") {
-        inputColor1 = hexToRGB(val);
-    }
-    else if (name == "color2") {
-        inputColor2 = hexToRGB(val);
-    }
-    else if (name == "glow") {
-        glow = val;
-    }
-    else if (name == "glowStrength") {
-        glowStrength = val;
-    }
-    else if (name == "opacity") {
-        opacity = val / 100;
-    }
-    else if (name == "imgPath") {
-        imgName = val;
-        document.getElementById("backgroundImg").src = "/" + imgName;
-    }
-    else if (name == "imgOverlay") {
-        imageOverlayDarkness = val / 100;
-        document.getElementById('backgroundOverlay').style.backgroundColor = `rgba(0, 0, 0, ${imageOverlayDarkness})`;
-    }
-    else if (name == "albumSize") {
-        albumSize = val;
-        document.querySelector('.song-icon').style.width = `${albumSize}px`;
-    }
-}
-
-function livelyAudioListener(audioArray) {
-    drawSpectrum(audioArray);
+async function livelyAudioListener(audioArray) {
+    await drawSpectrum(audioArray);
 }
 
-function drawSpectrum(audioArray) {
-    let c = document.getElementById("canvas");
-    let ctx = c.getContext("2d");
+async function drawSpectrum(audioArray) {
+    let canvas = document.getElementById("canvas");
+    let ctx = canvas.getContext("2d");
     let Wwidth = Math.round(window.innerWidth * spectrumScale);
     let Wheight = Math.round((window.innerHeight / 2 + amplitude) * spectrumScale);
-    c.setAttribute('width', Wwidth);
-    c.setAttribute('height', Wheight);
-
-    //c.style.left = Math.round(window.innerWidth * spectrumX - c.width / 2) + "px";
-    //c.style.top = Math.round(window.innerHeight * spectrumY - c.height) + "px";
+    canvas.setAttribute('width', Wwidth);
+    canvas.setAttribute('height', Wheight);
 
-    ctx.clearRect(0, 0, c.width, c.height);
-    if (glow) {
-        ctx.shadowBlur = glowStrength;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (window.config.glow) {
+        ctx.shadowBlur = window.config.glowStrength;
     }
     else {
         ctx.shadowBlur = 0;
     }
 
-    ctx.globalAlpha = opacity;
+    ctx.globalAlpha = window.config.opacity;
 
-    let width = c.width;
-    let height = c.height;
+    let width = canvas.width;
+    let height = canvas.height;
     let offset = Math.round(0 * width);
     let numberOfSamples = 128;
     let spacing = Math.round(3 * spectrumScale);
     let barwidth = Math.floor((width - 2 * offset - (numberOfFrequencies - 1) * spacing) / numberOfFrequencies);
 
     let a = 0;
-
     for (let i = 0; i < numberOfSamples; i++) {
         if (i == 0) {
-            ctx.fillStyle = interpolateColor(inputColor1, inputColor2, a / numberOfFrequencies);
-            ctx.shadowColor = interpolateColor(inputColor1, inputColor2, a / numberOfFrequencies);
+            ctx.fillStyle = interpolateColor(hexToRGB(window.config.inputColor1), hexToRGB(window.config.inputColor2), a / numberOfFrequencies);
+            ctx.shadowColor = interpolateColor(hexToRGB(window.config.inputColor1), hexToRGB(window.config.inputColor2), a / numberOfFrequencies);
             ctx.fillRect(offset + a * (barwidth + spacing), height - 50 - Math.round((amplitude * spectrumScale) * Math.min(1, audioArray[i])), barwidth, Math.round((amplitude * spectrumScale) * Math.min(1, audioArray[i])));
             a++
         }
         else {
             if (audioArray[i] != audioArray[i - 1]) {
-                ctx.fillStyle = interpolateColor(inputColor1, inputColor2, a / numberOfFrequencies);
-                ctx.shadowColor = interpolateColor(inputColor1, inputColor2, a / numberOfFrequencies);
+                ctx.fillStyle = interpolateColor(hexToRGB(window.config.inputColor1), hexToRGB(window.config.inputColor2), a / numberOfFrequencies);
+                ctx.shadowColor = interpolateColor(hexToRGB(window.config.inputColor1), hexToRGB(window.config.inputColor2), a / numberOfFrequencies);
                 ctx.fillRect(offset + a * (barwidth + spacing), height - 50 - Math.round((amplitude * spectrumScale) * Math.min(1, audioArray[i])), barwidth, Math.round((amplitude * spectrumScale) * Math.min(1, audioArray[i])));
                 a++
             }

diff --git a/src/js/weather.js b/src/js/weather.js
@@ -15,15 +15,10 @@ const icons = {
 };
 
 async function fetchCurrentWeather() {
-    await fetch('./data/weather.json')
-        .then(response => response.json())
-        .then(data => {
-            latitude = data.latitude;
-            longitude = data.longitude;
-        })
-        .catch(error => console.error('Error fetching weather:', error));
+    const cityReposnse = await fetch(`https://nominatim.openstreetmap.org/search?city=${window.config.city}&format=json`);
+    const cityData = await cityReposnse.json();
 
-    const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current=temperature_2m,precipitation,weathercode&timezone=Pacific%2FAuckland`);
+    const response = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${cityData[0].lat}&longitude=${cityData[0].lon}&current=temperature_2m,precipitation,weathercode&timezone=Pacific%2FAuckland`);
     const data = await response.json();
 
     if (data.current) {
@@ -49,7 +44,7 @@ async function fetchCurrentWeather() {
     }
 };
 fetchCurrentWeather();
-setInterval(fetchCurrentWeather, 600000);
+setInterval(fetchCurrentWeather, 1000);
 
 function getWeatherDescriptionAndIcon(weatherCode) {
     switch (weatherCode) {

diff --git a/src/wallpaper.html b/src/wallpaper.html
@@ -5,9 +5,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="./styles/wallpaper.css">
-    <script defer src="./js/wallpaper.js"></script>
-    <script defer src="./js/weather.js"></script>
-    <script defer src="./js/music.js"></script>
     <title>Document</title>
 </head>
 
@@ -36,7 +33,7 @@ <h3 id="song-name">Song Name</h3>
         <div class="main-widget">
             <div class="widget" id="current-weather-widget">
                 <div class="weather-icon" id="icon"></div>
-                <h3 id="temperature"></h3>
+                <h3 id="temperature">Loading...</h3>
             </div>
             <div class="widget" id="next-sub-widget">
                 <h2 id="next-subject">Loading...</h2>
@@ -45,6 +42,11 @@ <h2 id="next-subject">Loading...</h2>
     </div>
     <p style="bottom: 45px; position: absolute; color: #ffff; padding: 10px; text-shadow: 1px 1px 4px #000;">Made by
         coreyhsGames</p>
+    <!-- SCRIPTS -->
+    <script defer src="./js/config.js"></script>
+    <script defer src="./js/wallpaper.js"></script>
+    <script defer src="./js/weather.js"></script>
+    <script defer src="./js/music.js"></script>
 </body>
 
 </html>