nomi-nonsz/lunar-vein-arduino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First client view builded

Browse Source
This commit is contained in:
Nomi Nonsense (Nonszy) 2024-03-10 21:03:53 +07:00
parent 4bc42d6ae9
commit 23e35cdd2c
16 changed files with 74 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -39,6 +39,10 @@ Arduino assembly guide also available in [johnny-five](https://github.com/rwaldr
npm start npm start
``` ```
4. If the board is connected try to open the client page in [https://localhost:3000/](https://localhost:3000/)
![Client page](./docs/client.png)
#### Other scripts #### Other scripts
- You can see what ports are connected to the device by running `npm run ports` script. - You can see what ports are connected to the device by running `npm run ports` script.
@ -153,7 +157,7 @@ async function turnOnLed() {
| p | pin | `string` | true | Seleced pin | | p | pin | `string` | true | Seleced pin |
| m | mode | `'input'`, `'output'`, `'servo'` | true | Pin Mode | | m | mode | `'input'`, `'output'`, `'servo'` | true | Pin Mode |
- **Method(s)** - **Method**
`PATCH` `PATCH`
@ -214,7 +218,7 @@ async function turnOnLed() {
| p | pin | `string` | true | Seleced pin | | p | pin | `string` | true | Seleced pin |
| a | act | `'on'`, `'off'`, `'high'`, `'low'` | true | Action | | a | act | `'on'`, `'off'`, `'high'`, `'low'` | true | Action |
- **Method(s)** - **Method**
`PATCH` `PATCH`
@ -290,7 +294,7 @@ async function turnOnLed() {
} }
``` ```
- **Method(s)** - **Method**
`PATCH` `PATCH`

BIN
docs/client.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
src/client/assets/absurd-closing-zSqy_QgJ.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 855 KiB

BIN
src/client/assets/background-DT2gGPo0.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 MiB

BIN
src/client/assets/bg-closing-C3sap1yp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 486 KiB

BIN
src/client/assets/bootstrap-icons-BOrJxbIo.woff Normal file
View File

Binary file not shown.

BIN
src/client/assets/bootstrap-icons-BtvjY1KL.woff2 Normal file
View File

Binary file not shown.

5
src/client/assets/index-B3QNZa_F.css Normal file
View File

File diff suppressed because one or more lines are too long

45
src/client/assets/index-CQw488sl.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
src/client/assets/lunar-oc-DOu9Z280.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 365 KiB

BIN
src/client/assets/nola_3-C8nuZF90.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

18
src/client/index.html
View File

@ -1,16 +1,14 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<title>Firmata Arduino Client</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style/main.css"> <title>Lunar Vein: Arduino</title>
<script type="module" crossorigin src="/assets/index-CQw488sl.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B3QNZa_F.css">
</head> </head>
<body> <body>
<section> <div id="root"></div>
<h2>LED</h2>
<button id="toggleLed1">ON/OFF</button>
</section>
<script src="./scripts/main.js"></script>
</body> </body>
</html> </html>

17
src/client/scripts/main.js
View File

@ -1,17 +0,0 @@
document.getElementById('toggleLed1').addEventListener('mousedown', async () => {
const res = await fetch('/api-arduino/led/13/on', {
method: 'PATCH'
});
const data = await res.json();
console.log(data);
})
document.getElementById('toggleLed1').addEventListener('mouseup', async () => {
const res = await fetch('/api-arduino/led/13/off', {
method: 'PATCH'
});
const data = await res.json();
console.log(data);
})

0
src/client/style/main.css
View File

1
src/client/vite.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

7
src/index.ts
View File

@ -1,4 +1,5 @@
import http from 'node:http'; import http from 'node:http';
import path from 'node:path';
import express from 'express'; import express from 'express';
import cors from 'cors'; import cors from 'cors';
import { Server } from 'socket.io'; import { Server } from 'socket.io';
@ -24,11 +25,9 @@ const host: string = 'localhost';
const port: number = 3000; const port: number = 3000;
// Express middleware // Express middleware
app.use(cors({ app.use(cors({ origin: "*" }));
origin: "*"
}));
app.use(express.json()); app.use(express.json());
app.use(express.static('client')); app.use(express.static(path.join(__dirname, 'client')));
// Socket.io event handlers // Socket.io event handlers
io.on('connection', socketHandler); io.on('connection', socketHandler);