Spaces:

OzoneAsai
/

serialPlotter

Running

App Files Files Community

OzoneAsai commited on Oct 10, 2024

Commit

310edae

verified ·

1 Parent(s): 0018c44

Update index.html

Browse files

Files changed (1) hide show

index.html +119 -79

index.html CHANGED Viewed

@@ -19,19 +19,64 @@
             padding: 10px 20px;
             font-size: 16px;
             margin: 10px;
         }
-        .regex-container, .options-container {
-            margin: 20px;
-            text-align: center;
         }
-        .regex-container textarea {
-            width: 80%;
-            height: 60px;
             font-size: 16px;
         }
         .message {
             color: red;
             font-weight: bold;
         }
     </style>
     <!-- D3.jsの読み込み -->
@@ -40,34 +85,7 @@
 <body>
     <h1>リアルタイムセンサーデータプロット</h1>
     <button id="connectButton">シリアルポートに接続</button>
-    <div class="regex-container">
-        <h2>正規表現設定</h2>
-        <p>以下の正規表現を使用してシリアルデータを解析します。3つのキャプチャグループ（左、中央、右センサー）を含むように設定してください。</p>
-        <textarea id="regexInput">Left Sensor:\s*(\d+)\s*\|\s*Center Sensor:\s*(\d+)\s*\|\s*Right Sensor:\s*(\d+)</textarea><br>
-        <button id="applyRegexButton">適用</button>
-        <div id="regexMessage" class="message"></div>
-    </div>
-    <div class="options-container">
-        <h2>表示オプション</h2>
-        <label>
-            <input type="checkbox" id="includeZeroCheckbox" checked>
-            Y軸に0を含める
-        </label>
-        <br>
-        <label>
-            <input type="checkbox" id="useSplineCheckbox" checked>
-            スプライン曲線を使用
-        </label>
-    </div>
-    <div class="options-container">
-        <h2>データ保持数</h2>
-        <input type="number" id="maxPointsInput" value="75" min="10" max="1000">
-        <button id="applyMaxPointsButton">適用</button>
-        <div id="maxPointsMessage" class="message"></div>
-    </div>
     <div id="charts">
         <div class="chart-container">
@@ -86,7 +104,43 @@
     <div id="rawDataOutput">
         <h2>Rawデータ</h2>
-        <pre id="rawDataDisplay"></pre>
     </div>
     <script>
@@ -111,6 +165,36 @@
         const applyMaxPointsButton = document.getElementById('applyMaxPointsButton');
         const maxPointsMessage = document.getElementById('maxPointsMessage');
         // -------------------------------
         // オプションのイベントリスナー
         // -------------------------------
@@ -417,50 +501,6 @@
             }
         }
-        // -------------------------------
-        // グラフの更新ロジックの改善
-        // -------------------------------
-        function updateCharts() {
-            for (let key in charts) {
-                const chart = charts[key];
-                // Yスケールの更新
-                let yMin, yMax;
-                if (includeZeroCheckbox.checked) {
-                    yMin = d3.min(chart.data.concat([0])) || 0;
-                    yMax = d3.max(chart.data.concat([0])) || 1023;
-                } else {
-                    yMin = d3.min(chart.data) || 0;
-                    yMax = d3.max(chart.data) || 1023;
-                }
-                chart.yScale.domain([Math.min(yMin, 0), Math.max(yMax, 0)]);
-                // Y軸の再描画
-                chart.svg.select(".y-axis")
-                    .transition()
-                    .duration(500)
-                    .call(d3.axisLeft(chart.yScale));
-                // パスの更新
-                chart.path
-                    .datum(chart.data)
-                    .attr("d", chart.line);
-            }
-            // Xスケールの更新（常に0からMAX_POINTS -1）
-            for (let key in charts) {
-                const chart = charts[key];
-                chart.xScale.domain([0, MAX_POINTS - 1]);
-                chart.svg.select(".x-axis")
-                    .transition()
-                    .duration(500)
-                    .call(d3.axisBottom(chart.xScale));
-            }
-        }
-        // -------------------------------
-        // 初期データの保持とグラフのリセット
-        // -------------------------------
-        // 必要に応じて追加
     </script>
 </body>
 </html>

             padding: 10px 20px;
             font-size: 16px;
             margin: 10px;
+            cursor: pointer;
         }
+        /* モーダルダイアログのスタイル */
+        .modal {
+            display: none; /* 初期状態では非表示 */
+            position: fixed; /* 固定位置 */
+            z-index: 1; /* 他の要素より前面に表示 */
+            left: 0;
+            top: 0;
+            width: 100%; /* 幅を全画面に */
+            height: 100%; /* 高さを全画面に */
+            overflow: auto; /* 必要に応じてスクロール */
+            background-color: rgba(0, 0, 0, 0.4); /* 背景を半透明に */
+        }
+        .modal-content {
+            background-color: #fefefe;
+            margin: 10% auto; /* 上下にマージン、中央揃え */
+            padding: 20px;
+            border: 1px solid #888;
+            width: 80%; /* 幅を80%に */
+            max-width: 600px; /* 最大幅を600pxに */
+            border-radius: 8px;
+            position: relative;
+        }
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            position: absolute;
+            right: 20px;
+            top: 10px;
+            cursor: pointer;
         }
+        .close:hover,
+        .close:focus {
+            color: black;
+            text-decoration: none;
+        }
+        .regex-container textarea,
+        .options-container input[type="number"] {
+            width: 100%;
+            padding: 8px;
+            margin: 8px 0;
+            box-sizing: border-box;
             font-size: 16px;
         }
         .message {
             color: red;
             font-weight: bold;
+            margin-top: 10px;
+        }
+        .modal-buttons {
+            text-align: right;
+            margin-top: 20px;
+        }
+        .modal-buttons button {
+            margin-left: 10px;
         }
     </style>
     <!-- D3.jsの読み込み -->
 <body>
     <h1>リアルタイムセンサーデータプロット</h1>
     <button id="connectButton">シリアルポートに接続</button>
+    <button id="settingsButton">設定</button>
     <div id="charts">
         <div class="chart-container">
     <div id="rawDataOutput">
         <h2>Rawデータ</h2>
+        <pre id="rawDataDisplay" style="text-align: left; width: 80%; margin: 0 auto; max-height: 200px; overflow: auto; border: 1px solid #ccc; padding: 10px;"></pre>
+    </div>
+    <!-- モーダルダイアログ -->
+    <div id="settingsModal" class="modal">
+        <div class="modal-content">
+            <span class="close">&times;</span>
+            <h2>設定</h2>
+            <div class="regex-container">
+                <h3>正規表現設定</h3>
+                <p>以下の正規表現を使用してシリアルデータを解析します。3つのキャプチャグループ（左、中央、右センサー）を含むように設定してください。</p>
+                <textarea id="regexInput">Left Sensor:\s*(\d+)\s*\|\s*Center Sensor:\s*(\d+)\s*\|\s*Right Sensor:\s*(\d+)</textarea><br>
+                <button id="applyRegexButton">適用</button>
+                <div id="regexMessage" class="message"></div>
+            </div>
+            <div class="options-container">
+                <h3>表示オプション</h3>
+                <label>
+                    <input type="checkbox" id="includeZeroCheckbox" checked>
+                    Y軸に0を含める
+                </label>
+                <br>
+                <label>
+                    <input type="checkbox" id="useSplineCheckbox" checked>
+                    スプライン曲線を使用
+                </label>
+            </div>
+            <div class="options-container">
+                <h3>データ保持数</h3>
+                <input type="number" id="maxPointsInput" value="75" min="10" max="1000">
+                <button id="applyMaxPointsButton">適用</button>
+                <div id="maxPointsMessage" class="message"></div>
+            </div>
+            <div class="modal-buttons">
+                <button id="closeSettingsButton">閉じる</button>
+            </div>
+        </div>
     </div>
     <script>
         const applyMaxPointsButton = document.getElementById('applyMaxPointsButton');
         const maxPointsMessage = document.getElementById('maxPointsMessage');
+        // -------------------------------
+        // モーダルダイアログの設定
+        // -------------------------------
+        const settingsModal = document.getElementById('settingsModal');
+        const settingsButton = document.getElementById('settingsButton');
+        const closeModalSpan = document.querySelector('.modal .close');
+        const closeSettingsButton = document.getElementById('closeSettingsButton');
+        // モーダルを開く
+        settingsButton.onclick = function() {
+            settingsModal.style.display = "block";
+        }
+        // モーダルを閉じる（×ボタン）
+        closeModalSpan.onclick = function() {
+            settingsModal.style.display = "none";
+        }
+        // モーダルを閉じる（閉じるボタン）
+        closeSettingsButton.onclick = function() {
+            settingsModal.style.display = "none";
+        }
+        // モーダル外をクリックすると閉じる
+        window.onclick = function(event) {
+            if (event.target == settingsModal) {
+                settingsModal.style.display = "none";
+            }
+        }
         // -------------------------------
         // オプションのイベントリスナー
         // -------------------------------
             }
         }
     </script>
 </body>
 </html>