feat: Skaarhoj panels - add number of hw buttons

README.md

@@ -19,19 +19,31 @@ If you open up a brower and type:
 localhost:5901/?target=3 (or whatever ip-address the NDI-Controller is located)
 ```
 You'll get a personal source selector for a single target
+In Mtx setup under targets you can select what sources that should be excludes for a specific target.
 <img src="doc/clientpanel.png">
 
 ## MTX Setup view:
 <img src="doc/mtx-setup.png">
 
 ## Add source:
+When adding a source you can either type in manually (e.g. adding a non-discoverable source) or select a discoveret NDI Source.
+Pressing RE-DISCOVER will search for NDI sources again.
 <img src="doc/source-select.png">
 
+## Add Target:
+When adding targets it's possible to assign a Skaarhoj HW panel + number of buttons, and exclude sources on User panels (Web client and Skaahoj panels)
+
+<img src="doc/target-setup.png">
+
 
 ## Installation: 
 Windows: Run the pre-build "ndi-controller Setup x.x.x.exe"
 Mac: Run the pre-build "ndi-controller-x.x.x.dmg"
 
+## Skaarhoj panel support:
+NDI Controller is listening for Skaahoj raw-panels on port 9923 (standard Skaahoj port)
+In MTX settings -> you can add the serial number of the skaarhoj panel on the target you wish to control.
+
 ### Build and run:
 ndi_mtx.cc will build when yarn is called.
 (c compiler on machine is needed)

src/client/components/settingsTargetPopUp.tsx

@@ -21,13 +21,16 @@ const SettingsTargetPopUp: React.FC<ISettingsSourcePopup> = (props) => {
     const [hwPanelId, setHwPanelId] = useState<string>(
         props.targets[props.selectedPopUp].hwPanelId || ''
     )
+    const [hwPanelBtnAmount, setHwPanelBtnAmount] = useState<number>(
+        props.targets[props.selectedPopUp].hwPanelBtnAmount || 0
+    )
     const [sourceFilter, setSourceFilter] = useState<number[]>(
         props.targets[props.selectedPopUp].sourceFilter || []
     )
 
     const handleUpdateChange = () => {
         let newTargets: ITarget[] = props.targets
-        newTargets[props.selectedPopUp] = { label, selectedSource, hwPanelId, sourceFilter }
+        newTargets[props.selectedPopUp] = { label, selectedSource, hwPanelId, hwPanelBtnAmount, sourceFilter }
         props.setTargets(newTargets)
         props.setSelectedPopUp(-1)
     }
@@ -55,12 +58,18 @@ const SettingsTargetPopUp: React.FC<ISettingsSourcePopup> = (props) => {
         setHwPanelId(event.target.value)
     }
 
+    const handleHwPanelBtnAmount = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        setHwPanelBtnAmount(parseInt(event.target.value))
+    }
+
     const handleSelectSources = (
         event: React.ChangeEvent<HTMLSelectElement>
     ) => {
-        let sourceFilter = Array.from(event.target.selectedOptions).map((selection) => {return parseInt(selection.value)})
-        console.log('Selected sources to exclude :', sourceFilter)
-        setSourceFilter(sourceFilter)
+        let filtered = Array.from(event.target.selectedOptions).map((selection) => {return parseInt(selection.value)})
+        console.log('Selected sources to exclude :', filtered)
+        setSourceFilter(filtered)
     }
 
     return (
@@ -85,7 +94,16 @@ const SettingsTargetPopUp: React.FC<ISettingsSourcePopup> = (props) => {
                 />
             </label>
             <label className="settings-popup-label">
-                Panel exclude :
+                HW buttons :
+                <input
+                    className="settings-popup-input"
+                    type="text"
+                    value={hwPanelBtnAmount}
+                    onChange={(event) => handleHwPanelBtnAmount(event)}
+                />
+            </label>
+            <label className="settings-popup-label">
+                User Panel Exclude :
                 <select
                     className="settings-popup-select-multiple"
                     onChange={(event) => handleSelectSources(event)}

src/client/styles/SettingsPopup.css

@@ -9,7 +9,7 @@
     justify-content: left;
     color: rgb(192, 192, 192);
     background-color: rgb(51, 51, 51);
-    min-height: 300px;
+    min-height: 350px;
     border-radius: 3px;
     border-color: rgb(136, 136, 136);
     border-style: solid;

src/models/interfaces.ts

@@ -8,6 +8,7 @@ export interface ITarget {
     label: string
     selectedSource: number
     hwPanelId?: string
+    hwPanelBtnAmount?: number
     sourceFilter?: Array<number>
 }
 

src/server/hwController/SkaarhojRemoteConnection.ts

@@ -15,6 +15,7 @@ interface IClientList {
 let clientList: IClientList[] = []
 let sources: ISource[]
 let targets: ITarget[]
+let btnAmount: number = 0
 
 export const initializeSkaarhojServer = (
     sourcesProps: ISource[],
@@ -86,13 +87,14 @@ const findTargetIndex = (command: string): number => {
     if (targetIndex === -1) {
         targetIndex = 0
     }
+    btnAmount = targets[targetIndex].hwPanelBtnAmount
     return targetIndex
 }
 
 const findSourcesForPanel = (client: IClientList) => {
     let sourceIndex = 0
     let btnNumber = 0
-    while (btnNumber < 6) {
+    while (btnNumber < btnAmount) {
         if (!targets[client.targetIndex].sourceFilter?.includes(sourceIndex)) {
             client.sourcesOnbuttons.push(sourceIndex)
             btnNumber++
@@ -116,15 +118,15 @@ const handleReceivedCommand = (command: string, client: IClientList) => {
         'Event : ',
         event
     )
-    if (btnNumber <= 6) {
+    if (btnNumber <= btnAmount) {
         if (event === 'Up') {
             setCrossPoint(client.sourcesOnbuttons[btnNumber-1], client.targetIndex) // For now only targetIndex 0 i supported
         }
     }
 }
 
 const updateAllLabels = () => {
-    for (let i = 0; i <= 6; i++) {
+    for (let i = 0; i <= btnAmount; i++) {
         clientList.forEach((client) => {
             updateLabelState(i, client)
         })
@@ -145,7 +147,7 @@ const updateLabelState = (btnIndex: number, client: IClientList) => {
 
 export const skaarhojUpdateButtonLights = () => {
     console.log('Skaarhoj update button state')
-    for (let i = 0; i <= 6; i++) {
+    for (let i = 0; i <= btnAmount; i++) {
         clientList.forEach((client) => {
             let active: string =
                 targets[client.targetIndex].selectedSource === client.sourcesOnbuttons[i] ? '3' : '0'