[api][desktop]: Implement LightBox

api/src/main/kotlin/nebulosa/api/lightboxes/LightBoxController.kt

@@ -53,4 +53,9 @@ class LightBoxController(
     fun brightness(lightBox: LightBox, @RequestParam @Valid @PositiveOrZero intensity: Double) {
         lightBoxService.brightness(lightBox, intensity)
     }
+
+    @PutMapping("{lightBox}/listen")
+    fun listen(lightBox: LightBox) {
+        lightBoxService.listen(lightBox)
+    }
 }

api/src/main/kotlin/nebulosa/api/lightboxes/LightBoxEventHub.kt

@@ -21,7 +21,7 @@ class LightBoxEventHub(
 
     @Subscribe(threadMode = ThreadMode.ASYNC)
     override fun handleLightBoxEvent(event: LightBoxEvent) {
-        if (event.device.type == DeviceType.ROTATOR) {
+        if (event.device.type == DeviceType.LIGHT_BOX) {
             when (event) {
                 is PropertyChangedEvent -> onNext(event)
                 is LightBoxAttached -> onAttached(event.device)

api/src/main/kotlin/nebulosa/api/lightboxes/LightBoxService.kt

@@ -4,7 +4,7 @@ import nebulosa.indi.device.lightbox.LightBox
 import org.springframework.stereotype.Service
 
 @Service
-class LightBoxService {
+class LightBoxService(private val lightBoxEventHub: LightBoxEventHub) {
 
     fun connect(lightBox: LightBox) {
         lightBox.connect()
@@ -25,4 +25,8 @@ class LightBoxService {
     fun brightness(lightBox: LightBox, intensity: Double) {
         lightBox.brightness(intensity)
     }
+
+    fun listen(lightBox: LightBox) {
+        lightBoxEventHub.listen(lightBox)
+    }
 }

desktop/src/app/about/about.component.ts

@@ -47,6 +47,7 @@ export class AboutComponent {
 		this.icons.push({ link: `${FLAT_ICON_URL}/stack_3342239`, name: 'Stack', author: 'Pixel perfect - Flaticon' })
 		this.icons.push({ link: `${FLAT_ICON_URL}/blackhole_6704410`, name: 'Blackhole', author: 'Freepik - Flaticon' })
 		this.icons.push({ link: `${FLAT_ICON_URL}/calibration_2364169`, name: 'Calibration', author: 'Freepik - Flaticon' })
+		this.icons.push({ link: `${FLAT_ICON_URL}/idea_3351801`, name: 'Bulb', author: 'Good Ware - Flaticon' })
 	}
 
 	private mapDependencies() {

desktop/src/app/app-routing.module.ts

@@ -16,6 +16,7 @@ import { GuiderComponent } from './guider/guider.component'
 import { HomeComponent } from './home/home.component'
 import { ImageComponent } from './image/image.component'
 import { INDIComponent } from './indi/indi.component'
+import { LightBoxComponent } from './lightbox/lightbox.component'
 import { MountComponent } from './mount/mount.component'
 import { RotatorComponent } from './rotator/rotator.component'
 import { SequencerComponent } from './sequencer/sequencer.component'
@@ -52,6 +53,10 @@ const routes: Routes = [
 		path: 'rotator',
 		component: RotatorComponent,
 	},
+	{
+		path: 'light-box',
+		component: LightBoxComponent,
+	},
 	{
 		path: 'guider',
 		component: GuiderComponent,

desktop/src/app/app.module.ts

@@ -25,6 +25,7 @@ import { InplaceModule } from 'primeng/inplace'
 import { InputNumberModule } from 'primeng/inputnumber'
 import { InputSwitchModule } from 'primeng/inputswitch'
 import { InputTextModule } from 'primeng/inputtext'
+import { KnobModule } from 'primeng/knob'
 import { ListboxModule } from 'primeng/listbox'
 import { MenuModule } from 'primeng/menu'
 import { MessageModule } from 'primeng/message'
@@ -95,6 +96,7 @@ import { CrossHairComponent } from './image/crosshair.component'
 import { ImageComponent } from './image/image.component'
 import { INDIComponent } from './indi/indi.component'
 import { INDIPropertyComponent } from './indi/property/indi-property.component'
+import { LightBoxComponent } from './lightbox/lightbox.component'
 import { MountComponent } from './mount/mount.component'
 import { RotatorComponent } from './rotator/rotator.component'
 import { SequencerComponent } from './sequencer/sequencer.component'
@@ -138,6 +140,7 @@ import { StackerComponent } from './stacker/stacker.component'
 		SpinnableNumberDirective,
 		INDIComponent,
 		INDIPropertyComponent,
+		LightBoxComponent,
 		LocationComponent,
 		MapComponent,
 		MenuBarComponent,
@@ -181,6 +184,7 @@ import { StackerComponent } from './stacker/stacker.component'
 		InputNumberModule,
 		InputSwitchModule,
 		InputTextModule,
+		KnobModule,
 		ListboxModule,
 		MenuModule,
 		MessageModule,

desktop/src/app/home/home.component.html

@@ -181,6 +181,16 @@
 				<div class="mt-1 text-sm">Switch</div>
 			</p-button>
 		</div>
+		<div class="col-4 p-1">
+			<p-button
+				[text]="true"
+				[disabled]="!connected || !hasLightBox"
+				(onClick)="open('LIGHT_BOX')"
+				styleClass="min-w-full w-full px-1 py-2 flex-column">
+				<img src="assets/icons/light.png" />
+				<div class="mt-1 text-sm">Light Box</div>
+			</p-button>
+		</div>
 		<div class="col-4 p-1">
 			<p-button
 				[text]="true"

desktop/src/app/home/home.component.ts

@@ -14,6 +14,7 @@ import { Device, DeviceType } from '../../shared/types/device.types'
 import { Focuser, isFocuser } from '../../shared/types/focuser.types'
 import { GuideOutput, isGuideOuptut } from '../../shared/types/guider.types'
 import { ConnectionDetails, DEFAULT_CONNECTION_DETAILS, DEFAULT_HOME_CONNECTION_DIALOG, DEFAULT_HOME_PREFERENCE, HomeWindowType } from '../../shared/types/home.types'
+import { isLightBox, LightBox } from '../../shared/types/lightbox.types'
 import { isMount, Mount } from '../../shared/types/mount.types'
 import { isRotator, Rotator } from '../../shared/types/rotator.types'
 import { isWheel, Wheel } from '../../shared/types/wheel.types'
@@ -42,6 +43,7 @@ export class HomeComponent implements AfterContentInit {
 	protected domes: Camera[] = []
 	protected switches: Camera[] = []
 	protected guideOutputs: GuideOutput[] = []
+	protected lightBoxes: LightBox[] = []
 
 	protected page = 0
 	protected newVersion?: string
@@ -114,6 +116,10 @@ export class HomeComponent implements AfterContentInit {
 		return this.guideOutputs.length > 0
 	}
 
+	get hasLightBox() {
+		return this.lightBoxes.length > 0
+	}
+
 	get hasGuider() {
 		return (this.hasCamera && this.hasMount) || this.hasGuideOutput
 	}
@@ -135,7 +141,7 @@ export class HomeComponent implements AfterContentInit {
 	}
 
 	get hasDevices() {
-		return this.hasCamera || this.hasMount || this.hasFocuser || this.hasWheel || this.hasDome || this.hasRotator || this.hasSwitch || this.hasGuideOutput
+		return this.hasCamera || this.hasMount || this.hasFocuser || this.hasWheel || this.hasDome || this.hasRotator || this.hasSwitch || this.hasGuideOutput || this.hasLightBox
 	}
 
 	get hasINDI() {
@@ -253,6 +259,22 @@ export class HomeComponent implements AfterContentInit {
 			})
 		})
 
+		electronService.on('LIGHT_BOX.ATTACHED', (event) => {
+			ngZone.run(() => {
+				this.deviceAdded(event.device)
+			})
+		})
+		electronService.on(`LIGHT_BOX.DETACHED`, (event) => {
+			ngZone.run(() => {
+				this.deviceRemoved(event.device)
+			})
+		})
+		electronService.on(`LIGHT_BOX.UPDATED`, (event) => {
+			ngZone.run(() => {
+				this.deviceUpdated(event.device)
+			})
+		})
+
 		electronService.on('CONNECTION.CLOSED', async (event) => {
 			if (this.connection?.id === event.id) {
 				await ngZone.run(() => {
@@ -274,6 +296,7 @@ export class HomeComponent implements AfterContentInit {
 			this.wheels = await this.api.wheels()
 			this.rotators = await this.api.rotators()
 			this.guideOutputs = await this.api.guideOutputs()
+			this.lightBoxes = await this.api.lightBoxes()
 		}
 
 		void this.checkForNewVersion()
@@ -306,6 +329,8 @@ export class HomeComponent implements AfterContentInit {
 			this.rotators.push(device)
 		} else if (isGuideOuptut(device)) {
 			this.guideOutputs.push(device)
+		} else if (isLightBox(device)) {
+			this.lightBoxes.push(device)
 		}
 	}
 
@@ -328,6 +353,9 @@ export class HomeComponent implements AfterContentInit {
 		} else if (isGuideOuptut(device)) {
 			const found = this.guideOutputs.findIndex((e) => e.id === device.id)
 			this.guideOutputs.splice(found, 1)
+		} else if (isLightBox(device)) {
+			const found = this.lightBoxes.findIndex((e) => e.id === device.id)
+			this.lightBoxes.splice(found, 1)
 		}
 	}
 
@@ -350,6 +378,9 @@ export class HomeComponent implements AfterContentInit {
 		} else if (isGuideOuptut(device)) {
 			const found = this.guideOutputs.find((e) => e.id === device.id)
 			found && Object.assign(found, device)
+		} else if (isLightBox(device)) {
+			const found = this.lightBoxes.find((e) => e.id === device.id)
+			found && Object.assign(found, device)
 		}
 	}
 
@@ -423,10 +454,6 @@ export class HomeComponent implements AfterContentInit {
 		}
 	}
 
-	protected findDeviceById(id: string) {
-		return this.cameras.find((e) => e.id === id) ?? this.mounts.find((e) => e.id === id) ?? this.wheels.find((e) => e.id === id) ?? this.focusers.find((e) => e.id === id) ?? this.rotators.find((e) => e.id === id)
-	}
-
 	protected deviceConnected(event: DeviceConnectionCommandEvent) {
 		return DeviceChooserComponent.handleConnectDevice(this.api, event.device, event.item)
 	}
@@ -444,6 +471,7 @@ export class HomeComponent implements AfterContentInit {
 			: type === 'FOCUSER' ? this.focusers
 			: type === 'WHEEL' ? this.wheels
 			: type === 'ROTATOR' ? this.rotators
+			: type === 'LIGHT_BOX' ? this.lightBoxes
 			: []
 
 		if (devices.length === 0) return
@@ -472,6 +500,9 @@ export class HomeComponent implements AfterContentInit {
 			case 'ROTATOR':
 				await this.browserWindowService.openRotator(device as Rotator, { bringToFront: true })
 				break
+			case 'LIGHT_BOX':
+				await this.browserWindowService.openLightBox(device as LightBox, { bringToFront: true })
+				break
 		}
 	}
 
@@ -493,6 +524,7 @@ export class HomeComponent implements AfterContentInit {
 			case 'FOCUSER':
 			case 'WHEEL':
 			case 'ROTATOR':
+			case 'LIGHT_BOX':
 				await this.openDevice(type)
 				break
 			case 'GUIDER':
@@ -588,6 +620,8 @@ export class HomeComponent implements AfterContentInit {
 			this.wheels = []
 			this.domes = []
 			this.rotators = []
+			this.lightBoxes = []
+			this.guideOutputs = []
 			this.switches = []
 		}
 	}

desktop/src/app/indi/indi.component.ts

@@ -87,6 +87,7 @@ export class INDIComponent implements AfterViewInit, OnDestroy {
 		const focusers = await this.api.focusers()
 		const rotators = await this.api.rotators()
 		const guideOutputs = await this.api.guideOutputs()
+		const lightBoxes = await this.api.lightBoxes()
 		const devices: Device[] = []
 
 		devices.push(...cameras.filter((a) => !devices.find((b) => a.name === b.name)))
@@ -95,6 +96,7 @@ export class INDIComponent implements AfterViewInit, OnDestroy {
 		devices.push(...focusers.filter((a) => !devices.find((b) => a.name === b.name)))
 		devices.push(...rotators.filter((a) => !devices.find((b) => a.name === b.name)))
 		devices.push(...guideOutputs.filter((a) => !devices.find((b) => a.name === b.name)))
+		devices.push(...lightBoxes.filter((a) => !devices.find((b) => a.name === b.name)))
 
 		this.devices = devices.sort(deviceComparator)
 

desktop/src/app/lightbox/lightbox.component.html

@@ -0,0 +1,46 @@
+<div class="container px-4 py-3">
+	<div class="grid flex align-items-center">
+		<div class="col-12 align-items-center gap-2">
+			<neb-device-name [device]="lightBox" />
+			<p-button
+				*ngIf="lightBox.connected"
+				(onClick)="connect()"
+				icon="mdi mdi-close"
+				size="small"
+				severity="danger"
+				pTooltip="Disconnect"
+				tooltipPosition="bottom"
+				[text]="true" />
+			<p-button
+				*ngIf="!lightBox.connected"
+				(onClick)="connect()"
+				icon="mdi mdi-connection"
+				size="small"
+				severity="info"
+				pTooltip="Connect"
+				tooltipPosition="bottom"
+				[text]="true" />
+		</div>
+	</div>
+	<div class="grid mt-1">
+		<div class="col-4 text-center align-items-center justify-content-center">
+			<div class="flex flex-column align-items-center justify-content-center text-center gap-2">
+				<span class="text-xs text-gray-100">Enabled</span>
+				<p-inputSwitch
+					[disabled]="!lightBox.connected"
+					(onChange)="toggleEnable($event.checked)"
+					[(ngModel)]="lightBox.enabled" />
+			</div>
+		</div>
+		<div class="col-8 flex align-items-center justify-content-center">
+			<p-knob
+				[disabled]="!lightBox.connected || !lightBox.enabled"
+				[min]="lightBox.minIntensity"
+				[max]="lightBox.maxIntensity"
+				[step]="1"
+				[ngModel]="lightBox.intensity"
+				(ngModelChange)="intensityChanged($event)"
+				spinnableNumber />
+		</div>
+	</div>
+</div>