Implement showAlert and showOk events

src-tauri/Cargo.toml

@@ -14,7 +14,7 @@ tauri-build = { version = "1.5.0", features = [] }
 
 [dependencies]
 # Large, fundamental libraries
-tauri = { version = "1.5.2", features = [ "system-tray", "api-all", "devtools" ] }
+tauri = { version = "1.5.2", features = [ "shell-execute", "shell-open", "protocol-asset", "system-tray", "devtools" ] }
 serde = { version = "1.0", features = [ "derive" ] }
 serde_json = "1.0"
 serialport = "4.2.2"

src-tauri/src/events/inbound/misc.rs

@@ -1,4 +1,4 @@
-use super::{PayloadEvent, ContextAndPayloadEvent};
+use super::{ContextEvent, PayloadEvent, ContextAndPayloadEvent};
 
 use tauri::{api::shell::open, Manager};
 
@@ -34,3 +34,19 @@ pub async fn send_to_plugin(event: ContextAndPayloadEvent<serde_json::Value>) ->
 	crate::events::outbound::property_inspector::send_to_plugin(event.context, event.payload).await?;
 	Ok(())
 }
+
+pub async fn show_alert(event: ContextEvent) -> Result<(), anyhow::Error> {
+	let app = crate::APP_HANDLE.lock().await;
+	let app = app.as_ref().unwrap();
+	let window = app.get_window("main").unwrap();
+	window.emit("show_alert", event.context)?;
+	Ok(())
+}
+
+pub async fn show_ok(event: ContextEvent) -> Result<(), anyhow::Error> {
+	let app = crate::APP_HANDLE.lock().await;
+	let app = app.as_ref().unwrap();
+	let window = app.get_window("main").unwrap();
+	window.emit("show_ok", event.context)?;
+	Ok(())
+}

src-tauri/src/events/inbound/mod.rs

@@ -44,6 +44,8 @@ pub enum InboundEventType {
 	SetTitle(ContextAndPayloadEvent<states::SetTitlePayload>),
 	SetImage(ContextAndPayloadEvent<states::SetImagePayload>),
 	SetState(ContextAndPayloadEvent<states::SetStatePayload>),
+	ShowAlert(ContextEvent),
+	ShowOk(ContextEvent),
 	SendToPropertyInspector(ContextAndPayloadEvent<serde_json::Value>),
 	SendToPlugin(ContextAndPayloadEvent<serde_json::Value>)
 }
@@ -65,6 +67,8 @@ pub async fn process_incoming_message(data: tokio_tungstenite::tungstenite::Mess
 			InboundEventType::SetTitle(event) => states::set_title(event).await,
 			InboundEventType::SetImage(event) => states::set_image(event).await,
 			InboundEventType::SetState(event) => states::set_state(event).await,
+			InboundEventType::ShowAlert(event) => misc::show_alert(event).await,
+			InboundEventType::ShowOk(event) => misc::show_ok(event).await,
 			InboundEventType::SendToPropertyInspector(event) => misc::send_to_property_inspector(event).await,
 			InboundEventType::SendToPlugin(_) => Ok(())
 		} {

src-tauri/tauri.conf.json

@@ -44,12 +44,15 @@
 			"csp": "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: asset: https://appstore.elgato.com; frame-src http://localhost:57118; connect-src https://appstore.elgato.com;"
 		},
 		"allowlist": {
-			"all": true,
 			"protocol": {
 				"asset": true,
 				"assetScope": [
 					"$APPCONFIG/plugins/**/*"
 				]
+			},
+			"shell": {
+				"open": true,
+				"execute": true
 			}
 		},
 		"updater": {

src/components/Key.svelte

@@ -33,6 +33,26 @@
 		instance = JSON.parse(await invoke("clear_slot", { context }));
 		if ($inspectedInstance == context) inspectedInstance.set(null);
 	}
+
+	let showAlert = 0;
+	let showOk = 0;
+	let timeouts: number[] = [];
+	listen("show_alert", ({ payload }: { payload: string }) => {
+		if (payload != context) return;
+		timeouts.forEach(clearTimeout);
+		showOk = 0;
+		showAlert = 1;
+		timeouts.push(setTimeout(() => showAlert = 2, 1e3));
+		timeouts.push(setTimeout(() => showAlert = 0, 2e3));
+	});
+	listen("show_ok", ({ payload }: { payload: string }) => {
+		if (payload != context) return;
+		timeouts.forEach(clearTimeout);
+		showAlert = 0;
+		showOk = 1;
+		timeouts.push(setTimeout(() => showOk = 2, 1e3));
+		timeouts.push(setTimeout(() => showOk = 0, 2e3));
+	});
 </script>
 
 <div
@@ -71,5 +91,21 @@
 				</span>
 			</div>
 		{/if}
+		{#if showAlert > 0}
+			<img
+				src="/alert.png"
+				alt="Alert"
+				class="absolute top-0 left-0 p-2 w-full h-full transition-opacity duration-1000"
+				class:opacity-0={showAlert == 2}
+			/>
+		{/if}
+		{#if showOk}
+			<img
+				src="/ok.png"
+				alt="OK"
+				class="absolute top-0 left-0 p-2 w-full h-full transition-opacity duration-1000"
+				class:opacity-0={showOk == 2}
+			/>
+		{/if}
 	{/if}
 </div>

src/components/Slider.svelte

@@ -33,6 +33,26 @@
 		instance = JSON.parse(await invoke("clear_slot", { context }));
 		if ($inspectedInstance == context) inspectedInstance.set(null);
 	}
+
+	let showAlert = 0;
+	let showOk = 0;
+	let timeouts: number[] = [];
+	listen("show_alert", ({ payload }: { payload: string }) => {
+		if (payload != context) return;
+		timeouts.forEach(clearTimeout);
+		showOk = 0;
+		showAlert = 1;
+		timeouts.push(setTimeout(() => showAlert = 2, 1e3));
+		timeouts.push(setTimeout(() => showAlert = 0, 2e3));
+	});
+	listen("show_ok", ({ payload }: { payload: string }) => {
+		if (payload != context) return;
+		timeouts.forEach(clearTimeout);
+		showAlert = 0;
+		showOk = 1;
+		timeouts.push(setTimeout(() => showOk = 2, 1e3));
+		timeouts.push(setTimeout(() => showOk = 0, 2e3));
+	});
 </script>
 
 <div
@@ -72,5 +92,21 @@
 				</span>
 			</div>
 		{/if}
+		{#if showAlert > 0}
+			<img
+				src="/alert.png"
+				alt="Alert"
+				class="absolute top-0 left-0 p-1 w-full h-full transition-opacity duration-1000"
+				class:opacity-0={showAlert == 2}
+			/>
+		{/if}
+		{#if showOk}
+			<img
+				src="/ok.png"
+				alt="OK"
+				class="absolute top-0 left-0 p-1 w-full h-full transition-opacity duration-1000"
+				class:opacity-0={showOk == 2}
+			/>
+		{/if}
 	{/if}
 </div>