@clockworkdog/cogs-client 2.10.0 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +133 -75
  2. package/dist/RtspStreamer.d.ts +2 -0
  3. package/dist/RtspStreamer.js +2 -0
  4. package/dist/browser/index.js +3 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -1,28 +1,86 @@
1
1
  # COGS SDK - Javascript
2
2
 
3
- Create content for your COGS Media Master
4
-
5
3
  ## [Documentation](https://clockwork-dog.github.io/cogs-sdk/javascript/)
6
4
 
7
- ## Add to your project
8
-
9
- ### Static HTML
10
-
11
- Download `cogs-client.js` from https://unpkg.com/@clockworkdog/cogs-client and save it to your project.
12
-
13
- Include the script in your HTML page:
14
-
15
- ```html
16
- <script src="./cogs-client.js"></script>
17
- ```
18
-
19
- (Avoid `<script>` tags with `http...` so your content works without an internet connection.)
5
+ ## Quickstart
6
+ This guide should get you up and running with a custom COGS plugin in a few minutes.
7
+ We'll make an annoying bell that rings every second.
8
+
9
+ 1. Make a new folder for your plugin.
10
+ ```bash
11
+ mkdir plugins/test-plugin
12
+ ```
13
+ 1. Create a manifest file at `plugins/test-plugin/cogs-plugin-manifest.json` This tells COGS about your plugin.
14
+ ```json
15
+ {
16
+ "name": "test-plugin",
17
+ "version": "0.0.0",
18
+
19
+ "events": {
20
+ "toCogs": [
21
+ {
22
+ "name": "ding"
23
+ }
24
+ ]
25
+ }
26
+ }
27
+ ```
28
+ 1. Download the [COGS JavaScript SDK](https://unpkg.com/@clockworkdog/cogs-client) and save it in the plugins folder.
29
+ ```bash
30
+ # macOS / Linux
31
+ curl -L -o plugins/test-plugin/cogs-client.js https://unpkg.com/@clockworkdog/cogs-client
32
+ ```
33
+ > Avoid `<script>` tags with `http...` so your content works without an internet connection.
34
+ 1. Add an index file at `plugins/test-plugin/index.html`. This is the logic of your plugin.
35
+ ```html
36
+ <html>
37
+ <head>
38
+ <script src="./cogs-client.js"></script>
39
+ </head>
40
+ <body>
41
+ <script type="module">
42
+ const { CogsConnection, CogsAudioPlayer } = COGS;
43
+ const manifest = await (await fetch('./cogs-plugin-manifest.json')).json();
44
+
45
+ let interval;
46
+ const cogsConnection = new CogsConnection(manifest);
47
+ cogsConnection.addEventListener('open', () => {
48
+ interval = setInterval(() => {
49
+ cogsConnection.sendEvent('ding')
50
+ }, 1000);
51
+ });
52
+ cogsConnection.addEventListener('close', () => {
53
+ clearInterval(interval);
54
+ });
55
+ </script>
56
+ </body>
57
+ </html>
58
+ ```
59
+ 1. Download a sound to play, and put it in the `/assets` folder.
60
+ > You could also use [our bell sound](./assets/quickstart-bell.mp3).
61
+ 1. Enable your plugin in COGS.
62
+
63
+ <img src="./assets/quickstart-enable-plugin.png" alt="Enabling COGS plugin" width="600">
64
+ 1. Create a behaviour to listen to the `ding` event.
65
+
66
+ <img src="./assets/quickstart-behavior-when.png" alt="Adding a behaviour" width="600">
67
+ 1. Make the behaviour do something. In this case it'll play our bell sound.
68
+
69
+ <img src="./assets/quickstart-behavior-do.png" alt="Adding a behaviour" width="600">
70
+ 1. Start the show!
71
+
72
+ <img src="./assets/quickstart-play.png" alt="Press play" width="600">
73
+
74
+ We strongly suggest that for anything more complex you follow our guide using TypeScript and Vite.
75
+ TypeScript will make it a lot easier to know why things go wrong, and Vite will make developing a lot quicker with hot reloading.
76
+
77
+ ## Using Typescript & Vite
20
78
 
21
79
  ### NPM / Yarn
22
80
 
23
81
  Then add `cogs-client` with NPM or Yarn:
24
82
 
25
- ```shell
83
+ ```bash
26
84
  npm install --save @clockworkdog/cogs-client
27
85
  # OR
28
86
  yarn add @clockworkdog/cogs-client
@@ -42,47 +100,47 @@ e.g.
42
100
 
43
101
  ```js
44
102
  module.exports =
45
- /**
46
- * @type {const}
47
- * @satisfies {import("@clockworkdog/cogs-client").CogsPluginManifest}
48
- */
49
- ({
50
- name: 'Big Button',
51
- icon: 'bullseye-pointer',
52
- description: 'A big, colorful touchscreen button',
53
- version: '1',
54
- config: [
55
- {
56
- name: 'Color',
57
- value: { type: 'string', default: 'red' },
58
- },
59
- ],
60
- state: [
61
- {
62
- name: 'Enabled',
63
- value: { type: 'boolean', default: false },
64
- writableFromCogs: true,
65
- },
66
- ],
67
- events: {
68
- toCogs: [
69
- {
70
- name: 'Pressed',
71
- value: { type: 'boolean' },
103
+ /**
104
+ * @type {const}
105
+ * @satisfies {import("@clockworkdog/cogs-client").CogsPluginManifest}
106
+ */
107
+ ({
108
+ name: 'Big Button',
109
+ icon: 'bullseye-pointer',
110
+ description: 'A big, colorful touchscreen button',
111
+ version: '1',
112
+ config: [
113
+ {
114
+ name: 'Color',
115
+ value: { type: 'string', default: 'red' },
116
+ },
117
+ ],
118
+ state: [
119
+ {
120
+ name: 'Enabled',
121
+ value: { type: 'boolean', default: false },
122
+ writableFromCogs: true,
123
+ },
124
+ ],
125
+ events: {
126
+ toCogs: [
127
+ {
128
+ name: 'Pressed',
129
+ value: { type: 'boolean' },
130
+ },
131
+ ],
132
+ fromCogs: [
133
+ {
134
+ name: 'Explosion',
135
+ },
136
+ ],
72
137
  },
73
- ],
74
- fromCogs: [
75
- {
76
- name: 'Explosion',
138
+ media: {
139
+ audio: true,
140
+ video: true,
141
+ images: true,
77
142
  },
78
- ],
79
- },
80
- media: {
81
- audio: true,
82
- video: true,
83
- images: true,
84
- },
85
- });
143
+ });
86
144
  ```
87
145
 
88
146
  ### Import the library
@@ -116,34 +174,34 @@ import * as manifest from './cogs-plugin-manifest.js'; // Requires `"allowJs": t
116
174
 
117
175
  const cogsConnection = new CogsConnection(manifest);
118
176
  cogsConnection.addEventListener('open', () => {
119
- connected = true;
177
+ connected = true;
120
178
  });
121
179
  cogsConnection.addEventListener('close', () => {
122
- connected = false;
180
+ connected = false;
123
181
  });
124
182
  cogsConnection.addEventListener('config', ({ config }) => {
125
- // Handle new config
126
- // `config` is of type `{ [name: string]: number | string | boolean }`
183
+ // Handle new config
184
+ // `config` is of type `{ [name: string]: number | string | boolean }`
127
185
  });
128
186
  cogsConnection.addEventListener('state', ({ state }) => {
129
- // Handle state updates
130
- // `state` is of type `{ [name: string]: number | string | boolean }`
187
+ // Handle state updates
188
+ // `state` is of type `{ [name: string]: number | string | boolean }`
131
189
  });
132
190
  cogsConnection.addEventListener('event', ({ name, value }) => {
133
- // Handle events from COGS
134
- // `name` is the event name.
135
- // `value` is of the type defined in manifest, one of `number | string | boolean | undefined`.
191
+ // Handle events from COGS
192
+ // `name` is the event name.
193
+ // `value` is of the type defined in manifest, one of `number | string | boolean | undefined`.
136
194
  });
137
195
  cogsConnection.addEventListener('message', ({ message }) => {
138
- // Handle low-level COGS messages. See `types/CogsClientMessage.ts`
196
+ // Handle low-level COGS messages. See `types/CogsClientMessage.ts`
139
197
  });
140
198
 
141
199
  function sendEventToCogs() {
142
- cogsConnection.sendEvent('Hello');
200
+ cogsConnection.sendEvent('Hello');
143
201
  }
144
202
 
145
203
  function sendPortUpdateToCogs() {
146
- cogsConnection.setState({ port1: 100 });
204
+ cogsConnection.setState({ port1: 100 });
147
205
  }
148
206
  ```
149
207
 
@@ -151,8 +209,8 @@ You can save arbitrary data to COGS which will be restored when reconnecting wit
151
209
 
152
210
  ```ts
153
211
  const cogsConnection = new CogsConnection(manifest, undefined, undefined, {
154
- // Initial items in the store
155
- 'my-key': { foo: 0, bar: '' },
212
+ // Initial items in the store
213
+ 'my-key': { foo: 0, bar: '' },
156
214
  });
157
215
 
158
216
  // Update the store
@@ -163,10 +221,10 @@ cogsConnection.store.items.getItem('my-key');
163
221
 
164
222
  // Listen for data changes
165
223
  cogsConnection.store.addEventListener('item', ({ key, value }) => {
166
- console.log(key, 'item changed:', value);
224
+ console.log(key, 'item changed:', value);
167
225
  });
168
226
  cogsConnection.store.addEventListener('items', ({ items }) => {
169
- console.log('items changed:', items);
227
+ console.log('items changed:', items);
170
228
  });
171
229
  ```
172
230
 
@@ -176,9 +234,9 @@ Add `audio` to `cogs-plugin-manifest.js`:
176
234
 
177
235
  ```js
178
236
  {
179
- media: {
180
- audio: true;
181
- }
237
+ media: {
238
+ audio: true;
239
+ }
182
240
  }
183
241
  ```
184
242
 
@@ -189,7 +247,7 @@ const audioPlayer = new CogsAudioPlayer(cogsConnection);
189
247
 
190
248
  // Optional
191
249
  audioPlayer.addEventListener('state', (audioState) => {
192
- // Handle audio state changes. See `types/AudioState.ts`
250
+ // Handle audio state changes. See `types/AudioState.ts`
193
251
  });
194
252
  ```
195
253
 
package/dist/RtspStreamer.d.ts CHANGED
@@ -2,6 +2,8 @@ export declare const LIVE_VIDEO_PLAYBACK_RATE = 1.1;
2
2
  /**
3
3
  * Manages a websocket connection to the COGS TCP relay which can be used to send RTSP video
4
4
  * feeds to the web.
5
+ *
6
+ * @deprecated
5
7
  */
6
8
  export default class RtspStreamer {
7
9
  private _websocketUri;
package/dist/RtspStreamer.js CHANGED
@@ -10,6 +10,8 @@ exports.LIVE_VIDEO_PLAYBACK_RATE = 1.1;
10
10
  /**
11
11
  * Manages a websocket connection to the COGS TCP relay which can be used to send RTSP video
12
12
  * feeds to the web.
13
+ *
14
+ * @deprecated
13
15
  */
14
16
  class RtspStreamer {
15
17
  constructor({ hostname = document.location.hostname, port = urls_1.COGS_SERVER_PORT, path = '/tcp-proxy', } = {}) {