2017-07-24 08:29:03 +00:00
|
|
|
|
# Class: TouchBar
|
2016-12-02 12:58:02 +00:00
|
|
|
|
|
|
|
|
|
> Create TouchBar layouts for native macOS applications
|
|
|
|
|
|
|
|
|
|
Process: [Main](../tutorial/quick-start.md#main-process)
|
|
|
|
|
|
2017-04-03 22:12:57 +00:00
|
|
|
|
### `new TouchBar(options)` _Experimental_
|
2016-12-02 12:58:02 +00:00
|
|
|
|
|
2017-07-24 08:29:03 +00:00
|
|
|
|
* `options` Object
|
2017-04-03 22:12:57 +00:00
|
|
|
|
* `items` ([TouchBarButton](touch-bar-button.md) | [TouchBarColorPicker](touch-bar-color-picker.md) | [TouchBarGroup](touch-bar-group.md) | [TouchBarLabel](touch-bar-label.md) | [TouchBarPopover](touch-bar-popover.md) | [TouchBarScrubber](touch-bar-scrubber.md) | [TouchBarSegmentedControl](touch-bar-segmented-control.md) | [TouchBarSlider](touch-bar-slider.md) | [TouchBarSpacer](touch-bar-spacer.md))[]
|
|
|
|
|
* `escapeItem` ([TouchBarButton](touch-bar-button.md) | [TouchBarColorPicker](touch-bar-color-picker.md) | [TouchBarGroup](touch-bar-group.md) | [TouchBarLabel](touch-bar-label.md) | [TouchBarPopover](touch-bar-popover.md) | [TouchBarScrubber](touch-bar-scrubber.md) | [TouchBarSegmentedControl](touch-bar-segmented-control.md) | [TouchBarSlider](touch-bar-slider.md) | [TouchBarSpacer](touch-bar-spacer.md)) (optional)
|
2016-12-02 12:58:02 +00:00
|
|
|
|
|
2017-03-03 17:54:46 +00:00
|
|
|
|
Creates a new touch bar with the specified items. Use
|
|
|
|
|
`BrowserWindow.setTouchBar` to add the `TouchBar` to a window.
|
2016-12-02 12:58:02 +00:00
|
|
|
|
|
2017-03-07 17:42:45 +00:00
|
|
|
|
**Note:** The TouchBar API is currently experimental and may change or be
|
|
|
|
|
removed in future Electron releases.
|
|
|
|
|
|
2017-04-17 07:37:05 +00:00
|
|
|
|
**Tip:** If you don't have a MacBook with Touch Bar, you can use
|
|
|
|
|
[Touch Bar Simulator](https://github.com/sindresorhus/touch-bar-simulator)
|
|
|
|
|
to test Touch Bar usage in your app.
|
|
|
|
|
|
2017-04-03 16:34:55 +00:00
|
|
|
|
### Instance Properties
|
2017-03-27 00:22:52 +00:00
|
|
|
|
|
2017-04-03 16:34:55 +00:00
|
|
|
|
The following properties are available on instances of `TouchBar`:
|
2017-03-27 00:22:52 +00:00
|
|
|
|
|
2017-04-03 16:34:55 +00:00
|
|
|
|
#### `touchBar.escapeItem`
|
2017-03-27 00:22:52 +00:00
|
|
|
|
|
2017-07-24 08:29:03 +00:00
|
|
|
|
The `TouchBarButton` that will replace the "esc" button on the touch bar when set.
|
2017-04-03 16:34:55 +00:00
|
|
|
|
Setting to `null` restores the default "esc" button. Changing this value
|
|
|
|
|
immediately updates the escape item in the touch bar.
|
2017-03-27 00:22:52 +00:00
|
|
|
|
|
2016-12-02 12:58:02 +00:00
|
|
|
|
## Examples
|
|
|
|
|
|
2017-03-03 17:54:46 +00:00
|
|
|
|
Below is an example of a simple slot machine touch bar game with a button
|
|
|
|
|
and some labels.
|
2016-12-02 12:58:02 +00:00
|
|
|
|
|
|
|
|
|
```javascript
|
2017-03-03 17:54:46 +00:00
|
|
|
|
const {app, BrowserWindow, TouchBar} = require('electron')
|
|
|
|
|
|
|
|
|
|
const {TouchBarLabel, TouchBarButton, TouchBarSpacer} = TouchBar
|
|
|
|
|
|
|
|
|
|
let spinning = false
|
|
|
|
|
|
|
|
|
|
// Reel labels
|
|
|
|
|
const reel1 = new TouchBarLabel()
|
|
|
|
|
const reel2 = new TouchBarLabel()
|
|
|
|
|
const reel3 = new TouchBarLabel()
|
|
|
|
|
|
|
|
|
|
// Spin result label
|
|
|
|
|
const result = new TouchBarLabel()
|
|
|
|
|
|
|
|
|
|
// Spin button
|
|
|
|
|
const spin = new TouchBarButton({
|
|
|
|
|
label: '🎰 Spin',
|
|
|
|
|
backgroundColor: '#7851A9',
|
|
|
|
|
click: () => {
|
|
|
|
|
// Ignore clicks if already spinning
|
|
|
|
|
if (spinning) {
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
spinning = true
|
|
|
|
|
result.label = ''
|
|
|
|
|
|
|
|
|
|
let timeout = 10
|
|
|
|
|
const spinLength = 4 * 1000 // 4 seconds
|
|
|
|
|
const startTime = Date.now()
|
|
|
|
|
|
|
|
|
|
const spinReels = () => {
|
|
|
|
|
updateReels()
|
|
|
|
|
|
|
|
|
|
if ((Date.now() - startTime) >= spinLength) {
|
|
|
|
|
finishSpin()
|
|
|
|
|
} else {
|
|
|
|
|
// Slow down a bit on each spin
|
|
|
|
|
timeout *= 1.1
|
|
|
|
|
setTimeout(spinReels, timeout)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
spinReels()
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const getRandomValue = () => {
|
2017-03-03 18:54:21 +00:00
|
|
|
|
const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀']
|
2017-03-03 17:54:46 +00:00
|
|
|
|
return values[Math.floor(Math.random() * values.length)]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const updateReels = () => {
|
|
|
|
|
reel1.label = getRandomValue()
|
|
|
|
|
reel2.label = getRandomValue()
|
|
|
|
|
reel3.label = getRandomValue()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const finishSpin = () => {
|
|
|
|
|
const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size
|
|
|
|
|
if (uniqueValues === 1) {
|
|
|
|
|
// All 3 values are the same
|
|
|
|
|
result.label = '💰 Jackpot!'
|
2017-03-03 23:14:51 +00:00
|
|
|
|
result.textColor = '#FDFF00'
|
2017-03-03 17:54:46 +00:00
|
|
|
|
} else if (uniqueValues === 2) {
|
|
|
|
|
// 2 values are the same
|
|
|
|
|
result.label = '😍 Winner!'
|
2017-03-03 23:14:51 +00:00
|
|
|
|
result.textColor = '#FDFF00'
|
2017-03-03 17:54:46 +00:00
|
|
|
|
} else {
|
|
|
|
|
// No values are the same
|
|
|
|
|
result.label = '🙁 Spin Again'
|
2017-03-03 23:14:51 +00:00
|
|
|
|
result.textColor = null
|
2017-03-03 17:54:46 +00:00
|
|
|
|
}
|
|
|
|
|
spinning = false
|
|
|
|
|
}
|
2016-12-02 12:58:02 +00:00
|
|
|
|
|
|
|
|
|
const touchBar = new TouchBar([
|
2017-03-03 17:54:46 +00:00
|
|
|
|
spin,
|
|
|
|
|
new TouchBarSpacer({size: 'large'}),
|
|
|
|
|
reel1,
|
2017-03-03 23:14:51 +00:00
|
|
|
|
new TouchBarSpacer({size: 'small'}),
|
2017-03-03 17:54:46 +00:00
|
|
|
|
reel2,
|
2017-03-03 23:14:51 +00:00
|
|
|
|
new TouchBarSpacer({size: 'small'}),
|
2017-03-03 17:54:46 +00:00
|
|
|
|
reel3,
|
|
|
|
|
new TouchBarSpacer({size: 'large'}),
|
|
|
|
|
result
|
2016-12-02 12:58:02 +00:00
|
|
|
|
])
|
|
|
|
|
|
2017-03-03 17:54:46 +00:00
|
|
|
|
let window
|
|
|
|
|
|
|
|
|
|
app.once('ready', () => {
|
|
|
|
|
window = new BrowserWindow({
|
|
|
|
|
frame: false,
|
2017-06-05 21:07:57 +00:00
|
|
|
|
titleBarStyle: 'hiddenInset',
|
2017-03-03 17:54:46 +00:00
|
|
|
|
width: 200,
|
|
|
|
|
height: 200,
|
|
|
|
|
backgroundColor: '#000'
|
|
|
|
|
})
|
|
|
|
|
window.loadURL('about:blank')
|
|
|
|
|
window.setTouchBar(touchBar)
|
|
|
|
|
})
|
2016-12-02 12:58:02 +00:00
|
|
|
|
```
|
2017-04-27 21:22:56 +00:00
|
|
|
|
|
2017-04-27 19:19:17 +00:00
|
|
|
|
### Running the above example
|
2017-04-27 21:22:56 +00:00
|
|
|
|
|
2017-04-27 19:19:17 +00:00
|
|
|
|
To run the example above, you'll need to (assuming you've got a terminal open in the dirtectory you want to run the example):
|
|
|
|
|
|
2017-04-27 21:22:56 +00:00
|
|
|
|
1. Save the above file to your computer as `touchbar.js`
|
|
|
|
|
2. Install Electron via `npm install electron`
|
|
|
|
|
3. Run the example inside Electron: `./node_modules/.bin/electron touchbar.js`
|
2017-04-27 19:19:17 +00:00
|
|
|
|
|
2017-04-27 21:22:56 +00:00
|
|
|
|
You should then see a new Electron window and the app running in your touch bar (or touch bar emulator).
|