23-os2l (#32)

Implements the OS2L feature (tested with Virtual DJ). Graphics improvements. Reviewed-on: #32
2025-11-14 10:46:24 +00:00
parent 121a14ac61
commit 932c288a9c
18 changed files with 560 additions and 245 deletions
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -7,7 +7,6 @@
  import Settings from './components/Settings/Settings.svelte';
  import Devices from './components/Devices/Devices.svelte';
  import Show from './components/Show/Show.svelte';
-  import DropdownList from "./components/General/DropdownList.svelte";
  import RoundDropdownList from "./components/General/RoundDropdownList.svelte";
  import GeneralConsole from './components/Console/GeneralConsole.svelte';
  import RoundIconButton from './components/General/RoundIconButton.svelte';
@@ -134,7 +133,6 @@
 <style>
 	main {
 		text-align: left;
-		padding: 1em;
 		max-width: 240px;
 		margin: 0 auto;
 	}
--- a/frontend/src/components/General/RoundDropdownList.svelte
+++ b/frontend/src/components/General/RoundDropdownList.svelte
@@ -101,9 +101,13 @@
    <Tooltip message={tooltipMessage} show={tooltipShowing} position={tooltipPosition}></Tooltip>
    <div class="list" style="color: {$colors.white}; display: {listShowing ? "block" : "none"}; border: 2px solid {$colors.second}; background-color: {$colors.first};"
        on:mouseleave={hideList}>
-        {#each Array.from(choices) as [key, value]}
-            <div class="item" on:click={() => handleclick({key})}>{value}</div>
-        {/each}
+        {#if choices.size != 0}
+            {#each Array.from(choices) as [key, value]}
+                <div class="item" on:click={() => handleclick({key})}>{value}</div>
+            {/each}
+        {:else}
+            <div class="item"><i>{$_("openProjectEmpty")}</i></div>
+        {/if}
    </div>
 </div>

--- a/frontend/src/components/General/Tab.svelte
+++ b/frontend/src/components/General/Tab.svelte
@@ -15,15 +15,14 @@
 </script>

 <div class="tabContainer" style="color: {$colors.white};">
-    <div class="headerContainer"
-        style='background-color: {$colors.third};'>
+    <div class="headerContainer">
        {#each tabs as tab, index}
-            <RoundedButton text={tab.title} icon={tab.icon} tooltip={tab.tooltip} active={ (activeTab == index) ? true : false } on:click={() => setActiveTab(index)}/>
+            <RoundedButton style="margin: 0.1em;" text={tab.title} icon={tab.icon} tooltip={tab.tooltip} active={ (activeTab !== index) ? true : false } on:click={() => setActiveTab(index)}/>
        {/each}
    </div>

    <div class="bodyContainer"
-    style='background-color: {$colors.first}; max-width: {maxWidth}; max-height: {maxHeight};'>
+    style='background-color: {$colors.first}; max-width: {maxWidth};'>
    {#if tabs[activeTab]}
        <svelte:component this={tabs[activeTab].component} />
    {/if}
@@ -41,13 +40,11 @@
    }
    .headerContainer{
        padding: 0.1em;
-        margin-bottom: 1em;
        border-radius: 0.5em;
    }
    .bodyContainer{
        padding: 0.5em;
        background-color: red;
        border-radius: 0.5em;
-        overflow:auto;
    }
 </style>
--- a/frontend/src/components/Settings/DeviceCard.svelte
+++ b/frontend/src/components/Settings/DeviceCard.svelte
@@ -38,7 +38,7 @@
 </script>

 <div class="card" on:dblclick={dblclick}>
-    <div class="{selected ? "selected" : "unselected"} {status == "PERIPHERAL_CONNECTING" ? "waiting" : ""}" on:mousedown={click} style="color: {(status == "PERIPHERAL_DISCONNECTED") ? $colors.first : $colors.white};">
+    <div class="{selected ? "selected" : "unselected"} {status == "PERIPHERAL_CONNECTING" ? "waiting" : ""}" on:mousedown={click} style="color: {$colors.white};">
        <div style="z-index: 1;">
            <p>{#if status == "PERIPHERAL_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>
@@ -52,8 +52,8 @@
        
        <div class="actions">
            <InfoButton on:click={add} color="{(status == "PERIPHERAL_DISCONNECTED") ? $colors.first : $colors.white}" style="margin: 0.2em; display: { addable ? 'flex' : 'none' }" icon='bxs-message-square-add' interactive message={$_("projectHardwareAddTooltip")}/>
-            <InfoButton on:click={remove} color="{(status == "PERIPHERAL_DISCONNECTED") ? $colors.first : $colors.white}" style="margin: 0.2em; display: { removable ? 'flex' : 'none' }" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")}/>
-            <InfoButton style="margin: 0.2em; display: { (status == "PERIPHERAL_ACTIVATED" || status == "PERIPHERAL_DEACTIVATED")  ? 'flex' : 'none' }" background={ (status == "PERIPHERAL_ACTIVATED") ? $colors.ok : (status == "PERIPHERAL_DEACTIVATED") ? $colors.nok : null} icon='bx-pulse' hide={!signalizable}/>
+            <InfoButton on:click={remove} color="{$colors.white}" style="margin: 0.2em; display: { removable ? 'flex' : 'none' }" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")}/>
+            <InfoButton style="transition: background-color 0.3s ease; margin: 0.2em; display: { (status == "PERIPHERAL_ACTIVATED" || status == "PERIPHERAL_DEACTIVATED")  ? 'flex' : 'none' }" background={ (signalizable && signalized) ? $colors.orange : (status == "PERIPHERAL_ACTIVATED") ? $colors.ok : (status == "PERIPHERAL_DEACTIVATED") ? $colors.nok : null} icon='bx-pulse' hide={!signalizable}/>
        </div>
    </div>
 </div>
@@ -63,19 +63,33 @@
        background: linear-gradient(to bottom right, var(--second-color), var(--third-color));
    }
    .card{
-        position: relative;   
+        position: relative;
    }
    .selected {
-        background-color: var(--first-color);
+        background-color: var(--third-color);
+        position: relative;
        margin: 0.2em;
-        padding-left: 0.3em;
-        padding-bottom: 0.3em;
-        border-radius: 0.2em;
+        padding: 0.2em 0.3em 0.5em 0.5em;
+        border-radius: 0.5em;
        display: flex;
        justify-content: space-between;
        text-align: left;
        cursor: pointer;
+        overflow: hidden;
    }
+    .unselected{
+        background-color: var(--second-color);
+        position: relative;
+        margin: 0.2em;
+        padding: 0.2em 0.3em 0.5em 0.5em;
+        border-radius: 0.5em;
+        display: flex;
+        justify-content: space-between;
+        text-align: left;
+        cursor: pointer;
+        overflow: hidden;
+    }
+
    .subtitle{
        margin-bottom: 0.5em;
    }
@@ -94,7 +108,7 @@
    .waiting::before{
        content: '';
        position: absolute;
-        background: linear-gradient(var(--second-color), var(--first-color));
+        background: linear-gradient(var(--first-color), var(--second-color));
        width: 100%;
        height: 60%;
        animation: rotate 3s linear infinite;
@@ -108,21 +122,6 @@
        border-radius: 0.2em;
    }

-    .unselected{
-        background-color: var(--third-color);
-        background: fixed;
-        position: relative;
-        margin: 0.2em;
-        padding-left: 0.3em;
-        padding-bottom: 0.3em;
-        border-radius: 0.2em;
-        display: flex;
-        justify-content: space-between;
-        text-align: left;
-        cursor: pointer;
-        overflow: hidden;
-    }
-
    /* Définition de l'animation */
    @keyframes rotate {
        from {
--- a/frontend/src/components/Settings/InputsOutputsContent.svelte
+++ b/frontend/src/components/Settings/InputsOutputsContent.svelte
@@ -1,9 +1,8 @@
 <script lang=ts>
    import DeviceCard from "./DeviceCard.svelte";
-    import Tab from "../General/Tab.svelte";
    import Input from "../General/Input.svelte";
    import { t, _ } from 'svelte-i18n'
-    import { generateToast, needProjectSave, peripherals } from "../../stores";
+    import { generateToast, needProjectSave, peripherals, colors } from "../../stores";
    import { get } from "svelte/store"
    import { UpdatePeripheralSettings, GetPeripheralSettings, RemovePeripheral, AddPeripheral } from "../../../wailsjs/go/main/App";
    import RoundedButton from "../General/RoundedButton.svelte";
@@ -79,22 +78,25 @@
 </script>

 <div class="hardware">
-    <div style="padding: 0.5em;">
-        <p style="margin-bottom: 1em;">{$_("projectHardwareAvailableLabel")}</p>
+    <div class="libraryPanel">
        <div class="availableHardware">
-            <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={() => {
-                            if(!peripheral.isSaved) 
-                                addPeripheral(peripheral) 
-                            }}
-                            status="PERIPHERAL_CONNECTED" 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> {$_("projectHardwareOthersLabel")}</p>
-            <RoundedButton on:click={()=>addPeripheral({Name: "OS2L connection", ProtocolName: "OS2L"})} text="Add an OS2L peripheral" icon="bx-plus-circle" tooltip="Configure an OS2L connection"/>
+            <p style="color: var(--white-color);"><i class='bx bxs-plug'></i> {$_("projectHardwareDetectedLabel")}</p>
        </div>
+        {#each Object.entries($peripherals) as [serialNumber, peripheral]}
+            {#if peripheral.isDetected}
+                <DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => {
+                    if(!peripheral.isSaved) 
+                        addPeripheral(peripheral) 
+                    }}
+                    status="PERIPHERAL_CONNECTED" title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={"S/N: " + peripheral.SerialNumber} addable={!peripheral.isSaved}/>
+            {/if}
+        {/each}
+        <div class="availableHardware">
+            <p style="color: var(--white-color);"><i class='bx bxs-network-chart' ></i> {$_("projectHardwareOthersLabel")}</p> 
+        </div>
+        <DeviceCard on:add={() => addPeripheral({Name: "OS2L virtual device", ProtocolName: "OS2L", SerialNumber: ""})}
+            on:dblclick={() => addPeripheral({Name: "OS2L virtual device", ProtocolName: "OS2L", SerialNumber: ""})}
+            status="PERIPHERAL_CONNECTED" title={"OS2L virtual device"} type={"OS2L"} location={""} addable={true}/>
    </div>

    <div style="padding: 0.5em; flex:2; width:100%;">
@@ -104,14 +106,13 @@
                {#each Object.entries($peripherals) as [serialNumber, peripheral]}
                    {#if peripheral.isSaved}
                        <DeviceCard status="{peripheral.status}" on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)}
-                        title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable/>
+                        title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable signalized={peripheral.eventEmitted}/>
                    {/if}
                {/each}
            {:else}              
                <i>{$_("projectHardwareEmptyLabel")}</i>
            {/if}    
        </div>
-        <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]}
@@ -119,8 +120,6 @@
                        <Input on:blur={(event) => validate(settingName, event.detail.target.value)} label={$t(settingName)} type="{typeof(settingValue)}" width='100%' value="{settingValue}"/>
                    </div>
                {/each}
-            {:else}              
-                <i>{$_("projectHardwareNoSettingLabel")}</i>
            {/if}   
        </div>
    </div>
@@ -149,19 +148,23 @@
        border-radius: 0.5em;
        padding: 0.2em;
        max-height: calc(100vh - 300px);
-        overflow-y: auto;
-        scrollbar-width: none;  /* Firefox */
-        -ms-overflow-style: none;  /* IE and Edge */
-        /* overflow: visible; */
+        margin-top: 0.5em;
+        margin-bottom: 0.5em; 
    }
-    .availableHardware::-webkit-scrollbar {
-        display: none;
-    }
-    .configuredHardware {
-        background-color: var(--second-color);
-        border-radius: 0.5em;
+
+    .libraryPanel {
        padding: 0.5em;
-        padding: 0.2em;
+        /* width: 13em; */
+        height: calc(100vh - 2*8px - 2*4px - 40px - 1em - 2*0.1em - 2*0.1em - 2*0.4em - 21.6px - 2*0.5em);
+        overflow: auto;
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+    .libraryPanel::-webkit-scrollbar {
+        display: none; /* Chrome, Safari, Edge */
+    }
+    
+    .configuredHardware {
        display: flex;
        flex-wrap: wrap;
    }
--- a/frontend/src/components/Settings/Settings.svelte
+++ b/frontend/src/components/Settings/Settings.svelte
@@ -12,7 +12,7 @@
 </script>

 <!-- Project tabcontrol -->
-<Tab { tabs } maxHeight='73vh'/>
+<Tab { tabs }/>

 <style>
 </style>
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -13,6 +13,7 @@
  "newProjectTooltip": "Create a new project",
  "openProjectString": "Open",
  "openProjectTooltip": "Open an existing project",
+  "openProjectEmpty": "No project found",
  "unsavedProjectFlag": "unsaved",
  "projectPropertiesTab": "Project properties",
  "projectPropertiesTooltip": "The project properties",
@@ -34,16 +35,13 @@
  "projectHardwareShowLabel" : "My Show",
  "projectHardwareInputsLabel": "INPUTS",
  "projectHardwareOutputsLabel": "OUTPUTS",
-  "projectHardwareDeleteTooltip": "Delete this peripheral",
-  "projectHardwareAddTooltip": "Add this peripheral to project",
+  "projectHardwareDeleteTooltip": "Delete",
+  "projectHardwareAddTooltip": "Add to project",
  "projectHardwareNoSelection": "Empty",
-  "projectHardwareAvailableLabel": "Available peripherals",
-  "projectHardwareSavedLabel": "Project peripherals",
+  "projectHardwareSavedLabel": "Saved in project",
  "projectHardwareDetectedLabel": "Detected",
  "projectHardwareOthersLabel": "Others",
  "projectHardwareEmptyLabel": "No hardware saved for this project",
-  "projectHardwareSettingsLabel": "Peripheral settings",
-  "projectHardwareNoSettingLabel": "No setting can be displayed",

  "peripheralArrivalToast": "Peripheral inserted:",
  "peripheralRemovalToast": "Peripheral removed:",
--- a/frontend/src/runtime-events.js
+++ b/frontend/src/runtime-events.js
@@ -120,6 +120,32 @@ function unloadPeripheral (peripheralInfo) {
    needProjectSave.set(true)
 }

+// A peripheral event has been emitted
+function onPeripheralEvent(sn, event) {
+    // If not exists, add it to the map
+    // eventEmitted key to true for 0.2 sec 
+
+    peripherals.update((storedPeripherals) => {
+        return {
+        ...storedPeripherals,
+        [sn]: {
+            ...storedPeripherals[sn],
+            eventEmitted: true
+        },
+    }})
+
+    setTimeout(() => {
+      peripherals.update((storedPeripherals) => {
+        return {
+        ...storedPeripherals,
+        [sn]: {
+            ...storedPeripherals[sn],
+            eventEmitted: false
+        },
+    }})
+    }, 200);
+}
+
 let initialized = false

 export function initRuntimeEvents(){
@@ -143,6 +169,9 @@ export function initRuntimeEvents(){

    // Handle a peripheral unloaded from the project
    EventsOn('UNLOAD_PERIPHERAL', unloadPeripheral)
+
+    // Handle a peripheral event
+    EventsOn('PERIPHERAL_EVENT_EMITTED', onPeripheralEvent)
 }

 export function destroyRuntimeEvents(){
@@ -166,4 +195,7 @@ export function destroyRuntimeEvents(){

    // Handle a peripheral unloaded from the project
    EventsOff('UNLOAD_PERIPHERAL')
+
+    // Handle a peripheral event
+    EventsOff('PERIPHERAL_EVENT_EMITTED')
 }
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -45,4 +45,5 @@ export let peripherals = writable({})

 // isSaved // if the peripheral is saved in the project
 // isDetected // if the peripheral is detected by the system
-// status // the status of connection
+// status // the status of connection
+// eventEmitted // if an event has been emitted for this peripheral (disappear after a delay)