v1.0.2

reduced number of requests visualiser height customisation
coreyhsGames · Aug 30, 2024 · 30295a1 · 30295a1
1 parent a595cd6
commit 30295a1
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 16 deletions.
diff --git a/src/LivelyProperties.json b/src/LivelyProperties.json
@@ -55,6 +55,22 @@
         "type": "color",
         "value": "#fc0303"
     },
+    "visauliserHeight": {
+        "max": 750,
+        "min": 100,
+        "step": 10,
+        "text": "Visualiser Height",
+        "type": "slider",
+        "value": 300
+    },
+    "albumSize": {
+        "max": 400,
+        "min": 150,
+        "step": 10,
+        "text": "Album Size",
+        "type": "slider",
+        "value": 200
+    },
     "opacity": {
         "max": 100,
         "min": 0,
@@ -77,13 +93,5 @@
         "text": "Neon Glow Intensity",
         "type": "slider",
         "value": 10
-    },
-    "albumSize": {
-        "max": 400,
-        "min": 150,
-        "step": 10,
-        "text": "Album Size",
-        "type": "slider",
-        "value": 200
     }
 }
diff --git a/src/js/config.js b/src/js/config.js
@@ -23,10 +23,14 @@ function livelyPropertyListener(name, val) {
         document.querySelector('.song-icon').style.width = `${val}px`;
     } else if (name === "city") {
         window.config.city = val;
+        fetchCurrentWeather();
     } else if (name === "use24HTime") {
         window.config.use24HTime = val;
     } else if (name === "animatedWeatherIcons") {
         window.config.animatedWeatherIcons = val;
+        fetchCurrentWeather();
+    } else if (name === "visauliserHeight") {
+        window.config.visauliserHeight = val;
     }
 }
 

diff --git a/src/js/music.js b/src/js/music.js
@@ -4,7 +4,6 @@ const headerArtist = document.getElementById('song-artist');
 const headerTitle = document.getElementById('song-name');
 
 var numberOfFrequencies = 1;
-var amplitude = 300;
 var spectrumScale = 1;
 
 async function livelyCurrentTrack(data) {
@@ -30,7 +29,7 @@ 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);
+    let Wheight = Math.round((window.innerHeight / 2 + 300) * spectrumScale);
     canvas.setAttribute('width', Wwidth);
     canvas.setAttribute('height', Wheight);
 
@@ -56,14 +55,14 @@ async function drawSpectrum(audioArray) {
         if (i == 0) {
             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])));
+            ctx.fillRect(offset + a * (barwidth + spacing), height - 50 - Math.round((window.config.visauliserHeight * spectrumScale) * Math.min(1, audioArray[i])), barwidth, Math.round((window.config.visauliserHeight * spectrumScale) * Math.min(1, audioArray[i])));
             a++
         }
         else {
             if (audioArray[i] != audioArray[i - 1]) {
                 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])));
+                ctx.fillRect(offset + a * (barwidth + spacing), height - 50 - Math.round((window.config.visauliserHeight * spectrumScale) * Math.min(1, audioArray[i])), barwidth, Math.round((window.config.visauliserHeight * spectrumScale) * Math.min(1, audioArray[i])));
                 a++
             }
         }

diff --git a/src/js/weather.js b/src/js/weather.js
@@ -27,6 +27,17 @@ const iconsAnimated = {
     'thunderstorm': './weatherIcons/animated/severe-thunderstorm.svg',
 };
 
+function waitForCityConfig() {
+    return new Promise((resolve) => {
+        const checkCityInterval = setInterval(() => {
+            if (window.config && window.config.city) {
+                clearInterval(checkCityInterval);
+                resolve();
+            }
+        }, 100); // Check every 100 milliseconds
+    });
+}
+
 async function fetchCurrentWeather() {
     const cityReposnse = await fetch(`https://nominatim.openstreetmap.org/search?city=${window.config.city}&format=json`);
     const cityData = await cityReposnse.json();
@@ -56,8 +67,17 @@ async function fetchCurrentWeather() {
         document.getElementById('current-weather-widget').innerHTML = `<p>Error fetching weather data. Please try again later.</p>`;
     }
 };
-fetchCurrentWeather();
-setInterval(fetchCurrentWeather, 1000);
+window.fetchCurrentWeather = fetchCurrentWeather;
+
+// Use the function to wait for the city configuration and then fetch the weather
+async function initWeatherWidget() {
+    await waitForCityConfig();
+    fetchCurrentWeather();
+    setInterval(fetchCurrentWeather, 60000);
+}
+
+// Call initWeatherWidget to start the process
+initWeatherWidget();
 
 function getWeatherDescriptionAndIcon(weatherCode, animated) {
     const icons = animated ? iconsAnimated : iconsStatic;

diff --git a/src/wallpaper.html b/src/wallpaper.html
@@ -11,6 +11,7 @@
 <body>
     <div id="backgroundOverlay" style="background-color: rgba(0, 0, 0, 0.3);"></div>
     <img id="backgroundImg" src="./images/default.jpg"></img>
+    <p style="position: absolute; color: #ffff; padding: 10px; text-shadow: 1px 1px 4px #000;">Titanium Wallpaper v1.0.2 | Made by coreyhsGames</p>
     <div style="display: flex; flex-direction: column; align-items: center;">
         <div class="widget" id="time-widget" style="margin-top: 15px;">
             <h2 style="font-size: 100px;">Time</h2>
@@ -40,8 +41,6 @@ <h2 id="next-subject">Loading...</h2>
             </div>
         </div>
     </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>