Add new settings (#46,#57,#111)

ricktu288 · Dec 26, 2023 · d8bc442 · d8bc442
1 parent bf9cd6d
commit d8bc442
Show file tree

Hide file tree

Showing 16 changed files with 477 additions and 6 deletions.
diff --git a/simulator/css/style.css b/simulator/css/style.css
@@ -206,6 +206,14 @@
   padding-right: 0px;
 }
 
+.settings-number {
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+  width: 40px;
+  text-align: center;
+}
+
 #more-options-dropdown {
   width:300px;
   max-height: 80vh;
@@ -401,4 +409,9 @@
   color:white;
   position:absolute;
   border:none;
+}
+
+#status {
+  color: gray;
+  background-color: rgba(0,0,0,0.8);
 }
diff --git a/simulator/index.html b/simulator/index.html
@@ -429,6 +429,24 @@
                             </div>
                           </div>
 
+                          <div class="row d-flex justify-content-between align-items-center" data-bs-placement="left" data-bs-offset="75,0">
+                            <div class="col-auto" data-text="grid_size"></div>
+                            <div class="col-auto d-flex align-items-center">
+                              <div class="flex-grow-1 d-flex align-items-center">
+                                <input type="text" class="settings-number" id="grid_size" value="20">
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row d-flex justify-content-between align-items-center" data-bs-placement="left" data-bs-offset="75,0">
+                            <div class="col-auto" data-text="observer_size"></div>
+                            <div class="col-auto d-flex align-items-center">
+                              <div class="flex-grow-1 d-flex align-items-center">
+                                <input type="text" class="settings-number" id="observer_size" value="40">
+                              </div>
+                            </div>
+                          </div>
+
                           <div class="row d-flex justify-content-between align-items-center">
                             <div class="col-auto" data-text="zoom"></div>
                             <div class="col-auto d-flex align-items-center">
@@ -454,6 +472,17 @@
                               </button>
                             </div>
                           </div>
+
+                          <div class="row d-flex justify-content-between align-items-center" data-bs-placement="left">
+                            <div class="col-auto" data-text="show_status"></div>
+                            <div class="col-auto d-flex align-items-center">
+                              <div class="flex-grow-1 d-flex align-items-center">
+                                <div class="form-check form-switch align-items-center">
+                                  <input class="form-check-input" type="checkbox" id="show_status">
+                                </div>
+                              </div>
+                            </div>
+                          </div>
 
                           <div class="row d-flex justify-content-between align-items-center" data-popover="show_help_popups_popover" data-bs-placement="left">
                             <div class="col-auto" data-text="show_help_popups"></div>
@@ -816,6 +845,23 @@
                               </div>
                             </div>
                           </div>
+                          <div class="row d-flex justify-content-between align-items-center" data-bs-placement="left" data-bs-offset="75,0">
+                            <div class="col-auto" data-text="grid_size"></div>
+                            <div class="col-auto d-flex align-items-center">
+                              <div class="flex-grow-1 d-flex align-items-center">
+                                <input type="text" class="settings-number" id="grid_size_mobile" value="20">
+                              </div>
+                            </div>
+                          </div>
+
+                          <div class="row d-flex justify-content-between align-items-center" data-bs-placement="left" data-bs-offset="75,0">
+                            <div class="col-auto" data-text="observer_size"></div>
+                            <div class="col-auto d-flex align-items-center">
+                              <div class="flex-grow-1 d-flex align-items-center">
+                                <input type="text" class="settings-number" id="observer_size_mobile" value="40">
+                              </div>
+                            </div>
+                          </div>
                           <div class="row d-flex justify-content-between align-items-center">
                             <div class="col-auto" data-text="zoom"></div>
                             <div class="col-auto d-flex align-items-center">
@@ -834,6 +880,17 @@
                           </div>
 
                           <hr class="dropdown-divider">
+                          <div class="row d-flex justify-content-between align-items-center" data-bs-placement="left">
+                            <div class="col-auto" data-text="show_status"></div>
+                            <div class="col-auto d-flex align-items-center">
+                              <div class="flex-grow-1 d-flex align-items-center">
+                                <div class="form-check form-switch align-items-center">
+                                  <input class="form-check-input" type="checkbox" id="show_status_mobile">
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+
                           <div class="row d-flex justify-content-between align-items-center">
                             <div class="col-auto" data-text="language"></div>
                             <div class="col-auto d-flex align-items-center">
@@ -842,6 +899,8 @@
                               </button>
                             </div>
                           </div>
+
+
                         </div>
                       </div>
                     </div>
@@ -1096,7 +1155,7 @@ <h5 class="modal-title" id="staticBackdropLabel" data-text="language"></h5>
         <div class="spinner-border text-secondary" role="status"></div>
         <span data-text="processing"></span>
       </div>
-
+      <div id="status" style="display: none;"></div>
     </div>
 
     <!-- Footer buttons -->
@@ -1128,7 +1187,7 @@ <h5 class="modal-title" id="staticBackdropLabel" data-text="language"></h5>
     </div>
 
     <input type="file" id="openfile" style="display:none">
-    <div id="status" style="display: none;"></div>
+
 
     <!--Thirdparty scripts-->
     <script src="../thirdparty/jquery.min.js"></script>

diff --git a/simulator/js/index.js b/simulator/js/index.js
@@ -256,6 +256,64 @@ window.onload = function (e) {
     localStorage.rayOpticsHelp = popoversEnabled ? "on" : "off";
   };
 
+  document.getElementById('show_status').onclick = function () {
+    document.getElementById('show_status').checked = this.checked;
+    document.getElementById('show_status_mobile').checked = this.checked;
+
+    document.getElementById('status').style.display = this.checked ? '' : 'none';
+    localStorage.rayOpticsShowStatus = this.checked ? "on" : "off";
+  };
+  document.getElementById('show_status_mobile').onclick = document.getElementById('show_status').onclick;
+
+  if (typeof (Storage) !== "undefined" && localStorage.rayOpticsShowStatus && localStorage.rayOpticsShowStatus == "on") {
+    document.getElementById('show_status').checked = true;
+    document.getElementById('show_status_mobile').checked = true;
+    document.getElementById('status').style.display = '';
+  }
+
+  document.getElementById('grid_size').onchange = function () {
+    gridSize = parseFloat(this.value);
+    document.getElementById('grid_size').value = gridSize;
+    document.getElementById('grid_size_mobile').value = gridSize;
+    draw(true, false);
+  }
+  document.getElementById('grid_size_mobile').onchange = document.getElementById('grid_size').onchange;
+
+  document.getElementById('grid_size').onclick = function () {
+    this.select();
+  }
+  document.getElementById('grid_size_mobile').onclick = document.getElementById('grid_size').onclick;
+
+  document.getElementById('grid_size').onkeydown = function(e)
+  {
+    e.cancelBubble = true;
+    if (e.stopPropagation) e.stopPropagation();
+  };
+  document.getElementById('grid_size_mobile').onkeydown = document.getElementById('grid_size').onkeydown;
+
+  document.getElementById('observer_size').onchange = function () {
+    document.getElementById('observer_size').value = this.value;
+    document.getElementById('observer_size_mobile').value = this.value;
+    if (observer) {
+      observer.r = parseFloat(this.value) * 0.5;
+    }
+    draw(false, true);
+  }
+  document.getElementById('observer_size_mobile').onchange = document.getElementById('observer_size').onchange;
+
+  document.getElementById('observer_size').onclick = function () {
+    this.select();
+  }
+  document.getElementById('observer_size_mobile').onclick = document.getElementById('observer_size').onclick;
+
+  document.getElementById('observer_size').onkeydown = function(e)
+  {
+    e.cancelBubble = true;
+    if (e.stopPropagation) e.stopPropagation();
+  };
+  document.getElementById('observer_size_mobile').onkeydown = document.getElementById('observer_size').onkeydown;
+
+
   document.getElementById('zoomPlus').onclick = function () {
     setScale(scale * 1.1);
   }
@@ -582,6 +640,13 @@ function initParameters() {
   document.getElementById('setAttrAll').checked = false;
   document.getElementById('applytoall_mobile').checked = false;
 
+  gridSize = 20;
+  document.getElementById('grid_size').value = gridSize;
+  document.getElementById('grid_size_mobile').value = gridSize;
+
+  document.getElementById('observer_size').value = 40;
+  document.getElementById('observer_size_mobile').value = 40;
+
   draw();
 }
 
@@ -746,6 +811,7 @@ function JSONOutput() {
      showGrid: document.getElementById('showgrid').checked,
      grid: document.getElementById('grid').checked,
      lockobjs: document.getElementById('lockobjs').checked,
+     gridSize: gridSize,
      observer: observer,
      origin: origin,
      scale: scale,
@@ -827,6 +893,9 @@ function JSONInput() {
   if (!jsonData.lockobjs) {
     jsonData.lockobjs = false;
   }
+  if (!jsonData.gridSize) {
+    jsonData.gridSize = 20;
+  }
 
   objs = jsonData.objs;
   rayDensity_light = jsonData.rayDensity_light;
@@ -844,6 +913,18 @@ function JSONInput() {
 
   observer = jsonData.observer;
 
+  if (observer) {
+    document.getElementById('observer_size').value = Math.round(observer.r * 2 * 1000000) / 1000000;
+    document.getElementById('observer_size_mobile').value = Math.round(observer.r * 2 * 1000000) / 1000000;
+  } else {
+    document.getElementById('observer_size').value = 40;
+    document.getElementById('observer_size_mobile').value = 40;
+  }
+
+  gridSize = jsonData.gridSize;
+  document.getElementById('grid_size').value = gridSize;
+  document.getElementById('grid_size_mobile').value = gridSize;
+
   var canvasWidth = Math.ceil((canvas.width/dpr) / 100) * 100;
   var canvasHeight = Math.ceil((canvas.height/dpr) / 100) * 100;
 
@@ -894,7 +975,7 @@ function modebtn_clicked(mode1) {
   }
   if (mode == 'observer' && !observer) {
     //初始化觀察者 Initialize the observer
-    observer = graphs.circle(graphs.point((canvas.width * 0.5 / dpr - origin.x) / scale, (canvas.height * 0.5 / dpr - origin.y) / scale), 20);
+    observer = graphs.circle(graphs.point((canvas.width * 0.5 / dpr - origin.x) / scale, (canvas.height * 0.5 / dpr - origin.y) / scale), parseFloat(document.getElementById('observer_size').value) * 0.5);
   }
 
 

diff --git a/simulator/js/simulator.js b/simulator/js/simulator.js
@@ -14,6 +14,7 @@ var exportRayCountLimit = 100000;
 var hasExceededTime = false;
 var forceStop = false;
 var lastDrawTime = -1;
+var drawBeginTime = -1;
 var stateOutdated = false; //上次繪圖完後狀態已經變更 The state has changed since last draw
 var minShotLength = 1e-6; //光線兩次作用的最短距離(小於此距離的光線作用會被忽略) The minimal length between two interactions with rays (when smaller than this, the interaction will be ignored)
 var minShotLength_squared = minShotLength * minShotLength;
@@ -36,6 +37,7 @@ function draw(skipLight, skipGrid)
 
   if (!skipLight) {
     totalTruncation = 0;
+    drawBeginTime = new Date();
     document.getElementById('forceStop').style.display = 'none';
   }
 
@@ -254,6 +256,7 @@ function shootWaitingRays() {
       timerID = setTimeout(shootWaitingRays, firstBreak ? 100:1);
       firstBreak = false;
       document.getElementById('forceStop').style.display = '';
+      document.getElementById('status').innerHTML = getMsg("ray_count") + shotRayCount + '<br>' + getMsg("total_truncation") + totalTruncation.toFixed(3) + '<br>' + getMsg("time_elapsed") + (new Date() - drawBeginTime) + '<br>';
 
       draw(true, true); // Redraw the objs to avoid outdated information (e.g. detector readings).
       return;
@@ -633,16 +636,16 @@ function shootWaitingRays() {
 
   if (forceStop)
   {
-    document.getElementById('status').innerHTML = shotRayCount + ' rays (stopped)';
+    document.getElementById('status').innerHTML = getMsg("ray_count") + shotRayCount + '<br>' + getMsg("total_truncation") + totalTruncation.toFixed(3) + '<br>' + getMsg("time_elapsed") + (new Date() - drawBeginTime) + '<br>' + getMsg("force_stopped");
     forceStop = false;
   }
   else if (hasExceededTime)
   {
-    document.getElementById('status').innerHTML = shotRayCount + ' rays';
+    //document.getElementById('status').innerHTML = getMsg("ray_count") + shotRayCount + '<br>' + getMsg("total_truncation") + totalTruncation;
   }
   else
   {
-    document.getElementById('status').innerHTML = shotRayCount + ' rays (' + (new Date() - st_time) + 'ms)';
+    document.getElementById('status').innerHTML = getMsg("ray_count") + shotRayCount + '<br>' + getMsg("total_truncation") + totalTruncation.toFixed(3) + '<br>' + getMsg("time_elapsed") + (new Date() - drawBeginTime);
   }
   document.getElementById('forceStop').style.display = 'none';
   //ctx.stroke();

diff --git a/simulator/locales/de.js b/simulator/locales/de.js
@@ -726,6 +726,18 @@ locales["de"] = {
     "incomplete": true,
     "message": "Defines whether to show help popups when hovering over buttons. (Reload the page to take effect.)"
   },
+  "show_status": {
+    "incomplete": true,
+    "message": "Show status box"
+  },
+  "grid_size": {
+    "incomplete": true,
+    "message": "Grid Size (px)"
+  },
+  "observer_size": {
+    "incomplete": true,
+    "message": "Observer Size (px)"
+  },
   "language": {
     "incomplete": true,
     "message": "Language"
@@ -737,5 +749,21 @@ locales["de"] = {
   "advanced_help": {
     "incomplete": true,
     "message": "For advanced help, see the help icon in the lower-right corner."
+  },
+  "ray_count": {
+    "incomplete": true,
+    "message": "Number of ray segments: "
+  },
+  "total_truncation": {
+    "incomplete": true,
+    "message": "Truncated brightness: "
+  },
+  "time_elapsed": {
+    "incomplete": true,
+    "message": "Time elapsed (ms): "
+  },
+  "force_stopped": {
+    "incomplete": true,
+    "message": "Force stopped."
   }
 }
diff --git a/simulator/locales/en.js b/simulator/locales/en.js
@@ -663,6 +663,15 @@ locales["en"] = {
   "show_help_popups_popover": {
     "message": "Defines whether to show help popups when hovering over buttons. (Reload the page to take effect.)"
   },
+  "show_status": {
+    "message": "Show status box"
+  },
+  "grid_size": {
+    "message": "Grid Size (px)"
+  },
+  "observer_size": {
+    "message": "Observer Size (px)"
+  },
   "language": {
     "message": "Language"
   },
@@ -671,5 +680,17 @@ locales["en"] = {
   },
   "advanced_help": {
     "message": "For advanced help, see the help icon in the lower-right corner."
+  },
+  "ray_count": {
+    "message": "Number of ray segments: "
+  },
+  "total_truncation": {
+    "message": "Truncated brightness: "
+  },
+  "time_elapsed": {
+    "message": "Time elapsed (ms): "
+  },
+  "force_stopped": {
+    "message": "Force stopped."
   }
 }