ws/index.html at main · YamaguchiToshi/ws · GitHub

1
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Mouse Tracking with Heatmap</title><link rel="stylesheet" href="styles.css"><audio id="rippleSound" src="sounds/fuwa.mp3"></audio></head><body><div id="controlPanel"><label for="durationInput">Duration (1-60 seconds):</label> <input type="number" id="durationInput" value="30" min="1" max="60"> <button id="startButton">Start Tracking</button><br><label for="backgroundInput">Background Image:</label> <input type="file" id="backgroundInput" accept=".jpg,.jpeg,.png"> <button id="resetBackgroundButton">Reset Background</button> <button id="clearHeatmapButton">Clear Heatmap</button> <button id="exportButton">Export Heatmap</button><br><label for="effectSelect">Effect Type:</label> <select id="effectSelect"><option value="none">None</option><option value="ripple">Ripple</option><option value="pulse">Pulse</option><option value="float">Float</option></select> <label for="volumeControl">Sound Volume:</label> <input type="range" id="volumeControl" min="0" max="1" step="0.1" value="0.5"> <button id="showGazePlotButton">Show Gaze Plot</button></div><div id="heatmapContainer"></div><script src="https://cdn.jsdelivr.net/npm/heatmap.js@2.0.5/build/heatmap.min.js"></script><script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script><script src="script.js"></script></body></html>