应用场景
大厅展示,大屏在墙上,下面有一个带有触控屏的一体机与大屏链接并负责空值大屏展示。
需要在写两个两个页面,第一个在一体机触控屏上,一个在大屏展示。
控制流程
原理:利用html控制进程间通信的技术实现小屏控制大屏的操作
简单的实现小屏控制大屏展示,具体样式展示要根据公司要求进行创造。
主要代码
main.js主进程函数
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain, screen} = require('electron')
const path = require('node:path')
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS']=true
let win = null
let childWindows = {};
const preload = path.join(__dirname, 'preload.js')
const createWindow = () => {
// Create the browser window.
win = new BrowserWindow({
width: 2560,
height: 1600,
frame: false,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加载 index.html
win.loadFile('mainBoard.html')
// 打开开发工具
// win.webContents.openDevTools()
}
// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件,然后用 require 导入。
// New window example arg: new windows url
ipcMain.handle('open-win', (_, path, arg) => {
const displayScreen = screen.getAllDisplays().find(it => {
return it.size.width > 1800;
});
if (displayScreen == null) {
return;
}
const childWindow = new BrowserWindow({
type: 'DisplayScreen',
frame: false,
x: displayScreen.workArea.x,
y: displayScreen.workArea.y,
// width: displayScreen.workArea.width,
// height: displayScreen.workArea.height,
fullscreen: true,
webPreferences: {
preload: preload,
nodeIntegration: true,
contextIsolation: true,
},
parent: win,
})
childWindow.loadFile('index.html')
if (arg.id) {
childWindows[arg.id] = childWindow;
}
// 打开开发工具
// childWindow.webContents.openDevTools()
})
ipcMain.on('ctrl-signal', (_, arg) => {
BrowserWindow.getAllWindows().forEach((it) => {
const url = it.webContents.getURL();
if (url != null && url.endsWith("index.html")) {
it.webContents.send('ctrl-signal', arg)
}
})
})
ipcMain.on('close', (_, id, arg) => {
if (childWindows[id]) {
childWindows[id].close();
delete childWindows[id];
}
})
ipcMain.on('exit', (_, id, arg) => {
win = null
if (process.platform !== 'darwin') app.quit()
})
创建好主进程后,以后就靠它广播小屏发给大屏的信号了
在小平端主要代码如下:
mainBoard.html负责与用户交互,发信号给大屏,需要先发送给主进程,可以通过主进程广播给其他进程
function openDisplayScreen() {
var div = document.getElementById('polygonId');
div.style.opacity = 0;
setTimeout(function () {
div.style.display = 'none';
}, 250);
var div2 = document.getElementById('pt_triggerId');
setTimeout(function () {
div2.style.opacity = 1;
}, 250);
div2.style.display = 'block';
if (isOpen === 1) {
isOpen++;
window.ipcRenderer.invoke('open-win', 'display', { id: 1 });
}
}
function closeDisplayScreen() {
if (isOpen === 2) {
isOpen--;
window.ipcRenderer.send("close", 1)
}
}
function exit() {
window.ipcRenderer.send("exit",)
}
主要是通过
window.ipcRenderer.send(“close”, 1)
这段发送给到主进程,其中“close”是名称,主进程中会有监听接收广播名为这个的信息, 1 就是广播携带的数据。
上下翻页功能
功能实现代码
$iterateUp.on("click", function () {
// nextPage(2);
window.ipcRenderer.send("ctrl-signal", {
date: dayjs().format("YYYY-MM-DD HH:mm:ss"),
project: 2,
});
});
这个消息还是先发送给main主线程,再由主线程广播出去,然今后由大屏展示代码捕捉到
大屏展示主要代码:
window.ipcRenderer.on('ctrl-signal', (event, arg) => {
// 在这里处理接收到的 arg 数据
project = arg.project;
console.log(project);
// let projectData = getListByProjectName(project)
// let htmlTable = jsonToHtmlTable(projectData);
// let tableContainer = document.getElementById("echart4");
// tableContainer.innerHTML = htmlTable;
if (project === 1){
PageButton(1);
}else{
nextPageButton(2);
}
});
然后执行你想执行的任务。
综上就完成了整个过程。
简单的放一个展示效果:
需要放视频比较麻烦以后有机会再放吧。