forked from DMXStage/dmxconnect
feat: restored the project
This commit is contained in:
4
.gitignore
vendored
4
.gitignore
vendored
@@ -3,6 +3,6 @@ node_modules
|
|||||||
frontend/.vscode
|
frontend/.vscode
|
||||||
frontend/dist
|
frontend/dist
|
||||||
frontend/wailsjs
|
frontend/wailsjs
|
||||||
frontend/package-lock.json
|
*/package-lock.json
|
||||||
frontend/package.json.md5
|
*/package.json.md5
|
||||||
*.exe
|
*.exe
|
||||||
@@ -3,10 +3,12 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||||
<title>dmxconnect</title>
|
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
|
||||||
|
<link rel='stylesheet' href='./src/style.css'>
|
||||||
|
<link rel="shortcut icon" type="image/x-icon" href="./src/assets/images/logo-universal.png" />
|
||||||
|
<title>DMXConnect</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body style="background-color:#1B262C;">
|
||||||
<div id="app"></div>
|
|
||||||
<script src="./src/main.js" type="module"></script>
|
<script src="./src/main.js" type="module"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -12,5 +12,8 @@
|
|||||||
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
"@sveltejs/vite-plugin-svelte": "^1.0.1",
|
||||||
"svelte": "^3.49.0",
|
"svelte": "^3.49.0",
|
||||||
"vite": "^3.0.7"
|
"vite": "^3.0.7"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"svelte-i18n": "^3.7.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,79 +1,48 @@
|
|||||||
<script>
|
<script>
|
||||||
import logo from './assets/images/logo-universal.png'
|
import logo from './assets/images/logo-universal.png'
|
||||||
import {Greet} from '../wailsjs/go/main/App.js'
|
import {Greet} from '../wailsjs/go/main/App.js'
|
||||||
|
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 Settings from './components/Settings.svelte';
|
||||||
|
import DevicesLibrary from './components/DevicesLibrary.svelte';
|
||||||
|
|
||||||
let resultText = "Please enter your name below 👇"
|
let selectedMenu = "stage"
|
||||||
let name
|
// When the navigation menu changed, update the selected menu
|
||||||
|
function onNavigationChanged(event){
|
||||||
function greet() {
|
selectedMenu = event.detail.menu;
|
||||||
Greet(name).then(result => resultText = result)
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<NavigationBar on:navigationChanged="{onNavigationChanged}"/>
|
||||||
|
<Clock/>
|
||||||
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<img alt="Wails logo" id="logo" src="{logo}">
|
{#if selectedMenu === "stage"}
|
||||||
<div class="result" id="result">{resultText}</div>
|
<Stage />
|
||||||
<div class="input-box" id="input">
|
{:else if selectedMenu === "atmo"}
|
||||||
<input autocomplete="off" bind:value={name} class="input" id="name" type="text"/>
|
<Atmo />
|
||||||
<button class="btn" on:click={greet}>Greet</button>
|
{:else if selectedMenu === "settings"}
|
||||||
</div>
|
<Settings />
|
||||||
|
{:else if selectedMenu === "devicesLibrary"}
|
||||||
|
<DevicesLibrary />
|
||||||
|
{/if}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
main {
|
||||||
#logo {
|
text-align: left;
|
||||||
display: block;
|
padding: 1em;
|
||||||
width: 50%;
|
max-width: 240px;
|
||||||
height: 50%;
|
margin: 0 auto;
|
||||||
margin: auto;
|
|
||||||
padding: 10% 0 0;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-origin: content-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.result {
|
@media (min-width: 640px) {
|
||||||
height: 20px;
|
main {
|
||||||
line-height: 20px;
|
max-width: none;
|
||||||
margin: 1.5rem auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-box .btn {
|
|
||||||
width: 60px;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
border-radius: 3px;
|
|
||||||
border: none;
|
|
||||||
margin: 0 0 0 20px;
|
|
||||||
padding: 0 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-box .btn:hover {
|
|
||||||
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
|
|
||||||
color: #333333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-box .input {
|
|
||||||
border: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
outline: none;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
padding: 0 10px;
|
|
||||||
background-color: rgba(240, 240, 240, 1);
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-box .input:hover {
|
|
||||||
border: none;
|
|
||||||
background-color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-box .input:focus {
|
|
||||||
border: none;
|
|
||||||
background-color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
@@ -1,93 +0,0 @@
|
|||||||
Copyright 2016 The Nunito Project Authors (contact@sansoxygen.com),
|
|
||||||
|
|
||||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
|
||||||
This license is copied below, and is also available with a FAQ at:
|
|
||||||
http://scripts.sil.org/OFL
|
|
||||||
|
|
||||||
|
|
||||||
-----------------------------------------------------------
|
|
||||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
|
||||||
-----------------------------------------------------------
|
|
||||||
|
|
||||||
PREAMBLE
|
|
||||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
|
||||||
development of collaborative font projects, to support the font creation
|
|
||||||
efforts of academic and linguistic communities, and to provide a free and
|
|
||||||
open framework in which fonts may be shared and improved in partnership
|
|
||||||
with others.
|
|
||||||
|
|
||||||
The OFL allows the licensed fonts to be used, studied, modified and
|
|
||||||
redistributed freely as long as they are not sold by themselves. The
|
|
||||||
fonts, including any derivative works, can be bundled, embedded,
|
|
||||||
redistributed and/or sold with any software provided that any reserved
|
|
||||||
names are not used by derivative works. The fonts and derivatives,
|
|
||||||
however, cannot be released under any other type of license. The
|
|
||||||
requirement for fonts to remain under this license does not apply
|
|
||||||
to any document created using the fonts or their derivatives.
|
|
||||||
|
|
||||||
DEFINITIONS
|
|
||||||
"Font Software" refers to the set of files released by the Copyright
|
|
||||||
Holder(s) under this license and clearly marked as such. This may
|
|
||||||
include source files, build scripts and documentation.
|
|
||||||
|
|
||||||
"Reserved Font Name" refers to any names specified as such after the
|
|
||||||
copyright statement(s).
|
|
||||||
|
|
||||||
"Original Version" refers to the collection of Font Software components as
|
|
||||||
distributed by the Copyright Holder(s).
|
|
||||||
|
|
||||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
|
||||||
or substituting -- in part or in whole -- any of the components of the
|
|
||||||
Original Version, by changing formats or by porting the Font Software to a
|
|
||||||
new environment.
|
|
||||||
|
|
||||||
"Author" refers to any designer, engineer, programmer, technical
|
|
||||||
writer or other person who contributed to the Font Software.
|
|
||||||
|
|
||||||
PERMISSION & CONDITIONS
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining
|
|
||||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
|
||||||
redistribute, and sell modified and unmodified copies of the Font
|
|
||||||
Software, subject to the following conditions:
|
|
||||||
|
|
||||||
1) Neither the Font Software nor any of its individual components,
|
|
||||||
in Original or Modified Versions, may be sold by itself.
|
|
||||||
|
|
||||||
2) Original or Modified Versions of the Font Software may be bundled,
|
|
||||||
redistributed and/or sold with any software, provided that each copy
|
|
||||||
contains the above copyright notice and this license. These can be
|
|
||||||
included either as stand-alone text files, human-readable headers or
|
|
||||||
in the appropriate machine-readable metadata fields within text or
|
|
||||||
binary files as long as those fields can be easily viewed by the user.
|
|
||||||
|
|
||||||
3) No Modified Version of the Font Software may use the Reserved Font
|
|
||||||
Name(s) unless explicit written permission is granted by the corresponding
|
|
||||||
Copyright Holder. This restriction only applies to the primary font name as
|
|
||||||
presented to the users.
|
|
||||||
|
|
||||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
|
||||||
Software shall not be used to promote, endorse or advertise any
|
|
||||||
Modified Version, except to acknowledge the contribution(s) of the
|
|
||||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
|
||||||
permission.
|
|
||||||
|
|
||||||
5) The Font Software, modified or unmodified, in part or in whole,
|
|
||||||
must be distributed entirely under this license, and must not be
|
|
||||||
distributed under any other license. The requirement for fonts to
|
|
||||||
remain under this license does not apply to any document created
|
|
||||||
using the Font Software.
|
|
||||||
|
|
||||||
TERMINATION
|
|
||||||
This license becomes null and void if any of the above conditions are
|
|
||||||
not met.
|
|
||||||
|
|
||||||
DISCLAIMER
|
|
||||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
|
||||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
|
||||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
|
||||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
|
||||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
|
||||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
|
||||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
|
||||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
|
||||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
|
||||||
Binary file not shown.
BIN
frontend/src/assets/images/stage_background.png
Normal file
BIN
frontend/src/assets/images/stage_background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
1
frontend/src/components/Atmo.svelte
Normal file
1
frontend/src/components/Atmo.svelte
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<h1>Atmo</h1>
|
||||||
50
frontend/src/components/Clock.svelte
Normal file
50
frontend/src/components/Clock.svelte
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
|
||||||
|
<script>
|
||||||
|
import { onDestroy } from 'svelte';
|
||||||
|
import * as SoftwareVariables from '../stores.js';
|
||||||
|
|
||||||
|
// 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));
|
||||||
|
|
||||||
|
let time = new Date()
|
||||||
|
|
||||||
|
$: hours = time.getHours().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
|
||||||
|
$: minutes = time.getMinutes().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
|
||||||
|
$: seconds = time.getSeconds().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
|
||||||
|
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
time = new Date()
|
||||||
|
}, 1000);
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
clearInterval(interval);
|
||||||
|
unsubscribeFirstColor();
|
||||||
|
unsubscribeSecondColor();
|
||||||
|
unsubscribeThirdColor();
|
||||||
|
unsubscribeFourthColor();
|
||||||
|
unsubscribeOkColor();
|
||||||
|
unsubscribeNokColor();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div style='color:{fourthColor}'>
|
||||||
|
<span class="bold">{hours}:{minutes}</span><span>{seconds}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div{
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 2em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
1
frontend/src/components/DevicesLibrary.svelte
Normal file
1
frontend/src/components/DevicesLibrary.svelte
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<h1>Devices Library</h1>
|
||||||
72
frontend/src/components/NavigationBar.svelte
Normal file
72
frontend/src/components/NavigationBar.svelte
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
<script>
|
||||||
|
import RoundIconButton from './RoundIconButton.svelte';
|
||||||
|
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||||
|
import * as SoftwareVariables from '../stores.js';
|
||||||
|
import { _ } from 'svelte-i18n'
|
||||||
|
|
||||||
|
// 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));
|
||||||
|
|
||||||
|
//---Navigation System---//
|
||||||
|
|
||||||
|
let menuStates = {
|
||||||
|
stage: true,
|
||||||
|
atmo: false,
|
||||||
|
devicesLibrary: false,
|
||||||
|
settings: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle the click on a navigation button
|
||||||
|
function handleNavigation(menu) {
|
||||||
|
emitNavigationEvent(menu);
|
||||||
|
deselectMenus();
|
||||||
|
menuStates[menu] = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Deselect all menus from the navigation bar
|
||||||
|
function deselectMenus(){
|
||||||
|
for (const menu in menuStates) {
|
||||||
|
menuStates[menu] = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Emit navigation events
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
function emitNavigationEvent(menu) {
|
||||||
|
dispatch('navigationChanged', {
|
||||||
|
menu: menu
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unsubscribe for all variables used from the store
|
||||||
|
onDestroy(() => {
|
||||||
|
unsubscribeFirstColor();
|
||||||
|
unsubscribeSecondColor();
|
||||||
|
unsubscribeThirdColor();
|
||||||
|
unsubscribeFourthColor();
|
||||||
|
unsubscribeOkColor();
|
||||||
|
unsubscribeNokColor();
|
||||||
|
})
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
114
frontend/src/components/RoundIconButton.svelte
Normal file
114
frontend/src/components/RoundIconButton.svelte
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
<!-- Create a round icon button -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher, onDestroy } from 'svelte';
|
||||||
|
import * as SoftwareVariables from '../stores.js';
|
||||||
|
import Tooltip from './Tooltip.svelte';
|
||||||
|
import { _ } from 'svelte-i18n'
|
||||||
|
|
||||||
|
export let icon = "bxs-heart" // The icon wanted
|
||||||
|
export let width = "10em" // The button width
|
||||||
|
export let active = false // If the button is active or not
|
||||||
|
export let tooltip = "Default tooltip" // The description shown in the tooltip
|
||||||
|
export let operationalStatus // The optional button status
|
||||||
|
export let okStatusLabel = "" // The label shown when the button is OK
|
||||||
|
export let nokStatusLabel = "" // The label shown when the button is NOK
|
||||||
|
|
||||||
|
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));
|
||||||
|
|
||||||
|
// Default values for background and foreground
|
||||||
|
$: background = firstColor
|
||||||
|
$: foreground = firstColor
|
||||||
|
|
||||||
|
// Change the background when the selected prop changed
|
||||||
|
$: {
|
||||||
|
if (active === true) {
|
||||||
|
background = thirdColor
|
||||||
|
} else {
|
||||||
|
background = fourthColor
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show the operational status if specified
|
||||||
|
// undefined => no status displayed
|
||||||
|
// operationalStatus = true => OK color displayed
|
||||||
|
// operationalStatus = false => NOK color displayed
|
||||||
|
$: statusColor = nokColor
|
||||||
|
$: {
|
||||||
|
if (operationalStatus === true){
|
||||||
|
statusColor = okColor
|
||||||
|
tooltipMessage = tooltip + " " + okStatusLabel
|
||||||
|
} else {
|
||||||
|
statusColor = nokColor
|
||||||
|
tooltipMessage = tooltip + " " + nokStatusLabel
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Emit a click event when the button is clicked
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
function emitClick() {
|
||||||
|
dispatch('click');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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>
|
||||||
|
<Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
|
||||||
|
<button
|
||||||
|
style="width:{width}; height:{width}; border:none; 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>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Showing the badge status if the button has an operational status -->
|
||||||
|
{#if (operationalStatus !== undefined)}
|
||||||
|
<div class="badge"
|
||||||
|
style="width: calc({width} / 3); height: calc({width} / 3); border-radius: calc({width}); background-color:{statusColor}; display:block;">
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
button{
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
button:hover{
|
||||||
|
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
|
||||||
|
}
|
||||||
|
.badge{
|
||||||
|
position: absolute;
|
||||||
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||||
|
transform: translate(200%, -100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
div{
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
frontend/src/components/Settings.svelte
Normal file
1
frontend/src/components/Settings.svelte
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<h1>Settings</h1>
|
||||||
17
frontend/src/components/Stage.svelte
Normal file
17
frontend/src/components/Stage.svelte
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<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>
|
||||||
44
frontend/src/components/Tooltip.svelte
Normal file
44
frontend/src/components/Tooltip.svelte
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<script>
|
||||||
|
export let message = "Default tooltip"
|
||||||
|
export let show = false
|
||||||
|
|
||||||
|
import * as SoftwareVariables from '../stores.js';
|
||||||
|
import { onDestroy } from 'svelte';
|
||||||
|
|
||||||
|
// Import the main colors from the store
|
||||||
|
let firstColor, fourthColor
|
||||||
|
const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
|
||||||
|
const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
|
||||||
|
|
||||||
|
let mustBeDisplayed = "none"
|
||||||
|
$: {
|
||||||
|
if (show === true){
|
||||||
|
mustBeDisplayed = "inline-block"
|
||||||
|
} else {
|
||||||
|
mustBeDisplayed = "none"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unsubscribe for all variables used from the store
|
||||||
|
onDestroy(() => {
|
||||||
|
unsubscribeFirstColor();
|
||||||
|
unsubscribeFourthColor();
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div style="background-color:{fourthColor}; display:{mustBeDisplayed}">
|
||||||
|
<p style="color:{firstColor};">{message}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
div {
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 15px;
|
||||||
|
transform: translate(0, 200%);
|
||||||
|
}
|
||||||
|
|
||||||
|
p{
|
||||||
|
margin:5px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
9
frontend/src/lang/en.json
Normal file
9
frontend/src/lang/en.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"stageMenuTooltip": "Stage configuration",
|
||||||
|
"atmoMenuTooltip": "Atmosphere effects",
|
||||||
|
"devicesLibraryMenuTooltip": "Devices library",
|
||||||
|
"settingsMenuTooltip": "Software settings",
|
||||||
|
"dmxBoxStatusTooltip": "DMXBox status:",
|
||||||
|
"dmxBoxOkStatusTooltip": "connected",
|
||||||
|
"dmxBoxNokStatusTooltip": "disconnected"
|
||||||
|
}
|
||||||
@@ -1,8 +1,23 @@
|
|||||||
import './style.css'
|
import App from './App.svelte';
|
||||||
import App from './App.svelte'
|
|
||||||
|
|
||||||
|
// Load dictionaries
|
||||||
|
import { addMessages, init } from 'svelte-i18n';
|
||||||
|
|
||||||
|
// Import dictionaries
|
||||||
|
import en from './lang/en.json';
|
||||||
|
|
||||||
|
// Add dictionaries to svelte-i18n
|
||||||
|
addMessages('en', en);
|
||||||
|
|
||||||
|
// Initialize svelte-i18n dictionaries
|
||||||
|
init({
|
||||||
|
fallbackLocale: 'en',
|
||||||
|
initialLocale: 'en',
|
||||||
|
});
|
||||||
|
|
||||||
|
// Create the main app
|
||||||
const app = new App({
|
const app = new App({
|
||||||
target: document.getElementById('app')
|
target: document.body,
|
||||||
})
|
});
|
||||||
|
|
||||||
export default app
|
export default app;
|
||||||
14
frontend/src/stores.js
Normal file
14
frontend/src/stores.js
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
// Colors defined in the software
|
||||||
|
export const firstColor = writable("#1B262C");
|
||||||
|
export const secondColor = writable("#0F4C75");
|
||||||
|
export const thirdColor = writable("#3282B8");
|
||||||
|
export const fourthColor = writable("#BBE1FA");
|
||||||
|
export const okColor = writable("#2BA646");
|
||||||
|
export const nokColor = writable("#A6322B");
|
||||||
|
|
||||||
|
// Font sizes defined in the software
|
||||||
|
export const firstSize = writable("10px")
|
||||||
|
export const secondSize = writable("14px")
|
||||||
|
export const thirdSize = writable("20px")
|
||||||
@@ -1,26 +1,63 @@
|
|||||||
html {
|
html, body {
|
||||||
background-color: rgba(27, 38, 54, 1);
|
position: relative;
|
||||||
text-align: center;
|
width: 100%;
|
||||||
color: white;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
color: #333;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: white;
|
padding: 8px;
|
||||||
font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
|
box-sizing: border-box;
|
||||||
"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
a {
|
||||||
font-family: "Nunito";
|
color: rgb(0,100,200);
|
||||||
font-style: normal;
|
text-decoration: none;
|
||||||
font-weight: 400;
|
|
||||||
src: local(""),
|
|
||||||
url("assets/fonts/nunito-v16-latin-regular.woff2") format("woff2");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
a:hover {
|
||||||
height: 100vh;
|
text-decoration: underline;
|
||||||
text-align: center;
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: rgb(0,80,160);
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, select, textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
-webkit-padding: 0.4em 0;
|
||||||
|
padding: 0.4em;
|
||||||
|
margin: 0 0 0.5em 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:disabled {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
color: #333;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:disabled {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:not(:disabled):active {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:focus {
|
||||||
|
border-color: #666;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user