timeline

static/homepage.css

@@ -25,11 +25,16 @@
 
 
 /* for canvas */
-#tutorial{
+#timeline{
     position: absolute;
     z-index: 5;
     top: 9500px;
 }
+#roadmap{
+    position: absolute;
+    z-index: 5;
+    top: 12000px;
+}
 
 
 

static/homepage.js

@@ -183,7 +183,7 @@ function horizontalLine(x1, x2, y, ctx, canvas_h, typeID, lineID) {
 function draw(){
     /** @type {HTMLCanvasElement} */
     let scrTop = document.documentElement.scrollTop;
-    var canvas = document.getElementById("tutorial")
+    var canvas = document.getElementById("roadmap")
     canvas.width = 1300;
     canvas.height = 4500;
     let cvs_h = canvas.getBoundingClientRect().top + scrTop;
@@ -268,4 +268,269 @@ function draw(){
     canvas.style.backgroundColor="transparent";
 }
 draw();
-window.addEventListener('scroll', draw);
+window.addEventListener('scroll', draw);
\ No newline at end of file
+
+
+function canDraw(y1, y2) {
+    if (y2 < top_screen || y1 > bottom_screen) return false;
+    else return true;
+}
+
+function verticalLine_timeline(x, y1, y2, ctx, canvas_h) {
+    if (current_line >= y1 && canvas_h >= start_height) {
+        if (canDraw(y1, y2)) ctx.moveTo(x, y1);
+        if (current_line > y2){
+            if (canDraw(y1, y2)) ctx.lineTo(x, y2);
+        }
+        else if(current_line < y2){
+            if (canDraw(y1, y2)) ctx.lineTo(x, current_line);
+            if (canvas_h > current_line){
+                current_line+=speed;
+                setTimeout("draw_timeline()", 5);
+            }
+            else if (canvas_h < current_line){
+                current_line-=speed;
+                setTimeout("draw_timeline()", 5);
+            }
+        }
+        else{
+            ctx.lineTo(x, y2);
+            if (canvas_h < current_line){
+                current_line-=speed;
+            }
+        }
+    }
+}
+function circularArc_timeline(x, y, ctx, canvas_h, typeID, lineID) { // r = 100
+    if (typeID == 1) {
+        if (current_line >= y){ 
+            if (current_line > y+r){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
+            }
+            else if (current_line < y+r){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI-Math.asin((Math.min(current_line,y+r)-y) / r), true);
+                if (canvas_h > current_line){
+                    current_line+=speed;
+                    setTimeout("draw_timeline()", 5);
+                }
+                else if (canvas_h < current_line && lines[lineID] == x){
+                    current_line-=speed;
+                    setTimeout("draw_timeline(), 5");
+                }
+            }
+            else{
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI, Math.PI/2, true);
+                if (canvas_h < current_line && lines[lineID] == x){
+                    current_line-=speed;
+                }
+            }
+        }
+    }
+    else if (typeID == 2) {
+        if (current_line >= y-r && lines[lineID] == x){ 
+            if (current_line > y){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
+            }
+            else if (current_line < y){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI*1.5+Math.acos((y-current_line)/r), false);
+                if (canvas_h > current_line){
+                    current_line+=speed;
+                    setTimeout("draw_timeline()", 5);
+                }
+                else if (canvas_h < current_line){
+                    current_line-=speed;
+                    setTimeout("draw_timeline()", 5);
+                }
+            }
+            else{
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, 0, false);
+                if (canvas_h < current_line){
+                    current_line-=speed;
+                }
+            }
+        }
+    }
+    else if (typeID == 3) {
+        if (current_line >= y){ 
+            if (current_line > y+r){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
+            }
+            else if (current_line < y+r){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.asin((current_line-y)/r), false);
+                if (canvas_h > current_line){
+                    current_line+=speed;
+                    setTimeout("draw_timeline()", 5);
+                }
+                else if (canvas_h < current_line){
+                    current_line-=speed;
+                    setTimeout("draw_timeline()", 5);
+                }
+            }
+            else{
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, 0, Math.PI/2, false);
+                if (canvas_h < current_line && lines[lineID] == x){
+                    current_line-=speed;
+                }
+            }
+        }
+    }
+    else if (typeID == 4) {
+        if (current_line >= y-r && lines[lineID] == x){ 
+            if (current_line > y){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
+            }
+            else if (current_line < y){
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI + Math.asin((y-current_line)/r), true);
+                if (canvas_h > current_line){
+                    current_line+=speed;
+                    setTimeout("draw_timeline()", 5);
+                }
+                else if (canvas_h < current_line){
+                    current_line-=speed;
+                    setTimeout("draw_timeline()", 5);
+                }
+            }
+            else{
+                if (canDraw(y - 150, y + 150)) ctx.arc(x, y, r, Math.PI*1.5, Math.PI, true);
+                if (canvas_h < current_line){
+                    current_line-=speed;
+                }
+            }
+        }
+    }
+}
+function horizontalLine_timeline(x1, x2, y, ctx, canvas_h, typeID, lineID) {
+    if (typeID == 1) { 
+        if (current_line >= y && canvas_h >= y){ 
+            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+            if (lines[lineID] < x2){
+                lines[lineID] += 10;
+            }
+            if (lines[lineID] < x2){
+                setTimeout("draw_timeline()", 120);
+            }
+        }
+        if (canvas_h < y && lines[lineID] > x1 && current_line == y){
+            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+            if (lines[lineID] > x1){
+                lines[lineID] -= 10;
+            }
+            if (lines[lineID] > x1){
+                setTimeout("draw_timeline()", 80);
+            }
+        }
+    }
+    else if (typeID == 2) { 
+        if (current_line >= y && canvas_h >= y){ 
+            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+            if (lines[lineID] > x2){
+                lines[lineID] -= 10;
+            }
+            if (lines[lineID] > x2){
+                setTimeout("draw_timeline()", 120);
+            }
+        }
+        if (canvas_h < y && lines[lineID] < x1 && current_line == y){
+            if (canDraw(y - 150, y + 150)) ctx.moveTo(x1, y);
+            if (canDraw(y - 150, y + 150) && x1 != lines[lineID]) ctx.lineTo(lines[lineID], y);
+            if (lines[lineID] < x1){
+                lines[lineID] += 10;
+            }
+            if (lines[lineID] < x1){
+                setTimeout("draw_timeline()", 80);
+            }
+        }
+    }
+}
+function draw_timeline(){
+    /** @type {HTMLCanvasElement} */
+    let scrTop = document.documentElement.scrollTop;
+    var canvas = document.getElementById("timeline")
+    canvas.width = 1300;
+    canvas.height = 4500;
+    let cvs_h = canvas.getBoundingClientRect().top + scrTop;
+    let cur_h = document.documentElement.clientHeight / 1.8 + scrTop;
+    top_screen = Math.floor(-canvas.getBoundingClientRect().top);
+    bottom_screen = Math.floor(document.documentElement.clientHeight + scrTop - cvs_h);
+    let canvas_h = Math.floor(cur_h - cvs_h);
+    if (canvas_h % 10 == 9) {
+        canvas_h -= 9;
+    }
+    if (canvas_h % 10 == 8) {
+        canvas_h -= 8;
+    }
+    if (canvas_h % 10 == 7) {
+        canvas_h -= 7;
+    }
+    if (canvas_h % 10 == 6) {
+        canvas_h -= 6;
+    }
+    if (canvas_h % 10 == 5) {
+        canvas_h -= 5;
+    }
+    if (canvas_h % 10 == 4) {
+        canvas_h -= 4;
+    }
+    if (canvas_h % 10 == 3) {
+        canvas_h -= 3;
+    }
+    if (canvas_h % 10 == 2) {
+        canvas_h -= 2;
+    }
+    if (canvas_h % 10 == 1) {
+        canvas_h -= 1;
+    }
+
+    if(!canvas.getContext) return;
+    var ctx = canvas.getContext("2d");
+    var gradient = ctx.createLinearGradient(0, 0, 0, 13370);
+    gradient.addColorStop(0, "#185A4F");
+    gradient.addColorStop(0.36, "#185A4F");
+    gradient.addColorStop(0.373, "#05BE85");
+    gradient.addColorStop(0.381, "#05BE85");
+    gradient.addColorStop(0.387, "#05BE85");
+    gradient.addColorStop(0.38, "#05BE85");
+    gradient.addColorStop(0.41, "#185A4F");
+    gradient.addColorStop(0.53534, "#185A4F");
+    gradient.addColorStop(0.57648, "#62D881");
+    gradient.addColorStop(0.63287, "#62D881");
+    gradient.addColorStop(0.68127, "#185A4F")
+    gradient.addColorStop(1,"#185A4F");
+    ctx.strokeStyle = gradient;
+    // ctx.shadowColor = "#00508A";
+    // ctx.shadowBlur = 20;
+    ctx.lineWidth = 17;
+    ctx.lineCap = 'round';
+    ctx.lineJoin = 'round';
+    ctx.beginPath();
+    // console.log(current_line, canvas_h);
+
+    if (canvas_h < start_height){
+        current_line = start_height;
+    }
+
+    
+    var centerX = canvas.width / 2;  
+    verticalLine_timeline(centerX, 200, 4500, ctx, canvas_h);
+
+    circularArc_timeline(centerX - 30, 1600, ctx, canvas_h, 3, 0);
+
+    horizontalLine_timeline(centerX - 30, centerX - 400, 1630, ctx, canvas_h, 2, 0);
+    
+    circularArc_timeline(centerX + 30, 2400, ctx, canvas_h, 1, 1);
+    horizontalLine_timeline(centerX + 30, centerX + 400, 2430, ctx, canvas_h, 1, 1);
+    
+    circularArc_timeline(centerX - 30, 3200, ctx, canvas_h, 3, 2);
+    horizontalLine_timeline(centerX - 30, centerX - 400, 3230, ctx, canvas_h, 2, 2);
+    
+    circularArc_timeline(centerX + 30, 4000, ctx, canvas_h, 1, 3);
+    horizontalLine_timeline(centerX + 30, centerX + 400, 4030, ctx, canvas_h, 1, 3);
+  
+    ctx.stroke()
+    canvas.style.backgroundColor="transparent";
+}
+draw_timeline();
+window.addEventListener('scroll', draw_timeline);
\ No newline at end of file

wiki/pages/home.html

@@ -176,8 +176,8 @@
       Laying the foundation for nitrogen fixation.
   </div>
 </div>
-
-
+<canvas id="timeline"></canvas>
+<!-- 
 <div class="homepage-content-img8 homepage-elements reveal" id="homepage-content-img8"></div>
 <div class="homepage-content-img9 homepage-elements reveal" id="homepage-content-img9"></div>
 <div class="homepage-content-img10 homepage-elements reveal" id="homepage-content-img10"></div>
@@ -217,7 +217,7 @@
   <div class="homepage-contents-style">
       We aim to transplant nitroplasts from <strong><i>B. bigelowii</i></strong> into other cells to create nitrogen-fixing eukaryotes.
   </div>
-</div>
+</div> -->
 <div class="homepage-content15 homepage-elements reveal" style="opacity: 1;">
   <span>The roadmap to nitrogen-fixing eukaryotes</span>
 </div>
@@ -256,7 +256,7 @@
   </a>
 </div>
 
-<canvas id="tutorial"></canvas>
+<canvas id="roadmap"></canvas>
 </div>
   
 <script src="{{ url_for('static', filename = 'homepage.js') }}" type="text/javascript"></script>