@luxonis/depthai-viewer-common 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@luxonis/depthai-viewer-common",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"description": "Common utilities and components for building a frontend application for DepthAI projects",
 	"license": "ISC",
 	"author": "Luxonis Holding Corporation",
@@ -16,5 +16,17 @@
 	},
 	"publishConfig": {
 		"access": "public"
+	},
+	"dependencies": {
+		"@luxonis/visualizer-protobuf": "^2.31.0",
+		"@luxonis/depthai-pipeline-lib": "^1.4.8",
+		"@luxonis/common-fe-components": "1.14.0",
+		"@luxonis/common-fe-utils": "1.14.0",
+		"lodash": "^4.17.21",
+		"zod": "^3.24.3"
+	},
+	"peerDependencies": {
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1"
 	}
 }

package/src/components/Streams.tsx

@@ -20,9 +20,9 @@ import { useConnection } from '../providers/ConnectionProvider.js';
 import { useData } from '../providers/DataProvider.js';
 import { makeColumns } from '../utils/arrays.js';
 import { CTASubLabel } from './CTASubLabel.js';
-import type { Configuration } from '@luxonis/depthai-viewer/src/models/configuration.js';
 import { FaUsersViewfinder as VisualizerIcon } from 'react-icons/fa6';
 import { sortStreamsDefault } from '../utils/sorting.js';
+import type { DeviceConfiguration } from '../models/device-configuration.js';
 
 const EnabledStreamsView: React.FC<{
 	topics: Topic[][];
@@ -30,7 +30,7 @@ const EnabledStreamsView: React.FC<{
 	isRawSteamEnabledManually?: boolean;
 	setIsRawSteamEnabledManually?: (value: boolean) => void;
 	triggerToast?: () => void;
-	deviceOptions?: Configuration | null;
+	deviceOptions?: DeviceConfiguration | null;
 }> = ({
 	topics,
 	targetFps,
@@ -38,18 +38,18 @@ const EnabledStreamsView: React.FC<{
 	isRawSteamEnabledManually,
 	setIsRawSteamEnabledManually,
 }) => {
-	const { toggleTopic } = useConnection();
+	const { toggleTopic, topics: allTopics } = useConnection();
 
 	const items = React.useMemo(() => {
 		return topics.map((row) => {
-			let filteredRow = row;
+			let filteredRow = row.filter((topic) => !topic.name.startsWith('_'));
 
 			if (
-				row.some((topic) => topic.name === StreamTypes.PointCloud) &&
-				row.some((topic) => topic.name !== StreamTypes.Encoded) &&
+				filteredRow.some((topic) => topic.name === StreamTypes.PointCloud) &&
+				filteredRow.some((topic) => topic.name !== StreamTypes.Encoded) &&
 				!isRawSteamEnabledManually
 			) {
-				filteredRow = row.filter((topic) => topic.name !== StreamTypes.Encoded);
+				filteredRow = filteredRow.filter((topic) => topic.name !== StreamTypes.Encoded);
 			}
 			return filteredRow.map(({ name, annotations, extraAnnotations, kind }) => ({
 				component:
@@ -57,7 +57,9 @@ const EnabledStreamsView: React.FC<{
 						<PointCloudPanel
 							key={name}
 							toggleTopic={(topic) => {
-								if (!isRawSteamEnabledManually) {
+								if (allTopics.find((t) => t.name === StreamTypes._PointCloudColor)) {
+									toggleTopic(StreamTypes._PointCloudColor);
+								} else if (allTopics.find((t) => t.name === StreamTypes.Encoded)) {
 									toggleTopic(StreamTypes.Encoded);
 								}
 								toggleTopic(topic);
@@ -115,7 +117,7 @@ export const Streams: React.FC<{
 	triggerToast?: () => void;
 	setIsRawSteamEnabledManually?: (value: boolean) => void;
 	isRawSteamEnabledManually?: boolean;
-	deviceOptions?: Configuration | null;
+	deviceOptions?: DeviceConfiguration | null;
 }> = ({
 	targetFps,
 	triggerToast,
@@ -131,7 +133,7 @@ export const Streams: React.FC<{
 	const enabledTopics = React.useMemo(
 		() =>
 			makeColumns(
-				topics.filter((topic) => topic.enabled),
+				topics.filter((topic) => !topic.name.startsWith('_')).filter((topic) => topic.enabled),
 				columns,
 			),
 		[columns, topics],
@@ -157,7 +159,10 @@ export const Streams: React.FC<{
 		}
 	}, [shouldDisplayHelper, shouldSuggestUrlChange]);
 
-	const sortedTopics = React.useMemo(() => sortStreamsDefault(topics), [topics]);
+	const sortedTopics = React.useMemo(
+		() => sortStreamsDefault(topics.filter((topic) => !topic.name.startsWith('_'))),
+		[topics],
+	);
 
 	// TODO: Store detections in url or global provider
 	// to persist on re-renders

package/src/constants/streams.ts

@@ -8,4 +8,5 @@ export const StreamTypes = {
 	RightRaw: 'Right Raw Stream',
 	PointCloud: 'Point Cloud',
 	NeuralNetwork: 'Neural Network Stream',
+	_PointCloudColor: '_Point Cloud Color',
 } as const;

package/src/dai-connection/decoder.worker.ts

@@ -1,7 +1,4 @@
-import {
-	type Pipeline,
-	parsePipeline,
-} from '../../../../node_modules/@luxonis/depthai-pipeline-lib/dist/src/services/pipeline.js';
+import { parsePipeline, type Pipeline } from '@luxonis/depthai-pipeline-lib';
 
 function decodeService(kind: 'pipeline' | 'json', response: DataView | null) {
 	if (!response) {

package/src/hooks/connection.ts

@@ -144,11 +144,16 @@ export function useCreateConnection({
 
 	React.useEffect(() => {
 		if (topics.length > 0) {
-			if (
-				topics.find((topic) => topic.name === StreamTypes.PointCloud)?.enabled &&
-				topics.find((t) => t.name === StreamTypes.Encoded)?.enabled === false
-			) {
-				connection?.toggleTopic(StreamTypes.Encoded);
+			if (topics.find((topic) => topic.name === StreamTypes.PointCloud)?.enabled) {
+				const pcColor = topics.find((t) => t.name === StreamTypes._PointCloudColor);
+				if (pcColor?.enabled === false) {
+					connection?.toggleTopic(StreamTypes._PointCloudColor);
+				} else if (
+					!pcColor &&
+					topics.find((t) => t.name === StreamTypes.Encoded)?.enabled === false
+				) {
+					connection?.toggleTopic(StreamTypes.Encoded);
+				}
 			}
 			updateSearch(
 				'streams',
@@ -161,17 +166,25 @@ export function useCreateConnection({
 		(topicName: string, isRawSteamEnabledManually?: boolean): void => {
 			if (
 				topicName === StreamTypes.PointCloud &&
-				topics.find((topic) => topic.name === topicName)?.enabled === false &&
-				topics.find((t) => t.name === StreamTypes.Encoded)?.enabled === false
+				topics.find((topic) => topic.name === topicName)?.enabled === false
 			) {
-				connection?.toggleTopic(StreamTypes.Encoded);
+				const pcColor = topics.find((t) => t.name === StreamTypes._PointCloudColor);
+				if (!pcColor?.enabled) {
+					connection?.toggleTopic(StreamTypes._PointCloudColor);
+				} else if (!pcColor && topics.find((t) => t.name === StreamTypes.Encoded)) {
+					connection?.toggleTopic(StreamTypes.Encoded);
+				}
 			}
 			if (
 				topicName === StreamTypes.PointCloud &&
 				isRawSteamEnabledManually === false &&
 				topics.find((n) => n.name === 'Point Cloud')?.enabled
 			) {
-				connection?.toggleTopic(StreamTypes.Encoded);
+				if (topics.find((n) => n.name === StreamTypes._PointCloudColor)) {
+					connection?.toggleTopic(StreamTypes._PointCloudColor);
+				} else if (topics.find((n) => n.name === StreamTypes.Encoded)) {
+					connection?.toggleTopic(StreamTypes.Encoded);
+				}
 			}
 			connection?.toggleTopic(topicName);
 		},

package/src/index.ts

@@ -17,6 +17,8 @@ export * from './hooks/connection.js';
 export * from './hooks/navigation.js';
 export * from './hooks/search.js';
 
+export * from './models/device-configuration.js';
+
 export * from './utils/dynamic-base-worker.js';
 export * from './utils/functions.js';
 export * from './utils/sorting.js';

package/src/models/device-configuration.ts

@@ -0,0 +1,27 @@
+import { z } from 'zod';
+import { DeviceListSchema } from '@luxonis/common-fe-components';
+
+export const SensorSchema = z.object({
+	boardSocket: z.string(),
+	height: z.number(),
+	maxFps: z.number(),
+	minFps: z.number(),
+	type: z.string(),
+	width: z.number(),
+});
+export type Sensor = z.infer<typeof SensorSchema>;
+
+export const IrSchema = z.object({
+	floodLight: z.boolean(),
+	dotProjector: z.boolean(),
+});
+export type Ir = z.infer<typeof IrSchema>;
+
+export const DeviceConfigurationSchema = z.object({
+	cameraSensors: z.array(SensorSchema),
+	ir: IrSchema,
+	stereo: z.boolean(),
+	thermal: z.boolean(),
+	productName: DeviceListSchema,
+});
+export type DeviceConfiguration = z.infer<typeof DeviceConfigurationSchema>;