Templating

src/api/TemplateService.ts

@@ -0,0 +1,31 @@
+export default class TemplateService {
+	private baseUrl: string;
+	private token: string;
+
+	constructor(baseUrl: string, token: string) {
+		this.baseUrl = baseUrl + "/api/template";
+		this.token = token;
+	}
+
+	async resolveTemplate(template: string): Promise<string> {
+		const payload = {
+			template: template,
+		};
+
+		const response = await fetch(this.baseUrl, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${this.token}`,
+			},
+			body: JSON.stringify(payload),
+		});
+
+		if (!response.ok) {
+			console.error("Template resolution failed:", response.statusText);
+			throw new Error("Template resolution failed"); // Fallback to original template
+		}
+
+		return await response.text();
+	}
+}

src/main.tsx

@@ -1,5 +1,5 @@
 import App from "./App.tsx";
 import registerCard from "./utilities/registerCard.ts";
 
-registerCard("tldraw-react-card", App);
-registerCard("tldraw-react-card-editor", () => <div>Editor</div>);
+registerCard("ha-draw", App);
+registerCard("ha-draw-editor", () => <div>Editor</div>);

src/types/Entity.ts

@@ -0,0 +1,24 @@
+import { TLGeoShapeProps, TLTextShapeProps } from "tldraw";
+
+export interface GroupConfig {
+	entities: string[];
+	template?: string;
+	tldraw?: TlDrawParams;
+}
+
+export interface TlDrawParams {
+	id: string;
+	pos_x: number | null;
+	pos_y: number | null;
+	parameter: string;
+	valuetype: string;
+	isLocked: boolean;
+	on_error: string;
+	rotation: number;
+	opacity: number;
+	lastvalue: string;
+	//https://tldraw.dev/reference/tlschema/TLTextShapeProps
+	props: TLDrawProps;
+}
+
+export interface TLDrawProps extends TLGeoShapeProps, TLTextShapeProps {}

src/types/hass.ts

@@ -0,0 +1,29 @@
+import { GroupConfig } from "./Entity.ts";
+
+interface CardConfig {
+	groups?: GroupConfig[];
+}
+
+export interface HomeAssistantState {
+	states: {
+		[key: string]: {
+			state: string;
+			attributes: Record<string, any>;
+			[key: string]: any;
+		};
+	};
+	config: any;
+	bus: any;
+	services: any;
+	auth: {
+		data: {
+			access_token: string;
+			hassUrl: string;
+		};
+	};
+}
+
+export interface CardState {
+	hass: { value: HomeAssistantState };
+	config: { value: CardConfig };
+}

src/utilities/Colors.ts

@@ -0,0 +1,16 @@
+//https://tldraw.dev/reference/tlschema/DefaultColorStyle
+export const Colors = [
+	"black",
+	"blue",
+	"green",
+	"grey",
+	"light-blue",
+	"light-green",
+	"light-red",
+	"light-violet",
+	"orange",
+	"red",
+	"violet",
+	"white",
+	"yellow",
+];

src/utilities/drawBox.ts

@@ -1,13 +1,31 @@
-import { useEditor } from "tldraw";
-import Entity from "./Entity.ts";
-
-export default function DrawBox(entity: Entity, boxId: string): null {
-	const editor = useEditor();
+import { Editor } from "tldraw";
+import { GroupConfig } from "../types/Entity.ts";
+import { Colors } from "./Colors.ts";
 
+export default function DrawBox(editor: Editor, group: GroupConfig): null {
 	// Check if the shape already exists
+
+	const id = group.tldraw.id;
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 	// @ts-expect-error
-	const existingShape = editor.getShape(`shape:${boxId}`);
+	const existingShape = editor.getShape(id);
+
+	let setColor = null;
+	let boxType = "text";
+	let fill: string = "none";
+	if (group.tldraw.parameter === "value") {
+		//"https://tldraw.dev/reference/tlschema/TLTextShape"
+		boxType = "text";
+	} else if (group.tldraw.parameter === "fill") {
+		//"https://tldraw.dev/reference/tlschema/TLDrawShape"
+		boxType = "geo";
+		fill = "solid";
+		//console.log(Colors.indexOf(group.template), group.template)
+		if (Colors.indexOf(group.template) > -1) {
+			//console.log("setColor")
+			setColor = group.template;
+		}
+	}
 
 	if (!existingShape) {
 		// Create a new shape if it doesn't exist
@@ -16,66 +34,97 @@ export default function DrawBox(entity: Entity, boxId: string): null {
 			{
 				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 				// @ts-expect-error
-				id: `shape:${boxId}`,
-				type: "text",
+				id: id,
+				type: boxType,
 				x: 100,
 				y: 100,
-				props: { text: "uninitialized" },
+				//props: { text: "uninitialized" },
 			},
 		]);
 	}
 
-	const state: any = entity.state;
-	let newColor: string = entity.props.color;
-	if (state > entity.threshold) {
-		newColor = entity.limit_color;
-	}
-
 	const current_x = existingShape?.x;
 	const current_y = existingShape?.y;
 	// Update the shape's position
 	if (
-		entity.pos_x !== null &&
-		entity.pos_y !== null &&
-		current_x !== entity.pos_x &&
-		current_y !== entity.pos_y &&
+		group.tldraw.pos_x !== null &&
+		group.tldraw.pos_y !== null &&
+		current_x !== group.tldraw.pos_x &&
+		current_y !== group.tldraw.pos_y &&
 		current_x &&
 		current_y
 	) {
 		editor.updateShapes([
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-expect-error
-			{ id: `shape:${boxId}`, x: entity.pos_x, y: entity.pos_y },
+			{
+				// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+				// @ts-expect-error
+				id: group.tldraw.id,
+				x: group.tldraw.pos_x,
+				y: group.tldraw.pos_y,
+			},
 		]);
 	}
 
-	let text = state;
-	if (entity.unit) {
-		text += " " + entity.unit;
+	let text: string = group.template;
+
+	if (group.tldraw.valuetype === "absolute") {
+		const num = Number(group.tldraw.lastvalue);
+		const current = Number(text);
+		if (!isNaN(num) && !isNaN(current)) {
+			text = String(current + num);
+		}
 	}
 
-	// Update the shape's text
-	editor.updateShapes([
-		{
+	editor.updateShapes({
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-expect-error
+		id: id,
+		type: boxType,
+		rotation: group.tldraw.rotation,
+		opacity: group.tldraw.opacity,
+		isLocked: group.tldraw.isLocked,
+	});
+
+	if (boxType === "text") {
+		editor.updateShape({
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-expect-error
-			id: `shape:${boxId}`,
-			type: "text",
-			rotation: entity.rotation,
-			opacity: entity.opacity,
-			isLocked: entity.isLocked,
+			id: id,
 			props: {
-				autoSize: entity.props.autoSize,
-				color: newColor,
-				font: entity.props.font,
-				scale: entity.props.scale,
-				size: entity.props.size,
+				/*autoSize: group.tldraw.props.autoSize,
+					color: group.tldraw.props.color,
+					font: group.tldraw.props.font,
+					scale: group.tldraw.props.scale,
+					size: group.tldraw.props.size,*/
 				text: text,
-				textAlign: entity.props.textAlign,
-				w: entity.props.w,
+				/*textAlign: group.tldraw.props.textAlign,
+					w: group.tldraw.props.w,*/
 			},
-		},
-	]);
+		});
+		//https://tldraw.dev/reference/tlschema/TLGeoShapeProps
+	} else if (boxType === "geo") {
+		editor.updateShape({
+			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+			// @ts-expect-error
+			id: id,
+			props: {
+				//align: group.tldraw.props.align,
+				color: setColor,
+				//dash: group.tldraw.props.dash,
+				fill: fill,
+				/*font: group.tldraw.props.font,
+					geo: group.tldraw.props.geo,
+					growY: group.tldraw.props.growY,
+					h: group.tldraw.props.h,
+					labelColor: group.tldraw.props.labelColor,
+					scale: group.tldraw.props.scale,
+					size: group.tldraw.props.size,
+					//text: group.tldraw.props.text,
+					verticalAlign: group.tldraw.props.verticalAlign,
+					w: group.tldraw.props.w,*/
+			},
+		});
+	}
 
 	return null;
 }