Skip to content

Commit d7c736e

Browse files
committed
feat: svelte5 demo app
1 parent e4995c9 commit d7c736e

11 files changed

+501
-600
lines changed

demo/svelte/README.md

Lines changed: 3 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,5 @@
1-
# PCB THT holder
1+
# Svelte DEMO app
22

3-
[Changelog](CHANGELOG.md)
3+
This is a DEMO application that serves the purpose of being able to demonstrate the capabilities of SvelteESP32.
44

5-
3D STL file generator for THT PCB panels, online access: https://segmentcontroller.github.io/pcb-tht-holder/
6-
7-
I make almost all of my printed circuit boards with online design software and entrust the manufacturing company to install the SMD components. I install the THT (through hole technology) components at home for two reasons:
8-
9-
- What they charge for meticulous manual work cannot be called cheap.
10-
- Not all THT parts are needed, in many cases only 2 of the 6 relays are installed. This can reduce costs.
11-
12-
> I would also like to do the THT installation at home nicely. However, with many panels there are "traces of haste".
13-
14-
## That's why I created an **online tool** that:
15-
16-
- Based on the photo of the PCB, it helps to leave the place of the protruding (THT) parts empty.
17-
- It creates a 3D format (STL) output that, if you print, will keep the parts straight during soldering.
18-
- It can work without registration and without uploading (and storing) a photo of the PCB.
19-
20-
In its current state, it facilitates the installation of circular and oblong components. This is sufficient in the following cases: **relays, capacitors, resistors, terminals and pin-headers.** It automatically calculates the required area and volume based on the height of the parts. But it doesn't mean that there aren't any mistakes in it: if you experience anything, I welcome your comments.
21-
22-
## Try yout first PCB to STL
23-
24-
Click here: https://segmentcontroller.github.io/pcb-tht-holder/
25-
26-
### Set up a PCB image
27-
28-
Enter a PCB image with drag and drop or file selection, which will automatically flip and become transparent.
29-
30-
![alt text](./step1.png)
31-
32-
### Place the components
33-
34-
Place the THT parts by placing circles or squares. Adjust their height/depth exactly so that they are flush with the PCB. At the end, if necessary, add legs to support the PCB.
35-
36-
![alt text](./step2.png)
37-
38-
### Generate a 3D design in STL format
39-
40-
Click the Display 3D button and see the generated mesh. Rotate it, check that all components are in place. At the end, download the STL file in binary format. (It is also possible to download a text STL file for debug purposes).
41-
42-
![alt text](./step3.png)
43-
44-
### Check as a wireframe if necessary
45-
46-
If you want to analyze the location of the components, you can also see how things fit in the wireframe view.
47-
48-
![alt text](./step4.png)
49-
50-
### Print it with a 3D printer...
51-
52-
Use a PLA printer to save time and money. Practice shows that it is enough to produce the STL file once, of which 1-3 prints are enough to implant hundreds of PCBs.
5+
With minimal functionality, it can emulate a working Svelte application, which has the translated application in the DIST folder, which can be installed on the ESP32. Thus, ESP32 can serve this reactive application consisting only of HTML, JS and CSS files.

demo/svelte/dist/assets/index-Bkee7wIT.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

demo/svelte/dist/assets/index-CS7uDKKX.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

demo/svelte/dist/assets/index-D2ud7X1T.js

Lines changed: 0 additions & 4 deletions
This file was deleted.

demo/svelte/dist/assets/index-Dhz0GptE.css

Lines changed: 0 additions & 1 deletion
This file was deleted.

demo/svelte/dist/favicon.png.gz

0 Bytes
Binary file not shown.

demo/svelte/dist/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<title>Svelte to ESP32 demo application</title>
77
<meta name="viewport" content="width=device-width, initial-scale=1" />
88
<meta name="theme-color" content="#f3f4f6" />
9-
<script type="module" crossorigin src="./assets/index-D2ud7X1T.js"></script>
10-
<link rel="stylesheet" crossorigin href="./assets/index-Dhz0GptE.css">
9+
<script type="module" crossorigin src="./assets/index-CS7uDKKX.js"></script>
10+
<link rel="stylesheet" crossorigin href="./assets/index-Bkee7wIT.css">
1111
</head>
1212

1313
<body>

demo/svelte/eslint.config.mjs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export default [
7070
'simple-import-sort/imports': 'error',
7171
'simple-import-sort/exports': 'error',
7272
'unicorn/filename-case': 'off',
73+
'unicorn/prefer-global-this': 'off',
7374
'no-alert': 'error',
7475
'no-console': 'error',
7576
'no-debugger': 'error'

0 commit comments

Comments
 (0)