feat: load and save presets

public/electron.js

@@ -9,7 +9,7 @@ function createWindow() {
   const win = new BrowserWindow({
     width: 1280,
     height: 800,
-    minWidth: 800,
+    minWidth: 1000,
     minHeight: 600,
     darkTheme: true,
     webPreferences: {

src/client/components/mainPage.tsx

@@ -11,6 +11,8 @@ import { IDiscoveredNdiSource, ISource, ITarget } from '../../models/interfaces'
 
 export const socketClient = io()
 
+const presetList = ['Preset 1', 'Preset 2', 'Preset 3', 'Preset 4']
+
 const MainPage = () => {
     const [showSettings, setShowSettings] = useState<boolean>(false)
     const [targets, setTargets] = useState<ITarget[]>([])
@@ -50,6 +52,47 @@ const MainPage = () => {
         setShowSettings(!showSettings)
     }
 
+    const handleLoadPreset = (index: number) => {
+        if (window.confirm('Are you sure you wan´t to load Preset ' + (index +1))) {
+            socketClient.emit(IO.LOAD_PRESET, presetList[index])
+        }
+    }
+
+    const handleSavePreset = (index: number) => {
+        if (window.confirm('SAVE PRESET ' + (index + 1))) {
+            socketClient.emit(IO.SAVE_PRESET, presetList[index])
+        }
+    }
+
+    const Presets = () => {
+        return (
+            <React.Fragment>
+                {presetList.map((preset: string, index: number) => {
+                    return (
+                        <React.Fragment>
+                            <button
+                                className="foot-preset-button"
+                                onClick={() => {
+                                    handleLoadPreset(index)
+                                }}
+                            >
+                                {preset}
+                            </button>
+                            <button
+                                className="foot-preset-save-button"
+                                onClick={() => {
+                                    handleSavePreset(index)
+                                }}
+                            >
+                                SAVE
+                            </button>
+                        </React.Fragment>
+                    )
+                })}
+            </React.Fragment>
+        )
+    }
+
     return (
         <div className={'container'}>
             <div className={'header'}>
@@ -60,6 +103,7 @@ const MainPage = () => {
                 <React.Fragment>
                     <Matrix sources={sources} targets={targets} />
                     <div className="foot-container">
+                        <Presets />
                         <button
                             className="foot-settings"
                             onClick={() => {

src/client/styles/MainPage.css

@@ -46,12 +46,26 @@ body {
 }
 
 .foot-settings {
-    margin-left: 85%;
+    margin-left: 22%;
     color: rgb(182, 182, 182);
     background-color: rgb(58, 58, 58);
     font-size: 1.2rem;
 }
 
+.foot-preset-button {
+    color: rgb(182, 182, 182);
+    background-color: rgb(58, 58, 58);
+    font-size: 1.2rem;
+    height: 30px;
+}
+.foot-preset-save-button {
+    margin-right: 2%;
+    color: rgb(173, 173, 173);
+    background-color: rgb(42, 24, 24);
+    font-size: 0.8rem;
+    height: 30px;
+}
+
 .buttons {
     margin-top: 3vh;
     margin-bottom: 3vh;

src/models/SOCKET_IO_CONTANTS.ts

@@ -3,6 +3,8 @@ export const CHANGE_SOURCE = 'change_source'
 export const CHANGE_SETTINGS = 'change_settings'
 export const DISCOVER_NDI_SOURCES = 'udiscover_ndi_sources'
 export const SAVE_SETTINGS = 'save_settings'
+export const LOAD_PRESET = 'load_preset'
+export const SAVE_PRESET = 'save_preset'
 
 //Server to Clients:
 export const UPDATE_CLIENT = 'update_client'

src/server/index.ts

@@ -6,14 +6,16 @@ import { webServer } from './webserver/webServer'
 import { loadSourceList, loadTargetList } from './utils/storage'
 import { logger } from './utils/logger'
 import { discoverNdiSources } from './ndi/ndiMatrice'
-import { IDiscoveredNdiSource } from '../models/interfaces'
+import { IDiscoveredNdiSource, ISource, ITarget } from '../models/interfaces'
 
 initializeEmberServer().then(() => {
     initializeEmberLocalClient()
         .then(() => {
-            let sources = loadSourceList()
-            let targets = loadTargetList()
-            let discoveredNdiSources: IDiscoveredNdiSource[] = discoverNdiSources()
+            let discoveredNdiSources: IDiscoveredNdiSource[] =
+                discoverNdiSources()
+            let sources =
+                loadSourceList() || setupDefaultSources(discoveredNdiSources)
+            let targets = loadTargetList('targets') || setupDefaultTargets()
 
             setAllCrossPoints(sources, targets)
             webServer(sources, targets, discoveredNdiSources)
@@ -22,3 +24,24 @@ initializeEmberServer().then(() => {
             logger.error('Error initializing Ember and NDI Server')
         })
 })
+
+const setupDefaultSources = (discoveredNdiSources): ISource[] => {
+    let sources: ISource[] = []
+    discoveredNdiSources.forEach((ndiSource: IDiscoveredNdiSource) => {
+        sources.push({
+            label: ndiSource.name,
+            dnsName: ndiSource.name,
+            url: ndiSource.urlAddress,
+        })
+    })
+    return sources
+}
+
+const setupDefaultTargets = (): ITarget[] => {
+    return [
+        { label: 'NDI Controller 1', selectedSource: 0 },
+        { label: 'NDI Controller 2', selectedSource: 0 },
+        { label: 'NDI Controller 3', selectedSource: 0 },
+        { label: 'NDI Controller 4', selectedSource: 0 },
+    ]
+}

src/server/utils/storage.ts

@@ -3,54 +3,52 @@ import { logger } from './logger'
 // Node Modules:
 const fs = require('fs')
 const path = require('path')
-const homeDir = require("os").homedir()
+const homeDir = require('os').homedir()
 
 export const loadSourceList = (): ISource[] => {
     let sources: ISource[] = []
     try {
         sources = JSON.parse(
-            fs.readFileSync(path.resolve(homeDir, 'ndi-controller', 'sources.json'))
+            fs.readFileSync(
+                path.resolve(homeDir, 'ndi-controller', 'sources.json')
+            )
         )
     } catch (error) {
-        logger.error(
-            'Couldn´t read sources.json file, returning empty source list ',
-            error
-        )
+        return []
     }
     return sources
 }
 
-export const loadTargetList = (): ITarget[] => {
+export const loadTargetList = (fileName: string): ITarget[] => {
     let targets: ITarget[] = []
     try {
         targets = JSON.parse(
-            fs.readFileSync(path.resolve(homeDir, 'ndi-controller', 'targets.json'))
+            fs.readFileSync(
+                path.resolve(homeDir, 'ndi-controller', fileName + '.json')
+            )
         )
     } catch (error) {
-        logger.error(
-            'Couldn´t read targets.json file, returning empty source list '
-        )
-        logger.error(error)
+        return []
     }
     return targets
 }
 
-export const updateTargetList = (targets: ITarget[]) => {
+export const updateTargetList = (fileName: string, targets: ITarget[]) => {
     let json = JSON.stringify(targets)
     if (!fs.existsSync(path.resolve(homeDir, 'ndi-controller'))) {
         fs.mkdirSync(path.resolve(homeDir, 'ndi-controller'))
     }
     fs.writeFile(
-        path.resolve(homeDir, 'ndi-controller', 'targets.json'),
+        path.resolve(homeDir, 'ndi-controller', fileName + '.json'),
         json,
         'utf8',
         (error: any) => {
-            if( error) {
-               logger.error('Error writing targets.json file')
-                console.log('Error writing targets.json file: ', error)
+            if (error) {
+                logger.error('Error writing ' + fileName + '.json file')
+                console.log('Error writing .json file: ', error)
+            } else {
+                logger.info(fileName + '.json file updated')
             }
-            else
-            { logger.info('targets.json file updated')}
         }
     )
 }
@@ -66,12 +64,12 @@ export const updateSourcesList = (sources: ISource[]) => {
         json,
         'utf8',
         (error: any) => {
-            if( error) {
-               logger.error('Error writing sources.json file')
+            if (error) {
+                logger.error('Error writing sources.json file')
                 console.log('Error writing sources.json file: ', error)
+            } else {
+                logger.info('sources.json file updated')
             }
-            else
-            { logger.info('sources.json file updated')}
         }
     )
 }

src/server/webserver/webServer.ts

@@ -10,7 +10,12 @@ import { IDiscoveredNdiSource, ISource, ITarget } from '../../models/interfaces'
 import { changeNdiRoutingSource, discoverNdiSources } from '../ndi/ndiMatrice'
 import { setMatrixConnection } from '../ember/emberLocalClient'
 import { emberServer } from '../ember/emberServer'
-import { updateSourcesList, updateTargetList } from '../utils/storage'
+import {
+    loadTargetList,
+    updateSourcesList,
+    updateTargetList,
+} from '../utils/storage'
+import { setAllCrossPoints } from '../utils/setCrossPoints'
 
 let socketClients: any[] = []
 
@@ -62,7 +67,7 @@ export const webServer = (
                     IO.SAVE_SETTINGS,
                     (newSources: ISource[], newTargets: ITarget[]) => {
                         updateSourcesList(newSources)
-                        updateTargetList(newTargets)
+                        updateTargetList('targets', newTargets)
                         sources = newSources
                         targets = newTargets
                         socket.emit(
@@ -73,6 +78,18 @@ export const webServer = (
                         )
                     }
                 )
+                .on(IO.LOAD_PRESET, (presetName: string) => {
+                    let newTargets = loadTargetList(presetName)
+                    if (newTargets.length > 0) {
+                        newTargets.forEach((target: ITarget, index: number) => {
+                            targets[index].selectedSource = target.selectedSource
+                        })
+                        setAllCrossPoints(sources, targets)
+                    }
+                })
+                .on(IO.SAVE_PRESET, (presetName: string) => {
+                    updateTargetList(presetName, targets)
+                })
         })
     }
 
@@ -102,7 +119,7 @@ export const webServer = (
                     targets,
                     discoveredNdiSources
                 )
-                updateTargetList(targets)
+                updateTargetList('targets', targets)
             })
             .on('matrix-change', (info) => {
                 logger.info(
@@ -120,7 +137,7 @@ export const webServer = (
                     targets,
                     discoveredNdiSources
                 )
-                updateTargetList(targets)
+                updateTargetList('targets', targets)
             })
     }