53 |
102 |
103 |
108 |
--------------------------------------------------------------------------------
/src/App.test.ts:
--------------------------------------------------------------------------------
1 | import { render } from '@testing-library/svelte';
2 | import { expect } from 'chai';
3 | import App from './App.svelte';
4 |
5 | describe('
54 |
55 |
56 |
57 | Information
58 | Connect To Device
59 | Send To Device
60 |
61 |
62 |
63 |
65 |
66 | eventTypeHandler(e, $connectionStatus.filterDevice, $serialPortSettings)}
68 | connectionStatus={$connectionStatus}
69 | deviceInfo={$connectedDevice}
70 | bind:appSettings={$applicationSettings}
71 | bind:portOptions={$serialPortSettings}
72 | />
73 |
74 |
75 |
77 |
78 |
79 |
80 | Available Devices: {$connectionStatus.availableDevices}
81 |
82 |
83 |
84 | Connection Status: {$connectionStatus.displayText}
85 |
86 |
87 |
88 | {#if $connectionStatus.isConnected}
89 | Press Ctrl + D to Disconnect
90 | {:else}
91 | Press Ctrl + C to Connect
92 | {/if}
93 |
94 |
95 | eventTypeHandler(e, $connectionStatus.filterDevice, $serialPortSettings)}
99 | />
100 |
101 |
56 | To use the {keyboardName} keyboard, click on the buttons to append to the text box, or use the keyboard keys
57 | Ctrl and numbers 0-9
58 |
59 |
43 |
44 |
56 |
57 |
60 |
61 |
136 |
--------------------------------------------------------------------------------
/src/components/web-serial/BaudRate.svelte:
--------------------------------------------------------------------------------
1 |
23 |
24 |
46 |
--------------------------------------------------------------------------------
/src/components/web-serial/CheckCapibilities.svelte:
--------------------------------------------------------------------------------
1 |
33 |
34 |
45 | 
52 |
53 |
55 | {time}
54 |
35 |
40 |
41 |
87 |
--------------------------------------------------------------------------------
/src/constants/application.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * The available line endings
3 | */
4 | export const LineEndings = {
5 | NONE: '',
6 | NEW_LINE: '\n',
7 | CARRIAGE_RETURN: '\r',
8 | BOTH: '\r\n',
9 | } as const;
10 |
11 | export type LineEndings = typeof LineEndings[keyof typeof LineEndings];
12 |
13 | /**
14 | * Application Statuses
15 | */
16 | export const ApplicationStatus = {
17 | DISCONNECTED: 'disconnected',
18 | AWAITING_PORT: 'awaiting_port',
19 | CONNECTING: 'connecting',
20 | CONNECTED: 'connected',
21 | USER_CANCELLED: 'user_cancelled',
22 | ERROR: 'error',
23 | } as const;
24 |
25 | export type ApplicationStatus = typeof ApplicationStatus[keyof typeof ApplicationStatus];
26 |
--------------------------------------------------------------------------------
/src/constants/images.ts:
--------------------------------------------------------------------------------
1 | export const IMAGES = {
2 | eject: '/player_eject.png',
3 | };
4 |
--------------------------------------------------------------------------------
/src/containers/WindowContainer.svelte:
--------------------------------------------------------------------------------
1 |
61 |
62 |
36 |
39 | {headerText}
37 | {@html bodyText}
38 |
72 |
86 |
87 |
105 | {/if}
106 |
107 |
138 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 |
3 | const appVersion = import.meta.env.SNOWPACK_PUBLIC_APP_VERSION;
4 |
5 | import { applicationSettings, connectedDevice, serialPortSettings } from './state/application';
6 | import { connectionStatus } from './state/connection-status';
7 |
8 | const app = new App({
9 | target: document.body,
10 | props: {
11 | name: 'Web Serial Controller',
12 | appVersion,
13 | applicationSettings,
14 | serialPortSettings,
15 | connectedDevice,
16 | connectionStatus,
17 | },
18 | });
19 |
20 | export default app;
21 |
22 | // Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
23 | // Learn more: https://www.snowpack.dev/concepts/hot-module-replacement
24 | if (import.meta.hot) {
25 | import.meta.hot.accept();
26 | import.meta.hot.dispose(() => {
27 | app.$destroy();
28 | });
29 | }
30 |
--------------------------------------------------------------------------------
/src/libs/create-subscription-storage.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Creates an instance of a subscription and update service for stores
3 | * with localStorage
4 | */
5 | function createStateStorage(storageEngine: Storage) {
6 | const subs: any[] = [];
7 |
8 | return {
9 | /**
10 | * Update a store from local storage, merging with any existing state
11 | * in case there are new properties
12 | * @param storeKey
13 | * @param store
14 | */
15 | addStore: (storeKey: string, store: any) => {
16 | try {
17 | const data = storageEngine.getItem(storeKey);
18 | if (data) {
19 | store.update((state: Record
88 | Default Window Container
89 |
90 |
91 | {#if showStatusBar}
92 |
103 | {/if}
104 |
5 |
8 |
9 |
--------------------------------------------------------------------------------
/src/views/ConnectToDevice.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
26 |
59 |
60 |
27 |
53 | {#if connectionStatus.message}
54 |
28 | Connection Status: {connectionStatus.displayText}
29 |
Vendor ID: {deviceInfo.usbVendorName} [{deviceInfo.usbVendorId}] 30 |
Product ID: {deviceInfo.usbProductName} [{deviceInfo.usbProductId}] 31 |
32 | Vendor ID: {deviceInfo.usbVendorName} [{deviceInfo.usbVendorId}] 30 |
Product ID: {deviceInfo.usbProductName} [{deviceInfo.usbProductId}] 31 |
33 |
40 |
41 |
42 |
51 |
52 |
55 | {connectionStatus.message}
56 |
57 | {/if}
58 |
95 |
121 |
122 |
148 |
149 |
150 |
167 |
168 |
184 |
--------------------------------------------------------------------------------
/src/views/SendText.svelte:
--------------------------------------------------------------------------------
1 |
80 |
81 |
85 |
115 |
116 | {#if appSettings.showKeyboards}
117 |
118 |
119 | Hex Keyboard
120 | Emoji Keyboard
121 |
122 |
123 |
124 |
126 |
127 |
129 |
130 | {/if}
131 |
132 |
133 |
143 |
--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
1 | const autoPreprocess = require('svelte-preprocess');
2 |
3 | module.exports = {
4 | preprocess: autoPreprocess({
5 | defaults: {
6 | script: 'typescript',
7 | },
8 | }),
9 | };
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["src", "types"],
3 | "compilerOptions": {
4 | "module": "esnext",
5 | "target": "esnext",
6 | "moduleResolution": "node",
7 | "jsx": "preserve",
8 | "baseUrl": "./",
9 | /* paths - import rewriting/resolving */
10 | "paths": {
11 | // If you configured any Snowpack aliases, add them here.
12 | // Add this line to get types for streaming imports (packageOptions.source="remote"):
13 | // "*": [".snowpack/types/*"]
14 | // More info: https://www.snowpack.dev/guides/streaming-imports
15 | },
16 | /* noEmit - Snowpack builds (emits) files, not tsc. */
17 | "noEmit": true,
18 | /* Additional Options */
19 | "strict": true,
20 | "skipLibCheck": true,
21 | "forceConsistentCasingInFileNames": true,
22 | "resolveJsonModule": true,
23 | "useDefineForClassFields": true,
24 | "allowSyntheticDefaultImports": true,
25 | "importsNotUsedAsValues": "error"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/types/static.d.ts:
--------------------------------------------------------------------------------
1 | /* Use this file to declare any custom file extensions for importing */
2 | /* Use this folder to also add/extend a package d.ts file, if needed. */
3 |
4 | /* CSS MODULES */
5 | declare module '*.module.css' {
6 | const classes: { [key: string]: string };
7 | export default classes;
8 | }
9 | declare module '*.module.scss' {
10 | const classes: { [key: string]: string };
11 | export default classes;
12 | }
13 | declare module '*.module.sass' {
14 | const classes: { [key: string]: string };
15 | export default classes;
16 | }
17 | declare module '*.module.less' {
18 | const classes: { [key: string]: string };
19 | export default classes;
20 | }
21 | declare module '*.module.styl' {
22 | const classes: { [key: string]: string };
23 | export default classes;
24 | }
25 |
26 | /* CSS */
27 | declare module '*.css';
28 | declare module '*.scss';
29 | declare module '*.sass';
30 | declare module '*.less';
31 | declare module '*.styl';
32 |
33 | /* IMAGES */
34 | declare module '*.svg' {
35 | const ref: string;
36 | export default ref;
37 | }
38 | declare module '*.bmp' {
39 | const ref: string;
40 | export default ref;
41 | }
42 | declare module '*.gif' {
43 | const ref: string;
44 | export default ref;
45 | }
46 | declare module '*.jpg' {
47 | const ref: string;
48 | export default ref;
49 | }
50 | declare module '*.jpeg' {
51 | const ref: string;
52 | export default ref;
53 | }
54 | declare module '*.png' {
55 | const ref: string;
56 | export default ref;
57 | }
58 |
59 | /* CUSTOM: ADD YOUR OWN HERE */
60 |
--------------------------------------------------------------------------------
/web-test-runner.config.js:
--------------------------------------------------------------------------------
1 | // NODE_ENV=test - Needed by "@snowpack/web-test-runner-plugin"
2 | process.env.NODE_ENV = 'test';
3 |
4 | module.exports = {
5 | plugins: [require('@snowpack/web-test-runner-plugin')()],
6 | };
7 |
--------------------------------------------------------------------------------