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

发表于 阅读次数：

前言

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

原理

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

安装Übersicht

1
brew install --cask ubersicht

编写代码

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 这是一个简单的示例小部件，可帮助您开始使用 Ü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>
  )
      ;
}

完成

参考文献

知乎——Femd
CSDN——CallMeKongkong