Line 2: | Line 2: | ||
<html> | <html> | ||
− | <canvas id="base_page" width="800" height="400" style="border:1px solid #c3c3c3; | + | <canvas id="base_page" width="800" height="400" style="border:1px solid #c3c3c3;"> |
您的浏览器不支持 HTML5 canvas 标签。 | 您的浏览器不支持 HTML5 canvas 标签。 | ||
</canvas> | </canvas> | ||
Line 10: | Line 10: | ||
var c = document.getElementById("base_page"); | var c = document.getElementById("base_page"); | ||
+ | |||
+ | $("#base_page").attr("width", c.parentElement.clientWidth); | ||
+ | |||
var ctx = c.getContext("2d"); | var ctx = c.getContext("2d"); | ||
that = ctx; | that = ctx; | ||
Line 24: | Line 27: | ||
var w4 = "https://static.igem.org/mediawiki/2018/9/96/T--NEU_China_B--w4.png"; | var w4 = "https://static.igem.org/mediawiki/2018/9/96/T--NEU_China_B--w4.png"; | ||
var w5 = "https://static.igem.org/mediawiki/2018/7/7a/T--NEU_China_B--w5.png"; | var w5 = "https://static.igem.org/mediawiki/2018/7/7a/T--NEU_China_B--w5.png"; | ||
+ | var w6 = "https://static.igem.org/mediawiki/2018/6/66/T--NEU_China_B--w6.png"; | ||
+ | |||
var img1 = new Image(); | var img1 = new Image(); | ||
var img2 = new Image(); | var img2 = new Image(); | ||
Line 29: | Line 34: | ||
var img4 = new Image(); | var img4 = new Image(); | ||
var img5 = new Image(); | var img5 = new Image(); | ||
+ | var img6 = new Image(); | ||
img1.src = w1; | img1.src = w1; | ||
var during = 40; | var during = 40; | ||
Line 41: | Line 47: | ||
var t5 = 0; | var t5 = 0; | ||
var base_t5 = base_t4 + during; | var base_t5 = base_t4 + during; | ||
+ | var t6 = 0; | ||
+ | var base_t6 = base_t5 + during; | ||
var x_e = 300; | var x_e = 300; | ||
var y_e = 150; | var y_e = 150; | ||
− | + | ||
function redraw() { | function redraw() { | ||
ctx.clearRect(0, 0, width, height); | ctx.clearRect(0, 0, width, height); | ||
Line 58: | Line 66: | ||
ctx.lineTo(x, y); | ctx.lineTo(x, y); | ||
} | } | ||
+ | ctx.strokeStyle = '#FAF0E6'; | ||
+ | ctx.lineWidth = 3; | ||
ctx.stroke(); | ctx.stroke(); | ||
ctx.closePath(); | ctx.closePath(); | ||
Line 87: | Line 97: | ||
var imgWarpper4 = {}; | var imgWarpper4 = {}; | ||
var imgWarpper5 = {}; | var imgWarpper5 = {}; | ||
+ | var imgWarpper6 = {}; | ||
imgWarpper1.img = img1; | imgWarpper1.img = img1; | ||
Line 93: | Line 104: | ||
imgWarpper4.img = img4; | imgWarpper4.img = img4; | ||
imgWarpper5.img = img5; | imgWarpper5.img = img5; | ||
+ | imgWarpper6.img = img6; | ||
img1.onload = function () { | img1.onload = function () { | ||
Line 104: | Line 116: | ||
img5.onload = function () { | img5.onload = function () { | ||
console.log("finish"); | console.log("finish"); | ||
− | var timer = setInterval(function () { | + | img6.src = w6; |
− | + | img6.onload = function () { | |
− | + | var timer = setInterval(function () { | |
+ | redraw(); | ||
+ | i += 0.00001; | ||
+ | |||
+ | t1 = i + base_t1; | ||
+ | t2 = i + base_t2; | ||
+ | t3 = i + base_t3; | ||
+ | t4 = i + base_t4; | ||
+ | t5 = i + base_t5; | ||
+ | t6 = i + base_t6; | ||
+ | |||
+ | var img1_x = x_e * Math.cos(t1 * 180 * 2) + basex; | ||
+ | var img1_y = y_e * Math.sin(t1 * 180 * 4) + basey; | ||
− | + | drawImg(imgWarpper1, img1_x, img1_y); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | var img2_x = x_e * Math.cos(t2 * 180 * 2) + basex; | |
− | + | var img2_y = y_e * 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 = x_e * Math.cos(t3 * 180 * 2) + basex; | |
− | + | var img3_y = y_e * Math.sin(t3 * 180 * 4) + basey; | |
− | + | drawImg(imgWarpper3, img3_x, img3_y); | |
− | + | ||
− | + | ||
− | + | ||
+ | var img4_x = x_e * Math.cos(t4 * 180 * 2) + basex; | ||
+ | var img4_y = y_e * Math.sin(t4 * 180 * 4) + basey; | ||
+ | drawImg(imgWarpper4, img4_x, img4_y); | ||
− | |||
− | |||
− | |||
− | + | var img5_x = x_e * Math.cos(t5 * 180 * 2) + basex; | |
− | + | var img5_y = y_e * Math.sin(t5 * 180 * 4) + basey; | |
− | + | drawImg(imgWarpper5, img5_x, img5_y); | |
− | + | var img6_x = x_e * Math.cos(t6 * 180 * 2) + basex; | |
− | + | var img6_y = y_e * Math.sin(t6 * 180 * 4) + basey; | |
− | + | drawImg(imgWarpper6, img6_x, img6_y); | |
+ | // if (y > 400) { | ||
+ | // clearInterval(timer); | ||
+ | // } | ||
+ | }, 10); | ||
− | + | } | |
− | + | ||
− | + | ||
− | } | + | |
} | } | ||
} | } |
Revision as of 22:51, 16 October 2018
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.