Store Page
Wallpaper Engine
All Discussions Screenshots Artwork Broadcasts Videos Workshop News Guides Reviews

Wallpaper Engine

Store Page
Wallpaper Gallery
Create your own animated live wallpapers and immediately share them with other users. It is recommended to browse the Workshop from Wallpaper Engine to find something you like instead of this page.
Learn More
Home
Browse
Discussions
About
Workshop> Wallpaper Engine> All Discussions
[RUS] NeneroG 2 17 Nov, 2024 @ 8:51am
HTML Wallpapers are not incompatible with Wallpaper Engine
I don't understand why what I'm doing is marked incompatible. What could be wrong, I'm sharing the source code:

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Combined FPS and Battery Status</title> <style> body { margin: 0; overflow: hidden; height: 100vh; background-color: #000; position: relative; display: flex; justify-content: center; align-items: center; font-family: 'Arial', sans-serif; } body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); pointer-events: none; animation: pulse 5s infinite ease-in-out; } @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 0.8; } 100% { opacity: 0.5; } } #status-bar { background: rgba(0, 0, 0, 0.2); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); color: #fff; padding: 5px 10px; position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: fit-content; z-index: 1001; font-size: 12px; border-radius: 5px; text-align: center; } .loading { animation: loading-animation 1s linear infinite; } @keyframes loading-animation { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } .clock { width: 200px; height: 200px; border-radius: 50%; background: rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); } .time { color: white; font-size: 48px; text-align: center; } </style> </head> <body> <div id="status-bar"> <span id="status-combined" class="loading">Loading...</span> </div> <div class="clock"> <div class="time" id="time">00:00:00</div> </div> <script> // FPS and Battery Combined let startTime = null; let frameCount = 0; function updateStatus() { const now = performance.now(); if (startTime === null) { startTime = now; } frameCount++; const elapsedTime = now - startTime; if (elapsedTime > 1000) { const fps = Math.round((frameCount * 1000) / elapsedTime); frameCount = 0; startTime = now; updateBatteryStatus(fps); } requestAnimationFrame(updateStatus); } function updateBatteryStatus(fps) { const statusDisplay = document.getElementById('status-combined'); if (navigator.getBattery) { navigator.getBattery().then(battery => { const level = battery.level * 100; const chargingStatus = battery.charging ? ' ⚡' : ''; const combinedStatus = `FPS: ${fps} | Battery: ${level.toFixed(0)}%${chargingStatus}`; statusDisplay.textContent = combinedStatus; statusDisplay.classList.remove('loading'); }).catch(error => { console.error("Error getting battery status:", error); statusDisplay.textContent = "Error"; }); } else { statusDisplay.textContent = `FPS: ${fps} | Battery: Not Supported`; } } function updateClock() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}`; } // Обновление времени каждую секунду setInterval(updateClock, 1000); updateClock(); // Первоначальное обновление updateStatus(); // Запуск обновления FPS и состояния батареи // Mousemove color change document.addEventListener('mousemove', (e) => { const x = e.clientX; const y = e.clientY; const red = Math.round((x / window.innerWidth) * 255); const green = Math.round((y / window.innerHeight) * 255); const blue = Math.round(((window.innerWidth - x) / window.innerWidth) * 255); document.body.style.background = `radial-gradient(circle at ${x}px ${y}px, rgb(${red}, ${green}, ${blue}), #000)`; }); </script> </body> </html>

My wallpaper works correctly, hlp
< >
Showing 1-3 of 3 comments
[RUS] NeneroG 2 17 Nov, 2024 @ 8:53am 
Here is the work itself:

https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=3367572389
#1
kyprra 1 28 Nov, 2024 @ 4:56am 
Originally posted by RUS Bug👾♥♥♥♥♥♥:
Here is the work itself:

https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=3367572389
Я так понимаю вы решили вопрос. Не подскажете как? Я тоже опубликовал html обои и они помечены так же. Это такая система модерации?
#2
[RUS] NeneroG 2 29 Nov, 2024 @ 8:05am 
Originally posted by kyprra:
Originally posted by RUS Bug👾♥♥♥♥♥♥:
Here is the work itself:

https://steamhost.cn/steamcommunity_com/sharedfiles/filedetails/?id=3367572389
Я так понимаю вы решили вопрос. Не подскажете как? Я тоже опубликовал html обои и они помечены так же. Это такая система модерации?

Оно как то само исправилось, я ни чего не трогал)
#3
< >
Showing 1-3 of 3 comments
Per page: 1530 50

Date Posted: 17 Nov, 2024 @ 8:51am
Posts: 3
Start a New Discussion

Discussions Rules and Guidelines