mirror of
https://github.com/usatiuk/door-thing.git
synced 2025-10-27 03:27:48 +01:00
electron app that can connect/disconnect
This commit is contained in:
57
door-thing-app/src/App.tsx
Normal file
57
door-thing-app/src/App.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { useState } from "preact/hooks";
|
||||
|
||||
export function App() {
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [device, setDevice] = useState<BluetoothDevice>(null);
|
||||
|
||||
const onConnectClick = async () => {
|
||||
try {
|
||||
setConnecting(true);
|
||||
const foundDevice = await navigator.bluetooth.requestDevice({
|
||||
filters: [
|
||||
{
|
||||
namePrefix: "Nano",
|
||||
},
|
||||
],
|
||||
});
|
||||
console.log("Found device:");
|
||||
console.log(foundDevice);
|
||||
setDevice(foundDevice);
|
||||
await foundDevice.gatt.connect();
|
||||
foundDevice.ongattserverdisconnected = onDisconnect;
|
||||
} catch (error) {
|
||||
console.log("Error connecting:");
|
||||
console.log(error);
|
||||
} finally {
|
||||
setConnecting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const onDisconnect = async () => {
|
||||
setDevice(null);
|
||||
};
|
||||
|
||||
const onDisconnectClick = async () => {
|
||||
try {
|
||||
device.gatt.disconnect();
|
||||
} catch (error) {
|
||||
console.log("Error disconnecting:");
|
||||
console.log(error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{connecting && !device && <span>Trying to connect</span>}
|
||||
{device == null && !connecting && (
|
||||
<button onClick={onConnectClick}>Connect</button>
|
||||
)}
|
||||
{device && (
|
||||
<>
|
||||
<span>connected</span>
|
||||
<button onClick={onDisconnectClick}>Disconnect</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
door-thing-app/src/index.css
Normal file
7
door-thing-app/src/index.css
Normal file
@@ -0,0 +1,7 @@
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
|
||||
Arial, sans-serif;
|
||||
margin: auto;
|
||||
max-width: 38rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
10
door-thing-app/src/index.html
Normal file
10
door-thing-app/src/index.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello World!</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
60
door-thing-app/src/index.ts
Normal file
60
door-thing-app/src/index.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
import { app, BrowserWindow } from "electron";
|
||||
// This allows TypeScript to pick up the magic constant that's auto-generated by Forge's Webpack
|
||||
// plugin that tells the Electron app where to look for the Webpack-bundled app code (depending on
|
||||
// whether you're running in development or production).
|
||||
declare const MAIN_WINDOW_WEBPACK_ENTRY: string;
|
||||
|
||||
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
|
||||
if (require("electron-squirrel-startup")) {
|
||||
// eslint-disable-line global-require
|
||||
app.quit();
|
||||
}
|
||||
|
||||
const createWindow = (): void => {
|
||||
// Create the browser window.
|
||||
const mainWindow = new BrowserWindow({
|
||||
height: 600,
|
||||
width: 800,
|
||||
});
|
||||
|
||||
mainWindow.webContents.on(
|
||||
"select-bluetooth-device",
|
||||
(event, deviceList, callback) => {
|
||||
event.preventDefault();
|
||||
if (deviceList && deviceList.length > 0) {
|
||||
callback(deviceList[0].deviceId);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// and load the index.html of the app.
|
||||
mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY);
|
||||
|
||||
// Open the DevTools.
|
||||
mainWindow.webContents.openDevTools();
|
||||
};
|
||||
|
||||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create browser windows.
|
||||
// Some APIs can only be used after this event occurs.
|
||||
app.on("ready", createWindow);
|
||||
|
||||
// Quit when all windows are closed, except on macOS. There, it's common
|
||||
// for applications and their menu bar to stay active until the user quits
|
||||
// explicitly with Cmd + Q.
|
||||
app.on("window-all-closed", () => {
|
||||
if (process.platform !== "darwin") {
|
||||
app.quit();
|
||||
}
|
||||
});
|
||||
|
||||
app.on("activate", () => {
|
||||
// On OS X it's common to re-create a window in the app when the
|
||||
// dock icon is clicked and there are no other windows open.
|
||||
if (BrowserWindow.getAllWindows().length === 0) {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
|
||||
// In this file you can include the rest of your app's specific main process
|
||||
// code. You can also put them in separate files and import them here.
|
||||
37
door-thing-app/src/renderer.tsx
Normal file
37
door-thing-app/src/renderer.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* This file will automatically be loaded by webpack and run in the "renderer" context.
|
||||
* To learn more about the differences between the "main" and the "renderer" context in
|
||||
* Electron, visit:
|
||||
*
|
||||
* https://electronjs.org/docs/tutorial/application-architecture#main-and-renderer-processes
|
||||
*
|
||||
* By default, Node.js integration in this file is disabled. When enabling Node.js integration
|
||||
* in a renderer process, please be aware of potential security implications. You can read
|
||||
* more about security risks here:
|
||||
*
|
||||
* https://electronjs.org/docs/tutorial/security
|
||||
*
|
||||
* To enable Node.js integration in this file, open up `main.js` and enable the `nodeIntegration`
|
||||
* flag:
|
||||
*
|
||||
* ```
|
||||
* // Create the browser window.
|
||||
* mainWindow = new BrowserWindow({
|
||||
* width: 800,
|
||||
* height: 600,
|
||||
* webPreferences: {
|
||||
* nodeIntegration: true
|
||||
* }
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
|
||||
import { render } from "preact";
|
||||
import { App } from "./App";
|
||||
import "./index.css";
|
||||
|
||||
console.log(
|
||||
'👋 This message is being logged by "renderer.js", included via webpack',
|
||||
);
|
||||
|
||||
render(<App />, document.getElementById("root"));
|
||||
Reference in New Issue
Block a user