Update Property Inspector from Browser #104

elementalTIMING · 2024-03-11T14:49:08Z

elementalTIMING
Mar 11, 2024

Hi,

I'm pretty new with the Stream Deck but I've already read all the documentation. But now I came to a point where I really need some help, please.

I've started with the easy "Counter Sample" code, renamed the plugin to com.elementaltiming.sscm.action, compiled and installed it. It runs.

But what I want to achieve is to set/update the counter from a browser input field. So I wrote the following code:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Property Inspector Update</title>
	</head>
	<body>
		<h1>Property Inspector Update</h1>
		<label for="newValue">New Value:</label>
		<input type="text" id="newValue" />
		<button onclick="updatePropertyInspector()">Update</button>

		<script>
			function updatePropertyInspector() {
				const newValue = document.getElementById('newValue').value;
				const pluginUUID = 'com.elementaltiming.sscm.action'; // UUID des Plugins
				const target = 'http://localhost:23654'; // Standard-URL für den Property Inspector des Stream Decks

				const data = {
					event: 'updatePropertyInspector',
					context: pluginUUID,
					payload: {
						keyPressCounter: newValue,
					},
				};

				fetch(target, {
					method: 'POST',
					body: JSON.stringify(data),
					headers: {
						'Content-Type': 'application/json',
					},
				})
					.then(response => {
						if (!response.ok) {
							throw new Error('HTTP error ' + response.status);
						}
						return response.json();
					})
					.then(data => {
						console.log('Property Inspector updated:', data);
					})
					.catch(error => {
						console.error('Error updating Property Inspector:', error);
					});
			}
		</script>
	</body>
</html>

But I ran into a CORS error scenario:

Access to fetch at 'http://localhost:23654/' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

index.html:45 Error updating Property Inspector: TypeError: Failed to fetch
    at updatePropertyInspector (index.html:28:5)
    at HTMLButtonElement.onclick (index.html:12:47)

My question is now: how can I set/update a value of a plugin from external, like a web browser?

Thank you for your assistance!

Answered by ChekTek

Mar 21, 2024

Hi @elementalPRESS,

You can send a message directly to your plugin using the plugin's deeplink. In the case of your plugin it would look something like

streamdeck://plugins/message/com.elementaltiming.sscm/MyCoolMessage

https://docs.elgato.com/sdk/plugins/events-received#didreceivedeeplink

Please note that this is a very new feature to Stream Deck, if you are using the plugin template it does not directly support this as we transitioning over to our Node.js tools. We recommend using the Node.js tools for new plugins at this time (still in beta, but nearing a v1 release).

https://www.npmjs.com/package/@elgato/cli

View full answer

ChekTek · 2024-03-21T15:17:44Z

ChekTek
Mar 21, 2024
Maintainer

Hi @elementalPRESS,

You can send a message directly to your plugin using the plugin's deeplink. In the case of your plugin it would look something like

streamdeck://plugins/message/com.elementaltiming.sscm/MyCoolMessage

https://docs.elgato.com/sdk/plugins/events-received#didreceivedeeplink

Please note that this is a very new feature to Stream Deck, if you are using the plugin template it does not directly support this as we transitioning over to our Node.js tools. We recommend using the Node.js tools for new plugins at this time (still in beta, but nearing a v1 release).

https://www.npmjs.com/package/@elgato/cli

1 reply

elementalTIMING Mar 21, 2024
Author

sounds promising! Thx!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Elgato

Update Property Inspector from Browser #104

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Elgato

Update Property Inspector from Browser #104

elementalTIMING Mar 11, 2024

Replies: 1 comment · 1 reply

ChekTek Mar 21, 2024 Maintainer

elementalTIMING Mar 21, 2024 Author

elementalTIMING
Mar 11, 2024

Replies: 1 comment 1 reply

ChekTek
Mar 21, 2024
Maintainer

elementalTIMING Mar 21, 2024
Author