dgmid/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

## main.js
const {
  app, BrowserWindow, TouchBar, nativeImage,
} = require('electron');

const { TouchBarPopover, TouchBarButton } = TouchBar;


app.on('ready', () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  const touchBar = new TouchBar({
    items: [
      new TouchBarPopover({
        label: 'Open popover',
        showCloseButton: true,
        items: new TouchBar({
          items: [
            new TouchBarButton({ label: 'item 1' }),
            new TouchBarButton({ label: 'item 2' }),
            new TouchBarButton({ label: 'item 3' }),
            new TouchBarButton({ label: 'item 4' }),
            new TouchBarButton({ label: 'item 5' }),
            new TouchBarButton({ label: 'item 6' }),
            new TouchBarButton({ label: 'item 7' }),
            new TouchBarButton({ label: 'item 8' }),
            new TouchBarButton({ label: 'item 9' }),
            new TouchBarButton({ label: 'item 10' }),
            new TouchBarButton({ label: 'item 11' }),
            new TouchBarButton({ label: 'item 12' })
          ]
        }),
      }),
    ],
  });
  win.loadFile('index.html');
  win.webContents.openDevTools();
  win.setTouchBar(touchBar);
});

## preload.js
// Empty

## renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.

## styles.css
/* Empty */
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	<link rel="stylesheet" type="text/css" href="./styles.css">
	</head>
	<body>
	<h1>Hello World!</h1>
	<!-- All of the Node.js APIs are available in this renderer process. -->
	We are using Node.js <script>document.write(process.versions.node)</script>,
	Chromium <script>document.write(process.versions.chrome)</script>,
	and Electron <script>document.write(process.versions.electron)</script>.

	<script>
	// You can also require other files to run in this process
	require('./renderer.js')
	</script>
	</body>
	</html>
	const {
	app, BrowserWindow, TouchBar, nativeImage,
	} = require('electron');

	const { TouchBarPopover, TouchBarButton } = TouchBar;


	app.on('ready', () => {
	const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true,
	},
	});

	const touchBar = new TouchBar({
	items: [
	new TouchBarPopover({
	label: 'Open popover',
	showCloseButton: true,
	items: new TouchBar({
	items: [
	new TouchBarButton({ label: 'item 1' }),
	new TouchBarButton({ label: 'item 2' }),
	new TouchBarButton({ label: 'item 3' }),
	new TouchBarButton({ label: 'item 4' }),
	new TouchBarButton({ label: 'item 5' }),
	new TouchBarButton({ label: 'item 6' }),
	new TouchBarButton({ label: 'item 7' }),
	new TouchBarButton({ label: 'item 8' }),
	new TouchBarButton({ label: 'item 9' }),
	new TouchBarButton({ label: 'item 10' }),
	new TouchBarButton({ label: 'item 11' }),
	new TouchBarButton({ label: 'item 12' })
	]
	}),
	}),
	],
	});
	win.loadFile('index.html');
	win.webContents.openDevTools();
	win.setTouchBar(touchBar);
	});
	// This file is required by the index.html file and will
	// be executed in the renderer process for that window.
	// All of the Node.js APIs are available in this process.