dyadmisha
/
dune-weaver
cermin dari https://github.com/tuanchris/dune-weaver.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sand Table Controller</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../static/style.css">
</head>
<body>
    <h1>Sand Table Controller</h1>
    <div class="container">
        <!-- Left Column -->
        <div class="left-column">
            <div class="section">
                <h2>Serial Connection</h2>
                <label for="serial_ports">Available Ports:</label>
                <select id="serial_ports"></select>
                <div class="button-group">
                    <button onclick="connectSerial()">Connect</button>
                    <button onclick="disconnectSerial()">Disconnect</button>
                    <button onclick="restartSerial()">Restart</button>
                </div>
                <p id="serial_status" class="status">Status: Not connected</p>
            </div>

            <div class="section">
                <h2>Quick Actions</h2>
                <div class="button-group">
                    <button onclick="sendHomeCommand()">Home Device</button>
                    <button onclick="moveToCenter()">Move to Center</button>
                    <button onclick="moveToPerimeter()">Move to Perimeter</button>
                </br>
                    <button onclick="runClearIn()">Clear from In</button>
                    <button onclick="runClearOut()">Clear from Out</button>
                    <div class="coordinate-input">
                        <label for="theta_input">θ:</label>
                        <input type="number" id="theta_input" placeholder="Theta">
                        <label for="rho_input">ρ:</label>
                        <input type="number" id="rho_input" placeholder="Rho">
                        <button onclick="sendCoordinate()">Send</button>
                    </div>
                </div>
            </div>
            <div class="section">
                <h2>Preview</h2>
                <canvas id="patternPreviewCanvas" style="width: 100%; height: 100%;"></canvas>
                <p id="first_coordinate">First Coordinate: Not available</p>
                <p id="last_coordinate">Last Coordinate: Not available</p>
            </div>
        </div>

        <!-- Right Column -->
        <div class="right-column">
            <div class="section">
                <h2>Pattern Files</h2>
                <input type="text" id="search_pattern" placeholder="Search files..." oninput="searchPatternFiles()">
                <ul id="theta_rho_files"></ul>
                <div class="pre-execution-toggles">
                    <h3>Pre-Execution Action</h3>
                    <label>
                        <input type="radio" name="pre_execution" value="clear_in" id="clear_in"> Clear from In
                    </label>
                    <label>
                        <input type="radio" name="pre_execution" value="clear_out" id="clear_out"> Clear from Out
                    </label>
                    <label>
                        <input type="radio" name="pre_execution" value="none" id="no_action" checked> None
                    </label>
                </div>
                <div class="button-group">
                    <button id="run_button" disabled>Run Selected File</button>
                    <button onclick="stopExecution()" class="delete-button">Stop</button>
                </div>
            </div>
            <div class="section">
                <h2>Upload new files</h2>
                <div class="button-group">
                    <input type="file" id="upload_file">
                    <div class="button-group">
                        <button onclick="uploadThetaRho()">Upload</button>
                        <button id="delete_selected_button" class="delete-button" onclick="deleteSelectedFile()" disabled>Delete Selected File</button>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>

    <div id="status_log">
        <h2>Status Log</h2>
        <!-- Messages will be appended here -->
    </div>

    <script>
        let selectedFile = null;

        function logMessage(message) {
            const log = document.getElementById('status_log');
            const entry = document.createElement('p');
            entry.textContent = message;
            log.appendChild(entry);
            log.scrollTop = log.scrollHeight; // Keep log scrolled to the bottom
        }

        async function loadThetaRhoFiles() {
            logMessage('Loading Theta-Rho files...');
            const response = await fetch('/list_theta_rho_files');
            const files = await response.json();
            const ul = document.getElementById('theta_rho_files');
            ul.innerHTML = ''; // Clear current list

            files.forEach(file => {
                const li = document.createElement('li');
                li.textContent = file;

                // Highlight the selected file when clicked
                li.onclick = () => selectFile(file, li);

                ul.appendChild(li);
            });

            logMessage('Theta-Rho files loaded successfully.');
        }

        async function selectFile(file, listItem) {
            selectedFile = file;
        
            // Highlight the selected file
            document.querySelectorAll('#theta_rho_files li').forEach(li => li.classList.remove('selected'));
            listItem.classList.add('selected');
        
            // Enable buttons
            document.getElementById('run_button').disabled = false;
            document.getElementById('delete_selected_button').disabled = false;
        
            logMessage(`Selected file: ${file}`);
        
            // Fetch and preview the selected file
            await previewPattern(file);
        }

        async function uploadThetaRho() {
            const fileInput = document.getElementById('upload_file');
            const file = fileInput.files[0];
            if (!file) {
                logMessage('No file selected for upload.');
                return;
            }

            logMessage(`Uploading file: ${file.name}...`);
            const formData = new FormData();
            formData.append('file', file);

            const response = await fetch('/upload_theta_rho', {
                method: 'POST',
                body: formData
            });

            const result = await response.json();
            if (result.success) {
                logMessage(`File uploaded successfully: ${file.name}`);
                loadThetaRhoFiles();
            } else {
                logMessage(`Failed to upload file: ${file.name}`);
            }
        }

        async function deleteSelectedFile() {
            if (!selectedFile) {
                logMessage("No file selected for deletion.");
                return;
            }

            const userConfirmed = confirm(`Are you sure you want to delete the selected file "${selectedFile}"?`);
            if (!userConfirmed) return;

            logMessage(`Deleting file: ${selectedFile}...`);
            const response = await fetch('/delete_theta_rho_file', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ file_name: selectedFile }),
            });

            const result = await response.json();
            if (result.success) {
                const ul = document.getElementById('theta_rho_files');
                const selectedItem = Array.from(ul.children).find(li => li.classList.contains('selected'));
                if (selectedItem) selectedItem.remove();

                selectedFile = null;
                document.getElementById('run_button').disabled = true;
                document.getElementById('delete_selected_button').disabled = true;

                logMessage(`File deleted successfully: ${result.file_name}`);
            } else {
                logMessage(`Failed to delete file: ${selectedFile}`);
            }
        }

        async function runThetaRho() {
            if (!selectedFile) {
                logMessage("No file selected to run.");
                return;
            }
        
            // Get the selected pre-execution action
            const preExecutionAction = document.querySelector('input[name="pre_execution"]:checked').value;
        
            logMessage(`Running file: ${selectedFile} with pre-execution action: ${preExecutionAction}...`);
            const response = await fetch('/run_theta_rho', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ file_name: selectedFile, pre_execution: preExecutionAction })
            });
        
            const result = await response.json();
            if (result.success) {
                logMessage(`File running: ${selectedFile}`);
            } else {
                logMessage(`Failed to run file: ${selectedFile}`);
            }
        }

        async function stopExecution() {
            logMessage('Stopping execution...');
            const response = await fetch('/stop_execution', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage('Execution stopped.');
            } else {
                logMessage('Failed to stop execution.');
            }
        }

        async function loadSerialPorts() {
            const response = await fetch('/list_serial_ports');
            const ports = await response.json();
            const select = document.getElementById('serial_ports');
            select.innerHTML = '';
            ports.forEach(port => {
                const option = document.createElement('option');
                option.value = port;
                option.textContent = port;
                select.appendChild(option);
            });
            logMessage('Serial ports loaded.');
        }

        async function connectSerial() {
            const port = document.getElementById('serial_ports').value;
            const response = await fetch('/connect_serial', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ port })
            });
            const result = await response.json();
            if (result.success) {
                document.getElementById('serial_status').textContent = `Status: Connected to ${port}`;
                logMessage(`Connected to serial port: ${port}`);
            } else {
                logMessage(`Error connecting to serial port: ${result.error}`);
            }
        }

        async function disconnectSerial() {
            const response = await fetch('/disconnect_serial', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                document.getElementById('serial_status').textContent = 'Status: Disconnected';
                logMessage('Serial port disconnected.');
            } else {
                logMessage(`Error disconnecting: ${result.error}`);
            }
        }

        async function restartSerial() {
            const port = document.getElementById('serial_ports').value;
            const response = await fetch('/restart_serial', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ port })
            });
            const result = await response.json();
            if (result.success) {
                document.getElementById('serial_status').textContent = `Status: Restarted connection to ${port}`;
                logMessage('Serial connection restarted.');
            } else {
                logMessage(`Error restarting serial connection: ${result.error}`);
            }
        }
        async function sendHomeCommand() {
            const response = await fetch('/send_home', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage('HOME command sent successfully.');
            } else {
                logMessage('Failed to send HOME command.');
            }
        }

        async function runClearIn() {
            await runFile('clear_from_in.thr');
        }

        async function runClearOut() {
            await runFile('clear_from_out.thr');
        }

        async function runFile(fileName) {
            const response = await fetch(`/run_theta_rho_file/${fileName}`, { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage(`Running file: ${fileName}`);
            } else {
                logMessage(`Failed to run file: ${fileName}`);
            }
        }

        let allFiles = []; // Store all files for filtering

        async function loadThetaRhoFiles() {
            logMessage('Loading Theta-Rho files...');
            const response = await fetch('/list_theta_rho_files');
            const files = await response.json();
            allFiles = files; // Store the full list of files
            displayFiles(allFiles); // Initially display all files
            logMessage('Theta-Rho files loaded successfully.');
        }

        function displayFiles(files) {
            const ul = document.getElementById('theta_rho_files');
            ul.innerHTML = ''; // Clear current list

            files.forEach(file => {
                const li = document.createElement('li');
                li.textContent = file;

                // Highlight the selected file when clicked
                li.onclick = () => selectFile(file, li);

                ul.appendChild(li);
            });
        }

        function searchPatternFiles() {
            const searchInput = document.getElementById('search_pattern').value.toLowerCase();
            const filteredFiles = allFiles.filter(file => file.toLowerCase().includes(searchInput));
            displayFiles(filteredFiles); // Display only matching files
        }

        async function moveToCenter() {
            logMessage('Moving to center...');
            const response = await fetch('/move_to_center', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage('Moved to center successfully.');
            } else {
                logMessage(`Failed to move to center: ${result.error}`);
            }
        }
        
        async function moveToPerimeter() {
            logMessage('Moving to perimeter...');
            const response = await fetch('/move_to_perimeter', { method: 'POST' });
            const result = await response.json();
            if (result.success) {
                logMessage('Moved to perimeter successfully.');
            } else {
                logMessage(`Failed to move to perimeter: ${result.error}`);
            }
        }

        async function sendCoordinate() {
            const theta = parseFloat(document.getElementById('theta_input').value);
            const rho = parseFloat(document.getElementById('rho_input').value);
        
            if (isNaN(theta) || isNaN(rho)) {
                logMessage('Invalid input: θ and ρ must be numbers.');
                return;
            }
        
            logMessage(`Sending coordinate: θ=${theta}, ρ=${rho}...`);
            const response = await fetch('/send_coordinate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ theta, rho })
            });
        
            const result = await response.json();
            if (result.success) {
                logMessage(`Coordinate executed successfully: θ=${theta}, ρ=${rho}`);
            } else {
                logMessage(`Failed to execute coordinate: ${result.error}`);
            }
        }

        async function previewPattern(fileName) {
            logMessage(`Fetching data to preview file: ${fileName}...`);
            const response = await fetch('/preview_thr', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ file_name: fileName })
            });
        
            const result = await response.json();
            if (result.success) {
                const coordinates = result.coordinates;
        
                // Update coordinates display
                if (coordinates.length > 0) {
                    const firstCoord = coordinates[0];
                    const lastCoord = coordinates[coordinates.length - 1];
                    document.getElementById('first_coordinate').textContent = `First Coordinate: θ=${firstCoord[0]}, ρ=${firstCoord[1]}`;
                    document.getElementById('last_coordinate').textContent = `Last Coordinate: θ=${lastCoord[0]}, ρ=${lastCoord[1]}`;
                } else {
                    document.getElementById('first_coordinate').textContent = 'First Coordinate: Not available';
                    document.getElementById('last_coordinate').textContent = 'Last Coordinate: Not available';
                }
        
                renderPattern(coordinates);
            } else {
                logMessage(`Failed to fetch preview for file: ${result.error}`);
                // Clear the coordinate display on error
                document.getElementById('first_coordinate').textContent = 'First Coordinate: Not available';
                document.getElementById('last_coordinate').textContent = 'Last Coordinate: Not available';
            }
        }
        
        function renderPattern(coordinates) {
            const canvas = document.getElementById('patternPreviewCanvas');
            const ctx = canvas.getContext('2d');
        
            // Make canvas full screen
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        
            // Convert polar to Cartesian and draw the pattern
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const maxRho = Math.max(...coordinates.map(coord => coord[1]));
            const scale = Math.min(canvas.width, canvas.height) / (2 * maxRho); // Scale to fit within the screen
        
            ctx.beginPath();
            coordinates.forEach(([theta, rho], index) => {
                const x = centerX + rho * Math.cos(theta) * scale;
                const y = centerY - rho * Math.sin(theta) * scale; // Invert y-axis for canvas
                if (index === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            });
            ctx.closePath();
            ctx.stroke();
            logMessage('Pattern preview rendered at full screen.');
        }

        async function checkSerialStatus() {
            const response = await fetch('/serial_status');
            const status = await response.json();
            const statusElement = document.getElementById('serial_status');
            
            if (status.connected) {
                const port = status.port || 'Unknown'; // Fallback if port is undefined
                statusElement.textContent = `Status: Connected to ${port}`;
                logMessage(`Reconnected to serial port: ${port}`);
            } else {
                statusElement.textContent = 'Status: Not connected';
                logMessage('No active serial connection.');
            }
        }
        
        // Call this function on page load
        checkSerialStatus();

        // Initial load of serial ports and Theta-Rho files
        loadSerialPorts();
        loadThetaRhoFiles();
        
        document.getElementById('run_button').onclick = runThetaRho;

    </script>
</body>
</html>