@dssp/supervision 1.0.0-alpha.41 → 1.0.0-alpha.47

package/dist-client/pages/building-inspection/building-inspection-detail-camera.d.ts

@@ -1,17 +1,40 @@
 import '@material/web/icon/icon.js';
 import '@operato/input/ox-input-switch.js';
 import '@operato/mini-map/ox-zoomable-image.js';
+import '@material/web/progress/circular-progress.js';
 import { PropertyValues } from 'lit';
 import { PageView } from '@operato/shell';
 import { PageLifecycle } from '@operato/shell/dist/src/app/pages/page-view';
 import './component/building-inspection-detail-header';
 export declare class BuildingInspectionCamera extends PageView {
     static styles: import("lit").CSSResult[];
+    private KEYPOINT_RULER_API_BASE_URL;
     project: any;
     buildingInspection: any;
     buildingInspectionId: string;
-    capturedImage: string | null;
-    originImage: string | null;
+    capturedVideoUrl: string | null;
+    videoFile: File | null;
+    frame: any | null;
+    analyzing: boolean;
+    selectedPoints: {
+        x1: number | null;
+        y1: number | null;
+        x2: number | null;
+        y2: number | null;
+    };
+    frameNaturalWidth: number;
+    frameNaturalHeight: number;
+    displayedImageRect: {
+        width: number;
+        height: number;
+        left: number;
+        top: number;
+    } | null;
+    distance: number | null;
+    unit: string | null;
+    private frameImageEl;
+    private imageWrapperEl;
+    private cameraInputEl;
     get context(): {
         title: string;
     };
@@ -20,6 +43,12 @@ export declare class BuildingInspectionCamera extends PageView {
     pageUpdated(changes: any, lifecycle: PageLifecycle): Promise<void>;
     initBuildingInspection(buildingInspectionId?: string): Promise<void>;
     private _getProjectByBuildingComplexId;
-    private toggleAI;
-    private handleImageCapture;
+    private _onVideoSelected;
+    private _onAnalyzeVideo;
+    private _onRetry;
+    private _onImageLoad;
+    private _onImageClick;
+    private _hasTwoPoints;
+    private _renderMarkers;
+    private _onAnalyzePhoto;
 }

package/dist-client/pages/building-inspection/building-inspection-detail-camera.js

@@ -2,9 +2,10 @@ import { __decorate, __metadata } from "tslib";
 import '@material/web/icon/icon.js';
 import '@operato/input/ox-input-switch.js';
 import '@operato/mini-map/ox-zoomable-image.js';
+import '@material/web/progress/circular-progress.js';
 import gql from 'graphql-tag';
 import { css, html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, state, query } from 'lit/decorators.js';
 import { PageView } from '@operato/shell';
 import { CommonGristStyles, ScrollbarStyles } from '@operato/styles';
 import { client } from '@operato/graphql';
@@ -12,11 +13,73 @@ import './component/building-inspection-detail-header';
 let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
     constructor() {
         super(...arguments);
+        this.KEYPOINT_RULER_API_BASE_URL = 'https://hatiolab-korea-uni.ettisoft.com';
         this.project = {};
         this.buildingInspection = {};
         this.buildingInspectionId = '';
-        this.capturedImage = null; // For storing the captured image
-        this.originImage = null;
+        this.capturedVideoUrl = null;
+        this.videoFile = null;
+        this.frame = null;
+        this.analyzing = false;
+        this.selectedPoints = {
+            x1: null,
+            y1: null,
+            x2: null,
+            y2: null
+        };
+        this.frameNaturalWidth = 0;
+        this.frameNaturalHeight = 0;
+        this.displayedImageRect = null;
+        this.distance = null;
+        this.unit = null;
+        this._onImageLoad = () => {
+            if (!this.frameImageEl || !this.imageWrapperEl)
+                return;
+            const img = this.frameImageEl;
+            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
+            const imgRect = img.getBoundingClientRect();
+            this.frameNaturalWidth = img.naturalWidth;
+            this.frameNaturalHeight = img.naturalHeight;
+            this.displayedImageRect = {
+                width: imgRect.width,
+                height: imgRect.height,
+                left: imgRect.left - wrapperRect.left,
+                top: imgRect.top - wrapperRect.top
+            };
+        };
+        this._onImageClick = (event) => {
+            if (!this.frameImageEl || !this.imageWrapperEl)
+                return;
+            const imgRect = this.frameImageEl.getBoundingClientRect();
+            const wrapperRect = this.imageWrapperEl.getBoundingClientRect();
+            const clientX = event.clientX;
+            const clientY = event.clientY;
+            // Ignore clicks outside the displayed image area
+            if (clientX < imgRect.left || clientX > imgRect.right || clientY < imgRect.top || clientY > imgRect.bottom) {
+                return;
+            }
+            const relativeX = clientX - imgRect.left;
+            const relativeY = clientY - imgRect.top;
+            const xOnNatural = Math.round((relativeX * this.frameNaturalWidth) / imgRect.width);
+            const yOnNatural = Math.round((relativeY * this.frameNaturalHeight) / imgRect.height);
+            if (this.selectedPoints.x1 === null || this.selectedPoints.y1 === null) {
+                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x1: xOnNatural, y1: yOnNatural });
+            }
+            else if (this.selectedPoints.x2 === null || this.selectedPoints.y2 === null) {
+                this.selectedPoints = Object.assign(Object.assign({}, this.selectedPoints), { x2: xOnNatural, y2: yOnNatural });
+            }
+            else {
+                // 세 번째 클릭부터는 초기화 후 첫 점으로 설정
+                this.selectedPoints = { x1: xOnNatural, y1: yOnNatural, x2: null, y2: null };
+            }
+            // Update displayed rect cache (in case layout changed)
+            this.displayedImageRect = {
+                width: imgRect.width,
+                height: imgRect.height,
+                left: imgRect.left - wrapperRect.left,
+                top: imgRect.top - wrapperRect.top
+            };
+        };
     }
     get context() {
         return {
@@ -24,7 +87,7 @@ let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
         };
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         return html `
       <building-inspection-detail-header
         .buildingInspectionId=${(_a = this.buildingInspection) === null || _a === void 0 ? void 0 : _a.id}
@@ -35,31 +98,58 @@ let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
       ></building-inspection-detail-header>
 
       <div body>
-        <!-- Display the captured image if available -->
+        <!-- Preview selected or recorded video -->
         <div preview>
-          ${this.capturedImage
-            ? html `<ox-zoomable-image src=${this.capturedImage} restrict-boundary></ox-zoomable-image>`
-            : html `<md-icon>photo_camera</md-icon>`}
+          <!-- analyzing 로딩 중일 때 -->
+          ${this.analyzing
+            ? html `<div class="loading-container">
+                <md-circular-progress indeterminate></md-circular-progress>
+                <div class="loading-text">분석 중...</div>
+              </div>`
+            : // 동영상 분석 완료 단일 프레임 표시
+                this.frame
+                    ? html `
+                  <div class="image-wrapper" @click=${this._onImageClick}>
+                    <img
+                      id="frameImage"
+                      src="${this.KEYPOINT_RULER_API_BASE_URL + ((_j = this.frame) === null || _j === void 0 ? void 0 : _j.download_url)}"
+                      alt="frame"
+                      loading="eager"
+                      @load=${this._onImageLoad}
+                    />
+                    ${this._renderMarkers()}
+                  </div>
+                `
+                    : // 동영상 선택 후 동영상 프리뷰
+                        this.capturedVideoUrl
+                            ? html `<video src=${this.capturedVideoUrl} controls playsinline></video>`
+                            : // 초기 상태, 동영상 선택 전
+                                html `<md-icon>videocam</md-icon>`}
         </div>
 
         <div controls>
-          <!-- AI toggle switch -->
-          <div class="switch-container">
-            <label>AI 기능</label>
-            <ox-input-switch type="checkbox" @change=${this.toggleAI} round></ox-input-switch>
-          </div>
+          <span class="controls-title">동영상 촬영</span>
 
-          <!-- Camera shutter button -->
+          <!-- Camera shutter button (record video) -->
           <div class="camera-shutter">
             <md-icon>camera</md-icon>
-            <input type="file" accept="image/*" capture @change="${this.handleImageCapture}" />
+            <input id="cameraInput" type="file" accept="video/*" capture @change="${this._onVideoSelected}" />
           </div>
 
           <!-- Action buttons -->
-          <div class="action-buttons">
-            <button class="save">저장</button>
-            <button class="retry">재촬영</button>
-            <button class="cancel" @click=${() => (this.capturedImage = this.originImage)}>취소</button>
+          <div action-buttons>
+            ${this.frame
+            ? html `
+                  <button class="photo" ?disabled=${this.analyzing || !this._hasTwoPoints()} @click=${this._onAnalyzePhoto}>
+                    사진 분석
+                  </button>
+                `
+            : html `
+                  <button class="save" ?disabled=${this.analyzing || !this.capturedVideoUrl} @click=${this._onAnalyzeVideo}>
+                    동영상 분석
+                  </button>
+                `}
+            <button class="retry" @click=${this._onRetry}>초기화</button>
           </div>
         </div>
       </div>
@@ -133,20 +223,162 @@ let BuildingInspectionCamera = class BuildingInspectionCamera extends PageView {
             return;
         this.project = response.data.project;
     }
-    toggleAI(e) {
-        const isChecked = e.target.checked;
-        console.log(`AI 기능: ${isChecked ? 'ON' : 'OFF'}`);
-        // Implement additional AI functionality toggling if needed
-    }
-    handleImageCapture(event) {
+    _onVideoSelected(event) {
+        var _a;
         const input = event.target;
-        if (input.files && input.files[0]) {
-            const reader = new FileReader();
-            reader.onload = e => {
-                var _a;
-                this.capturedImage = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+        const file = (_a = input === null || input === void 0 ? void 0 : input.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (!file)
+            return;
+        // Only allow video files
+        if (!file.type.startsWith('video/')) {
+            console.warn('선택된 파일이 동영상이 아닙니다.');
+            return;
+        }
+        // Revoke old object URL if exists
+        if (this.capturedVideoUrl) {
+            URL.revokeObjectURL(this.capturedVideoUrl);
+        }
+        this.videoFile = file;
+        this.capturedVideoUrl = URL.createObjectURL(file);
+    }
+    async _onAnalyzeVideo() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (!this.videoFile) {
+            console.warn('선택된 동영상이 없습니다.');
+            return;
+        }
+        try {
+            this.analyzing = true;
+            const form = new FormData();
+            form.append('files', this.videoFile, this.videoFile.name);
+            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
+                method: 'POST',
+                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
+                body: form
+            });
+            const data = await response.json();
+            this.frame = {
+                file_id: (_b = (_a = data === null || data === void 0 ? void 0 : data.result) === null || _a === void 0 ? void 0 : _a.output_files[0]) === null || _b === void 0 ? void 0 : _b.file_id,
+                download_url: (_d = (_c = data === null || data === void 0 ? void 0 : data.result) === null || _c === void 0 ? void 0 : _c.output_files[0]) === null || _d === void 0 ? void 0 : _d.download_url,
+                file_path: (_f = (_e = data === null || data === void 0 ? void 0 : data.result) === null || _e === void 0 ? void 0 : _e.frames[0]) === null || _f === void 0 ? void 0 : _f.file_path,
+                calibration: (_g = data === null || data === void 0 ? void 0 : data.result) === null || _g === void 0 ? void 0 : _g.calibration
             };
-            reader.readAsDataURL(input.files[0]);
+        }
+        catch (error) {
+            console.error('동영상 업로드 실패:', error);
+        }
+        finally {
+            this.analyzing = false;
+        }
+    }
+    _onRetry() {
+        // Clear current selection and reopen camera
+        if (this.capturedVideoUrl) {
+            URL.revokeObjectURL(this.capturedVideoUrl);
+        }
+        this.capturedVideoUrl = null;
+        this.videoFile = null;
+        this.frame = null;
+        this.selectedPoints = { x1: null, y1: null, x2: null, y2: null };
+        this.displayedImageRect = null;
+        this.frameNaturalWidth = 0;
+        this.frameNaturalHeight = 0;
+        this.cameraInputEl.value = '';
+        this.distance = null;
+        this.unit = null;
+    }
+    _hasTwoPoints() {
+        const { x1, y1, x2, y2 } = this.selectedPoints;
+        return x1 !== null && y1 !== null && x2 !== null && y2 !== null;
+    }
+    _renderMarkers() {
+        if (!this.displayedImageRect)
+            return html ``;
+        const { left, top, width, height } = this.displayedImageRect;
+        const { x1, y1, x2, y2 } = this.selectedPoints;
+        const toDisplay = (x, y) => {
+            const dx = left + (x * width) / (this.frameNaturalWidth || 1);
+            const dy = top + (y * height) / (this.frameNaturalHeight || 1);
+            return { dx, dy };
+        };
+        return html `
+      ${x1 !== null && y1 !== null
+            ? (() => {
+                const p = toDisplay(x1, y1);
+                return html `<div class="point-marker point-1" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
+            })()
+            : ''}
+      ${x2 !== null && y2 !== null
+            ? (() => {
+                const p = toDisplay(x2, y2);
+                return html `<div class="point-marker point-2" style="left:${p.dx}px; top:${p.dy}px;"></div>`;
+            })()
+            : ''}
+      ${this._hasTwoPoints()
+            ? (() => {
+                const p1 = toDisplay(x1, y1);
+                const p2 = toDisplay(x2, y2);
+                const x = Math.min(p1.dx, p2.dx);
+                const y = Math.min(p1.dy, p2.dy);
+                const w = Math.abs(p1.dx - p2.dx);
+                const h = Math.abs(p1.dy - p2.dy);
+                const cx = (p1.dx + p2.dx) / 2;
+                const cy = (p1.dy + p2.dy) / 2;
+                return html `
+              <svg class="line-overlay" style="left:${x}px; top:${y}px; width:${w}px; height:${h}px;">
+                <line
+                  x1=${p1.dx < p2.dx ? 0 : w}
+                  y1=${p1.dy < p2.dy ? 0 : h}
+                  x2=${p1.dx < p2.dx ? w : 0}
+                  y2=${p1.dy < p2.dy ? h : 0}
+                  stroke="#ff9800"
+                  stroke-width="3"
+                />
+              </svg>
+              ${this.distance !== null && this.unit
+                    ? html `<div class="distance-label" style="left:${cx}px; top:${cy}px;">${this.distance} ${this.unit}</div>`
+                    : ''}
+            `;
+            })()
+            : ''}
+    `;
+    }
+    async _onAnalyzePhoto() {
+        if (!this.frame) {
+            console.warn('분석할 사진이 없습니다.');
+            return;
+        }
+        if (!this._hasTwoPoints()) {
+            console.warn('두 점을 먼저 선택해 주세요.');
+            return;
+        }
+        try {
+            this.analyzing = true;
+            const payload = {
+                x1: this.selectedPoints.x1,
+                y1: this.selectedPoints.y1,
+                x2: this.selectedPoints.x2,
+                y2: this.selectedPoints.y2,
+                file_path: this.frame.file_path,
+                calibration: this.frame.calibration
+            };
+            const form = new FormData();
+            form.append('input', JSON.stringify(payload));
+            const response = await fetch(`${this.KEYPOINT_RULER_API_BASE_URL}/api/run/keypoint-ruler`, {
+                method: 'POST',
+                headers: { Authorization: `Basic ${btoa('admin:admin1234')}` },
+                body: form
+            });
+            const result = await response.json();
+            const { distance, unit } = result.result || {};
+            this.distance = distance;
+            this.unit = unit;
+        }
+        catch (error) {
+            console.error('사진 분석 실패:', error);
+        }
+        finally {
+            this.analyzing = false;
         }
     }
 };
@@ -156,11 +388,11 @@ BuildingInspectionCamera.styles = [
     css `
       :host {
         display: grid;
-        grid-template-rows: 75px auto;
+        grid-template-rows: 75px 1fr;
         color: #4e5055;
         width: 100%;
+        height: 100%;
         background-color: #f7f7f7;
-        overflow-y: auto;
       }
 
       div[body] {
@@ -168,6 +400,7 @@ BuildingInspectionCamera.styles = [
         justify-items: center;
         gap: var(--spacing-medium);
         margin: var(--spacing-medium);
+        min-height: 0;
       }
 
       div[preview] {
@@ -178,6 +411,8 @@ BuildingInspectionCamera.styles = [
         display: flex;
         justify-content: center;
         align-items: center;
+        min-height: 0;
+        overflow: hidden;
       }
 
       div[preview] img {
@@ -186,10 +421,131 @@ BuildingInspectionCamera.styles = [
         object-fit: contain;
       }
 
+      div[preview] video {
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+      }
+
       div[preview] md-icon {
         --md-icon-size: 160px;
       }
 
+      .loading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+      }
+
+      .loading-text {
+        font-size: 14px;
+        color: #666;
+      }
+
+      .frame-container {
+        width: 100%;
+        height: 100%;
+        max-height: 100%;
+        min-height: 0;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 12px;
+      }
+
+      .frames-header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        font-size: 20px;
+        font-weight: 700;
+        color: #333;
+        text-align: center;
+        padding-block: 8px;
+      }
+
+      .frames-count {
+        font-size: 16px;
+        color: #777;
+        font-weight: 600;
+      }
+
+      .frames-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: 12px;
+      }
+
+      .frame-item {
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        overflow: hidden;
+        background: #fff;
+        cursor: pointer;
+        transition:
+          box-shadow 0.2s,
+          transform 0.1s;
+      }
+
+      .frame-item:hover {
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transform: translateY(-1px);
+      }
+
+      .frame-item img {
+        display: block;
+        width: 100%;
+        height: 120px;
+        object-fit: cover;
+      }
+
+      .image-wrapper {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        align-content: center;
+      }
+
+      .point-marker {
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        border: 2px solid #fff;
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
+      }
+
+      .point-1 {
+        background-color: #e53935;
+      }
+
+      .point-2 {
+        background-color: #1e88e5;
+      }
+
+      .line-overlay {
+        position: absolute;
+        pointer-events: none;
+      }
+
+      .distance-label {
+        position: absolute;
+        background: rgba(0, 0, 0, 0.7);
+        color: #fff;
+        font-size: 14px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        transform: translate(-50%, -120%);
+        pointer-events: none;
+        white-space: nowrap;
+      }
+
       div[controls] {
         width: 240px;
         display: flex;
@@ -202,6 +558,7 @@ BuildingInspectionCamera.styles = [
         display: flex;
         flex-direction: row;
         justify-content: space-between;
+        gap: 15px;
       }
 
       .switch-container {
@@ -226,6 +583,14 @@ BuildingInspectionCamera.styles = [
         position: relative;
       }
 
+      .controls-title {
+        font-size: 18px;
+        font-weight: 700;
+        color: #333;
+        margin-bottom: 8px;
+        text-align: center;
+      }
+
       .camera-shutter md-icon {
         --md-icon-size: 100px;
       }
@@ -251,6 +616,11 @@ BuildingInspectionCamera.styles = [
       button.save {
         background-color: #4caf50;
         color: white;
+
+        &:disabled {
+          background-color: #ccc;
+          cursor: default;
+        }
       }
 
       button.retry {
@@ -258,9 +628,14 @@ BuildingInspectionCamera.styles = [
         color: white;
       }
 
-      button.cancel {
-        background-color: #d9534f;
+      button.photo {
+        background-color: #1e88e5;
         color: white;
+
+        &:disabled {
+          background-color: #ccc;
+          cursor: default;
+        }
       }
     `
 ];
@@ -279,11 +654,55 @@ __decorate([
 __decorate([
     state(),
     __metadata("design:type", Object)
-], BuildingInspectionCamera.prototype, "capturedImage", void 0);
+], BuildingInspectionCamera.prototype, "capturedVideoUrl", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionCamera.prototype, "videoFile", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionCamera.prototype, "frame", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], BuildingInspectionCamera.prototype, "analyzing", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)
-], BuildingInspectionCamera.prototype, "originImage", void 0);
+], BuildingInspectionCamera.prototype, "selectedPoints", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], BuildingInspectionCamera.prototype, "frameNaturalWidth", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Number)
+], BuildingInspectionCamera.prototype, "frameNaturalHeight", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionCamera.prototype, "displayedImageRect", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionCamera.prototype, "distance", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], BuildingInspectionCamera.prototype, "unit", void 0);
+__decorate([
+    query('img#frameImage'),
+    __metadata("design:type", HTMLImageElement)
+], BuildingInspectionCamera.prototype, "frameImageEl", void 0);
+__decorate([
+    query('div.image-wrapper'),
+    __metadata("design:type", HTMLDivElement)
+], BuildingInspectionCamera.prototype, "imageWrapperEl", void 0);
+__decorate([
+    query('#cameraInput'),
+    __metadata("design:type", HTMLInputElement)
+], BuildingInspectionCamera.prototype, "cameraInputEl", void 0);
 BuildingInspectionCamera = __decorate([
     customElement('building-inspection-detail-camera')
 ], BuildingInspectionCamera);