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

added final navigation bar (#9)

Browse Source 
Reviewed-on: #9
This commit was merged in pull request #9.
This commit is contained in:
Valentin Boulanger
2024-06-24 07:02:39 +00:00
parent d9a01d440b
commit d6dc8405dd
19 changed files with 253 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/App.svelte
View File

@@ -4,12 +4,14 @@
import { _ } from 'svelte-i18n'
import NavigationBar from './components/NavigationBar.svelte';
import Clock from './components/Clock.svelte'
import Stage from './components/Stage.svelte';
import Atmo from './components/Atmo.svelte';
import Preparation from './components/Preparation.svelte';
import Animation from './components/Animation.svelte';
import Settings from './components/Settings.svelte';
import DevicesLibrary from './components/DevicesLibrary.svelte';
import Devices from './components/Devices.svelte';
import Show from './components/Show.svelte';
import GeneralConsole from './components/GeneralConsole.svelte';
let selectedMenu = "stage"
let selectedMenu = "settings"
// When the navigation menu changed, update the selected menu
function onNavigationChanged(event){
selectedMenu = event.detail.menu;
@@ -21,14 +23,18 @@
<Clock/>
</header>
<main>
{#if selectedMenu === "stage"}
<Stage />
{:else if selectedMenu === "atmo"}
<Atmo />
{:else if selectedMenu === "settings"}
{#if selectedMenu === "settings"}
<Settings />
{:else if selectedMenu === "devicesLibrary"}
<DevicesLibrary />
{:else if selectedMenu === "devices"}
<Devices />
{:else if selectedMenu === "preparation"}
<Preparation />
{:else if selectedMenu === "animation"}
<Animation />
{:else if selectedMenu === "show"}
<Show />
{:else if selectedMenu === "console"}
<GeneralConsole />
{/if}
</main>

1
frontend/src/components/Animation.svelte Normal file
View File

@@ -0,0 +1 @@
<h1>Animation creator</h1>

1
frontend/src/components/Atmo.svelte
View File

@@ -1 +0,0 @@
<h1>Atmo</h1>

1
frontend/src/components/Devices.svelte Normal file
View File

@@ -0,0 +1 @@
<h1>Devices configuration</h1>

1
frontend/src/components/DevicesLibrary.svelte
View File

@@ -1 +0,0 @@
<h1>Devices Library</h1>

1
frontend/src/components/GeneralConsole.svelte Normal file
View File

@@ -0,0 +1 @@
<h1>General console</h1>

28
frontend/src/components/NavigationBar.svelte
View File

@@ -1,5 +1,6 @@
<script>
import RoundIconButton from './RoundIconButton.svelte';
import Toggle from './Toggle.svelte';
import { createEventDispatcher, onDestroy } from 'svelte';
import * as SoftwareVariables from '../stores.js';
import { _ } from 'svelte-i18n'
@@ -16,10 +17,12 @@
//---Navigation System---//
let menuStates = {
stage: true,
atmo: false,
devicesLibrary: false,
settings: false
settings: true,
devices: false,
preparation: false,
animation: false,
show: false,
console:false
};
// Handle the click on a navigation button
@@ -56,17 +59,22 @@
</script>
<div style="background-color: {secondColor};">
<RoundIconButton id="stageMenu" on:click="{() => handleNavigation("stage")}" icon="bx-shape-square" width="2.5em" tooltip="{$_("stageMenuTooltip")}" active={menuStates.stage}></RoundIconButton>
<RoundIconButton id="atmoMenu" on:click="{() => handleNavigation("atmo")}" icon="bxl-deezer" width="2.5em" tooltip="{$_("atmoMenuTooltip")}" active={menuStates.atmo}></RoundIconButton>
<RoundIconButton id="devicesLibraryMenu" on:click="{() => handleNavigation("devicesLibrary")}" icon="bx-hdd" width="2.5em" tooltip={$_("devicesLibraryMenuTooltip")} active={menuStates.devicesLibrary}></RoundIconButton>
<RoundIconButton id="settingsMenu" on:click="{() => handleNavigation("settings")}" icon="bx-cog" width="2.5em" tooltip={$_("settingsMenuTooltip")} active={menuStates.settings}></RoundIconButton>
<RoundIconButton icon="bx-broadcast" width="2.5em" tooltip="{$_("dmxBoxStatusTooltip")}" operationalStatus=false okStatusLabel="{$_("dmxBoxOkStatusTooltip")}" nokStatusLabel="{$_("dmxBoxNokStatusTooltip")}"></RoundIconButton>
<RoundIconButton id="devicesMenu" on:click="{() => handleNavigation("devices")}" icon="bx-video-plus" width="2.5em" tooltip={$_("devicesMenuTooltip")} active={menuStates.devices}></RoundIconButton>
<RoundIconButton id="preparationMenu" on:click="{() => handleNavigation("preparation")}" icon="bx-layer" width="2.5em" tooltip="{$_("preparationMenuTooltip")}" active={menuStates.preparation}></RoundIconButton>
<RoundIconButton id="animationMenu" on:click="{() => handleNavigation("animation")}" icon="bx-film" width="2.5em" tooltip="{$_("animationMenuTooltip")}" active={menuStates.animation}></RoundIconButton>
<RoundIconButton id="showMenu" on:click="{() => handleNavigation("show")}" icon="bxs-grid" width="2.5em" tooltip="{$_("showMenuTooltip")}" active={menuStates.show}></RoundIconButton>
<RoundIconButton id="consoleMenu" on:click="{() => handleNavigation("console")}" icon="bx-slider" width="2.5em" tooltip="{$_("consoleMenuTooltip")}" active={menuStates.console}></RoundIconButton>
<Toggle id="stageRenderingToggle" icon="bx-shape-square" width="2.5em" height="1.3em" tooltip="{$_("stageRenderingToggleTooltip")}"></Toggle>
<Toggle id="showActivation" icon="bx-play" width="2.5em" height="1.3em" tooltip="{$_("showActivationToggleTooltip")}"></Toggle>
</div>
<style>
div {
display: inline-block;
display: inline-flex;
align-items: center;
padding: 4px;
border-radius: 40px;
gap: 0.3em;
flex-wrap: wrap;
}
</style>

1
frontend/src/components/Preparation.svelte Normal file
View File

@@ -0,0 +1 @@
<h1>Show preparation</h1>

7
frontend/src/components/RoundIconButton.svelte
View File

@@ -33,8 +33,10 @@
$: {
if (active === true) {
background = thirdColor
foreground = fourthColor
} else {
background = fourthColor
foreground = secondColor
}
}
@@ -79,11 +81,11 @@
<div>
<Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
<button
style="width:{width}; height:{width}; border:none; border-radius:{width}; background-color:{background}; color:{foreground};"
style="width:{width}; height:{width}; border-radius:{width}; background-color:{background}; color:{foreground};"
on:mousedown={emitClick}
on:mouseenter={toggleTooltip}
on:mouseleave={toggleTooltip}>
<i class='bx {icon}' style="font-size:calc({width} - 80%);"></i>
<i class='bx {icon}' style="font-size:100%;"></i>
</button>
<!-- Showing the badge status if the button has an operational status -->
@@ -98,6 +100,7 @@
button{
display: inline-block;
margin: 0;
border:none;
}
button:hover{
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;

2
frontend/src/components/Settings.svelte
View File

@@ -1 +1 @@
<h1>Settings</h1>
<h1>Project settings</h1>

1
frontend/src/components/Show.svelte Normal file
View File

@@ -0,0 +1 @@
<h1>Show mapping</h1>

17
frontend/src/components/Stage.svelte
View File

@@ -1,17 +0,0 @@
<div id="background"></div>
<h1>Stage</h1>
<style>
#background {
background-image: url('../assets/images/stage_background.png');
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>

121
frontend/src/components/Toggle.svelte Normal file
View File

@@ -0,0 +1,121 @@
<!-- Create a toggle button -->
<script lang=ts>
import { createEventDispatcher, onDestroy } from 'svelte';
import * as SoftwareVariables from '../stores.js';
import Tooltip from './Tooltip.svelte';
import { _ } from 'svelte-i18n'
export let icon = "" // The icon wanted
export let width = "10em" // The button width
export let height = "5em" // The button height
export let tooltip = "Default tooltip" // The description shown in the tooltip
export let checked
let tooltipMessage = tooltip
// Import the main colors from the store
let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
$: cssVarStyles = `--thumb-background:${secondColor};--thumb-background-selected:${thirdColor};--thumb-color:${fourthColor}`;
// Emit a click event when the button is clicked
const dispatch = createEventDispatcher();
function emitClick(event) {
event.preventDefault();
event.target.blur();
dispatch('click', event);
}
// Show a tooltip on mouse hover
let tooltipShowing = false
function toggleTooltip(){
tooltipShowing = !tooltipShowing
}
// Unsubscribe for all variables used from the store
onDestroy(() => {
unsubscribeFirstColor();
unsubscribeSecondColor();
unsubscribeThirdColor();
unsubscribeFourthColor();
unsubscribeOkColor();
unsubscribeNokColor();
})
</script>
<div style="{cssVarStyles}">
<Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
<label class="customToggle"
on:mousedown={emitClick}
on:mouseenter={toggleTooltip}
on:mouseleave={toggleTooltip}
style="width:{width}; height:{height}; border-radius:{width}; background-color:{fourthColor};">
<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>
</div>
<style>
div{
display:inline-block;
}
.customToggle {
cursor: pointer;
overflow: hidden;
padding: 0.1em;
}
.customToggle:hover{
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
}
.customToggle input[type="checkbox"] {
opacity: 0;
position: absolute; /* Position absolue pour garder l'élément dans le flux */
cursor: pointer;
}
.customToggle input[type="checkbox"]:checked + .checkmark {
background-color: var(--thumb-background-selected); /* Couleur lorsque la case est cochée */
float: right;
animation: checkmark-slide-in 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
}
@keyframes checkmark-slide-in {
0% {
transform: translateX(-50px) scale(1);
opacity: 1;
}
50% {
transform: translateX(0) scale(1);
opacity: 1;
}
70% {
transform: translateX(-5px) scale(1);
opacity: 1;
}
100% {
transform: translateX(0) scale(1);
opacity: 1;
}
}
.checkmark {
text-align:center;
float: left;
background-color: var(--thumb-background);
color: var(--thumb-color);
transition: opacity 0.3s, transform 0.3s;
}
</style>

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

@@ -1,9 +1,10 @@
{
"stageMenuTooltip": "Stage configuration",
"atmoMenuTooltip": "Atmosphere effects",
"devicesLibraryMenuTooltip": "Devices library",
"settingsMenuTooltip": "Software settings",
"dmxBoxStatusTooltip": "DMXBox status:",
"dmxBoxOkStatusTooltip": "connected",
"dmxBoxNokStatusTooltip": "disconnected"
"settingsMenuTooltip": "Project settings",
"devicesMenuTooltip": "Devices configuration",
"preparationMenuTooltip": "Show preparation",
"animationMenuTooltip": "Animation creator",
"showMenuTooltip": "Show mapping",
"consoleMenuTooltip": "General console",
"stageRenderingToggleTooltip": "Show/hide the rendering view",
"showActivationToggleTooltip": "Activate/Deactivate the play mode"
}

2
frontend/src/stores.js
View File

@@ -7,6 +7,8 @@ export const thirdColor = writable("#3282B8");
export const fourthColor = writable("#BBE1FA");
export const okColor = writable("#2BA646");
export const nokColor = writable("#A6322B");
export const whiteColor = writable("#FFFFFF");
export const orangeColor = writable("#BC9714")
// Font sizes defined in the software
export const firstSize = writable("10px")

6
frontend/src/style.css
View File

@@ -1,3 +1,9 @@
:root{
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
html, body {
position: relative;
width: 100%;