diff --git a/static/homepage.css b/static/homepage.css
index 9951d6a6021044fd26c19b1c37ae7a2074c51eeb..9e3ee7b5b6da6ba718b971b374220e2850f09c0b 100644
--- a/static/homepage.css
+++ b/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;
+}
diff --git a/static/homepage.js b/static/homepage.js
index 572191ffae370285794a2ca6970d147bd6f32df3..21baf9ee3db1d6263eee10738fcd99cbeec5385d 100644
--- a/static/homepage.js
+++ b/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);
\ No newline at end of file
+window.addEventListener('scroll', draw);
+
+
+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
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index 5cbdecc6678b75ddc1da16e4f10a85145b5b52dd..24e534e392eaa50d230efdc2d082b4ed67c87f9d 100644
--- a/wiki/pages/home.html
+++ b/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>