static/js/tools.js - master - efr/SmartCity

static/js/tools.js
205 строк7 KB
Sergey
add_project
27 фев 2025, 19:33
27 фев 2025, 19:337eeda08
import { LineTool } from '/static/js/tools/line.js';
import { ZoneTool } from '/static/js/tools/zone.js';
import { TrafficTool } from '/static/js/tools/traffic.js';

const container = document.getElementById('container');
const drawLayer = document.getElementById('draw-layer');
let activeTool = null;

document.addEventListener('DOMContentLoaded', function() {
    fetch('/target-classes')
        .then(response => response.json())
        .then(data => {
            const targetClasses = Object.fromEntries(data);
            window.targetClasses = targetClasses;
            console.log('Target Classes:', targetClasses);
        })
        .catch((error) => {
            console.error('Error:', error);
        });
});
let selectedClasses = new Set();

function scaleCoordinates(x, y, canvas) {
    const video = document.getElementById('video');
    if (!video) {
        console.error('Video element not found');
        return { x, y };
    }
    const videoWidth = video.videoWidth;
    const videoHeight = video.videoHeight;
    const rect = canvas.getBoundingClientRect();
    const scaleX = videoWidth / rect.width;
    const scaleY = videoHeight / rect.height;
    return {
        x: x * scaleX,
        y: y * scaleY
    };
}

function showClassModal() {
    const modal = document.getElementById('classModal');
    const buttonsContainer = document.getElementById('classButtons');

    buttonsContainer.innerHTML = Object.values(targetClasses)
        .map(className => `
            <button class="class-btn ${selectedClasses.has(className) ? 'selected' : ''}"
                    data-class="${className}">
                ${className}
            </button>
        `).join('');

    modal.style.display = 'flex';

    buttonsContainer.querySelectorAll('.class-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const className = this.dataset.class;
            this.classList.toggle('selected');

            if(selectedClasses.has(className)) {
                selectedClasses.delete(className);
            } else {
                selectedClasses.add(className);
            }
        });
    });

    const closeModal = () => {
        modal.style.display = 'none';
        document.onclick = null;
    };

    document.querySelector('.modal-close').onclick = closeModal;
    document.getElementById('confirmClasses').onclick = () => {
        if (tools.line) {
            const classIds = Array.from(selectedClasses).map(className => {
                return Object.entries(targetClasses).find(
                    ([id, name]) => name === className)[0];
            });
            tools.line.setSelectedClasses(classIds);
        }
        closeModal();
    };

    document.onclick = (e) => {
        if(e.target === modal) closeModal();
    };
}

function showTrafficTypeModal() {
    const modal = document.getElementById('classModal');
    const buttonsContainer = document.getElementById('classButtons');
    buttonsContainer.innerHTML = `
        <button class="class-btn" data-class="1">pedestrian</button>
        <button class="class-btn" data-class="2">auto</button>
    `;
    modal.style.display = 'flex';

    buttonsContainer.querySelectorAll('.class-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            buttonsContainer.querySelectorAll('.class-btn').forEach(b => b.classList.remove('selected'));
            this.classList.add('selected');
            tools.traffic.setSelectedClass(this.dataset.class);
        });
    });

    const closeModal = () => {
        modal.style.display = 'none';
        document.onclick = null;
    };

    document.querySelector('.modal-close').onclick = closeModal;
    document.getElementById('confirmClasses').onclick = closeModal;

    document.onclick = (e) => {
        if(e.target === modal) closeModal();
    };
}

const tools = {
    line: new LineTool(container, drawLayer, sendToBackend),
    zone: new ZoneTool(container, drawLayer, sendToBackend),
    traffic: new TrafficTool(container, drawLayer, sendToBackend)
};

document.querySelectorAll('.tool').forEach(tool => {
    tool.addEventListener('click', () => {
        document.querySelectorAll('.tool').forEach(t => t.classList.remove('active'));
        if (activeTool) activeTool.deactivate();
        const toolName = tool.dataset.tool;
        tool.classList.add('active');
        activeTool = tools[toolName];
        activeTool.activate();
        if (toolName === 'line') {
            showClassModal();
        } else if (toolName === 'traffic') {
            showTrafficTypeModal();
        }
    });
});

async function sendToBackend(data) {
    try {
        const manifestUrl = localStorage.getItem('manifestUrl');
        if (!manifestUrl) {
            console.error('Camera manifest URL not found');
            return;
        }
        data.camera_url = manifestUrl;
        if (data.type === 'zone') {
            const { x, y, width, height } = data.coordinates;
            const scaledStart = scaleCoordinates(x, y, drawLayer);
            const scaledEnd = scaleCoordinates(x + width, y + height, drawLayer);
            
            data.coordinates = {
                x: scaledStart.x,
                y: scaledStart.y,
                width: scaledEnd.x - scaledStart.x,
                height: scaledEnd.y - scaledStart.y
            };
        }
        if (data.coordinates) {
            if (data.type === 'line') {
                const { x1, y1, x2, y2 } = data.coordinates;
                const scaledStart = scaleCoordinates(x1, y1, drawLayer);
                const scaledEnd = scaleCoordinates(x2, y2, drawLayer);
                data.coordinates = {
                    x1: scaledStart.x,
                    y1: scaledStart.y,
                    x2: scaledEnd.x,
                    y2: scaledEnd.y
                };
            }
        }

        if (data.type === 'traffic') {
            const { x, y, width, height } = data.coordinates;
            const scaledStart = scaleCoordinates(x, y, drawLayer);
            const scaledEnd = scaleCoordinates(x + width, y + height, drawLayer);
            
            data.coordinates = {
                x: scaledStart.x,
                y: scaledStart.y,
                width: scaledEnd.x - scaledStart.x,
                height: scaledEnd.y - scaledStart.y
            };
        }

        if (data.type === 'line' && tools.line) {
            data.class_ids = tools.line.getSelectedClasses();
        }
        if (data.type === 'traffic' && tools.traffic) {
            data.class_id = tools.traffic.getSelectedClass();
        }

        const response = await fetch('http://localhost:8000/api/tools', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

        if (!response.ok) throw new Error('Server error');
    } catch (error) {
        console.error('Error saving data:', error);
    }
}