MacBook Pro 충전기 정보를 메뉴바에 표시하는 Electron 앱을 만들었다
예를 들어, 제 경우 RAVPower의 Type-A와 Type-C 모두 사용할 수 있으며 최대 60W까지 공급할 수 있는 충전기를 평상시 사용하고 있습니다.
그러나 Type-A와 Type-C에 각각 iPhone과 MacBook Pro에 동시에 충전하려고 하면 45W에 공급되는 전력이 저하되어 버립니다.
이 상태에서 열심히 일하고 있으면 점차 배터리가 줄어 버립니다.
줄이지 않아도 충전 속도가 상당히 느려진다.
충전기, 케이블, PD 대응 등, Type-C 관련은 사양이 지나치게 복잡하기 때문에, 연결해 보지 않으면 정직 알 수 없습니다.
충전할 수 있었다고 해도, 이 공급 전력의 정보는 꽤 깊은 곳에 있으므로 확인하기 어렵다.
그럼 메뉴 바에 표시하는 앱을 만들어 버려!
만든
Charger Information for Mac
라는 앱을 Electron으로 만들었습니다.htps : // 기주 b. 코 m / 나리 케이 / 찬 r
앱을 도입하면 화면 상단의 메뉴 바에 충전기의 전원이 표시됩니다.
더 만들었다.
이 응용 프로그램을 제대로 Swift로 다시 만들었습니다.
Electron에서 환승하여 기계 자원 소비를 줄이고,
이쪽은 Mac App Store에서 전달도 해 보았습니다. (1월중은 무료로 공개하고 있습니다!)
htps : // 아 ps. 아 ぇ. 이 m / jp / 아 p / 와타게 ゔ 에우 ぇ r / い d1548099536? mt=12
충전 정보 얻기
Mac의 경우 이 상세한 충전기의 공급 전력의 정보는 시스템 리포트로부터 확인하지 않으면 안됩니다만,ioreg
명령으로 얻을 수 있습니다.
$ ioreg -rn AppleSmartBattery | grep '"AdapterDetails"'
"AdapterDetails" = {"Watts"=30,"Current"=1500,"PMUConfiguration"=0,"Voltage"=20000}
Watts: 전력(W)
Current: 전류(mA)
Voltage: 전압(mV)
그리고 각각 얻을 수 있습니다.
전류와 전압은 1/1000으로 계산하면 단위에서 m이 취해져 알기 쉽다.
Node.js에서 Mac 명령을 두드리는
child_process
에서 OS 명령을 실행할 수 있습니다.execSync
는 동기화.
const { execSync } = require('child_process');
const stdout = execSync('ioreg -rn AppleSmartBattery | grep \\\"AdapterDetails\\\"');
메뉴 바에 아이콘 표시
Tray
라는 모듈을 사용하여 메뉴 바에 아이콘을 추가할 수 있습니다.
const { app, Tray, Menu, MenuItem } = require('electron');
const ICON_PATH = 'icon.png';
app.on('ready', () => {
const appIcon = new Tray(ICON_PATH);
const menu = new Menu();
menu.append(new MenuItem({
label: 'item',
click: () => {
alert('click item');
},
}));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ role: 'quit' }));
appIcon.setContextMenu(menu);
});
이러한 느낌의 기술로 충전 상태와 비충전 상태로 아이콘을 바꿀 수 있습니다.
if (!isCharging()) {
appIcon.setImage(ICON_MISSED_PATH);
return;
}
appIcon.setImage(ICON_CHARGING_PATH);
Dock에서 아이콘 숨기기
Electron 앱을 실행하면 Dock에 아이콘이 표시되지만,
이런 상주형 앱에서는 Dock에 있어도 방해일 뿐이므로 숨깁니다.app.dock.hide()
로 숨겨집니다.
const { app } = require('electron');
app.on('ready', () => {
app.dock.hide();
});
충전 정보 알림
Notification
모듈을 사용하여 Mac 알림 기능에 던질 수 있습니다.
충전 정보가 변경되었을 때, 통지할 수 있도록 했습니다.
const { app, Notification } = require('electron');
app.on('ready', () => {
const notification = new Notification({
title: '⚡Charging',
body: 'Power: 30W\nVoltage: 20V / Current: 1.5A',
silent: true,
});
notification.show();
});
\n
로 개행할 수 있습니다만, 아무래도 처음의 1개 이후는 무시되는 것 같다. . .
다크 모드 대응
어두운 모드는 존재를 완전히 잊었다. ( htps : // 기주 b. 코 m / 나리 케이 / 짱 r )
const { app, nativeTheme } = require('electron');
app.on('ready', () => {
if (nativeTheme.shouldUseDarkColors) {
charging_path = ICON__WHITE_PATH;
return;
}
appIcon.setImage(ICON__BLACK_PATH);
});
신청하기
Electron 빌드에는 몇 가지 방법이 있지만,
개인적으로 electron-builder
로 포장하기 쉽습니다.
추가
devDependencies
하지 않으면 빌드 시 화나게 됩니다.
$ yarn add --dev electron-builder
아이콘 만들기
icons.iconset
라는 디렉토리를 만들고 그 안에 각 크기의 아이콘 이미지를 넣고,electron-builder
에 건네주면 좋다.
(이번 Dock에 표시되지 않고, 도입시에만 볼 기회는 없지만 일단,,,)
빌드 정보 작성
빌드 정보는 package.json
에 기술해 갑니다.
package.json{
"name": "charger-information-for-mac",
"main": "main.js",
"scripts": {
"build": "electron-builder"
},
"devDependencies": {
"electron": "^7.1.2",
"electron-builder": "^21.2.0"
},
"build": {
"appId": "com.ozonicsky.charger-information-for-mac",
"productName": "Charger Information",
"icon": "icons.iconset",
"mac": {
"target": "dmg"
}
}
}
빌드
$ yarn build
끝
코드는 모두 여기에 공개하고 있습니다.
htps : // 기주 b. 코 m / 나리 케이 / 찬 r
제품판은 이쪽
htps : // 아 ps. 아 ぇ. 이 m / jp / 아 p / 와타게 ゔ 에우 ぇ r / い d1548099536? mt=12
Reference
이 문제에 관하여(MacBook Pro 충전기 정보를 메뉴바에 표시하는 Electron 앱을 만들었다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/narikei/items/aaee2c7e7e1a5ae61015
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ ioreg -rn AppleSmartBattery | grep '"AdapterDetails"'
"AdapterDetails" = {"Watts"=30,"Current"=1500,"PMUConfiguration"=0,"Voltage"=20000}
const { execSync } = require('child_process');
const stdout = execSync('ioreg -rn AppleSmartBattery | grep \\\"AdapterDetails\\\"');
const { app, Tray, Menu, MenuItem } = require('electron');
const ICON_PATH = 'icon.png';
app.on('ready', () => {
const appIcon = new Tray(ICON_PATH);
const menu = new Menu();
menu.append(new MenuItem({
label: 'item',
click: () => {
alert('click item');
},
}));
menu.append(new MenuItem({ type: 'separator' }));
menu.append(new MenuItem({ role: 'quit' }));
appIcon.setContextMenu(menu);
});
if (!isCharging()) {
appIcon.setImage(ICON_MISSED_PATH);
return;
}
appIcon.setImage(ICON_CHARGING_PATH);
const { app } = require('electron');
app.on('ready', () => {
app.dock.hide();
});
const { app, Notification } = require('electron');
app.on('ready', () => {
const notification = new Notification({
title: '⚡Charging',
body: 'Power: 30W\nVoltage: 20V / Current: 1.5A',
silent: true,
});
notification.show();
});
const { app, nativeTheme } = require('electron');
app.on('ready', () => {
if (nativeTheme.shouldUseDarkColors) {
charging_path = ICON__WHITE_PATH;
return;
}
appIcon.setImage(ICON__BLACK_PATH);
});
$ yarn add --dev electron-builder
{
"name": "charger-information-for-mac",
"main": "main.js",
"scripts": {
"build": "electron-builder"
},
"devDependencies": {
"electron": "^7.1.2",
"electron-builder": "^21.2.0"
},
"build": {
"appId": "com.ozonicsky.charger-information-for-mac",
"productName": "Charger Information",
"icon": "icons.iconset",
"mac": {
"target": "dmg"
}
}
}
$ yarn build
Reference
이 문제에 관하여(MacBook Pro 충전기 정보를 메뉴바에 표시하는 Electron 앱을 만들었다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/narikei/items/aaee2c7e7e1a5ae61015텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)