Использование электрона для отображения значения на слайдере сенсорной панели

Question

Я хотел бы показать значение из TouchBarSlider в соответствии с тем, куда я его перевожу. Пример пример TouchBar можно следовать здесь. Я до сих пор не могу понять, как отобразить значение с помощью данного метода change от TouchBarSlider,

Мой текущий main.js выглядит следующим образом.

const {app, BrowserWindow, TouchBar} = require('electron')

const {TouchBarLabel, TouchBarSlider} = TouchBar
const slider = new TouchBarSlider({label: 'angle',
                                   minValue: 0,
                                   maxValue: 360})
const result = new TouchBarLabel()
result.label = '30' + ' deg'; 

const updateBar = () => {
  let timeout = 100;
  if (slider.change()){
    result.label = slider.values.toString() + ' deg'
  }
  setTimeout(updateBar, timeout)
}

const touchBar = new TouchBar([
  slider, // add slider
  result // add display for slider value but doesn't work yet
])

let window;

app.once('ready', () => {
  window = new BrowserWindow({
    width: 300,
    height: 200
  });
  window.loadURL('about:blank')
  window.setTouchBar(touchBar);
})

// Quit when all windows are closed and no other one is listening to this.
app.on('window-all-closed', () => {
    app.quit();
});

У меня также есть пример хранилища здесь. Вы можете просто заменить мои данные main.js в проекте, чтобы опробовать вещи. Моя электронная версия 1.6.4 и версия узла 7.4.0

Answer 1

const { app, BrowserWindow, TouchBar } = require('electron');
const path = require('path')
const url = require('url')

const {TouchBarButton, TouchBarLabel, TouchBarSlider} = TouchBar

const result = new TouchBarLabel();
result.label = '30' + ' deg';

const slider = new TouchBarSlider({
                               label: 'angle',
                               minValue: 0,
                               maxValue: 360,
                               change: (val) => result.label = val.toString() + ' deg' // register event handler here!
                              });

const touchBar = new TouchBar([
  slider, // add slider
  result // add display for slider value
]);

let window;

app.once('ready', () => {
  window = new BrowserWindow({
  width: 300,
  height: 200
 });
  window.loadURL('about:blank');
  window.setTouchBar(touchBar);
});

// Quit when all windows are closed and no other one is listening to this.
app.on('window-all-closed', () => {
  app.quit();
});

Рабочий код. Надеюсь это поможет!;)