electron 做一个透明程序 for linux Debpin/树莓派4B(4B桌面环境背景透明、linux桌面程序背景透明)

设置树莓派4b桌面环境的背景透明

这一步对程序不会有任何影响,仅仅对物理屏幕会有影响。

树莓派的背景颜色默认是没有清除选项的,所以需要用命令行

1、打开文件

bash 复制代码
sudo nano /etc/xdg/xdg-pi/lxsession/LXDE-pi/autostart

2、添加透明度设置: 在打开的文件中,你需要添加一行来设置透明度。将以下行添加到文件的末尾:

css 复制代码
@xsetroot -solid rgba:0x00/0x00/0x00/0x00

3、重启板子

markdown 复制代码
    sudo reboot

用 electron 编写一个桌面程序并打包

这里必须使用 cnpm 不然国内网络下载会很慢!或者无法下载。

1、增加 package.json 文件

js 复制代码
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^28.2.0",
    "electron-builder": "^24.9.1"
  },
  "homepage": "./build",
  "main": "electronjs/main.js",
  "author": {
    "name": "xmio",
    "email": "xxx@domain.com",
    "url": "https://your-website.com"
  },
  "dependencies": {
    "auto-launch": "^5.0.6",
    "electron-squirrel-startup": "^1.0.0",
    "electron-updater": "^6.1.7",
    "request": "^2.88.2",
    "resolve": "1.10.0"
  },
  "build": {
    "productName": "测试项目",
    "appId": "com.xmio.testProject",
    "copyright": "xmio",
    "files": [
      "electronjs/**/*",
      "package.json",
      "icon.png",
      "config.js",
      "web/*"
    ],
    "directories": {
      "buildResources": ".",
      "output": "release"
    },
    "linux": {
      "target": {
        "target": "appimage",
        "arch": [
          "armv7l"
        ]
      }
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://xxx.com/"
      }
    ], 
  },
  "scripts": {  
    "start": "electron ./electronjs/main.js --enable-logging",
    "dist": "electron-builder"
  }
}

2、安装依赖

cnpm install

3、新增 .npmrc 文件 cnpm 证书过期了,只能用来安装依赖,实际打包还得用 npmmirror

ini 复制代码
disturl=https://registry.npmmirror.com/-/binary/node
ELECTRON_MIRROR=https://registry.npmmirror.com/-/binary/electron/

4、修改主程序代码 electronjs/main.js

scala 复制代码
mainWindow = new BrowserWindow({  
    // ...
    frame: false,
    type: "toolbar", 
    transparent: true, 
    backgroundColor: "#00000000", 
    // ...
});

5、记得将页面的背景也设置为透明的

开启窗口合成(Composition)

就是让窗口支持透明

linux dedpin

树莓派

默认就开启的

打包

打包为 Dedpin 上面的运行程序

改一下打包目标

json 复制代码
 "linux": {
      "target": {
        "target": "appimage", 
  }

Dedpin 上面的效果

点击打包出来的文件

打包为 树莓派4B 上面的运行程序

改一下打包目标,直接打包成可执行文件

json 复制代码
    "linux": {
      "target": {
        "target": "appimage",
        "arch": [
          "armv7l"
        ]
      }
    },

效果

注意要将执行文件的权限放开

相关推荐
热爱嵌入式的小许3 小时前
Linux基础项目开发1:量产工具——显示系统
linux·运维·服务器·韦东山量产工具
韩楚风7 小时前
【linux 多进程并发】linux进程状态与生命周期各阶段转换,进程状态查看分析,助力高性能优化
linux·服务器·性能优化·架构·gnu
陈苏同学7 小时前
4. 将pycharm本地项目同步到(Linux)服务器上——深度学习·科研实践·从0到1
linux·服务器·ide·人工智能·python·深度学习·pycharm
Ambition_LAO7 小时前
解决:进入 WSL(Windows Subsystem for Linux)以及将 PyCharm 2024 连接到 WSL
linux·pycharm
Pythonliu78 小时前
茴香豆 + Qwen-7B-Chat-Int8
linux·运维·服务器
你疯了抱抱我8 小时前
【RockyLinux 9.4】安装 NVIDIA 驱动,改变分辨率,避坑版本。(CentOS 系列也能用)
linux·运维·centos
追风赶月、8 小时前
【Linux】进程地址空间(初步了解)
linux
栎栎学编程8 小时前
Linux中环境变量
linux
挥剑决浮云 -8 小时前
Linux 之 安装软件、GCC编译器、Linux 操作系统基础
linux·服务器·c语言·c++·经验分享·笔记
小O_好好学9 小时前
CentOS 7文件系统
linux·运维·centos