Add background image support

rogeraabbccdd · Apr 3, 2020 · 1491f95 · 1491f95
1 parent d1aca0f
commit 1491f95
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -8,9 +8,10 @@ SDVX Live2D Wallpaper for [Wallpaper Engine](https://store.steampowered.com/app/
 - Download repo.
 - Download `live2dcubismcore.min.js` from [here](https://www.live2d.com/download/cubism-sdk/download-web/), add put it in `assets/js/`.
 - Get your SDVX Live2D models from somewhere, and put them in `assets/live2d/`.
-- Download BGM from [here](https://www.youtube.com/watch?v=tBd_QlnYwNg), and put it in `assets/sound/sdvxv.mp3`.
-- Get your SDVX `testbg2_fhd.wmv` from somewhere, convert it to webm format and put it in `assets/video/bg.webm`.
+- Download BGM from [here](https://www.youtube.com/watch?v=tBd_QlnYwNg), and put it in `assets/sound/bgm.mp3`.
+- Get your SDVX `testbg2_fhd.wmv` from somewhere, or any background video you want, convert it to webm format and put it in `assets/background/bg.webm`.
+- Get your favorite SDVX wallpaper image, and put it in `assets/background/bg.jpg`.
 - Import folder to Wallpaper Engine. 
 
 ## Credits
-- `bg2.webm` is taken from [Steam Workshop](https://steamcommunity.com/sharedfiles/filedetails/?id=1940540424)
+- Default `bg.webm` is taken from [Steam Workshop](https://steamcommunity.com/sharedfiles/filedetails/?id=1940540424)
diff --git a/assets/background/bg.jpg b/assets/background/bg.jpg
diff --git a/assets/video/bg2.webm → assets/background/bg.webm b/assets/video/bg2.webm → assets/background/bg.webm
diff --git a/assets/css/sdvx.css b/assets/css/sdvx.css
@@ -7,6 +7,11 @@ body {
   width: 100vw;
   position: fixed;
   z-index: -1;
+  background-image: url(../background/bg.jpg);
+  background-attachment: fixed;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 #bg-video {

diff --git a/assets/js/wallpaper.js b/assets/js/wallpaper.js
@@ -2,6 +2,9 @@ let modelName = "grace_ver5"
 let model = new Live2dModel()
 model.loadModel(modelName);
 window.onresize = model.onResize()
+const bgVideo = document.getElementById("bg-video")
+const bg = document.getElementById('bg')
+const bgm = document.getElementById('bgm')
 window.wallpaperPropertyListener = {
   applyUserProperties(properties) {
     if (properties.modelName) {
@@ -24,16 +27,20 @@ window.wallpaperPropertyListener = {
     model.onResize();
 
     // other
-    if (properties.videoBright) {
-      document.getElementById("bg").style.filter = `brightness(${properties
-        .videoBright.value / 100})`;
+    if (properties.bgBright) {
+      bg.style.filter = `brightness(${properties
+        .bgBright.value / 100})`;
     }
-    if (properties.video) {
-      document.getElementById("bg-video").src =
-        "./assets/video/" + properties.video.value + ".webm";
+    if (properties.bgType) {
+      if(properties.bgType.value === 'video') {
+        bgVideo.style.display = 'inline'
+      }
+      else {
+        bgVideo.style.display = 'none'
+      }
     }
     if (properties.volume) {
-      document.getElementById("bgm").volume = properties.volume.value / 100;
+      bgm.volume = properties.volume.value / 100;
     }
   }
 };
diff --git a/index.html b/index.html
@@ -9,9 +9,9 @@
 </head>
 <body>
   <div id="bg">
-    <video autoplay muted loop id="bg-video" src="./assets/video/bg.webm"></video>
+    <video autoplay muted loop id="bg-video" src="./assets/background/bg.webm"></video>
   </div>
-  <audio src="./assets/sound/sdvxv.mp3" id="bgm" autoplay loop volume="0"></audio>
+  <audio src="./assets/sound/bgm.mp3" id="bgm" autoplay loop volume="0"></audio>
   <div id="live2d"></div>
   <!-- Fetch and XHR are not working when loading local live2d json file :() -->
   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>