Touchbar Example

├── LICENSE ├── README.md └── app ├── index.html ├── main.js └── package.json /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013-2017 GitHub Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Electron Touchbar Demo 2 | ====================== 3 | 4 | ## Video cast 5 | 6 | https://youtu.be/dha74S8sOZA 7 | 8 | ## How to Use 9 | 10 | 1. Build master branch of [electron](https://github.com/electron/electron) repo following [instruction](https://github.com/electron/electron/blob/master/docs/development/build-instructions-osx.md) because touchbar APIs are not released yet. 11 | 2. Execute `electron/out/R/Electron.app/Contents/MacOS/Electron /path/to/this/repo/app`. Or copy `app` directory to `electron/out/R/Electron.app/Contents/Resources` and execute the `Electron` binary. 12 | 13 | ## License 14 | 15 | The same as Electron. 16 | -------------------------------------------------------------------------------- /app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Touchbar Example 4 | 5 | 6 | Please see touchbar 7 | 8 | 9 | -------------------------------------------------------------------------------- /app/main.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const {app, BrowserWindow, TouchBar} = require('electron') 3 | 4 | const {TouchBarLabel, TouchBarButton, TouchBarSpacer} = TouchBar 5 | 6 | let spinning = false 7 | 8 | // Reel labels 9 | const reel1 = new TouchBarLabel() 10 | const reel2 = new TouchBarLabel() 11 | const reel3 = new TouchBarLabel() 12 | 13 | // Spin result label 14 | const result = new TouchBarLabel() 15 | 16 | // Spin button 17 | const spin = new TouchBarButton({ 18 | label: '🎰 Spin', 19 | backgroundColor: '#7851A9', 20 | click: () => { 21 | // Ignore clicks if already spinning 22 | if (spinning) { 23 | return 24 | } 25 | 26 | spinning = true 27 | result.label = '' 28 | 29 | let timeout = 10 30 | const spinLength = 4 * 1000 // 4 seconds 31 | const startTime = Date.now() 32 | 33 | const spinReels = () => { 34 | updateReels() 35 | 36 | if ((Date.now() - startTime) >= spinLength) { 37 | finishSpin() 38 | } else { 39 | // Slow down a bit on each spin 40 | timeout *= 1.1 41 | setTimeout(spinReels, timeout) 42 | } 43 | } 44 | 45 | spinReels() 46 | } 47 | }) 48 | 49 | const getRandomValue = () => { 50 | const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'] 51 | return values[Math.floor(Math.random() * values.length)] 52 | } 53 | 54 | const updateReels = () => { 55 | reel1.label = getRandomValue() 56 | reel2.label = getRandomValue() 57 | reel3.label = getRandomValue() 58 | } 59 | 60 | const finishSpin = () => { 61 | const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size 62 | if (uniqueValues === 1) { 63 | // All 3 values are the same 64 | result.label = '💰 Jackpot!' 65 | result.textColor = '#FDFF00' 66 | } else if (uniqueValues === 2) { 67 | // 2 values are the same 68 | result.label = '😍 Winner!' 69 | result.textColor = '#FDFF00' 70 | } else { 71 | // No values are the same 72 | result.label = '🙁 Spin Again' 73 | result.textColor = null 74 | } 75 | spinning = false 76 | } 77 | 78 | const touchBar = new TouchBar([ 79 | spin, 80 | new TouchBarSpacer({size: 'large'}), 81 | reel1, 82 | new TouchBarSpacer({size: 'small'}), 83 | reel2, 84 | new TouchBarSpacer({size: 'small'}), 85 | reel3, 86 | new TouchBarSpacer({size: 'large'}), 87 | result 88 | ]) 89 | 90 | let window 91 | 92 | app.once('ready', () => { 93 | window = new BrowserWindow({ 94 | width: 200, 95 | height: 200 96 | }) 97 | window.loadURL(`file://${path.join(__dirname, '/index.html')}`) 98 | window.setTouchBar(touchBar) 99 | }) 100 | 101 | // Quit when all windows are closed and no other one is listening to this. 102 | app.on('window-all-closed', () => { 103 | app.quit() 104 | }) 105 | 106 | -------------------------------------------------------------------------------- /app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-touchbar-sample", 3 | "productName": "Electron TouchBar Sample", 4 | "main": "main.js" 5 | } 6 | --------------------------------------------------------------------------------