mica improvements
- moved mica rendering to backend - improvements to spanning wallpapers
This commit is contained in:
booploops
parent
c255420169
commit
0803252018
4 changed files with 107 additions and 109 deletions
|
|
@ -54,6 +54,7 @@
|
||||||
"electron-window-state": "^5.0.3",
|
"electron-window-state": "^5.0.3",
|
||||||
"express": "^4.17.3",
|
"express": "^4.17.3",
|
||||||
"get-port": "^5.1.1",
|
"get-port": "^5.1.1",
|
||||||
|
"jimp": "^0.16.1",
|
||||||
"jsonc": "^2.0.0",
|
"jsonc": "^2.0.0",
|
||||||
"lastfmapi": "^0.1.1",
|
"lastfmapi": "^0.1.1",
|
||||||
"mdns-js": "git+https://github.com/ciderapp/node-mdns-js.git",
|
"mdns-js": "git+https://github.com/ciderapp/node-mdns-js.git",
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import {join} from "path";
|
import {join} from "path";
|
||||||
import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell} from "electron";
|
import {app, BrowserWindow as bw, ipcMain, ShareMenu, shell, screen} from "electron";
|
||||||
import * as windowStateKeeper from "electron-window-state";
|
import * as windowStateKeeper from "electron-window-state";
|
||||||
import * as express from "express";
|
import * as express from "express";
|
||||||
import * as getPort from "get-port";
|
import * as getPort from "get-port";
|
||||||
|
|
@ -745,15 +745,28 @@ export class BrowserWindow {
|
||||||
return json;
|
return json;
|
||||||
})
|
})
|
||||||
|
|
||||||
ipcMain.on("get-wallpaper", async (event) => {
|
ipcMain.on("get-wallpaper", async (event, args) => {
|
||||||
const wpPath: string = await wallpaper.get();
|
const wpPath: string = await wallpaper.get();
|
||||||
// get the wallpaper and encode it to base64 then return
|
const Jimp = require("jimp")
|
||||||
const wpBase64: string = await readFileSync(wpPath, 'base64')
|
const img = await Jimp.read(wpPath)
|
||||||
// add the data:image properties
|
const blurAmount = args.blurAmount ?? 256
|
||||||
const wpData: string = `data:image/png;base64,${wpBase64}`
|
if(blurAmount) {
|
||||||
|
img.blur(blurAmount)
|
||||||
|
}
|
||||||
|
const screens = await screen.getAllDisplays()
|
||||||
|
const width = screens.reduce((a, b) => a + b.size.width, 0)
|
||||||
|
const height = screens.reduce((a, b) => a + b.size.height, 0)
|
||||||
|
|
||||||
|
img.cover(width, height, Jimp.HORIZONTAL_ALIGN_LEFT | Jimp.VERTICAL_ALIGN_MIDDLE)
|
||||||
|
const result = await img.getBase64Async(Jimp.MIME_PNG)
|
||||||
|
|
||||||
event.returnValue = {
|
event.returnValue = {
|
||||||
path: wpPath,
|
path: wpPath,
|
||||||
data: wpData
|
data: result,
|
||||||
|
res: {
|
||||||
|
width: width,
|
||||||
|
height: height
|
||||||
|
}
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -133,7 +133,7 @@ document.addEventListener('musickitloaded', function () {
|
||||||
function waitForApp() {
|
function waitForApp() {
|
||||||
if (typeof app.init !== "undefined") {
|
if (typeof app.init !== "undefined") {
|
||||||
app.init()
|
app.init()
|
||||||
if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
|
if (app.cfg.visual.window_background_style == "mica") {
|
||||||
app.spawnMica()
|
app.spawnMica()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,107 +1,91 @@
|
||||||
import { CiderCache } from "./cidercache.js"
|
import { CiderCache } from "./cidercache.js";
|
||||||
|
|
||||||
async function spawnMica() {
|
async function spawnMica() {
|
||||||
if (typeof window.micaSpawned !== "undefined") {
|
if (typeof window.micaSpawned !== "undefined") {
|
||||||
return
|
return;
|
||||||
|
} else {
|
||||||
|
window.micaSpawned = true;
|
||||||
|
}
|
||||||
|
const micaDiv = document.createElement("div");
|
||||||
|
const blurIterations = 6;
|
||||||
|
micaDiv.id = "micaEffect";
|
||||||
|
micaDiv.style.position = "fixed";
|
||||||
|
micaDiv.style.top = "0";
|
||||||
|
micaDiv.style.left = "0";
|
||||||
|
micaDiv.style.right = "0";
|
||||||
|
micaDiv.style.bottom = "0";
|
||||||
|
micaDiv.style.zIndex = -1;
|
||||||
|
|
||||||
|
let lastScreenX;
|
||||||
|
let lastScreenY;
|
||||||
|
let lastScreenWidth;
|
||||||
|
let lastScreenHeight;
|
||||||
|
|
||||||
|
let regen = true;
|
||||||
|
let imgSrc = await ipcRenderer.sendSync("get-wallpaper", {
|
||||||
|
blurAmount: 256
|
||||||
|
});
|
||||||
|
|
||||||
|
// let micaCache = await CiderCache.getCache("mica-cache");
|
||||||
|
// if (!micaCache) {
|
||||||
|
// micaCache = {
|
||||||
|
// path: "",
|
||||||
|
// data: "",
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// if (micaCache.path == imgSrc.path) {
|
||||||
|
// regen = false;
|
||||||
|
// imgSrc = micaCache;
|
||||||
|
// }
|
||||||
|
let canvas = document.createElement("canvas");
|
||||||
|
let ctx = canvas.getContext("2d");
|
||||||
|
let img = new Image();
|
||||||
|
micaDiv.style.backgroundImage = `url(${imgSrc.data})`;
|
||||||
|
document.body.appendChild(micaDiv);
|
||||||
|
|
||||||
|
function onScreenMove(cb) {
|
||||||
|
function detectScreenMove() {
|
||||||
|
if (lastScreenY !== window.screenY || lastScreenX !== window.screenX) {
|
||||||
|
lastScreenY = window.screenY;
|
||||||
|
lastScreenX = window.screenX;
|
||||||
|
cb();
|
||||||
|
}
|
||||||
|
// window size change
|
||||||
|
if (
|
||||||
|
lastScreenWidth !== window.innerWidth ||
|
||||||
|
lastScreenHeight !== window.innerHeight
|
||||||
|
) {
|
||||||
|
lastScreenWidth = window.innerWidth;
|
||||||
|
lastScreenHeight = window.innerHeight;
|
||||||
|
cb();
|
||||||
|
}
|
||||||
|
if (true) {
|
||||||
|
requestAnimationFrame(detectScreenMove);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (true) {
|
||||||
|
requestAnimationFrame(detectScreenMove);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onScreenMove(function () {
|
||||||
|
const screenHeight = window.screen.height;
|
||||||
|
const screenWidth = window.screen.width;
|
||||||
|
const windowHeight = window.innerHeight;
|
||||||
|
const windowWidth = window.innerWidth;
|
||||||
|
const ratio = windowWidth / windowHeight;
|
||||||
|
const x = window.screenX;
|
||||||
|
const y = window.screenY;
|
||||||
|
micaDiv.style.backgroundSize = `${screenWidth}px ${screenHeight}px`;
|
||||||
|
// micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
|
||||||
|
if (x < 0) {
|
||||||
|
micaDiv.style.backgroundPosition = `${screenWidth + x}px -${y}px`;
|
||||||
} else {
|
} else {
|
||||||
window.micaSpawned = true
|
micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
|
||||||
}
|
}
|
||||||
const micaDiv = document.createElement('div');
|
});
|
||||||
const blurIterations = 6
|
return true;
|
||||||
micaDiv.id = 'micaEffect';
|
|
||||||
micaDiv.style.position = "fixed"
|
|
||||||
micaDiv.style.top = "0"
|
|
||||||
micaDiv.style.left = "0"
|
|
||||||
micaDiv.style.right = "0"
|
|
||||||
micaDiv.style.bottom = "0"
|
|
||||||
micaDiv.style.zIndex = -1
|
|
||||||
|
|
||||||
let lastScreenX;
|
|
||||||
let lastScreenY;
|
|
||||||
let lastScreenWidth;
|
|
||||||
let lastScreenHeight;
|
|
||||||
|
|
||||||
let regen = true
|
|
||||||
let imgSrc = await ipcRenderer.sendSync("get-wallpaper")
|
|
||||||
|
|
||||||
let micaCache = await CiderCache.getCache("mica-cache")
|
|
||||||
if (!micaCache) {
|
|
||||||
micaCache = {
|
|
||||||
path: "",
|
|
||||||
data: ""
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (micaCache.path == imgSrc.path) {
|
|
||||||
regen = false
|
|
||||||
imgSrc = micaCache
|
|
||||||
}
|
|
||||||
let canvas = document.createElement('canvas');
|
|
||||||
let ctx = canvas.getContext('2d');
|
|
||||||
let img = new Image();
|
|
||||||
img.src = imgSrc.data;
|
|
||||||
img.onload = function () {
|
|
||||||
canvas.width = img.width;
|
|
||||||
canvas.height = img.height;
|
|
||||||
ctx.drawImage(img, 0, 0);
|
|
||||||
if (regen) {
|
|
||||||
for (let i = 0; i < blurIterations; i++) {
|
|
||||||
StackBlur.canvasRGB(canvas, 0, 0, img.width, img.height, 128);
|
|
||||||
}
|
|
||||||
micaCache.path = imgSrc.path
|
|
||||||
micaCache.data = canvas.toDataURL()
|
|
||||||
CiderCache.putCache("mica-cache", micaCache)
|
|
||||||
}
|
|
||||||
let imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
|
||||||
micaDiv.style.backgroundImage = `url(${micaCache.data})`;
|
|
||||||
document.body.appendChild(micaDiv);
|
|
||||||
// on animation finished set animation to unset
|
|
||||||
micaDiv.addEventListener('animationend', function () {
|
|
||||||
micaDiv.style.opacity = '1';
|
|
||||||
micaDiv.style.animation = 'unset';
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
function onScreenMove(cb) {
|
|
||||||
function detectScreenMove() {
|
|
||||||
if (lastScreenY !== window.screenY || lastScreenX !== window.screenX) {
|
|
||||||
lastScreenY = window.screenY;
|
|
||||||
lastScreenX = window.screenX;
|
|
||||||
cb();
|
|
||||||
}
|
|
||||||
// window size change
|
|
||||||
if (lastScreenWidth !== window.innerWidth || lastScreenHeight !== window.innerHeight) {
|
|
||||||
lastScreenWidth = window.innerWidth;
|
|
||||||
lastScreenHeight = window.innerHeight;
|
|
||||||
cb();
|
|
||||||
}
|
|
||||||
if (true) {
|
|
||||||
requestAnimationFrame(detectScreenMove);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if (true) {
|
|
||||||
requestAnimationFrame(detectScreenMove);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onScreenMove(function () {
|
|
||||||
const screenHeight = window.screen.height;
|
|
||||||
const screenWidth = window.screen.width;
|
|
||||||
const windowHeight = window.innerHeight;
|
|
||||||
const windowWidth = window.innerWidth;
|
|
||||||
const ratio = windowWidth / windowHeight;
|
|
||||||
const x = window.screenX;
|
|
||||||
const y = window.screenY;
|
|
||||||
micaDiv.style.backgroundSize = `${screenWidth}px ${screenHeight}px`;
|
|
||||||
// micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
|
|
||||||
if (x < 0) {
|
|
||||||
micaDiv.style.backgroundPosition = `${screenWidth + x}px -${y}px`;
|
|
||||||
} else {
|
|
||||||
micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { spawnMica }
|
export { spawnMica };
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue