2

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

 1 year ago
source link: https://feiju12138.github.io/2022/09/25/%E5%88%A9%E7%94%A8Ubersicht%E5%AE%9E%E7%8E%B0%E5%8A%A8%E6%80%81%E5%A3%81%E7%BA%B8/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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>
  )
      ;
}

知乎——Femd
CSDN——CallMeKongkong


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK