@@ -32,92 +27,65 @@
-
-
+
-
-
Reversed
-
+
+
+ [(value)]="rotator.reversed"
+ (valueChange)="reverse($event)" />
-
-
-
-
-
+
-
+
+ tooltip="Move" />
-
diff --git a/desktop/src/app/sequencer/sequencer.component.html b/desktop/src/app/sequencer/sequencer.component.html
index a5744b8b9..6e8869c06 100644
--- a/desktop/src/app/sequencer/sequencer.component.html
+++ b/desktop/src/app/sequencer/sequencer.component.html
@@ -99,122 +99,95 @@
(cdkDropListDropped)="drop($event)"
class="grid px-4 mt-1 flex align-items-center gap-0 overflow-y-auto"
style="max-height: calc(100vh - 200px)">
-
-
-
-
-
#{{ i + 1 }}
+ @for (sequence of plan.sequences; track sequence; let i = $index) {
+
+
+
+
+ #{{ i + 1 }}
+
+
+
+
+
+ @if (plan.liveStacking.enabled) {
+
+ @if (plan.liveStacking.useCalibrationGroup) {
+
+ }
+ }
+
+
+
+
+
+
+
-
-
-
-
-
+
+
@@ -227,44 +200,27 @@
-
-
-
-
-
-
-
-
+
+
-
+ tooltip="{{ 'Auto sub folder: ' + plan.autoSubFolderMode }}"
+ (action)="toggleAutoSubFolder()" />
-
-
-
-
-
+
+ (action)="resetCameraCaptureNamingFormat('LIGHT')"
+ tooltip="Reset" />
-
-
-
-
-
+
+ (action)="resetCameraCaptureNamingFormat('DARK')"
+ tooltip="Reset" />
-
-
-
-
-
+
+ (action)="resetCameraCaptureNamingFormat('FLAT')"
+ tooltip="Reset" />
-
-
-
-
-
+
+ (action)="resetCameraCaptureNamingFormat('BIAS')"
+ tooltip="Reset" />
-
-
-
-
-
-
-
-
-
+ [(value)]="plan.dither.raOnly"
+ (valueChange)="savePreference()" />
+
+
-
-
+
+ [(value)]="plan.autoFocus.onFilterChange"
+ (valueChange)="savePreference()" />
-
-
-
-
-
+ [(value)]="plan.autoFocus.afterElapsedTimeEnabled"
+ (valueChange)="savePreference()" />
+
-
-
-
-
-
+ [(value)]="plan.autoFocus.afterExposuresEnabled"
+ (valueChange)="savePreference()" />
+
-
-
-
-
-
+ [(value)]="plan.autoFocus.afterHFDIncreaseEnabled"
+ (valueChange)="savePreference()" />
+
-
-
-
-
-
+ [(value)]="plan.autoFocus.afterTemperatureChangeEnabled"
+ (valueChange)="savePreference()" />
+
-
-
-
-
-
-
32-bit (slower)
-
+
+
+ [(value)]="plan.liveStacking.use32Bits"
+ (valueChange)="savePreference()" />
-
+ [(value)]="plan.liveStacking.useCalibrationGroup"
+ (valueChange)="savePreference()" />
@if (pausingOrPaused) {
-
+ severity="success" />
} @else if (!running) {
-
+ severity="success" />
+ } @else if (canStart) {
+
}
-
-
+ severity="danger" />
@@ -633,115 +507,96 @@
[style]="{ maxWidth: '400px' }">
-
-
+
+ (action)="selectSequenceProperty(false)" />
-
+ [(value)]="property.properties.EXPOSURE_TIME" />
-
+ [(value)]="property.properties.EXPOSURE_AMOUNT" />
-
+ [(value)]="property.properties.EXPOSURE_DELAY" />
-
+ [(value)]="property.properties.FRAME_TYPE" />
-
+ [(value)]="property.properties.X" />
-
+ [(value)]="property.properties.Y" />
-
+ [(value)]="property.properties.WIDTH" />
-
+ [(value)]="property.properties.HEIGHT" />
-
+ [(value)]="property.properties.BIN" />
-
+ [(value)]="property.properties.FRAME_FORMAT" />
-
+ [(value)]="property.properties.GAIN" />
-
+ [(value)]="property.properties.OFFSET" />
-
-
+ [(value)]="property.properties.CALIBRATION_GROUP" />
+ @if (plan.liveStacking.enabled) {
+
+
+
+ }
-
+ (action)="copySequencePropertyToSequencies()" />
diff --git a/desktop/src/app/sequencer/sequencer.component.ts b/desktop/src/app/sequencer/sequencer.component.ts
index a91d1e27b..0f7747c62 100644
--- a/desktop/src/app/sequencer/sequencer.component.ts
+++ b/desktop/src/app/sequencer/sequencer.component.ts
@@ -1,9 +1,10 @@
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
-import { AfterContentInit, Component, HostListener, inject, NgZone, OnDestroy, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core'
+import { AfterContentInit, Component, HostListener, inject, NgZone, OnDestroy, viewChildren, ViewEncapsulation } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
-import { CameraExposureComponent } from '../../shared/components/camera-exposure/camera-exposure.component'
-import { DialogMenuComponent } from '../../shared/components/dialog-menu/dialog-menu.component'
-import { MenuItem, SlideMenuItem } from '../../shared/components/menu-item/menu-item.component'
+import { CameraExposureComponent } from '../../shared/components/camera-exposure.component'
+import { DialogMenuComponent } from '../../shared/components/dialog-menu.component'
+import { DropdownItem } from '../../shared/components/dropdown.component'
+import { MenuItem, SlideMenuItem } from '../../shared/components/menu-item.component'
import { SEPARATOR_MENU_ITEM } from '../../shared/constants'
import { AngularService } from '../../shared/services/angular.service'
import { ApiService } from '../../shared/services/api.service'
@@ -11,7 +12,6 @@ import { BrowserWindowService } from '../../shared/services/browser-window.servi
import { ElectronService } from '../../shared/services/electron.service'
import { PreferenceService } from '../../shared/services/preference.service'
import { Tickable, Ticker } from '../../shared/services/ticker.service'
-import { DropdownItem } from '../../shared/types/angular.types'
import { JsonFile } from '../../shared/types/app.types'
import { Camera, cameraCaptureNamingFormatWithDefault, FrameType, updateCameraStartCaptureFromCamera } from '../../shared/types/camera.types'
import { Focuser } from '../../shared/types/focuser.types'
@@ -57,7 +57,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
protected path?: string
// NOTE: Remove the "plan.sequences.length <= 1" on layout if add more options
- protected readonly sequenceModel: SlideMenuItem[] = [
+ private readonly sequenceModel: SlideMenuItem[] = [
{
icon: 'mdi mdi-content-copy',
label: 'Apply to all',
@@ -167,8 +167,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
},
}
- @ViewChildren('cameraExposure')
- private readonly cameraExposures!: QueryList
+ private readonly cameraExposures = viewChildren('cameraExposure')
get canStart() {
return !!this.plan.camera?.connected && !!this.plan.sequences.find((e) => e.enabled)
@@ -274,7 +273,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
if (captureEvent) {
const index = event.id - 1
- this.cameraExposures.get(index)?.handleCameraCaptureEvent(captureEvent)
+ this.cameraExposures().at(index)?.handleCameraCaptureEvent(captureEvent)
}
})
})
@@ -539,7 +538,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
this.savePreference()
}
- protected showSequenceMenu(sequence: Sequence, dialogMenu: DialogMenuComponent) {
+ protected showSequenceMenu(sequence: Sequence, menu: DialogMenuComponent) {
this.property.sequence = sequence
const index = this.plan.sequences.indexOf(sequence)
@@ -555,7 +554,7 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
this.sequenceModel[7].visible = this.sequenceModel[3].visible
if (this.sequenceModel.find((e) => e.visible)) {
- dialogMenu.show()
+ menu.show(this.sequenceModel)
}
}
@@ -649,8 +648,8 @@ export class SequencerComponent implements AfterContentInit, OnDestroy, Tickable
protected async start() {
if (this.plan.camera) {
- for (let i = 0; i < this.cameraExposures.length; i++) {
- this.cameraExposures.get(i)?.reset()
+ for (let i = 0; i < this.cameraExposures().length; i++) {
+ this.cameraExposures().at(i)?.reset()
}
// FOCUS OFFSET
diff --git a/desktop/src/app/settings/settings.component.html b/desktop/src/app/settings/settings.component.html
index 63b7ac5d2..0e0b8b5a9 100644
--- a/desktop/src/app/settings/settings.component.html
+++ b/desktop/src/app/settings/settings.component.html
@@ -1,337 +1,222 @@
-
-
-
-
+ @if (tab === 'GENERAL') {
+
-
-
-
-
-
-
+
+
+
-
-
- {{ preference.location.name || '?' }}
-
-
-
-
-
-
-
-
+ [(value)]="preference.location"
+ (valueChange)="locationChanged($event)"
+ emptyMessage="No location available" />
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
- @if (plateSolverType === 'ASTROMETRY_NET_ONLINE') {
+ } @else if (tab === 'PLATE_SOLVER') {
+
+
-
- }
- @if (plateSolverType !== 'PIXINSIGHT') {
-
+ } @else {
+
+
+
+
+
+
+ }
+ @if (plateSolverType !== 'PIXINSIGHT') {
+
+
-
-
-
-
+
+
-
-
-
- }
- @if (plateSolverType === 'PIXINSIGHT') {
-
+ } @else {
+
+
-
-
-
- }
-
-
-
-
-
-
-
-
-
+ [(value)]="plateSolver.slot"
+ (valueChange)="savePreference()" />
+
+ }
-
-
-
-
-
-
-
+ } @else if (tab === 'STAR_DETECTOR') {
+
+
+
+
+
+
+
-
-
+ (pathChange)="savePreference()" />
+
+
+
+
+ @if (starDetectorType === 'PIXINSIGHT') {
+
+
+
+ }
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
+ [(path)]="liveStacker.executablePath"
+ label="Executable path"
+ (pathChange)="savePreference()" />
+
+ @if (liveStackerType === 'PIXINSIGHT') {
+
+
+
+ }
-
-
-
-
-
-
-
-
-
-
-
-
+ } @else if (tab === 'CAPTURE_NAMING_FORMAT') {
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+ }
![]()
+
+ @if (label()) {
+ {{ label() }}
+ }
+
+ `,
+ styles: `
+ neb-button-image {
+ .p-disabled {
+ img {
+ filter: grayscale(1);
+ }
+ }
+ }
+ `,
+ encapsulation: ViewEncapsulation.None,
+})
+export class ButtonImageComponent {
+ readonly label = input()
+ readonly image = input.required()
+ readonly imageHeight = input('16px')
+ readonly tooltip = input()
+ readonly tooltipPosition = input<'right' | 'left' | 'top' | 'bottom'>('bottom')
+ readonly disabled = input(false)
+ readonly severity = input<'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast'>()
+ readonly action = output()
+}
diff --git a/desktop/src/shared/components/button.component.ts b/desktop/src/shared/components/button.component.ts
new file mode 100644
index 000000000..1b8f70745
--- /dev/null
+++ b/desktop/src/shared/components/button.component.ts
@@ -0,0 +1,46 @@
+import { Component, input, output, ViewEncapsulation } from '@angular/core'
+
+@Component({
+ selector: 'neb-button',
+ template: `
+
+
+
+ `,
+ styles: `
+ neb-button {
+ .p-button {
+ &.p-button-icon-only {
+ aspect-ratio: 1;
+ }
+
+ &:has(.mdi-lg) {
+ height: 3.25rem;
+ }
+ }
+ }
+ `,
+ encapsulation: ViewEncapsulation.None,
+})
+export class ButtonComponent {
+ readonly label = input()
+ readonly icon = input()
+ readonly tooltip = input()
+ readonly tooltipPosition = input<'right' | 'left' | 'top' | 'bottom'>('bottom')
+ readonly rounded = input(true)
+ readonly disabled = input(false)
+ readonly severity = input<'success' | 'info' | 'warning' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast'>()
+ readonly action = output()
+}
diff --git a/desktop/src/shared/components/camera-exposure.component.ts b/desktop/src/shared/components/camera-exposure.component.ts
new file mode 100644
index 000000000..4c1fdb494
--- /dev/null
+++ b/desktop/src/shared/components/camera-exposure.component.ts
@@ -0,0 +1,137 @@
+import { Component, input, model, ViewEncapsulation } from '@angular/core'
+import { CameraCaptureEvent, CameraCaptureState, DEFAULT_CAMERA_CAPTURE_INFO, DEFAULT_CAMERA_STEP_INFO } from '../types/camera.types'
+
+@Component({
+ selector: 'neb-camera-exposure',
+ template: `
+
+
+
+ {{ info() || state || 'IDLE' | enum | lowercase }}
+
+
+
+
+ {{ capture.count }}
+ @if (!capture.looping) {
+ / {{ capture.amount }}
+ }
+
+ @if (!capture.looping) {
+
+
+ {{ capture.progress * 100 | number: '1.1-1' }}
+
+ }
+ @if (capture.looping) {
+
+
+ {{ capture.elapsedTime | exposureTime }}
+
+ } @else {
+
+ @if (showRemainingTime()) {
+
+
+ {{ capture.remainingTime | exposureTime }}
+
+ } @else {
+
+
+ {{ capture.elapsedTime | exposureTime }}
+
+ }
+
+ }
+ @if (capture.amount !== 1 && (state === 'EXPOSURING' || state === 'WAITING')) {
+
+ @if (showRemainingTime()) {
+
+
+ {{ step.remainingTime | exposureTime }}
+
+ } @else {
+
+
+ {{ step.elapsedTime | exposureTime }}
+
+ }
+
+
+
+ {{ step.progress * 100 | number: '1.1-1' }}
+
+ }
+
+
+ `,
+ styles: `
+ neb-camera-exposure {
+ min-height: 29px;
+ width: 100%;
+
+ .state {
+ padding: 1px 6px;
+ height: 13px;
+ }
+ }
+ `,
+ encapsulation: ViewEncapsulation.None,
+})
+export class CameraExposureComponent {
+ readonly info = input()
+ readonly showRemainingTime = model(true)
+
+ protected step = structuredClone(DEFAULT_CAMERA_STEP_INFO)
+ protected capture = structuredClone(DEFAULT_CAMERA_CAPTURE_INFO)
+ protected state: CameraCaptureState = 'IDLE'
+
+ get currentState() {
+ return this.state
+ }
+
+ handleCameraCaptureEvent(event: Omit, looping: boolean = false) {
+ this.capture.elapsedTime = event.captureElapsedTime
+ this.capture.remainingTime = event.captureRemainingTime
+ this.capture.progress = event.captureProgress
+ this.capture.count = event.exposureCount
+ this.capture.amount = event.exposureAmount
+ if (looping) this.capture.looping = looping
+
+ this.step.elapsedTime = event.stepElapsedTime
+ this.step.remainingTime = event.stepRemainingTime
+ this.step.progress = event.stepProgress
+
+ if (event.state === 'EXPOSURING') {
+ this.state = 'EXPOSURING'
+ } else if (event.state === 'WAITING') {
+ this.step.elapsedTime = event.stepElapsedTime
+ this.step.remainingTime = event.stepRemainingTime
+ this.step.progress = event.stepProgress
+ this.state = event.state
+ } else if (event.state === 'CAPTURE_STARTED') {
+ this.capture.looping = looping || event.exposureAmount <= 0
+ this.capture.amount = event.exposureAmount
+ this.state = 'EXPOSURING'
+ } else if (event.state === 'EXPOSURE_STARTED') {
+ this.state = 'EXPOSURING'
+ } else if (event.state === 'IDLE' || event.state === 'CAPTURE_FINISHED') {
+ this.reset()
+ } else if (event.state !== 'EXPOSURE_FINISHED') {
+ this.state = event.state
+ }
+
+ return this.state !== 'CAPTURE_FINISHED' && this.state !== 'IDLE'
+ }
+
+ reset() {
+ this.state = 'IDLE'
+
+ this.step = structuredClone(DEFAULT_CAMERA_STEP_INFO)
+ this.capture = structuredClone(DEFAULT_CAMERA_CAPTURE_INFO)
+ }
+}
diff --git a/desktop/src/shared/components/camera-exposure/camera-exposure.component.html b/desktop/src/shared/components/camera-exposure/camera-exposure.component.html
deleted file mode 100644
index 43e5f5026..000000000
--- a/desktop/src/shared/components/camera-exposure/camera-exposure.component.html
+++ /dev/null
@@ -1,66 +0,0 @@
-
-
-
- {{ info || state || 'IDLE' | enum | lowercase }}
-
-
-
-
-
- {{ capture.count }}
- / {{ capture.amount }}
-
- @if (!capture.looping) {
-
-
- {{ capture.progress * 100 | number: '1.1-1' }}
-
- }
- @if (capture.looping) {
-
-
- {{ capture.elapsedTime | exposureTime }}
-
- } @else {
-
-
-
- {{ capture.remainingTime | exposureTime }}
-
-
-
- {{ capture.elapsedTime | exposureTime }}
-
-
- }
-
- @if (capture.amount !== 1 && (state === 'EXPOSURING' || state === 'WAITING')) {
-
-
-
- {{ step.remainingTime | exposureTime }}
-
-
-
- {{ step.elapsedTime | exposureTime }}
-
-
-
-
- {{ step.progress * 100 | number: '1.1-1' }}
-
- }
-
-
diff --git a/desktop/src/shared/components/camera-exposure/camera-exposure.component.scss b/desktop/src/shared/components/camera-exposure/camera-exposure.component.scss
deleted file mode 100644
index c16fb707b..000000000
--- a/desktop/src/shared/components/camera-exposure/camera-exposure.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-:host {
- min-height: 29px;
- width: 100%;
-
- .state {
- padding: 1px 6px;
- height: 13px;
-
- &.percentage {
- min-width: 50px;
- }
-
- &.time {
- min-width: 56px;
- }
-
- &.counter {
- min-width: 78px;
- }
-
- .mdi:before {
- font-size: 0.9rem !important;
- }
- }
-
- .mdi-information::before {
- font-size: 0.9rem !important;
- }
-}
diff --git a/desktop/src/shared/components/camera-exposure/camera-exposure.component.ts b/desktop/src/shared/components/camera-exposure/camera-exposure.component.ts
deleted file mode 100644
index ddcd59bee..000000000
--- a/desktop/src/shared/components/camera-exposure/camera-exposure.component.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { CameraCaptureEvent, CameraCaptureState, DEFAULT_CAMERA_CAPTURE_INFO, DEFAULT_CAMERA_STEP_INFO } from '../../types/camera.types'
-
-@Component({
- selector: 'neb-camera-exposure',
- templateUrl: 'camera-exposure.component.html',
- styleUrls: ['camera-exposure.component.scss'],
-})
-export class CameraExposureComponent {
- @Input()
- protected info?: string
-
- @Input()
- protected showRemainingTime: boolean = true
-
- @Input()
- protected readonly step = structuredClone(DEFAULT_CAMERA_STEP_INFO)
-
- @Input()
- protected readonly capture = structuredClone(DEFAULT_CAMERA_CAPTURE_INFO)
-
- protected state: CameraCaptureState = 'IDLE'
-
- get currentState() {
- return this.state
- }
-
- handleCameraCaptureEvent(event: Omit, looping: boolean = false) {
- this.capture.elapsedTime = event.captureElapsedTime
- this.capture.remainingTime = event.captureRemainingTime
- this.capture.progress = event.captureProgress
- this.capture.count = event.exposureCount
- this.capture.amount = event.exposureAmount
- if (looping) this.capture.looping = looping
- this.step.elapsedTime = event.stepElapsedTime
- this.step.remainingTime = event.stepRemainingTime
- this.step.progress = event.stepProgress
-
- if (event.state === 'EXPOSURING') {
- this.state = 'EXPOSURING'
- } else if (event.state === 'WAITING') {
- this.step.elapsedTime = event.stepElapsedTime
- this.step.remainingTime = event.stepRemainingTime
- this.step.progress = event.stepProgress
- this.state = event.state
- } else if (event.state === 'CAPTURE_STARTED') {
- this.capture.looping = looping || event.exposureAmount <= 0
- this.capture.amount = event.exposureAmount
- this.state = 'EXPOSURING'
- } else if (event.state === 'EXPOSURE_STARTED') {
- this.state = 'EXPOSURING'
- } else if (event.state === 'IDLE' || event.state === 'CAPTURE_FINISHED') {
- this.reset()
- } else if (event.state !== 'EXPOSURE_FINISHED') {
- this.state = event.state
- }
-
- return this.state !== 'CAPTURE_FINISHED' && this.state !== 'IDLE'
- }
-
- reset() {
- this.state = 'IDLE'
-
- Object.assign(this.step, DEFAULT_CAMERA_STEP_INFO)
- Object.assign(this.capture, DEFAULT_CAMERA_CAPTURE_INFO)
- }
-}
diff --git a/desktop/src/shared/components/camera-info.component.ts b/desktop/src/shared/components/camera-info.component.ts
new file mode 100644
index 000000000..78043a87b
--- /dev/null
+++ b/desktop/src/shared/components/camera-info.component.ts
@@ -0,0 +1,127 @@
+import { Component, ViewEncapsulation, input, output } from '@angular/core'
+import type { CameraStartCapture } from '../types/camera.types'
+import type { Focuser } from '../types/focuser.types'
+import type { Rotator } from '../types/rotator.types'
+import type { Wheel } from '../types/wheel.types'
+
+@Component({
+ selector: 'neb-camera-info',
+ template: `
+
+ @let mInfo = info();
+
+ @if (hasType()) {
+
+
+ {{ mInfo.frameType }}
+
+ }
+ @if (hasExposure() && mInfo.exposureTime) {
+
+
+ {{ mInfo.exposureAmount || '∞' }} / {{ mInfo.exposureTime | exposureTime }}
+
+ }
+ @if (mInfo.exposureDelay) {
+
+
+ {{ mInfo.exposureDelay * 1000000 | exposureTime }}
+
+ }
+ @if (mInfo.x !== undefined && mInfo.y !== undefined && mInfo.width && mInfo.height) {
+
+
+ {{ mInfo.x }} {{ mInfo.y }} {{ mInfo.width }} {{ mInfo.height }}
+
+ }
+ @if (mInfo.binX && mInfo.binY) {
+
+
+ {{ mInfo.binX }}x{{ mInfo.binY }}
+
+ }
+ @if (mInfo.gain) {
+
+
+ {{ mInfo.gain }}
+
+ }
+ @if (mInfo.offset) {
+
+
+ {{ mInfo.offset }}
+
+ }
+ @if (mInfo.frameFormat) {
+
+
+ {{ mInfo.frameFormat }}
+
+ }
+ @if (hasFilter) {
+
+
+
+ {{ filter }}
+
+ @if (canRemoveFilter() && !disabled()) {
+
+ }
+
+ }
+ @if (hasFilter && focuser() && mInfo.focusOffset) {
+
+
+ {{ mInfo.focusOffset }}
+
+ }
+ @if (rotator() && mInfo.angle >= 0) {
+
+
+
+ {{ mInfo.angle.toFixed(1) }}°
+
+ @if (canRemoveAngle() && !disabled()) {
+
+ }
+
+ }
+
-
-
- {{ info.frameType }}
-
-
-
- {{ info.exposureAmount || '∞' }} / {{ info.exposureTime | exposureTime }}
-
-
-
- {{ info.exposureDelay * 1000000 | exposureTime }}
-
-
-
- {{ info.x }} {{ info.y }} {{ info.width }} {{ info.height }}
-
-
-
- {{ info.binX }}x{{ info.binY }}
-
-
-
- {{ info.gain }}
-
-
-
- {{ info.offset }}
-
-
-
- {{ info.frameFormat }}
-
-
-
-
- {{ filter }}
-
-
-
-
-
- {{ info.focusOffset }}
-
-
-
-
- {{ info.angle.toFixed(1) }}°
-
-
-
-
+
+
+ {{ title() }}
+ @let mDevice = device();
+
+ @if (mDevice && mDevice.id) {
+ {{ mDevice.name }}
+ } @else {
+ {{ noDeviceMessage() || 'Choose a device' }}
+ }
+
+
-
-
- {{ title }}
- @if (device && device.id) {
- {{ device.name }}
- } @else {
- {{ noDeviceMessage || 'Choose a device' }}
- }
-
-
+
{{ device().name }}
+
+ DRIVER: {{ device().driverName }}
+ VERSION: {{ device().driverVersion }}
+
+
-
{{ device.name }}
-
- DRIVER: {{ device.driverName }}
- VERSION: {{ device.driverVersion }}
-
-
+ {{ itemLabel(item) }}
+
+ }
+
+
+ @if (itemTemplate()) {
+
+ } @else {
+
+ {{ itemLabel(item) }}
+
+ }
+
+
+
+
+ `,
+ styles: `
+ neb-dropdown {
+ width: 100%;
+ }
+ `,
+ encapsulation: ViewEncapsulation.None,
+})
+export class DropdownComponent extends DropdownBaseComponent {
+ readonly label = input()
+ readonly options = input([])
+ readonly value = model()
+ readonly optionLabel = input('name')
+ readonly optionValue = input()
+ readonly disabled = input(false)
+ readonly filter = input(false)
+ readonly filterFields = input()
+ readonly emptyMessage = input('Not available')
+ readonly itemTemplate = input>()
+ protected readonly dropdown = viewChild.required('dropdown')
+
+ protected itemLabel(item: unknown) {
+ return (item as Record)[this.optionLabel()] ?? `${item}`
+ }
+}
+
+@Component({
+ selector: 'neb-dropdown-item',
+ template: `
+
+
+
+
+ `,
+ styles: `
+ neb-dropdown-item {
+ width: 100%;
+ }
+ `,
+ encapsulation: ViewEncapsulation.None,
+})
+export class DropdownItemComponent extends DropdownBaseComponent, T> {
+ readonly label = input()
+ readonly options = input[]>([])
+ readonly value = model()
+ readonly disabled = input(false)
+ readonly filter = input(false)
+ readonly emptyMessage = input('Not available')
+ readonly dropdown = viewChild.required('dropdown')
+}
+
+@Component({
+ selector: 'neb-dropdown-enum',
+ template: `
+
+
+
+
+ `,
+ styles: `
+ neb-dropdown-enum {
+ width: 100%;
+ }
+ `,
+ encapsulation: ViewEncapsulation.None,
+})
+export class DropdownEnumComponent extends DropdownBaseComponent {
+ readonly label = input()
+ readonly options = input([])
+ readonly value = model()
+ readonly filter = input(false)
+ readonly disabled = input(false)
+ readonly emptyMessage = input('Not available')
+ readonly dropdown = viewChild.required('dropdown')
+}
diff --git a/desktop/src/shared/components/histogram/histogram.component.ts b/desktop/src/shared/components/histogram.component.ts
similarity index 71%
rename from desktop/src/shared/components/histogram/histogram.component.ts
rename to desktop/src/shared/components/histogram.component.ts
index a8595842d..b0f446456 100644
--- a/desktop/src/shared/components/histogram/histogram.component.ts
+++ b/desktop/src/shared/components/histogram.component.ts
@@ -1,23 +1,28 @@
-import { AfterViewInit, Component, ElementRef, ViewChild, ViewEncapsulation } from '@angular/core'
-import { ImageHistrogram } from '../../types/image.types'
+import { Component, ElementRef, ViewEncapsulation, effect, viewChild } from '@angular/core'
+import { ImageHistrogram } from '../types/image.types'
@Component({
selector: 'neb-histogram',
- templateUrl: 'histogram.component.html',
+ template: `
+
+ `,
encapsulation: ViewEncapsulation.None,
})
-export class HistogramComponent implements AfterViewInit {
- @ViewChild('canvas')
- private readonly canvas!: ElementRef
+export class HistogramComponent {
+ private readonly canvas = viewChild.required>('canvas')
private ctx?: CanvasRenderingContext2D | null
- ngAfterViewInit() {
- this.ctx = this.canvas.nativeElement.getContext('2d')
+ constructor() {
+ effect(() => {
+ this.ctx = this.canvas().nativeElement.getContext('2d')
+ })
}
update(data: ImageHistrogram, dontClear: boolean = false) {
- const canvas = this.canvas.nativeElement
+ const canvas = this.canvas().nativeElement
if (!dontClear || !data.length) {
this.ctx?.clearRect(0, 0, canvas.width, canvas.height)
@@ -36,7 +41,7 @@ export class HistogramComponent implements AfterViewInit {
private drawColorGraph(data: ImageHistrogram, max: number, start: number = 0, end: number = data.length - 1, color: string | CanvasGradient | CanvasPattern) {
if (this.ctx) {
- const canvas = this.canvas.nativeElement
+ const canvas = this.canvas().nativeElement
const graphHeight = canvas.height
const graphWidth = canvas.width
diff --git a/desktop/src/shared/components/histogram/histogram.component.html b/desktop/src/shared/components/histogram/histogram.component.html
deleted file mode 100644
index 15903fdb1..000000000
--- a/desktop/src/shared/components/histogram/histogram.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
diff --git a/desktop/src/shared/components/indicator.component.ts b/desktop/src/shared/components/indicator.component.ts
new file mode 100644
index 000000000..b66137642
--- /dev/null
+++ b/desktop/src/shared/components/indicator.component.ts
@@ -0,0 +1,42 @@
+import { Component, input, model, ViewEncapsulation } from '@angular/core'
+
+@Component({
+ selector: 'neb-indicator',
+ template: `
+
+ @for (item of [].constructor(count()); track $index) {
+
+ }
+
+ `,
+ styles: `
+ neb-indicator {
+ .indicator {
+ background-color: #3f3f46;
+ width: 0.7rem;
+ height: 0.7rem;
+ transition:
+ background-color 0.2s,
+ color 0.2s,
+ border-color 0.2s,
+ box-shadow 0.2s,
+ outline-color 0.2s;
+ border-radius: 50%;
+ cursor: pointer;
+ margin: 1px;
+
+ &.selected {
+ background-color: #60a5fa;
+ }
+ }
+ }
+ `,
+ encapsulation: ViewEncapsulation.None,
+})
+export class IndicatorComponent {
+ readonly count = input.required()
+ readonly position = model(0)
+}
diff --git a/desktop/src/shared/components/input-number.component.ts b/desktop/src/shared/components/input-number.component.ts
new file mode 100644
index 000000000..5695e8065
--- /dev/null
+++ b/desktop/src/shared/components/input-number.component.ts
@@ -0,0 +1,59 @@
+import { Component, computed, input, model, ViewEncapsulation } from '@angular/core'
+
+@Component({
+ selector: 'neb-input-number',
+ template: `
+
+
+
+
+ `,
+ styles: `
+ neb-input-number {
+ display: flex;
+ align-items: center;
+
+ .p-button-icon-only.p-inputnumber-button {
+ width: 2rem;
+ }
+
+ .p-inputtext {
+ border: 1px solid rgba(255, 255, 255, 0) !important;
+ }
+ }
+ `,
+ encapsulation: ViewEncapsulation.None,
+})
+export class InputNumberComponent {
+ readonly label = input()
+ readonly min = input()
+ readonly max = input()
+ readonly step = input(1)
+ readonly value = model(0)
+ readonly disabled = input(false)
+ readonly fractionDigits = input(0)
+ readonly format = input(true)
+ readonly suffix = input()
+ readonly placeholder = input()
+ readonly readonly = input(false)
+
+ protected readonly minFractionDigits = computed(() => Math.max(this.fractionDigits(), this.step() < 1 ? 1 : 0))
+ protected readonly maxFractionDigits = computed(() => Math.max(this.fractionDigits(), this.minFractionDigits()))
+}
diff --git a/desktop/src/shared/components/input-text.component.ts b/desktop/src/shared/components/input-text.component.ts
new file mode 100644
index 000000000..96ed72086
--- /dev/null
+++ b/desktop/src/shared/components/input-text.component.ts
@@ -0,0 +1,42 @@
+import { Component, input, model, ViewEncapsulation } from '@angular/core'
+
+@Component({
+ selector: 'neb-input-text',
+ template: `
+
+
+
+
+ `,
+ styles: `
+ neb-input-text {
+ width: 100%;
+ display: flex;
+ align-items: center;
+
+ .p-inputtext {
+ border: 1px solid rgba(255, 255, 255, 0) !important;
+ }
+ }
+ `,
+ encapsulation: ViewEncapsulation.None,
+})
+export class InputTextComponent {
+ readonly label = input()
+ readonly maxLength = input(256)
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ readonly value = model()
+ readonly disabled = input(false)
+ readonly placeholder = input('')
+ readonly readonly = input(false)
+ readonly tooltip = input()
+}
diff --git a/desktop/src/shared/components/location.component.ts b/desktop/src/shared/components/location.component.ts
new file mode 100644
index 000000000..59ed85b7a
--- /dev/null
+++ b/desktop/src/shared/components/location.component.ts
@@ -0,0 +1,75 @@
+import { AfterViewInit, Component, input, output, viewChild, ViewEncapsulation } from '@angular/core'
+import type { Location } from '../types/atlas.types'
+import { MapComponent } from './map.component'
+
+@Component({
+ selector: 'neb-location',
+ template: `
+ @let mLocation = location();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ @for (item of model(); track item; let i = $index) {
+
+ @if (item.visible !== false) {
+ @if (item.toggleable) {
+ @if (item.visible) {
+
+
+
+ }
+ } @else if (item.checkable) {
+ @if (item.visible) {
+
+
+
+ }
+ } @else if (item.label && item.splitButtonMenu?.length) {
+
+ } @else {
+ @if (item.badge) {
+
+ }
+
+ }
+ }
+
+ }
+
-
- @if (item.visible !== false) {
- @if (item.toggleable) {
-
- } @else if (item.checkable) {
-
- } @else if (item.label && item.splitButtonMenu?.length) {
-
- } @else {
-
-
- }
- }
-
-
+ style="height: 28px" />
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-