update for sad_gs

css/app.css

@@ -0,0 +1,64 @@
+
+.video-compare-container {
+margin: 0 auto;
+position: relative;
+display: block;
+line-height: 0;
+}
+
+.video {
+width: 100%;
+height: auto;
+position: relative;
+top: 0;
+left: 0;
+}
+
+.videoMerge {
+position: relative;
+top: 0;
+left: 0;
+z-index: 10;
+width: 100%;
+display: block;
+margin: 0 auto;
+background-size: cover;
+}
+
+.cropped-video{
+  width: 100%;
+  overflow:hidden;
+  display:block;
+}
+
+.tabs {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.tab {
+  flex-grow: 1; /* 使每个标签平均分配可用空间 */
+  text-align: center; /* 文字居中 */
+  cursor: pointer;
+  padding: 10px 20px;
+  margin: 0 10px;
+  background-color: #f0f0f0;
+  border: 2px solid transparent;
+  border-radius: 5px;
+  transition: background-color 0.3s, border-color 0.3s;
+}
+
+.tab:hover {
+  background-color: #e0e0e0;
+}
+
+.tab.active {
+  background-color: #fff;
+  border-color: #007bff;
+  color: #007bff;
+}
+
+.example {
+  display: none;
+}

js/video_comparison.js

@@ -0,0 +1,137 @@
+// Written by Dor Verbin, October 2021
+// This is based on: http://thenewcode.com/364/Interactive-Before-and-After-Video-Comparison-in-HTML5-Canvas
+// With additional modifications based on: https://jsfiddle.net/7sk5k4gp/13/
+
+function showComparison(target){
+    var elements = document.getElementsByClassName('tab')        
+    for (var i = 0; i < elements.length; i++) {
+        if (elements[i].id.includes('compare')){
+            elements[i].className = 'tab'
+        }
+    }
+    target.className = "tab active";
+
+    var elements = document.getElementsByClassName('video-compare-container')
+    for (var i = 0; i < elements.length; i++) {
+        if (elements[i].id.includes('compare')){
+            if (elements[i].id.includes(target.id))
+                elements[i].style.display = 'inline'
+            else
+                elements[i].style.display = 'none'
+        }
+    }
+}
+
+
+function playVids(videoId) {
+    var videoMerge = document.getElementById(videoId + "Merge");
+    var vid = document.getElementById(videoId);
+
+    var position = 0.5;
+    var vidWidth = vid.videoWidth/2;
+    var vidHeight = vid.videoHeight;
+
+    var mergeContext = videoMerge.getContext("2d");
+
+    if (vid.readyState > 3) {
+        vid.play();
+
+        function trackLocation(e) {
+            // Normalize to [0, 1]
+            bcr = videoMerge.getBoundingClientRect();
+            position = ((e.pageX - bcr.x) / bcr.width);
+        }
+        function trackLocationTouch(e) {
+            // Normalize to [0, 1]
+            bcr = videoMerge.getBoundingClientRect();
+            position = ((e.touches[0].pageX - bcr.x) / bcr.width);
+        }
+
+        videoMerge.addEventListener("mousemove",  trackLocation, false); 
+        videoMerge.addEventListener("touchstart", trackLocationTouch, false);
+        videoMerge.addEventListener("touchmove",  trackLocationTouch, false);
+
+
+        function drawLoop() {
+            mergeContext.drawImage(vid, 0, 0, vidWidth, vidHeight, 0, 0, vidWidth, vidHeight);
+            var colStart = (vidWidth * position).clamp(0.0, vidWidth);
+            var colWidth = (vidWidth - (vidWidth * position)).clamp(0.0, vidWidth);
+            mergeContext.drawImage(vid, colStart+vidWidth, 0, colWidth, vidHeight, colStart, 0, colWidth, vidHeight);
+            requestAnimationFrame(drawLoop);
+
+
+            var arrowLength = 0.09 * vidHeight;
+            var arrowheadWidth = 0.025 * vidHeight;
+            var arrowheadLength = 0.04 * vidHeight;
+            var arrowPosY = vidHeight / 10;
+            var arrowWidth = 0.007 * vidHeight;
+            var currX = vidWidth * position;
+
+            // Draw circle
+            mergeContext.arc(currX, arrowPosY, arrowLength*0.7, 0, Math.PI * 2, false);
+            mergeContext.fillStyle = "#FFD79340";
+            mergeContext.fill()
+            //mergeContext.strokeStyle = "#444444";
+            //mergeContext.stroke()
+
+            // Draw border
+            mergeContext.beginPath();
+            mergeContext.moveTo(vidWidth*position, 0);
+            mergeContext.lineTo(vidWidth*position, vidHeight);
+            mergeContext.closePath()
+            mergeContext.strokeStyle = "#444444";
+            mergeContext.lineWidth = 5;            
+            mergeContext.stroke();
+
+            // Draw arrow
+            mergeContext.beginPath();
+            mergeContext.moveTo(currX, arrowPosY - arrowWidth/2);
+
+            // Move right until meeting arrow head
+            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY - arrowWidth/2);
+
+            // Draw right arrow head
+            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY - arrowheadWidth/2);
+            mergeContext.lineTo(currX + arrowLength/2, arrowPosY);
+            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY + arrowheadWidth/2);
+            mergeContext.lineTo(currX + arrowLength/2 - arrowheadLength/2, arrowPosY + arrowWidth/2);
+
+            // Go back to the left until meeting left arrow head
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY + arrowWidth/2);
+
+            // Draw left arrow head
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY + arrowheadWidth/2);
+            mergeContext.lineTo(currX - arrowLength/2, arrowPosY);
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY  - arrowheadWidth/2);
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY);
+
+            mergeContext.lineTo(currX - arrowLength/2 + arrowheadLength/2, arrowPosY - arrowWidth/2);
+            mergeContext.lineTo(currX, arrowPosY - arrowWidth/2);
+
+            mergeContext.closePath();
+
+            mergeContext.fillStyle = "#444444";
+            mergeContext.fill();
+
+
+
+        }
+        requestAnimationFrame(drawLoop);
+    } 
+}
+
+Number.prototype.clamp = function(min, max) {
+  return Math.min(Math.max(this, min), max);
+};
+
+
+function resizeAndPlay(element)
+{
+  var cv = document.getElementById(element.id + "Merge");
+  cv.width = element.videoWidth/2;
+  cv.height = element.videoHeight;
+element.play();
+  element.style.height = "0px";  // Hide video without stopping it
+
+  playVids(element.id);
+}

loner.html

@@ -5,6 +5,7 @@
 	<meta charset="UTF-8">
 	<title>LONER: LiDAR Only Neural Representations for Real-time SLAM</title>
 	<meta name="description" content="LiDAR Only Neural Representations for Real-time SLAM.">
+
     <style>
         .title{
 	    font-family: Arial, Helvetica, sans-serif;
@@ -163,7 +164,7 @@
     </div>
     <!-- Author list -->
     <div class="section">
-        <h1 class="title">LONER</h1>
+        <h1 class="title">LONER &#x1F6B6;</h1>
         <!--<h1 class="title is-1 publication-title"><img src="media/loner_icon.jpg" width="90">LONER&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1>
         -->
         <h1 class="subtitle">LiDAR Only Neural Representations for Real-time SLAM</h1>