MacBook Pro 충전기 정보를 메뉴바에 표시하는 Electron 앱을 만들었다

MacBook Pro에서 사용되는 Type-C의 충전은 조건에 따라 충전 속도가 달라집니다.

예를 들어, 제 경우 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

좋은 웹페이지 즐겨찾기