added some fields

Added the application logo.

.gitignore

@@ -0,0 +1,8 @@
+build/bin
+node_modules
+frontend/.vscode
+frontend/dist
+frontend/wailsjs
+*/package-lock.json
+*/package.json.md5
+*.exe

README.md

@@ -1,3 +1,75 @@
-# modelRepository
+[![Build Status](https://drone.vbprojects.fr/api/badges/DMXStage/dmxconnect/status.svg?ref=refs/heads/develop)](https://drone.vbprojects.fr/DMXStage/dmxconnect)
 
-Dépôt de modèle.
+# DMXConnect
+
+## Introduction
+
+Ce logiciel permet d'animer l'atmoshpère des soirées en permettant de piloter de manière manuelle et automatique des d'appareils DMX.
+
+DMXConnect vous accompagne de la création de vos appareils DMX dans une bibliothèque jusqu'à leur pilotage automatique avec une intégration Spotify, en passant par la configuration de votre scène et de votre matériel.
+
+REMARQUE : il n'est pas un logiciel de mixage audio.
+
+## Fonctionnalités
+
+Ce logiciel dispose des 3 grandes fonctionnalités suivantes :
+
+- Paramétrage universel des appareils DMX : propose d'enregistrer ses appareils DMX dans une bibliothèque. L'utilisateur crée depuis l'interface les modes de canaux, les différents canaux de son matériel, et leur assigne des valeurs et des noms. Cette configuration est sauvegardée automatiquement.
+
+- Configuration d'une scène : placement des appareils DMX depuis la bibliothèque sur une scène, choix du mode de canal des appareils et attribution d'une fonction personnalisée par l'utilisateur (permet de grouper les appareils suivant une caractéristique (basses, aigus, etc.) qui peut être reprise lors du pilotage d'une atmoshpère).
+
+- Pilotage d'une atmosphère : permet de piloter les appareils DMX de la scène individuellement ou en groupe selon leur fonction (basses, aigus, etc.). Possibilité de réaliser des séquences d'animation pour représenter des atmosphères personnalisées (feu, hélicoptère, etc.).
+Lancement des séquences grâce aux touches du clavier.
+
+Lors de sa première installation, le logiciel vient avec un set de plusieurs appareils et plusieurs ambiances pré-configurés.
+
+Pour aider au pilotage de la soirée, d'autres fonctionnalités peuvent être ajoutées comme :
+
+- La gestion du volume sonore suivant l'heure (configurable sous forme de jauge ou même de courbe !), sans casser l'ambiance (ex : atteinte d'un niveau sonore bas vers 22h)
+
+- La gestion du type de musique suivant l'ambiance observée ou voulue par le DJ. Configurable avec une panoplie de jauges suivant les niveaux de dançabilité, de joie, de tristesse, d'énervement, de sensibilité, de basses, d'aigus, etc.
+
+- Une intégration Spotify permettant de contrôler le flux de la musique (play/pause, musique précédente, musique suivante, etc.). Visualisation de la musique en cours et de ses métadonnées (tempo, artiste, analyse appronfondie sur la dançabilité, les basses, etc.). Mode de pilotage automatique dans lequel le logiciel choisit les animations en fonction des métadonnées de la musique.
+Obtention de suggestions pour les musiques suivantes selon l'ambiance configurée par le DJ.
+
+## Téléchargement
+
+Pour télécharger DMXConnect, choisissez une version depuis notre [zone de téléchargement](https://factory.vbprojects.fr/DMXStage/dmxconnect/releases).
+Plusieurs solutions s'offrent à vous.
+
+### Depuis l'exécutable (recommandé)
+
+Il vous suffit de cliquer sur le bouton **Télécharger**. 
+
+Une fois l'archive téléchargée dans votre navigateur, il vous faudra l'extraire à l'emplacement de votre choix, puis ouvrir le dossier généré. 
+
+Vous pouvez lancer l'application en double-cliquant sur l'exécutable selon votre plateforme.
+
+Vous êtes maintenant prêt à utiliser DMXConnect !
+
+### Depuis les sources
+
+REMARQUE : Afin de compiler le projet, vous devez avoir **Go (v1.21.x)**, **NodeJS (v18.x)** et **NPM (v9.x)** d'installé sur votre machine.
+
+Vous avez aussi la possibilité de télécharger les sources du projet et de compiler le projet sur votre ordinateur. Pour ce faire, vous devez cliquer sur **Code source (ZIP)** ou **Code source (TAR.GZ)** selon l'extension que vous préférez.
+
+Vous devez télécharger l'archive, puis l'extraire dans un dossier `src` à la racine de votre ``GOPATH`` (souvent `<utilisateur>/go/src`) vous pouvez ouvrir un terminal dans ce dossier et lancer les commandes suivantes.
+
+*Installation de wails :*
+
+```bash
+go install github.com/wailsapp/wails/v2/cmd/wails@latest
+```
+
+*Détermination des dépendances requises pour wails :*
+
+```bash
+wails doctor
+```
+L'utilitaire vous permet de rechercher les dépendances à installer en fonction de votre système.
+
+*Lancement de l'application :*
+```bash
+wails dev
+```
+Le logiciel devrait s'ouvrir sur la page d'accueil. Vous êtes maintenant prêt à utiliser DMXConnect !

app.go

@@ -0,0 +1,27 @@
+package main
+
+import (
+	"context"
+	"fmt"
+)
+
+// App struct
+type App struct {
+	ctx context.Context
+}
+
+// NewApp creates a new App application struct
+func NewApp() *App {
+	return &App{}
+}
+
+// startup is called when the app starts. The context is saved
+// so we can call the runtime methods
+func (a *App) startup(ctx context.Context) {
+	a.ctx = ctx
+}
+
+// Greet returns a greeting for the given name
+func (a *App) Greet(name string) string {
+	return fmt.Sprintf("Hello %s, It's show time!", name)
+}

build/windows/info.json

@@ -0,0 +1,15 @@
+{
+	"fixed": {
+		"file_version": "{{.Info.ProductVersion}}"
+	},
+	"info": {
+		"0000": {
+			"ProductVersion": "{{.Info.ProductVersion}}",
+			"CompanyName": "{{.Info.CompanyName}}",
+			"FileDescription": "{{.Info.ProductName}}",
+			"LegalCopyright": "{{.Info.Copyright}}",
+			"ProductName": "{{.Info.ProductName}}",
+			"Comments": "{{.Info.Comments}}"
+		}
+	}
+}

build/windows/wails.exe.manifest

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
+    <assemblyIdentity type="win32" name="com.wails.{{.Name}}" version="{{.Info.ProductVersion}}.0" processorArchitecture="*"/>
+    <dependency>
+        <dependentAssembly>
+            <assemblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" language="*"/>
+        </dependentAssembly>
+    </dependency>
+    <asmv3:application>
+        <asmv3:windowsSettings>
+            <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/pm</dpiAware> <!-- fallback for Windows 7 and 8 -->
+            <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">permonitorv2,permonitor</dpiAwareness> <!-- falls back to per-monitor if per-monitor v2 is not supported -->
+        </asmv3:windowsSettings>
+    </asmv3:application>
+</assembly>

frontend/README.md

@@ -0,0 +1,63 @@
+# Svelte + Vite
+
+This template should help get you started developing with Svelte in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/)
+
++ [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its
+serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less,
+and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+  `vite dev` and `vite build` wouldn't work in a SvelteKit environment, for example.
+
+This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer
+experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite`
+templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been
+structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash
+references keeps the default TypeScript setting of accepting type information from the entire workspace, while also
+adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to
+install the recommended extension upon opening the project.
+
+**Why enable `checkJs` in the JS template?**
+
+It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate.
+This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of
+JavaScript, it is trivial to change the configuration.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr`
+and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the
+details [here](https://github.com/rixo/svelte-hmr#svelte-hmr).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be
+replaced by HMR.
+
+```js
+// store.js
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

frontend/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
+    <link rel='stylesheet' href='./src/style.css'>
+    <title>DMXConnect</title>
+</head>
+<body style="background-color:#1B262C;">
+<script src="./src/main.js" type="module"></script>
+</body>
+</html>

frontend/jsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "Node",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "importsNotUsedAsValues": "error",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": [
+    "src/**/*.d.ts",
+    "src/**/*.js",
+    "src/**/*.svelte"
+  ]
+}

frontend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "svelte": "^3.49.0",
+    "vite": "^3.0.7"
+  },
+  "dependencies": {
+    "svelte-i18n": "^3.7.0"
+  }
+}

frontend/src/App.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { _ } from 'svelte-i18n'
+	import NavigationBar from './components/General/NavigationBar.svelte';
+  import Clock from './components/General/Clock.svelte'
+  import Preparation from './components/Preparation.svelte';
+  import Animation from './components/Animation.svelte';
+  import Settings from './components/Settings/Settings.svelte';
+  import Devices from './components/Devices.svelte';
+  import Show from './components/Show.svelte';
+  import GeneralConsole from './components/GeneralConsole.svelte';
+
+  let selectedMenu = "settings"
+  // When the navigation menu changed, update the selected menu
+	function onNavigationChanged(event){
+    selectedMenu = event.detail.menu;
+	}
+</script>
+
+<header>
+    <NavigationBar on:navigationChanged="{onNavigationChanged}"/>
+    <Clock/>
+</header>
+<main>
+	{#if selectedMenu === "settings"}
+  <Settings />
+  {: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>
+
+<style>
+	main {
+		text-align: left;
+		padding: 1em;
+		max-width: 240px;
+		margin: 0 auto;
+	}
+
+	@media (min-width: 640px) {
+		main {
+			max-width: none;
+		}
+	}
+</style>

frontend/src/components/Animation.svelte

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

frontend/src/components/Devices.svelte

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

frontend/src/components/General/Clock.svelte

@@ -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>
+

frontend/src/components/General/Input.svelte

@@ -0,0 +1,95 @@
+<script lang=ts>
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+
+    export let label = '';
+    export let type = 'text';
+    export let min = undefined;
+    export let max = undefined;
+    export let src = undefined;
+    export let alt = undefined;
+    export let width = undefined;
+    export let height = undefined;
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    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));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<div style="width: {width}; height: {height};">
+    <p style="color: {firstColor};">{label}</p>
+    <!-- Handle the textarea input -->
+    {#if type === 'large'}
+        <textarea style="background-color: {firstColor}; color: {whiteColor};"/>
+    <!-- Handle the simple inputs -->
+    {:else}
+        <input style="background-color: {firstColor}; color: {whiteColor};" type={type} min={min} max={max} src={src} alt={alt}/>
+    {/if}
+</div>
+
+<style>
+    div{
+        display:inline-block;
+    }
+    p{
+        margin:0;
+    }
+    input{
+        border:none;
+        border-radius: 0.5em;
+        text-align: center;
+        width: 100%;
+    }
+
+    input::selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+
+    /* Pour Firefox */
+    input::-moz-selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+    input:focus {
+        outline: 1px solid #BBE1FA;
+    }
+
+    textarea{
+        border:none;
+        border-radius: 0.5em;
+        resize: none;
+        width: 100%;
+    }
+
+    textarea::selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+
+    /* Pour Firefox */
+    textarea::-moz-selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+    textarea:focus {
+        outline: 1px solid #BBE1FA;
+    }
+</style>

frontend/src/components/General/NavigationBar.svelte

@@ -0,0 +1,80 @@
+<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'
+
+    // 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 = {
+        settings: true,
+        devices: false,
+        preparation: false,
+        animation: false,
+        show: false,
+        console: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="settingsMenu" on:click="{() => handleNavigation("settings")}" icon="bx-cog" width="2.5em" tooltip={$_("settingsMenuTooltip")} active={menuStates.settings}></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-flex;
+        align-items: center;
+        padding: 4px;
+        border-radius: 40px;
+        gap: 0.3em;
+        flex-wrap: wrap;
+    }
+</style>

frontend/src/components/General/RoundIconButton.svelte

@@ -0,0 +1,118 @@
+<!-- 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
+            foreground = fourthColor
+        } else {
+            background = fourthColor
+            foreground = secondColor
+        }
+    }
+
+    // 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-radius:{width}; background-color:{background}; color:{foreground};"
+        on:mousedown={emitClick}
+        on:mouseenter={toggleTooltip}
+        on:mouseleave={toggleTooltip}>
+        <i class='bx {icon}' style="font-size:100%;"></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;
+        border:none;
+        cursor: pointer;
+    }
+    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>

frontend/src/components/General/RoundedButton.svelte

@@ -0,0 +1,61 @@
+<script lang=ts>
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+    import Tooltip from './Tooltip.svelte';
+
+    export let text = 'Default button';
+    export let icon = ''
+    export let tooltip = "Default tooltip"
+    export let active = false;
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    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));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    // Show a tooltip on mouse hover
+    let tooltipShowing = false
+    function toggleTooltip(){
+        tooltipShowing = !tooltipShowing
+    }
+
+        // Emit a click event when the button is clicked
+    const dispatch = createEventDispatcher();
+    function emitClick() {
+        dispatch('click');
+    }
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<Tooltip message={tooltip} show={tooltipShowing}></Tooltip>
+<button
+        on:mousedown={emitClick}
+        on:mouseenter={toggleTooltip}
+        on:mouseleave={toggleTooltip}
+        style='color: {whiteColor}; background-color: { active ? secondColor : thirdColor }; border:none;'><i class='bx { icon}'></i> { text }</button>
+<style>
+    button{
+        cursor: pointer;
+        display: inline-block;
+        border-radius: 0.5em;
+        margin: 0;
+    }
+    button:hover{
+        box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
+    }
+</style>

frontend/src/components/General/Tab.svelte

@@ -0,0 +1,74 @@
+<script lang=ts>
+    import RoundedButton from "./RoundedButton.svelte";
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+
+    export let tabs = [];
+    export let maxWidth = undefined;
+    export let maxHeight = undefined;
+
+    let activeTab = 0;
+
+    function setActiveTab(index) {
+        activeTab = index;
+    }
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    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));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+</script>
+
+<div class="tabContainer" style="color: {whiteColor};">
+    <div class="headerContainer"
+        style='background-color: {thirdColor};'>
+        {#each tabs as tab, index}
+            <RoundedButton 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: {thirdColor}; max-width: {maxWidth}; max-height: {maxHeight};'>
+    {#if tabs[activeTab]}
+        <svelte:component this={tabs[activeTab].component} />
+    {/if}
+    </div>
+</div>
+
+<style>
+    .headerContainer{
+        cursor: pointer;
+        margin:0;
+        border-radius: 0.5em;
+    }
+    .tabContainer{
+        margin-top: 1em;
+        color: white;
+    }
+    .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>

frontend/src/components/General/Toggle.svelte

@@ -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>

frontend/src/components/General/Tooltip.svelte

@@ -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: 13px;
+    }
+</style>

frontend/src/components/GeneralConsole.svelte

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

frontend/src/components/Preparation.svelte

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

frontend/src/components/Settings/InputsOutputsContent.svelte

@@ -0,0 +1,9 @@
+<script lang=ts>
+
+</script>
+
+<button>You can change your hardware settings here</button>
+
+<style>
+
+</style>

frontend/src/components/Settings/ProjectPropertiesContent.svelte

@@ -0,0 +1,52 @@
+<script lang=ts>
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+    import Input from "../General/Input.svelte";
+    import RoundedButton from '../General/RoundedButton.svelte';
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    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));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<div class='flexSettings'>
+    <div>
+        <Input label='Nom du show' type='text'/>
+        <Input label='Date du show' type='date'/>
+        <Input label='Statut de la sauvegarde' type='file'/>
+        <Input label="Nombre d'univers DMX" type='number' min='1' max='10'/>
+    </div>
+    <div>
+        <Input label='Statut de la sauvegarde' type='image' src='appicon.png' alt='Photo de profil du show' width='11em'/>
+        <RoundedButton text='Charger une nouvelle image' icon='bxs-image' active/>
+    </div>
+    <div>
+        <Input label="Commentaires" type='large' width='100%'/>
+    </div>
+</div>
+
+
+<style>
+    .flexSettings{
+        display: flex;
+        flex-direction: column;
+    }
+
+</style>

frontend/src/components/Settings/Settings.svelte

@@ -0,0 +1,24 @@
+<script lang=ts>
+    import RoundedButton from "../General/RoundedButton.svelte";
+    import ProjectPropertiesContent from "./ProjectPropertiesContent.svelte";
+    import InputsOutputsContent from "./InputsOutputsContent.svelte";
+    import Tab from "../General/Tab.svelte";
+    import { _ } from 'svelte-i18n'
+
+    const tabs = [
+        { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: ProjectPropertiesContent },
+        { title: $_("projectInputOutputTab"), icon: 'bxs-plug', tooltip: $_("projectInputOutputTooltip"), component: InputsOutputsContent },
+    ];
+
+</script>
+
+<!-- Project buttons -->
+<RoundedButton text={$_("newProjectString")} icon='bxs-plus-square' tooltip={$_("newProjectTooltip")}/>
+<RoundedButton text={$_("openProjectString")} icon='bx-folder-open' tooltip={$_("openProjectTooltip")}/>
+
+<!-- Project tabcontrol -->
+<Tab { tabs } maxHeight='73vh'/>
+
+<style>
+
+</style>

frontend/src/components/Show.svelte

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

frontend/src/lang/en.json

@@ -0,0 +1,19 @@
+{
+  "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",
+  
+  "newProjectString": "New",
+  "openProjectString": "Open",
+  "newProjectTooltip": "Create a new project",
+  "openProjectTooltip": "Open an existing project",
+  "projectPropertiesTab": "Project properties",
+  "projectPropertiesTooltip": "The project properties",
+  "projectInputOutputTab": "Inputs & outputs",
+  "projectInputOutputTooltip": "The input/output hardware definition"
+}

frontend/src/main.js

@@ -0,0 +1,23 @@
+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({
+	target: document.body,
+});
+
+export default app;

frontend/src/stores.js

@@ -0,0 +1,16 @@
+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");
+export const whiteColor = writable("#FFFFFF");
+export const orangeColor = writable("#BC9714")
+
+// Font sizes defined in the software
+export const firstSize = writable("10px")
+export const secondSize = writable("14px")
+export const thirdSize = writable("20px")

frontend/src/style.css

@@ -0,0 +1,69 @@
+: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%;
+	height: 100%;
+}
+
+body {
+	color: #333;
+	margin: 0;
+	padding: 8px;
+	box-sizing: border-box;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+}
+
+a {
+	color: rgb(0,100,200);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+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;
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />

frontend/vite.config.js

@@ -0,0 +1,7 @@
+import {defineConfig} from 'vite'
+import {svelte} from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()]
+})

go.mod

@@ -0,0 +1,39 @@
+module changeme
+
+go 1.21
+
+toolchain go1.21.3
+
+require github.com/wailsapp/wails/v2 v2.9.1
+
+require (
+	github.com/bep/debounce v1.2.1 // indirect
+	github.com/go-ole/go-ole v1.2.6 // indirect
+	github.com/godbus/dbus/v5 v5.1.0 // indirect
+	github.com/google/uuid v1.3.0 // indirect
+	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
+	github.com/labstack/echo/v4 v4.10.2 // indirect
+	github.com/labstack/gommon v0.4.0 // indirect
+	github.com/leaanthony/go-ansi-parser v1.6.0 // indirect
+	github.com/leaanthony/gosod v1.0.3 // indirect
+	github.com/leaanthony/slicer v1.6.0 // indirect
+	github.com/leaanthony/u v1.1.0 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.19 // indirect
+	github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 // indirect
+	github.com/pkg/errors v0.9.1 // indirect
+	github.com/rivo/uniseg v0.4.4 // indirect
+	github.com/samber/lo v1.38.1 // indirect
+	github.com/tkrajina/go-reflector v0.5.6 // indirect
+	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	github.com/valyala/fasttemplate v1.2.2 // indirect
+	github.com/wailsapp/go-webview2 v1.0.10 // indirect
+	github.com/wailsapp/mimetype v1.4.1 // indirect
+	golang.org/x/crypto v0.23.0 // indirect
+	golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1 // indirect
+	golang.org/x/net v0.25.0 // indirect
+	golang.org/x/sys v0.20.0 // indirect
+	golang.org/x/text v0.15.0 // indirect
+)
+
+// replace github.com/wailsapp/wails/v2 v2.5.1 => /home/dev/go/pkg/mod

go.sum

@@ -0,0 +1,94 @@
+github.com/bep/debounce v1.2.1 h1:v67fRdBA9UQu2NhLFXrSg0Brw7CexQekrBwDMM8bzeY=
+github.com/bep/debounce v1.2.1/go.mod h1:H8yggRPQKLUhUoqrJC1bO2xNya7vanpDl7xR3ISbCJ0=
+github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
+github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
+github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
+github.com/godbus/dbus/v5 v5.1.0 h1:4KLkAxT3aOY8Li4FRJe/KvhoNFFxo0m6fNuFUO8QJUk=
+github.com/godbus/dbus/v5 v5.1.0/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
+github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
+github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
+github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
+github.com/labstack/echo/v4 v4.10.2 h1:n1jAhnq/elIFTHr1EYpiYtyKgx4RW9ccVgkqByZaN2M=
+github.com/labstack/echo/v4 v4.10.2/go.mod h1:OEyqf2//K1DFdE57vw2DRgWY0M7s65IVQO2FzvI4J5k=
+github.com/labstack/gommon v0.4.0 h1:y7cvthEAEbU0yHOf4axH8ZG2NH8knB9iNSoTO8dyIk8=
+github.com/labstack/gommon v0.4.0/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
+github.com/leaanthony/debme v1.2.1 h1:9Tgwf+kjcrbMQ4WnPcEIUcQuIZYqdWftzZkBr+i/oOc=
+github.com/leaanthony/debme v1.2.1/go.mod h1:3V+sCm5tYAgQymvSOfYQ5Xx2JCr+OXiD9Jkw3otUjiA=
+github.com/leaanthony/go-ansi-parser v1.6.0 h1:T8TuMhFB6TUMIUm0oRrSbgJudTFw9csT3ZK09w0t4Pg=
+github.com/leaanthony/go-ansi-parser v1.6.0/go.mod h1:+vva/2y4alzVmmIEpk9QDhA7vLC5zKDTRwfZGOp3IWU=
+github.com/leaanthony/gosod v1.0.3 h1:Fnt+/B6NjQOVuCWOKYRREZnjGyvg+mEhd1nkkA04aTQ=
+github.com/leaanthony/gosod v1.0.3/go.mod h1:BJ2J+oHsQIyIQpnLPjnqFGTMnOZXDbvWtRCSG7jGxs4=
+github.com/leaanthony/slicer v1.5.0/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
+github.com/leaanthony/slicer v1.6.0 h1:1RFP5uiPJvT93TAHi+ipd3NACobkW53yUiBqZheE/Js=
+github.com/leaanthony/slicer v1.6.0/go.mod h1:o/Iz29g7LN0GqH3aMjWAe90381nyZlDNquK+mtH2Fj8=
+github.com/leaanthony/u v1.1.0 h1:2n0d2BwPVXSUq5yhe8lJPHdxevE2qK5G99PMStMZMaI=
+github.com/leaanthony/u v1.1.0/go.mod h1:9+o6hejoRljvZ3BzdYlVL0JYCwtnAsVuN9pVTQcaRfI=
+github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
+github.com/matryer/is v1.4.0/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
+github.com/mattn/go-colorable v0.1.11/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
+github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 h1:KoWmjvw+nsYOo29YJK9vDA65RGE3NrOnUtO7a+RF9HU=
+github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8/go.mod h1:HKlIX3XHQyzLZPlr7++PzdhaXEj94dEiJgZDTsxEqUI=
+github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
+github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
+github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
+github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis=
+github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
+github.com/samber/lo v1.38.1 h1:j2XEAqXKb09Am4ebOg31SpvzUTTs6EN3VfgeLUhPdXM=
+github.com/samber/lo v1.38.1/go.mod h1:+m/ZKRl6ClXCE2Lgf3MsQlWfh4bn1bz6CXEOxnEXnEA=
+github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
+github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
+github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/tkrajina/go-reflector v0.5.6 h1:hKQ0gyocG7vgMD2M3dRlYN6WBBOmdoOzJ6njQSepKdE=
+github.com/tkrajina/go-reflector v0.5.6/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
+github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
+github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
+github.com/wailsapp/go-webview2 v1.0.10 h1:PP5Hug6pnQEAhfRzLCoOh2jJaPdrqeRgJKZhyYyDV/w=
+github.com/wailsapp/go-webview2 v1.0.10/go.mod h1:Uk2BePfCRzttBBjFrBmqKGJd41P6QIHeV9kTgIeOZNo=
+github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
+github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
+github.com/wailsapp/wails/v2 v2.9.1 h1:irsXnoQrCpeKzKTYZ2SUVlRRyeMR6I0vCO9Q1cvlEdc=
+github.com/wailsapp/wails/v2 v2.9.1/go.mod h1:7maJV2h+Egl11Ak8QZN/jlGLj2wg05bsQS+ywJPT0gI=
+golang.org/x/crypto v0.23.0 h1:dIJU/v2J8Mdglj/8rJ6UUOM3Zc9zLZxVZwwxMooUSAI=
+golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
+golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1 h1:k/i9J1pBpvlfR+9QsetwPyERsqu1GIbi967PQMq3Ivc=
+golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
+golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.25.0 h1:d/OCCoBEUq33pjydKrGQhw7IlUPI2Oylr+8qLx49kac=
+golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
+golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210423082822-04245dca01da/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
+golang.org/x/sys v0.0.0-20210616045830-e2b7044e8c71/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20211103235746-7861aae1554b/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.20.0 h1:Od9JTbYCk261bKm4M/mw7AklTlFYIa0bIp9BgSm1S8Y=
+golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
+golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
+golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
+golang.org/x/text v0.15.0 h1:h1V/4gjBv8v9cjcR6+AR5+/cIYK5N/WAgiv4xlsEtAk=
+golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
+golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

main.go

@@ -0,0 +1,36 @@
+package main
+
+import (
+	"embed"
+
+	"github.com/wailsapp/wails/v2"
+	"github.com/wailsapp/wails/v2/pkg/options"
+	"github.com/wailsapp/wails/v2/pkg/options/assetserver"
+)
+
+//go:embed all:frontend/dist
+var assets embed.FS
+
+func main() {
+	// Create an instance of the app structure
+	app := NewApp()
+
+	// Create application with options
+	err := wails.Run(&options.App{
+		Title:            "dmxconnect",
+		Width:            1024,
+		Height:           768,
+		WindowStartState: options.Maximised,
+		AssetServer: &assetserver.Options{
+			Assets: assets,
+		},
+		OnStartup: app.startup,
+		Bind: []interface{}{
+			app,
+		},
+	})
+
+	if err != nil {
+		println("Error:", err.Error())
+	}
+}

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "dmxconnect",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

wails.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://wails.io/schemas/config.v2.json",
+  "name": "dmxconnect",
+  "outputfilename": "dmxconnect",
+  "frontend:install": "npm install",
+  "frontend:build": "npm run build",
+  "frontend:dev:watcher": "npm run dev",
+  "frontend:dev:serverUrl": "auto",
+  "author": {
+    "name": "",
+    "email": ""
+  }
+}