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
|
|
@ -1,5 +1,5 @@
|
|||
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 express from "express";
|
||||
import * as getPort from "get-port";
|
||||
|
|
@ -745,15 +745,28 @@ export class BrowserWindow {
|
|||
return json;
|
||||
})
|
||||
|
||||
ipcMain.on("get-wallpaper", async (event) => {
|
||||
ipcMain.on("get-wallpaper", async (event, args) => {
|
||||
const wpPath: string = await wallpaper.get();
|
||||
// get the wallpaper and encode it to base64 then return
|
||||
const wpBase64: string = await readFileSync(wpPath, 'base64')
|
||||
// add the data:image properties
|
||||
const wpData: string = `data:image/png;base64,${wpBase64}`
|
||||
const Jimp = require("jimp")
|
||||
const img = await Jimp.read(wpPath)
|
||||
const blurAmount = args.blurAmount ?? 256
|
||||
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 = {
|
||||
path: wpPath,
|
||||
data: wpData
|
||||
data: result,
|
||||
res: {
|
||||
width: width,
|
||||
height: height
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ document.addEventListener('musickitloaded', function () {
|
|||
function waitForApp() {
|
||||
if (typeof app.init !== "undefined") {
|
||||
app.init()
|
||||
if (app.cfg.visual.window_background_style == "mica" && !app.isDev) {
|
||||
if (app.cfg.visual.window_background_style == "mica") {
|
||||
app.spawnMica()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +1,91 @@
|
|||
import { CiderCache } from "./cidercache.js"
|
||||
import { CiderCache } from "./cidercache.js";
|
||||
|
||||
async function spawnMica() {
|
||||
if (typeof window.micaSpawned !== "undefined") {
|
||||
return
|
||||
if (typeof window.micaSpawned !== "undefined") {
|
||||
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 {
|
||||
window.micaSpawned = true
|
||||
micaDiv.style.backgroundPosition = `-${x}px -${y}px`;
|
||||
}
|
||||
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")
|
||||
|
||||
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
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
export { spawnMica }
|
||||
export { spawnMica };
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue