【笔记】利用Übersicht实现动态壁纸

前言

Keep an eye on what is happening on your machine and in the World.（官网）

原理

• Übersicht是一个可以在桌面渲染自定义jsx的软件，可以通过自定义jsx代码，实现个性化的桌面

安装Übersicht

brew install --cask ubersicht

视频壁纸代码

• 先将视频素材放到Übersicht组件目录：~/Library/Application Support/Übersicht/widgets/

• 编写一个自动、循环、静音播放视频的HTML代码

为了省事，我直接在默认模版中修改了代码

./xxx.mp4：需要修改成自己的视频文件名

~/Library/Application Support/Übersicht/widgets/GettingStarted.jsx

// 这是一个简单的示例小部件，可帮助您开始使用 Übersicht。
// 有关完整文档，请访问：
// https://github.com/felixhageloh/uebersicht

// 您可以根据需要修改此小部件，或直接删除此文件以移除

// 这是每次此小部件刷新时执行的 shell 命令
export const command = "";

// 以毫秒为单位的刷新频率
export const refreshFrequency = 3600000;

// 此小部件的 CSS 样式，使用 Emotion 编写
// https://emotion.sh/
export const className = `
  width: 100%;
  height: 100%;
  
  h1 {
    color: red;
  }
`

// 在 shell 命令执行后调用 render 。命令的输出作为字符串传入。
export const render = ({output}) => {
  return (
      <div>
        <video
            src="./xxx.mp4" /* 视频路径 */
            width="100%" /* 视频宽度 */
            height="100%" /* 视频高度 */
            loop="loop" /* 视频循环播放 */
            autoPlay="autoPlay" /* 视频自动播放 */
            muted="muted" /* 视频静音 */
        ></video>
      </div>
  );
}

自动切换图片壁纸代码

• Übersicht中内置了jQuery，可以直接通过$调用

// 这是一个简单的示例小部件，可帮助您开始使用 Übersicht。
// 有关完整文档，请访问：
// https://github.com/felixhageloh/uebersicht

// 您可以根据需要修改此小部件，或直接删除此文件以移除

// 这是每次此小部件刷新时执行的 shell 命令
export const command = "echo success";

// 以毫秒为单位的刷新频率
export const refreshFrequency = 5000;

// 此小部件的 CSS 样式，使用 Emotion 编写
// https://emotion.sh/
export const className = `
#app {
    width: 1920px;
    height: 1080px;
    background: white;
}
`;

// 在 shell 命令执行后调用 render 。命令的输出作为字符串传入。
export const render = ({output}) => {
    $.getJSON("https://api.luvying.com/acgimg?return=json", "", (result) => {
        document.getElementById("app").style.backgroundImage = `url(${result["acgurl"]})`;
    });
    return (
        <div id="app"></div>
    );
}

完成

参考文献

知乎——Femd
CSDN——CallMeKongkong