DMXStage/dmxconnect
2
0
Fork 1
generated from thinkode/modelRepository
Code Issues 6 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

load peripheral settings in front

Browse Source
This commit is contained in:
Valentin Boulanger
2025-01-25 11:06:03 +01:00
parent 3fbf4b5df4
commit 6941c06661
7 changed files with 107 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/Settings/DeviceCard.svelte
View File

@@ -15,6 +15,7 @@
export let signalizable = false;
export let signalized = false;
export let disconnected = false;
export let selected = false;
// Emit a delete event when the device is being removed
const dispatch = createEventDispatcher();
@@ -36,7 +37,7 @@
</script>
<div class="card" on:dblclick={dblclick}>
<div class="profile" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white};">
<div class="profile" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white}; border: {selected ? "solid " + $colors.first : "none"};">
<div>
<p>{#if disconnected}<i class='bx bx-no-signal' style="font-size:100%; color: var(--nok-color);"></i> {/if}{title}</p>
<h6 class="subtitle">{type} {location != '' ? "- " : ""}<i>{location}</i></h6>

66
frontend/src/components/Settings/InputsOutputsContent.svelte
View File

@@ -1,10 +1,11 @@
<script lang=ts>
import DeviceCard from "./DeviceCard.svelte";
import Tab from "../General/Tab.svelte";
import { _ } from 'svelte-i18n'
import Input from "../General/Input.svelte";
import { t, _ } from 'svelte-i18n'
import { generateToast, needProjectSave, peripherals } from "../../stores";
import { get } from "svelte/store"
import { AddOS2LPeripheral, RemovePeripheral, ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI, AddPeripheral } from "../../../wailsjs/go/main/App";
import { GetPeripheralSettings, AddOS2LPeripheral, RemovePeripheral, ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI, AddPeripheral } from "../../../wailsjs/go/main/App";
import RoundedButton from "../General/RoundedButton.svelte";
function ftdiConnect(){
@@ -84,6 +85,11 @@
return { ...storedPeripherals };
})
$needProjectSave = true
// If the peripheral is currently selected, unselect it
if (selectedPeripheralSN == peripheral.SerialNumber) {
selectedPeripheralSN = null
selectedPeripheralSettings = {}
}
}).catch((error) => {
console.log("Unable to remove the peripheral from the project: " + error)
generateToast('danger', 'bx-error', $_("removePeripheralErrorToast"))
@@ -107,15 +113,28 @@
})
}
// Select the peripheral to edit its settings
let selectedPeripheralSN = null
let selectedPeripheralSettings = {}
function selectPeripheral(peripheral){
// Load the settings array
GetPeripheralSettings(peripheral.ProtocolName, peripheral.SerialNumber).then((peripheralSettings) => {
selectedPeripheralSettings = peripheralSettings
}).catch((error) => {
generateToast('error', 'bx-error', $_("getPeripheralSettingsErrorToast"))
})
// Select the current peripheral
selectedPeripheralSN = peripheral.SerialNumber
}
// Get the number of saved peripherals
$: savedPeripheralNumber = Object.values($peripherals).filter(peripheral => peripheral.isSaved).length;
</script>
<div class="hardware">
<div style="padding: 0.5em;">
<p style="margin-bottom: 1em;">Available peripherals</p>
<p style="margin-bottom: 1em;">{$_("projectHardwareAvailableLabel")}</p>
<div class="availableHardware">
<p style="color: var(--first-color);"><i class='bx bxs-plug'></i> Detected</p>
<p style="color: var(--first-color);"><i class='bx bxs-plug'></i> {$_("projectHardwareDetectedLabel")}</p>
{#each Object.entries($peripherals) as [serialNumber, peripheral]}
{#if peripheral.isDetected}
<DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => {
@@ -125,40 +144,59 @@
title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={"S/N: " + peripheral.SerialNumber} addable={!peripheral.isSaved}/>
{/if}
{/each}
<p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> Others</p>
<p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> {$_("projectHardwareOthersLabel")}</p>
<RoundedButton on:click={createOS2L} text="Add an OS2L peripheral" icon="bx-plus-circle" tooltip="Configure an OS2L connection"/>
</div>
</div>
<div style="padding: 0.5em; flex:2; width:100%;">
<p style="margin-bottom: 1em;">Project peripherals</p>
<p style="margin-bottom: 1em;">{$_("projectHardwareSavedLabel")}</p>
<div class="configuredHardware">
{#if savedPeripheralNumber > 0}
{#each Object.entries($peripherals) as [serialNumber, peripheral]}
{#if peripheral.isSaved}
<DeviceCard on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)}
disconnected={!peripheral.isDetected} title={peripheral.Name == "" ? "Please wait..." : peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} removable signalizable/>
<DeviceCard on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)}
disconnected={!peripheral.isDetected} title={peripheral.Name == "" ? "Please wait..." : peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable/>
{/if}
{/each}
{:else}
<i>No hardware saved for this project.</i>
<i>{$_("projectHardwareEmptyLabel")}</i>
{/if}
</div>
<p style="margin-bottom: 1em;">Peripheral settings</p>
<div>
<p><i>Select a peripheral to edit its settings</i></p>
<button on:click={ftdiConnect}>Connect FTDI 0</button>
<p style="margin-bottom: 1em;">{$_("projectHardwareSettingsLabel")} (<b>{selectedPeripheralSN == null ? $_("projectHardwareNoSelection") : selectedPeripheralSN}</b>)</p>
<div class='flexSettings'>
{#if Object.keys(selectedPeripheralSettings).length > 0}
{#each Object.entries(selectedPeripheralSettings) as [settingName, settingValue]}
<div class="peripheralSetting">
<Input label={$t(settingName)} type="{typeof(settingValue)}" width='100%' value="{settingValue}"/>
</div>
{/each}
{:else}
<p><i>Select a peripheral to edit its settings</i></p>
{/if}
<!-- <button on:click={ftdiConnect}>Connect FTDI 0</button>
<button on:click={ftdiActivate}>Activate FTDI 0</button>
<div class="slidecontainer">
<input type="range" min="0" max="255" class="slider" bind:value={sliderValue} on:input={() => ftdiSetDevice(sliderValue)}>
</div>
<button on:click={ftdiDeactivate}>Deactivate FTDI 0</button>
<button on:click={ftdiDisconnect}>Disconnect FTDI 0</button>
<button on:click={ftdiDisconnect}>Disconnect FTDI 0</button> -->
</div>
</div>
</div>
<style>
.peripheralSetting{
margin: 0.5em;
}
.flexSettings{
display: flex;
flex-wrap: wrap;
width: 100%;
overflow-y: auto;
}
p {
margin: 0;
}

16
frontend/src/lang/en.json
View File

@@ -15,7 +15,7 @@
"openProjectTooltip": "Open an existing project",
"projectPropertiesTab": "Project properties",
"projectPropertiesTooltip": "The project properties",
"projectInputOutputTab": "Inputs & outputs",
"projectInputOutputTab": "Hardware",
"projectInputOutputTooltip": "The input/output hardware definition",
"projectShowNameLabel": "Show name",
@@ -35,6 +35,13 @@
"projectHardwareOutputsLabel": "OUTPUTS",
"projectHardwareDeleteTooltip": "Delete this peripheral",
"projectHardwareAddTooltip": "Add this peripheral to project",
"projectHardwareNoSelection": "Empty",
"projectHardwareAvailableLabel": "Available peripherals",
"projectHardwareSavedLabel": "Project peripherals",
"projectHardwareDetectedLabel": "Detected",
"projectHardwareOthersLabel": "Others",
"projectHardwareEmptyLabel": "No hardware saved for this project",
"projectHardwareSettingsLabel": "Peripheral settings",
"peripheralArrivalToast": "Peripheral inserted:",
"peripheralRemovalToast": "Peripheral removed:",
@@ -44,8 +51,13 @@
"removePeripheralErrorToast": "Unable to remove this peripheral from project",
"os2lPeripheralCreatedToast": "Your OS2L peripheral has been created",
"os2lPeripheralCreateErrorToast": "Unable to create the OS2L peripheral",
"getPeripheralSettingsErrorToast": "Unable to get the peripheral settings",
"projectsLoadErrorToast": "Unable to get the projects list",
"projectOpenedToast": "The project was opened:",
"projectOpenErrorToast": "Unable to open the project",
"projectCreatedToast": "The project was created"
"projectCreatedToast": "The project was created",
"os2lIpSetting": "IP Address",
"os2lPortSetting": "Port"
}