Fixed scrolling issue of configuration content

Fixed scrolling appearance of non-zoomed image
artyom-beilis · May 20, 2023 · 2206b80 · 2206b80
1 parent e5b3daa
commit 2206b80
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 32 deletions.
diff --git a/www-data/index.html b/www-data/index.html
@@ -11,7 +11,7 @@
 <div id="solver_result" style="display:none; text-align:center;position:absolute; left:0; top:0; z-index:-1">
     <img alt="Solving result" src="" id="solver_result_image" />
 </div>
-<div id='video' style="position:absolute; left:0; top:0; z-index:-2"></div>
+<div id='video' ></div>
 <div id='thumb' style="display:none; position:absolute; right:0; top:0; z-index:-1;">
     <span id="thumb_video"><span>
 </div>
@@ -35,7 +35,7 @@
     <button class="comp_but" onclick="zoom(-1);">-</button>
     <span id="current_zoom"></span>
 </div>
-<div class="config_div" id="stack" style="display:none; position:absolute; left:5%; top:5%; z-index:2 ; padding: 1% 1% 1% 1%; width: 88%; background:black; border: 1px solid red ">
+<div class="config_div" id="stack" style="display:none; background:black;">
     <span style="position:absolute; right:1mm; top:1mm">
         <button class="incdec_but" onclick="showStack(false);">X</button>
     </span>
@@ -62,7 +62,7 @@
     <tr class="stack_opt" ><td><button onclick='startStack();'>Start</button></td><td>&nbsp;</td><td>&nbsp;</td></tr>
     </table>
 </div>
-<div class="config_div" id="pp_control" style="display:none; position:absolute; left:5%; top:5%; z-index:2 ; padding: 1% 1% 1% 1%; width: 88%; background-color: transparent; border: 1px solid red ">
+<div class="config_div" id="pp_control" style="display:none; background-color: transparent; ">
     <span style="position:absolute; right:1mm; top:1mm">
         <button class="incdec_but" onclick="showPP(false);">X</button>
     </span>
@@ -96,7 +96,7 @@
       </table>
     </div>
 </div>
-<div class="config_div" id="config" style="display:none; position:absolute; left:5%; top:5%; z-index:2 ; padding: 1% 1% 1% 1%; width: 88%; background:black; border: 1px solid red ">
+<div class="config_div" id="config" style="display:none; background:black;">
     <span style="position:absolute; right:1mm; top:1mm">
         <button class="incdec_but" onclick="showConfig(false);">X</button>
     </span>
@@ -139,7 +139,7 @@
     </p>
     </div>
 </div>
-<div class="config_div" id="plate_solve_div" style="display:none; position:absolute; left:5%; top:5%; z-index:2 ; padding: 1% 1% 1% 1%; width: 88%; background-color:transparent; border: 1px solid red ">
+<div class="config_div" id="plate_solve_div" style="display:none; background-color:transparent;">
     <span style="position:absolute; right:1mm; top:1mm">
         <button class="incdec_but" onclick="showSolve(false);">X</button>
     </span>

diff --git a/www-data/media/css/style.css b/www-data/media/css/style.css
@@ -6,6 +6,7 @@
         -ms-overflow-style: none;
     }
     ::-webkit-scrollbar {
+        height: 0;
         width: 0;
     }
     body, td { font-size: 5mm ; color:red ; font-family: sans; background-color:black }
@@ -104,4 +105,24 @@
             margin: auto;
             text-align: center;
     }
+    #video {
+        position:absolute;
+        left:0;
+        top:0;
+        bottom:0;
+        right:0;
+        padding:0 0 0 0;
+        z-index:-2;
+    }
+    .config_div {
+        position:absolute;
+        left:10mm;
+        top:12mm;
+        right:10mm;
+        bottom:12mm;
+        z-index:2;
+        padding: 2mm 2mm 2mm 2mm;
+        border: 1px solid red;
+        overflow:scroll;
+     }
 
diff --git a/www-data/media/js/code.js b/www-data/media/js/code.js
@@ -641,44 +641,27 @@ function showLiveVideo()
 {
     showStream('live');
 }
-/*
-function onResize(ev)
-{
-    var video = document.getElementById('live_stream_video');
-    var video_div = document.getElementById('live_stream_video_div');
-    var size = calcImgSize();
-    if(video) {
-        video.style.width = size[0] * global_zoom + 'px';
-        video.style.height = size[1] * global_zoom + 'px';
-        video.style.marginLeft = (size[2] - size[0] * (global_zoom - 1) / 2 ) + 'px';
-        video.style.marginTop  = (size[3] - size[1] * (global_zoom - 1) / 2 ) + 'px';
-    }
-    var thumb = document.getElementById('thumb_stream_video')
-    if(thumb) {
-        thumb.style.width = Math.round(size[0] / 4) + 'px';
-        thumb.style.height = Math.round(size[1] / 4) + 'px';
-        thumb.style.marginRight = '0px';
-        thumb.style.marginTop  = '0px';
-    }
-    var solved = document.getElementById('solver_result_image');
-    if(solved) {
-        solved.style.width = Math.round(size[0] / 2) + 'px';
-        solved.style.height = Math.round(size[1] / 2) + 'px';
-    }
-}
-*/
 
 function onResize(ev)
 {
     var video = document.getElementById('live_stream_video');
     var video_div = document.getElementById('live_stream_video_div');
     var size = calcImgSize();
+    console.log(JSON.stringify(size));
     if(video) {
         video_div.style.width  = size[0]+ 'px';
         video_div.style.height = size[1] + 'px';
         video_div.style.marginLeft = size[2] + 'px';
         video_div.style.marginTop  = size[3] + 'px';
-
+
+        if(global_zoom == 1) {
+            video_div.style.overflowX = 'hidden';
+            video_div.style.overflowY = 'hidden';
+        }
+        else {
+            video_div.style.overflowX = 'scroll';
+            video_div.style.overflowY = 'scroll';
+        }
         video.style.width  = size[0] * global_zoom + 'px';
         video.style.height = size[1] * global_zoom + 'px';
         var dx = size[0] * (global_zoom - 1) / 2;