├── .gitignore
├── touch-bar-demo.gif
├── index.html
├── package.json
├── README.md
├── LICENSE
└── main.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .idea
3 | *.iml
4 |
--------------------------------------------------------------------------------
/touch-bar-demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pahund/electron-touch-bar/HEAD/touch-bar-demo.gif
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Hello World!
6 |
7 |
8 | Hello World!
9 | We are using node
10 |
11 | ,
12 | Chrome
13 |
14 | ,
15 | and Electron
16 |
17 | .
18 |
19 |
20 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "electron-touch-bar",
3 | "version": "1.0.0",
4 | "description": "Demo Electron app with Mac touch bar",
5 | "main": "main.js",
6 | "scripts": {
7 | "start": "electron .",
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "repository": "https://github.com/pahund/electron-touch-bar",
11 | "author": "Patrick Hund ",
12 | "license": "ISC",
13 | "dependencies": {
14 | "electron": "^1.6.6"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # electron-touch-bar
2 |
3 | A little demo Electron app showing how to program the new MacBook Pro's touch bar.
4 |
5 | 
6 |
7 | Code is directly taken from these two docs from the Electron team, **all credit goes to them!**
8 |
9 | * [quick-start.md](https://github.com/electron/electron/blob/master/docs/tutorial/quick-start.md)
10 | * [touch-bar.md](https://github.com/electron/electron/blob/master/docs/api/touch-bar.md)
11 |
12 | ## Prerequisites
13 |
14 | * latest version of [Node.js](https://nodejs.org/) (at least 6.x.x)
15 | * [MacBook Pro](http://www.apple.com/macbook-pro/) laptop with touch bar
16 |
17 | ## How to Install
18 |
19 | npm install
20 |
21 | ## How to Run
22 |
23 | npm start
24 |
25 | ## License
26 |
27 | Copyright (C) 2017 Patrick Hund ([MIT](LICENSE))
28 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (C) 2017 Patrick Hund
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 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const electron = require('electron');
2 |
3 | const { app, BrowserWindow, TouchBar } = require('electron');
4 | const { TouchBarLabel, TouchBarButton, TouchBarSpacer } = TouchBar;
5 | const path = require('path');
6 | const url = require('url');
7 |
8 | // Keep a global reference of the window object, if you don't, the window will
9 | // be closed automatically when the JavaScript object is garbage collected.
10 | let win;
11 |
12 | let spinning = false;
13 |
14 | // Reel labels
15 | const reel1 = new TouchBarLabel();
16 | const reel2 = new TouchBarLabel();
17 | const reel3 = new TouchBarLabel();
18 |
19 | // Spin result label
20 | const result = new TouchBarLabel();
21 |
22 | // Spin button
23 | const spin = new TouchBarButton({
24 | label: '🎰 Spin',
25 | backgroundColor: '#7851A9',
26 | click: () => {
27 | // Ignore clicks if already spinning
28 | if (spinning) {
29 | return
30 | }
31 |
32 | spinning = true;
33 | result.label = '';
34 |
35 | let timeout = 10;
36 | const spinLength = 4 * 1000; // 4 seconds
37 | const startTime = Date.now();
38 |
39 | const spinReels = () => {
40 | updateReels();
41 |
42 | if ((Date.now() - startTime) >= spinLength) {
43 | finishSpin();
44 | } else {
45 | // Slow down a bit on each spin
46 | timeout *= 1.1;
47 | setTimeout(spinReels, timeout);
48 | }
49 | };
50 |
51 | spinReels()
52 | }
53 | });
54 |
55 | const getRandomValue = () => {
56 | const values = ['🍒', '💎', '7️⃣', '🍊', '🔔', '⭐', '🍇', '🍀'];
57 | return values[Math.floor(Math.random() * values.length)];
58 | };
59 |
60 | const updateReels = () => {
61 | reel1.label = getRandomValue();
62 | reel2.label = getRandomValue();
63 | reel3.label = getRandomValue();
64 | };
65 |
66 | const finishSpin = () => {
67 | const uniqueValues = new Set([reel1.label, reel2.label, reel3.label]).size;
68 | if (uniqueValues === 1) {
69 | // All 3 values are the same
70 | result.label = '💰 Jackpot!';
71 | result.textColor = '#FDFF00';
72 | } else if (uniqueValues === 2) {
73 | // 2 values are the same
74 | result.label = '😍 Winner!';
75 | result.textColor = '#FDFF00';
76 | } else {
77 | // No values are the same
78 | result.label = '🙁 Spin Again';
79 | result.textColor = null;
80 | }
81 | spinning = false;
82 | };
83 |
84 | const touchBar = new TouchBar([
85 | spin,
86 | new TouchBarSpacer({size: 'large'}),
87 | reel1,
88 | new TouchBarSpacer({size: 'small'}),
89 | reel2,
90 | new TouchBarSpacer({size: 'small'}),
91 | reel3,
92 | new TouchBarSpacer({size: 'large'}),
93 | result
94 | ]);
95 |
96 | function createWindow() {
97 | // Create the browser window.
98 | win = new BrowserWindow({ width: 800, height: 600 });
99 |
100 | // and load the index.html of the app.
101 | win.loadURL(url.format({
102 | pathname: path.join(__dirname, 'index.html'),
103 | protocol: 'file:',
104 | slashes: true
105 | }));
106 |
107 | // Open the DevTools.
108 | win.webContents.openDevTools();
109 |
110 | // Emitted when the window is closed.
111 | win.on('closed', () => {
112 | // Dereference the window object, usually you would store windows
113 | // in an array if your app supports multi windows, this is the time
114 | // when you should delete the corresponding element.
115 | win = null;
116 | });
117 |
118 | win.setTouchBar(touchBar);
119 | }
120 |
121 | // This method will be called when Electron has finished
122 | // initialization and is ready to create browser windows.
123 | // Some APIs can only be used after this event occurs.
124 | app.on('ready', createWindow);
125 |
126 | // Quit when all windows are closed.
127 | app.on('window-all-closed', () => {
128 | // On macOS it is common for applications and their menu bar
129 | // to stay active until the user quits explicitly with Cmd + Q
130 | if (process.platform !== 'darwin') {
131 | app.quit();
132 | }
133 | });
134 |
135 | app.on('activate', () => {
136 | // On macOS it's common to re-create a window in the app when the
137 | // dock icon is clicked and there are no other windows open.
138 | if (win === null) {
139 | createWindow();
140 | }
141 | });
142 |
143 | // In this file you can include the rest of your app's specific main process
144 | // code. You can also put them in separate files and require them here.
145 |
--------------------------------------------------------------------------------