utils/signal_drawing.html from izikeros/trend_classifier

utils/signal_drawing.html
Summary

Maintainability

Test Coverage

Issues
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Signal Designer</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }
        canvas {
            border: 1px solid #000;
            margin-bottom: 20px;
        }
        button {
            font-size: 16px;
            padding: 10px 20px;
            margin: 0 10px;
        }
        .checkbox-container {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Signal Designer</h1>
    <canvas id="signalCanvas" width="600" height="400"></canvas>
    <div>
        <button id="clearBtn">Clear Signal</button>
        <button id="downloadBtn">Download Signal</button>
    </div>
    <div class="checkbox-container">
        <input type="checkbox" id="downloadImage" name="downloadImage">
        <label for="downloadImage">Download image as well</label>
    </div>

    <script>
        const canvas = document.getElementById('signalCanvas');
        const ctx = canvas.getContext('2d');
        const downloadBtn = document.getElementById('downloadBtn');
        const clearBtn = document.getElementById('clearBtn');
        const downloadImageCheckbox = document.getElementById('downloadImage');

        const width = canvas.width;
        const height = canvas.height;
        const xPoints = 200;
        const yValues = new Array(xPoints).fill(height / 2);

        let isDrawing = false;

        function drawSignal() {
            ctx.clearRect(0, 0, width, height);
            ctx.beginPath();
            ctx.moveTo(0, yValues[0]);
            for (let i = 1; i < xPoints; i++) {
                ctx.lineTo(i * (width / xPoints), yValues[i]);
            }
            ctx.stroke();
        }

        function updateYValue(x, y) {
            const index = Math.floor(x / (width / xPoints));
            if (index >= 0 && index < xPoints) {
                yValues[index] = y;
            }
        }

        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            updateYValue(e.offsetX, e.offsetY);
            drawSignal();
        });

        canvas.addEventListener('mousemove', (e) => {
            if (isDrawing) {
                updateYValue(e.offsetX, e.offsetY);
                drawSignal();
            }
        });

        canvas.addEventListener('mouseup', () => {
            isDrawing = false;
        });

        canvas.addEventListener('mouseleave', () => {
            isDrawing = false;
        });

        downloadBtn.addEventListener('click', () => {
            const fileName = prompt("Enter a name for your signal:", "signal_data");
            if (fileName) {
                const signalData = {
                    x: Array.from({length: xPoints}, (_, i) => i),
                    y: yValues
                };

                const jsonString = JSON.stringify(signalData, null, 2);
                const jsonBlob = new Blob([jsonString], {type: 'application/json'});
                downloadFile(jsonBlob, `${fileName}.json`);

                if (downloadImageCheckbox.checked) {
                    canvas.toBlob((blob) => {
                        downloadFile(blob, `${fileName}.png`);
                    }, 'image/png');
                }
            }
        });

        function downloadFile(blob, fileName) {
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = fileName;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }

        clearBtn.addEventListener('click', () => {
            yValues.fill(height / 2);
            drawSignal();
        });

        drawSignal();
    </script>
</body>
</html>