Difference between revisions of "Team:NEU China B"

Line 10: Line 10:
 
var c = document.getElementById("base_page");
 
var c = document.getElementById("base_page");
 
var ctx = c.getContext("2d");
 
var ctx = c.getContext("2d");
−
var img = new Image();
 
−
img.src = "http://placehold.it/1080x320/c4baba/e4dede";
 
 
that = ctx;
 
that = ctx;
 
var i = 0;
 
var i = 0;
Line 43: Line 41:
 
var base_t5 = base_t4 + during;
 
var base_t5 = base_t4 + during;
  
 +
function draw(x, y, r) {
 +
ctx.beginPath();
 +
ctx.arc(x, y, r, 0, Math.PI * 2, true);
 +
ctx.fillStyle = "red";
 +
ctx.fill();
 +
ctx.closePath();
 +
}
 +
 +
function drawImg(imgWarpper, x, y) {
 +
var img = imgWarpper.img;
 +
var drawWidth = img.width / 4;
 +
var drawHeight = img.height / 4;
 +
var imx = x - drawWidth / 2;
 +
var imy = y - drawHeight / 2
 +
imgWarpper.x = imx;
 +
imgWarpper.y = imy;
 +
ctx.drawImage(img, imx, imy, drawWidth, drawHeight);
 +
}
 +
 +
var imgWarpper1 = {};
 +
var imgWarpper2 = {};
 +
var imgWarpper3 = {};
 +
var imgWarpper4 = {};
 +
var imgWarpper5 = {};
 +
 +
imgWarpper1.img = img1;
 +
imgWarpper2.img = img2;
 +
imgWarpper3.img = img3;
 +
imgWarpper4.img = img4;
 +
imgWarpper5.img = img5;
  
 
img1.onload = function () {
 
img1.onload = function () {
Line 65: Line 93:
 
t5 = i + base_t5;
 
t5 = i + base_t5;
  
−
var img1_x = 400 * Math.cos(t1 * 180 * 2) + basex;
+
var img1_x = 200 * Math.cos(t1 * 180 * 2) + basex;
−
var img1_y = 200 * Math.sin(t1 * 180 * 4) + basey;
+
var img1_y = 100 * Math.sin(t1 * 180 * 4) + basey;
−
ctx.drawImage(img1, img1_x, img1_y, img1.width/4, img1.height/4);
+
  
−
var img2_x = 400 * Math.cos(t2 * 180 * 2) + basex;
+
drawImg(imgWarpper1, img1_x, img1_y);
−
var img2_y = 200 * Math.sin(t2 * 180 * 4) + basey;
+
draw(img1_x, img1_y, 10);
−
ctx.drawImage(img2, img2_x, img2_y, img2.width/4, img2.height/4);
+
  
 +
var img2_x = 200 * Math.cos(t2 * 180 * 2) + basex;
 +
var img2_y = 100 * Math.sin(t2 * 180 * 4) + basey;
 +
imgWarpper2.x = img2_x;
 +
imgWarpper2.y = img2_y;
 +
// imgWarpper2.w = i
 +
drawImg(imgWarpper2, img2_x, img2_y);
  
−
var img3_x = 400 * Math.cos(t3 * 180 * 2) + basex;
 
−
var img3_y = 200 * Math.sin(t3 * 180 * 4) + basey;
 
−
ctx.drawImage(img3, img3_x, img3_y, img3.width/4, img3.height/4);
 
  
 +
var img3_x = 200 * Math.cos(t3 * 180 * 2) + basex;
 +
var img3_y = 100 * Math.sin(t3 * 180 * 4) + basey;
 +
drawImg(imgWarpper3, img3_x, img3_y);
  
−
var img4_x = 400 * Math.cos(t4 * 180 * 2) + basex;
+
var img4_x = 200 * Math.cos(t4 * 180 * 2) + basex;
−
var img4_y = 200 * Math.sin(t4 * 180 * 4) + basey;
+
var img4_y = 100 * Math.sin(t4 * 180 * 4) + basey;
−
ctx.drawImage(img4, img4_x, img4_y, img4.width/4, img4.height/4);
+
drawImg(imgWarpper4, img4_x, img4_y);
  
−
var img5_x = 400 * Math.cos(t5 * 180 * 2) + basex;
+
 
−
var img5_y = 200 * Math.sin(t5 * 180 * 4) + basey;
+
var img5_x = 200 * Math.cos(t5 * 180 * 2) + basex;
−
ctx.drawImage(img5, img5_x, img5_y, img5.width/4, img5.height/4);
+
var img5_y = 100 * Math.sin(t5 * 180 * 4) + basey;
 +
drawImg(imgWarpper5, img5_x, img5_y);
  
 
// if (y > 400) {
 
// if (y > 400) {
Line 96: Line 129:
 
}
 
}
 
}
 
}
 +
 +
function contains(imgWarpper, x, y) {
 +
var img = imgWarpper.img;
 +
var rect = {};
 +
var drawWidth = img.width / 4;
 +
var drawHeight = img.height / 4;
 +
rect.x = imgWarpper.x;
 +
rect.y = imgWarpper.y;;
 +
rect.x2 = drawWidth + rect.x;
 +
rect.y2 = drawHeight + rect.y;
 +
return rect.x < x && rect.x2 > x && rect.y < y && rect.y2 > y;
 +
}
 +
 +
c.addEventListener('click', function (evt) {
 +
var x = event.clientX - c.getBoundingClientRect().left;
 +
var y = event.clientY - c.getBoundingClientRect().top;
 +
// console.log(x, y);
 +
if (contains(imgWarpper1, x, y)) {
 +
console.log("img 1");
 +
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/background';
 +
}
 +
else if (contains(imgWarpper2, x, y)) {
 +
console.log("img 2");
 +
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/Basic_Part';
 +
}
 +
else if (contains(imgWarpper3, x, y)) {
 +
console.log("img3");
 +
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/Team';
 +
}
 +
else if (contains(imgWarpper4, x, y)) {
 +
console.log("img4");
 +
window.location.href = 'https://2018.igem.org/Team:NEU_China_B/InterLab';
 +
}
 +
else if (contains(imgWarpper5, x, y)) {
 +
console.log("img5");
 +
// window.location.href = '';
 +
}
 +
});
  
 
</script>
 
</script>

Revision as of 13:42, 16 October 2018

Ruby - Responsive Corporate Tempalte

您的浏览器不支持 HTML5 canvas 标签。

Abstract

The role of L-lactate is not always beneficial for the yogurt fermentation due to excessive L-lactate can provide an optimized growth condition for yeast and mold. Therefore, it is important to detect the concentration of L-lactate. Acid-base titration is a common method for it, but this method is complicated and time-consuming. In order to monitor L-lactate quickly and conveniently, we designed a biosensor for detecting L-lactate concentration by using the lldPRD L-lactate operon and QS system in E. coli. One of these parts is able to induce the lldPRD genes expression, LuxS protein, in the presence of L-lactate. LuxS protein catalyzes the SAM cycle and produces a small signaling molecule AI-2 that motivates our second part promoter of LsrA&K to promote GFP expression. The optic fiber is able to detect the GFP signal and convert it into current. Simultaneously, the entire device container will be made by 3D printing.