Electron Clock 跟 Alarm 的 tutorial
建立專案
mkdir electron-alarm-clock && cd electron-alarm-clock
npm init -y安裝 electron，會安裝到 electron-alarm-clock/node_modules 裡面
npm install --save--dev electron修改 package.json，"main" 及 "scripts" 的部分
{
"name": "electron-alarm-clock",
"version": "1.0.0",
"description": "",
"main": "app/main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^13.1.9"
}
}建立 main.js
const {
app,
BrowserWindow
} = require('electron')
const path = require('path')
const url = require('url')
app.on('ready', createWindow)
app.on('window-all-closed', () => {
// darwin = MacOS
if (process.platform !== 'darwin') {
return false;
}
app.quit()
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 400,
height: 400,
maximizable: false,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
// Open DevTools.
// win.webContents.openDevTools()
// When Window Close.
win.on('closed', () => {
win = null
})
// When Window Minimize
win.on('minimize', () => {
win.hide()
})
}index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Electron</title>
</head>
<body>
<h1>Hello Electron</h1>
<p>Node Version:
<script>document.write(process.versions.node)</script>
</p>
<p>Chrome Version:
<script>document.write(process.versions.chrome)</script>
</p>
<p>Electron Version:
<script>document.write(process.versions.electron)</script>
</p>
</body>
</html>啟動
npm start
Clock
安裝 moment 套件
npm install --save moment修改 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Electron</title>
</head>
<body>
<h1>Hello Electron</h1>
<p>Node Version:
<script>document.write(process.versions.node)</script>
</p>
<p>Chrome Version:
<script>document.write(process.versions.chrome)</script>
</p>
<p>Electron Version:
<script>document.write(process.versions.electron)</script>
</p>
<hr>
<div class="now-time"></div>
<input type="text" class="alarm-time">
<script src="app.js"></script>
</body>
</html>新增 app.js
const moment = require('moment')
const elNow = document.querySelector('.now-time')
const elAlarm = document.querySelector('.alarm-time')
elAlarm.addEventListener('change', onAlarmTextChange)
let time = moment()
// 目前的時間
let nowTime
// alarm 時間，預設為目前的時間 + 5 seconds
let alarmTime
/** Set Time */
const now = moment(time).format('HH:mm:ss')
nowTime = now
elNow.innerText = now
const alarm = moment(time).add(5, 'seconds').format('HH:mm:ss')
alarmTime = alarm
elAlarm.value = alarm
timer()
/** Now Time */
function timer() {
time = moment().format('HH:mm:ss')
/** Set Now */
nowTime = time
elNow.innerText = time
setTimeout(() => {
timer()
}, 1000)
}
/**
* Save To Global Variable,
* Can't Read Dom In Minimize Status.
* @param {event} event
*/
function onAlarmTextChange(event) {
alarmTime = event.target.value
}啟動後，會看到畫面上增加 clock 部分，時間會一直不斷地更新
Alarm
安裝 node-notifier 套件
npm install --save node-notifier修改 app.js
const notifier = require('node-notifier')
const path = require('path')
const moment = require('moment')
const elNow = document.querySelector('.now-time')
const elAlarm = document.querySelector('.alarm-time')
elAlarm.addEventListener('change', onAlarmTextChange)
let time = moment()
// 目前的時間
let nowTime
// alarm 時間，預設為目前的時間 + 5 seconds
let alarmTime
/** Set Time */
const now = moment(time).format('HH:mm:ss')
nowTime = now
elNow.innerText = now
const alarm = moment(time).add(5, 'seconds').format('HH:mm:ss')
alarmTime = alarm
elAlarm.value = alarm
timer()
/** Now Time */
function timer() {
time = moment().format('HH:mm:ss')
/** Set Now */
nowTime = time
elNow.innerText = time
check()
setTimeout(() => {
timer()
}, 1000)
}
/** Check Time */
function check() {
const diff = moment(nowTime, 'HH:mm:ss').diff(moment(alarmTime, 'HH:mm:ss'))
if (diff === 0) {
//alert('wake up!')
const msg = "It's" + alarmTime + ". Wake Up!"
/** const msg = `It's ${alarmTime}. Wake Up!` */
notice(msg)
}
}
/**
* System Notification
* @param {string} msg
*/
function notice(msg) {
/** https://github.com/mikaelbr/node-notifier */
notifier.notify({
title: 'Alarm Clock',
message: msg,
icon: path.join(__dirname, 'clock.ico'),
sound: true,
})
}
/**
* Save To Global Variable,
* Can't Read Dom In Minimize Status.
* @param {event} event
*/
function onAlarmTextChange(event) {
alarmTime = event.target.value
}Tray
讓 application 能夠隱藏到系統列
修改 main.js
const {
app,
BrowserWindow,
Tray,
Menu,
} = require('electron')function createWindow() {
// ........ skipped
// When Window Close.
win.on('closed', () => {
win = null
})
// Create Tray
createTray()
}
// 這邊是 windows 的寫法, mac 沒有出現這兩個選單
function createTray() {
let appIcon = null
const iconPath = path.join(__dirname, 'clock.ico')
const contextMenu = Menu.buildFromTemplate([{
label: 'AlarmClock',
click() {
win.show()
}
},
{
label: 'Quit',
click() {
win.removeAllListeners('close')
win.close()
}
}
]);
appIcon = new Tray(iconPath)
appIcon.setToolTip('Alarm Clock')
appIcon.setContextMenu(contextMenu)
}IPC
透過 IPC，能夠從 renderer process 呼叫 main process，重新將 application 顯示在前景
修改 app.js
let ipcRenderer = require('electron').ipcRenderer;
/**
* System Notification
* @param {string} msg
*/
function notice(msg) {
/** https://github.com/mikaelbr/node-notifier */
notifier.notify({
title: 'Alarm Clock',
message: msg,
icon: path.join(__dirname, 'clock.ico'),
sound: true,
})
/** Show Application */
ipcRenderer.send('show-main-window');
}利用 ipcRenderer.send('show-main-window'); 發送 "show-main-window" 給 main process
修改 main.js
const {
app,
BrowserWindow,
Tray,
Menu,
ipcMain
} = require('electron')
//> ipcMain is ipc of main process
//> ipcMain listen to show-main-window channel here
ipcMain.on('show-main-window', () => {
console.log('show-main-window by ipc');
win.show();
});當程式啟動後，把 application 縮小到背景，alarm 時間到了的時候，就會透過 IPC 將 application window 顯示到前景，同時產生一個系統的 notification
沒有留言:
張貼留言