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

fixed tooltip

Browse Source
This commit is contained in:
Valentin Boulanger
2024-12-15 13:45:46 +01:00
parent 4690f771fa
commit 17b5d39fc4
33 changed files with 2987 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/App.svelte
View File

@@ -9,9 +9,28 @@
import Show from './components/Show/Show.svelte';
import GeneralConsole from './components/Console/GeneralConsole.svelte';
import RoundIconButton from './components/General/RoundIconButton.svelte';
import { currentProject, needProjectSave } from './stores';
import { currentProject, needProjectSave, peripherals } from './stores';
import { SaveProject } from '../wailsjs/go/main/App.js';
import { construct_svelte_component } from 'svelte/internal';
import { construct_svelte_component } from 'svelte/internal';
import { EventsOn } from '../wailsjs/runtime'
import { GetPeripherals } from "../wailsjs/go/main/App";
// When the list of hardware changed, update the store
EventsOn('PERIPHERAL_ARRIVAL', function(peripheralInfo){
console.log("Hardware has been added to the system");
console.log(peripheralInfo)
$peripherals = [...$peripherals, peripheralInfo];
})
EventsOn('PERIPHERAL_REMOVAL', function(peripheralInfo){
console.log("Hardware has been removed from the system");
console.log(peripheralInfo)
$peripherals = $peripherals.filter(item => JSON.stringify(item) !== JSON.stringify(peripheralInfo))
console.log($peripherals)
// $peripherals = devicesList
// console.log(devicesList)
})
let selectedMenu = "settings"
// When the navigation menu changed, update the selected menu
@@ -50,6 +69,9 @@
SaveFile: "",
});
// Request the list of peripherals
GetPeripherals()
</script>
<header>

20
frontend/src/components/General/DropdownList.svelte
View File

@@ -10,10 +10,18 @@
export let active = false;
export let style = '';
let tooltipPosition = {top: 0, left: 0}
// Show a tooltip on mouse hover
let tooltipShowing = false
function toggleTooltip(){
tooltipShowing = !tooltipShowing
let buttonRef
function toggleTooltip(active){
const rect = buttonRef.getBoundingClientRect();
tooltipPosition = {
top: rect.bottom + 5, // Ajouter une marge en bas
left: rect.left, // Centrer horizontalement
};
tooltipShowing = active
}
// Emit a click event when the button is clicked
@@ -39,13 +47,13 @@
<!-- <Tooltip message={tooltip} show={tooltipShowing}></Tooltip> -->
<div class="container">
<button
on:mouseenter={toggleTooltip}
on:mouseleave={toggleTooltip}
<button bind:this={buttonRef}
on:mouseenter={() => { toggleTooltip(true) }}
on:mouseleave={() => { toggleTooltip(false) }}
on:click={toggleList}
style='color: {$colors.white}; background-color: { active ? $colors.second : $colors.third }; border:none; {style}'><i class='bx { icon}'></i> { text }
</button>
<Tooltip message={tooltip} show={tooltipShowing}></Tooltip>
<Tooltip message={tooltip} show={tooltipShowing} position={tooltipPosition}></Tooltip>
<div class="list" style="color: {$colors.white}; display: {listShowing ? "block" : "none"};"
on:mouseleave={hideList}>
{#each Array.from(choices) as [key, value]}

27
frontend/src/components/General/InfoButton.svelte
View File

@@ -1,5 +1,6 @@
<script>
import { stop_propagation } from 'svelte/internal';
import Tooltip from '../General/Tooltip.svelte';
import { createEventDispatcher } from 'svelte';
@@ -12,30 +13,38 @@
export let message = '';
export let hide = false;
let tooltipPosition = {top: 0, left: 0}
// Show a tooltip on mouse hover
let tooltipShowing = false
function toggleTooltip(){
tooltipShowing = !tooltipShowing
let buttonRef
function toggleTooltip(active){
const rect = buttonRef.getBoundingClientRect();
tooltipPosition = {
top: rect.bottom + 5, // Ajouter une marge en bas
left: rect.left, // Centrer horizontalement
};
tooltipShowing = active
}
// Emit a click event when the button is being clicked
const dispatch = createEventDispatcher();
function click(){
function click(event){
event.stopPropagation()
dispatch('click')
}
</script>
<div class="container">
<div class="badge"
<div class="badge" bind:this={buttonRef}
style="opacity: {hide ? 0 : 1}; pointer-events: {hide ? 'none' : 'all'}; width: {width}; height: {width}; color: {color}; background-color: {background}; border-radius: calc({width} / 2); cursor: {interactive ? 'pointer' : ''}; {style}"
on:mousedown={click}
on:mouseenter={toggleTooltip}
on:mouseleave={toggleTooltip}>
on:mouseenter={() => { toggleTooltip(true) }}
on:mouseleave={() => { toggleTooltip(false) }}>
<i class='bx {icon}' style="font-size:100%;"></i>
</div>
{#if message}
<Tooltip message={message} show={tooltipShowing}></Tooltip>
<Tooltip message={message} show={tooltipShowing} position={tooltipPosition}></Tooltip>
{/if}
</div>
@@ -50,7 +59,5 @@
align-items: center;
padding: 0;
}
</style>

6
frontend/src/components/General/Input.svelte
View File

@@ -23,13 +23,13 @@
</script>
<div style="width: {width}; height: {height};">
<p style="color: {$colors.first};">{label}</p>
<p style="color: {$colors.white};">{label}</p>
<!-- Handle the textarea input -->
{#if type === 'large'}
<textarea style="background-color: {$colors.first}; color: {$colors.white};" placeholder={placeholder} value={value} on:input={handleInput}/>
<textarea style="background-color: {$colors.second}; color: {$colors.white};" placeholder={placeholder} value={value} on:input={handleInput}/>
<!-- Handle the simple inputs -->
{:else}
<input style="background-color: {$colors.first}; color: {$colors.white};" type={type} min={min} max={max} src={src} alt={alt} value={value} placeholder={placeholder} on:input={handleInput}/>
<input style="background-color: {$colors.second}; color: {$colors.white};" type={type} min={min} max={max} src={src} alt={alt} value={value} placeholder={placeholder} on:input={handleInput}/>
{/if}
</div>

20
frontend/src/components/General/RoundIconButton.svelte
View File

@@ -52,20 +52,28 @@
dispatch('click');
}
let tooltipPosition = {top: 0, left: 0}
// Show a tooltip on mouse hover
let tooltipShowing = false
function toggleTooltip(){
tooltipShowing = !tooltipShowing
let buttonRef
function toggleTooltip(active){
const rect = buttonRef.getBoundingClientRect();
tooltipPosition = {
top: rect.bottom + 5, // Ajouter une marge en bas
left: rect.left, // Centrer horizontalement
};
tooltipShowing = active
}
</script>
<div class="container">
<button
<button bind:this={buttonRef}
style="width:{width}; height:{width}; border-radius:{width}; background-color:{background}; color:{foreground};"
on:mousedown={emitClick}
on:mouseenter={toggleTooltip}
on:mouseleave={toggleTooltip}>
on:mouseenter={() => { toggleTooltip(true) }}
on:mouseleave={() => { toggleTooltip(false) }}>
<i class='bx {icon}' style="font-size:100%;"></i>
</button>
<!-- Showing the badge status if the button has an operational status -->
@@ -74,7 +82,7 @@
style="width: calc({width} / 3); height: calc({width} / 3); border-radius: calc({width}); background-color:{statusColor}; display:block;">
</div>
{/if}
<Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
<Tooltip message={tooltipMessage} show={tooltipShowing} position={tooltipPosition}></Tooltip>
</div>
<style>

22
frontend/src/components/General/RoundedButton.svelte
View File

@@ -9,13 +9,21 @@
export let active = false;
export let style = '';
let tooltipPosition = {top: 0, left: 0}
// Show a tooltip on mouse hover
let tooltipShowing = false
function toggleTooltip(){
tooltipShowing = !tooltipShowing
let buttonRef
function toggleTooltip(active){
const rect = buttonRef.getBoundingClientRect();
tooltipPosition = {
top: rect.bottom + 5, // Ajouter une marge en bas
left: rect.left, // Centrer horizontalement
};
tooltipShowing = active
}
// Emit a click event when the button is clicked
// Emit a click event when the button is clicked
const dispatch = createEventDispatcher();
function emitClick() {
dispatch('click');
@@ -24,13 +32,13 @@
</script>
<div class="container">
<button
<button bind:this={buttonRef}
on:mousedown={emitClick}
on:mouseenter={toggleTooltip}
on:mouseleave={toggleTooltip}
on:mouseenter={() => { toggleTooltip(true) }}
on:mouseleave={() => { toggleTooltip(false) }}
style='color: {$colors.white}; background-color: { active ? $colors.second : $colors.third }; {style}'><i class='bx { icon}'></i> { text }
</button>
<Tooltip message={tooltip} show={tooltipShowing}></Tooltip>
<Tooltip message={tooltip} show={tooltipShowing} position={tooltipPosition}></Tooltip>
</div>
<style>
.container{

2
frontend/src/components/General/Tab.svelte
View File

@@ -23,7 +23,7 @@
</div>
<div class="bodyContainer"
style='background-color: {$colors.third}; max-width: {maxWidth}; max-height: {maxHeight};'>
style='background-color: {$colors.first}; max-width: {maxWidth}; max-height: {maxHeight};'>
{#if tabs[activeTab]}
<svelte:component this={tabs[activeTab].component} />
{/if}

20
frontend/src/components/General/Toggle.svelte
View File

@@ -24,25 +24,33 @@
dispatch('click', event);
}
let tooltipPosition = {top: 0, left: 0}
// Show a tooltip on mouse hover
let tooltipShowing = false
function toggleTooltip(){
tooltipShowing = !tooltipShowing
let buttonRef
function toggleTooltip(active){
const rect = buttonRef.getBoundingClientRect();
tooltipPosition = {
top: rect.bottom + 5, // Ajouter une marge en bas
left: rect.left, // Centrer horizontalement
};
tooltipShowing = active
}
</script>
<div class="container" style="{cssVarStyles}">
<label class="customToggle"
<label class="customToggle" bind:this={buttonRef}
on:mousedown={emitClick}
on:mouseenter={toggleTooltip}
on:mouseleave={toggleTooltip}
on:mouseenter={() => { toggleTooltip(true) }}
on:mouseleave={() => { toggleTooltip(false) }}
style="width:{width}; height:{height}; border-radius:{width}; background-color:{$colors.fourth};">
<input type="checkbox" {checked}>
<span class="checkmark" style="width: {height}; height: 100%; border-radius:{height};">
<i class='bx {icon}' style="font-size:{height};"/>
</span>
</label>
<Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
<Tooltip message={tooltipMessage} show={tooltipShowing} position={tooltipPosition}></Tooltip>
</div>
<style>

31
frontend/src/components/General/Tooltip.svelte
View File

@@ -1,35 +1,42 @@
<script>
export let message = "Default tooltip"
export let show = false
export let position = { top: 0, left: 0 }
export let duration = 3000
import {colors} from '../../stores.js';
import { onDestroy } from 'svelte';
let mustBeDisplayed = "none"
$: {
if (show === true){
mustBeDisplayed = "block"
setTimeout(()=> {
mustBeDisplayed = "none"
let tooltipTimeout
$:{
if (show) {
tooltipTimeout = setTimeout(() => {
show = false
}, duration)
} else {
mustBeDisplayed = "none"
clearTimeout(tooltipTimeout)
}
}
</script>
<div style="background-color:{$colors.fourth}; display:{mustBeDisplayed}">
<div class="tooltip {show ? 'visible' : ''}" style="background-color:{$colors.fourth}; top: {position.top}px; left: {position.left}px;">
<p style="color:{$colors.first};">{message}</p>
</div>
<style>
div {
margin-top: 0.2em;
position: absolute;
border-radius: 15px;
.tooltip {
position: fixed;
border-radius: 0.5em;
white-space: nowrap;
z-index: 100;
visibility: hidden;
opacity: 0;
transition: opacity 0.2s, visibility 0.2s;
}
.tooltip.visible {
visibility: visible;
opacity: 1;
}
p{

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

@@ -3,48 +3,79 @@
import InfoButton from "../General/InfoButton.svelte";
import { _ } from 'svelte-i18n'
import { createEventDispatcher } from 'svelte';
import Input from "../General/Input.svelte";
export let title = 'Default card';
export let subtitle = '';
export let type = '';
export let location = '';
export let line1 = '';
export let line2 = '';
export let removable = false;
export let pluggable = false;
export let plugged = false;
export let addable = false;
export let signalizable = false;
export let signalized = false;
export let disconnected = false;
// Emit a delete event when the device is being removed
const dispatch = createEventDispatcher();
function remove(){
function remove(event){
dispatch('delete')
}
function add(event){
dispatch('add')
}
let showOptions = false
function click(){
showOptions = !showOptions
dispatch('click')
}
</script>
<div class="profile">
<div>
<p>{title}</p>
<h6 class="subtitle">{subtitle}</h6>
<h6>{line1}</h6>
<h6>{line2}</h6>
<div class="card">
<div class="profile" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white};">
<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>
{#if disconnected}
<h6><b>Disconnected</b></h6>
{:else}
<h6>{line1}</h6>
<h6>{line2}</h6>
{/if}
</div>
<div class="actions">
<InfoButton on:click={add} color="{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="{disconnected ? $colors.first : $colors.white}" style="margin: 0.2em; display: { removable ? 'flex' : 'none' }" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")}/>
<InfoButton style="margin: 0.2em;" background={ signalized ? $colors.orange : $colors.first } icon='bx-pulse' hide={!signalizable}/>
</div>
</div>
<div class="actions">
<InfoButton on:click={remove} style="margin: 0.2em;" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")} hide={!removable}/>
<InfoButton style="margin: 0.2em;" background={ signalized ? $colors.orange : $colors.first } icon='bx-pulse' hide={!signalizable}/>
<InfoButton style="margin: 0.2em;" background={ plugged ? $colors.ok : $colors.nok} icon='bxs-plug' hide={!pluggable}/>
<div class="options" style="display: {showOptions ? "block" : "none"};">
<Input label={$_("projectCommentsLabel")} type='large' width='100%'/>
</div>
</div>
<style>
.profile:hover{
background-color: var(--third-color);
}
.card{
position: relative;
}
.profile {
background-color: var(--second-color);
margin: 0.2em;
padding-left: 0.3em;
border-radius: 0.2em;
display: flex;
justify-content: space-between;
text-align: left;
cursor: pointer;
}
.subtitle{
margin-bottom: 0.5em;
@@ -52,6 +83,17 @@
.actions {
margin-left: 0.2em;
}
.options {
color: var(--first-color);
padding: 0.2em;
margin-top: 0.2em;
position: absolute;
display:block;
border-radius: 0.5em;
max-width: 50;
background-color: var(--fourth-color);
text-align: left;
}
p{
margin: 0;
}

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

@@ -1,66 +1,125 @@
<script lang=ts>
import DeviceCard from "./DeviceCard.svelte";
import Tab from "../General/Tab.svelte";
import { _ } from 'svelte-i18n'
import { peripherals } from "../../stores";
import { ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI } from "../../../wailsjs/go/main/App";
function ftdiConnect(){
ConnectFTDI().then(() =>
console.log("FTDI connected"))
.catch((error) => {
console.log("Error when trying to connect: " + error)
})
}
function ftdiActivate(){
ActivateFTDI().then(() =>
console.log("FTDI activated"))
.catch((error) => {
console.log("Error when trying to activate: " + error)
})
}
function ftdiDeactivate(){
DeactivateFTDI().then(() =>
console.log("FTDI deactivated"))
.catch((error) => {
console.log("Error when trying to deactivate: " + error)
})
}
let sliderValue = 0
function ftdiSetDevice(value){
console.log("value is " + value)
SetDeviceFTDI(value).then(() =>
console.log("FTDI device set up"))
.catch((error) => {
console.log("Error when trying to set the device: " + error)
})
}
function ftdiDisconnect(){
DisconnectFTDI().then(() =>
console.log("FTDI disconnected"))
.catch((error) => {
console.log("Error when trying to disconnect: " + error)
})
}
</script>
<div class="container">
<div class="configuration">
<p>Option 1</p>
<p>Option 2</p>
<p>Option 3</p>
</div>
<div class="hardware">
<div style="padding: 0.5em;">
<p style="margin-bottom: 1em;">Available devices</p>
<div class="availableHardware">
<p style="color: var(--first-color);"><i class='bx bxs-plug'></i> Detected</p>
{#each $peripherals as peripheral}
<DeviceCard title={peripheral.Name == "" ? "Please wait..." : peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} addable/>
{/each}
<p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> Others</p>
<DeviceCard on:click={() => console.log("Edit the OS2L hardware")} title="OS2L device" type="OS2L" line1="Add to configure" addable on:delete={() => console.log("Delete the OS2L device")}/>
<DeviceCard on:click={() => console.log("Edit the OSC hardware")} title="OSC device" type="OSC" line1="Add to configure" addable on:delete={() => console.log("Delete the OSC device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<DeviceCard on:click={() => console.log("Edit the ArtNet hardware")} title="ArtNet device" type="ArtNet" line1="Add to configure" addable on:delete={() => console.log("Delete the ArtNet device")}/>
<div class="hardware">
<div class="inputHardware">
<DeviceCard title="Virtual DJ" subtitle="OS2L" line1="Listening to 192.168.1.53" line2="Please update your OS2L client" removable pluggable signalizable on:delete={() => console.log("Delete the Virtual DJ device")}/>
<DeviceCard title="Pioneer DDJ-FLX4" subtitle="MIDI" line1="Listening to COM14" line2="Version: 0-alpha-13.15" removable pluggable signalizable/>
<DeviceCard title="Platformia LM730" subtitle="OSC" line1="Listening to 192.168.1.418" line2="Please update your OSC client" removable pluggable signalizable/>
</div>
<p><i class='bx bx-down-arrow-alt'/>{$_("projectHardwareInputsLabel")}<i class='bx bx-down-arrow-alt'/></p>
<div class="show">{$_("projectHardwareShowLabel")}</div>
<p><i class='bx bx-down-arrow-alt'/>{$_("projectHardwareOutputsLabel")}<i class='bx bx-down-arrow-alt'/></p>
<div class="outputHardware">
<DeviceCard title="DMX rendering" subtitle="Rendering interface" line2="All universes associated." pluggable plugged on:delete={() => console.log("Delete the rendering interface")}/>
<DeviceCard title="BerryMix 1" subtitle="BerryMix interface" line1="Writing on ETHERNET10" line2="Universe 1 associated." removable pluggable/>
<DeviceCard title="00feadfee456" subtitle="USB - FTDI" line1="Writing on COM14" line2="Universe 2 associated." removable pluggable/>
<DeviceCard title="Server 12" subtitle="ArtNet" line1="Writing to 192.168.1.354" line2="Universe 3 & 4 associated." removable pluggable signalizable signalized/>
</div>
<div style="padding: 0.5em; flex:2; width:100%;">
<p style="margin-bottom: 1em;">Project devices</p>
<div class="configuredHardware">
<DeviceCard disconnected on:click={() => console.log("Edit the VDJ hardware")} title="Virtual DJ" type="OS2L" location="192.168.1.53" line1="Please update your OS2L client" removable signalizable on:delete={() => console.log("Delete the Virtual DJ device")}/>
<DeviceCard disconnected title="Pioneer DDJ-FLX4" type="MIDI" location="COM14" line1="Version: 0-alpha-13.15" removable signalizable/>
<DeviceCard title="Platformia LM730" type="OSC" location="192.168.1.418" line1="Please update your OSC client" removable signalizable/>
</div>
<p style="margin-bottom: 1em;">Device settings</p>
<div>
<p><i>Select a device to edit its settings</i></p>
<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>
</div>
</div>
</div>
<style>
.container {
display: flex;
}
.configuration {
flex: 1;
background-color: var(--first-color);
border-radius: 0.5em;
p {
margin: 0;
}
.hardware {
flex: 3;
margin-left: 0.5em;
text-align: center;
display: flex;
width: 100%;
}
.inputHardware {
background-color: var(--first-color);
.availableHardware {
background-color: var(--second-color);
border-radius: 0.5em;
padding: 0.2em;
display: flex;
flex-wrap: wrap;
max-height: calc(100vh - 300px);
overflow-y: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
/* overflow: visible; */
}
.show {
text-align: center;
background-color: var(--first-color);
margin: 1em;
padding: 3em;
border-radius: 0.5em;
.availableHardware::-webkit-scrollbar {
display: none;
}
.outputHardware {
background-color: var(--first-color);
.configuredHardware {
background-color: var(--second-color);
border-radius: 0.5em;
padding: 0.5em;
padding: 0.2em;

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

@@ -33,5 +33,6 @@
"projectHardwareShowLabel" : "My Show",
"projectHardwareInputsLabel": "INPUTS",
"projectHardwareOutputsLabel": "OUTPUTS",
"projectHardwareDeleteTooltip": "Delete this device"
"projectHardwareDeleteTooltip": "Delete this device",
"projectHardwareAddTooltip": "Add this device to project"
}

5
frontend/src/stores.js
View File

@@ -4,7 +4,7 @@ import { writable } from 'svelte/store';
export let projectsList = writable([])
// Show settings
export let currentProject = writable({});
export let currentProject = writable({})
export let needProjectSave = writable(false)
// Application colors
@@ -23,3 +23,6 @@ export const colors = writable({
export const firstSize = writable("10px")
export const secondSize = writable("14px")
export const thirdSize = writable("20px")
// List of current hardware
export let peripherals = writable([])

2
frontend/src/style.css
View File

@@ -16,6 +16,8 @@ html, body {
position: relative;
width: 100%;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
body {