From 0e73ac459f5d2e949b450d659217021dc9b720f5 Mon Sep 17 00:00:00 2001 From: Corey Hulls Date: Thu, 29 Aug 2024 14:50:07 +1200 Subject: [PATCH] Improved JS Structure --- src/LivelyInfo.json | 2 +- src/LivelyProperties.json | 11 +++++- src/data/weather.json | 4 -- src/js/config.js | 35 +++++++++++++++++ src/js/music.js | 79 +++++++++------------------------------ src/js/weather.js | 13 ++----- src/wallpaper.html | 10 +++-- 7 files changed, 73 insertions(+), 81 deletions(-) delete mode 100644 src/data/weather.json create mode 100644 src/js/config.js diff --git a/src/LivelyInfo.json b/src/LivelyInfo.json index 580670e..228229c 100644 --- 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 index 3a8984c..280a509 100644 --- 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 deleted file mode 100644 index 41c6aa4..0000000 --- a/src/data/weather.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "latitude": 0, - "longitude": 0 -} \ No newline at end of file diff --git a/src/js/config.js b/src/js/config.js new file mode 100644 index 0000000..ea6ce81 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/src/js/music.js b/src/js/music.js index ca5471e..0b4663f 100644 --- 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 index 4ea694a..29b31d5 100644 --- 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}¤t=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}¤t=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 index f7e144a..4088109 100644 --- a/src/wallpaper.html +++ b/src/wallpaper.html @@ -5,9 +5,6 @@ - - - Document @@ -36,7 +33,7 @@

Song Name

-

+

Loading...

Loading...

@@ -45,6 +42,11 @@

Loading...

Made by coreyhsGames

+ + + + + \ No newline at end of file