Skip to content

Commit

Permalink
merge
Browse files Browse the repository at this point in the history
  • Loading branch information
laurabreiman committed Jul 31, 2013
2 parents e94d47f + d7b582f commit 3f357ba
Show file tree
Hide file tree
Showing 7 changed files with 119 additions and 26 deletions.
Binary file modified .DS_Store
View file
Binary file not shown.
6 changes: 3 additions & 3 deletions data.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
var tempScale={
"Steak":
[{'info':'lack of protein denaturization below 40\xB0 C Raw','position':6},
[{'info':'No protein denaturization below 40\xB0 C Raw','position':6},
{'info':'Myosin breaks down 40-55\xB0 C Rare','position':5},
{'info':'Glycogen breaks down 55-60\xB0 C Medium Rare','position':4},
{'info':'Myoglobin denatures 60-70\xB0 C Medium','position':3},
Expand All @@ -10,15 +10,15 @@ var tempScale={

"Tuna":

[{'info':'Lack of protein denaturization below 40\xB0 C','position':6},
[{'info':'No protein denaturization below 40\xB0 C','position':6},
{'info':'Myosin breaks down 40-50\xB0 C','position':5},
{'info':'Myocommata begins to rupture 50\xB0 C','position':4},
{'info':'Myoglobin denatures 60-70\xB0 C','position':3},
{'info':'Actin denatures 70\xB0 C','position':2},
{'info':'Fibers begin to disintegrate 90+\xB0 C+','position':1},
{'info':'Charring at 180+\xB0 C+','position':0}],
"Turkey":
[{'info':'lack of protein denaturization below 40\xB0 C Raw','position':6},
[{'info':'No protein denaturization below 40\xB0 C Raw','position':6},
{'info':'Myosin breaks down 40-55\xB0 C Rare','position':5},
{'info':'Glycogen breaks down 55-60\xB0 C Medium Rare','position':4},
{'info':'Myoglobin denatures 60-70\xB0 C Medium','position':3},
Expand Down
13 changes: 12 additions & 1 deletion graph.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,18 @@ form {
.grid path {
stroke-width: 0;
}

div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
.css3gradient{width:300px;height:100px;
background-color:#693d34;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#693d34, endColorstr=#e87c66);
Expand Down
25 changes: 16 additions & 9 deletions graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ var n = boundaries[meatType].length*2+1, // number of layers

var margin = {top: 150, right: 10, bottom: 100, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
.domain(d3.range(m))
Expand Down Expand Up @@ -128,7 +128,9 @@ var svg = d3.select("body").append("svg")
.attr("y", -margin.top/2)
.style("font-size",'30px')
.text(meatType+ " temperature is: ______\xB0C");

var ttip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1);
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
Expand Down Expand Up @@ -166,7 +168,7 @@ var rect = layer.selectAll("rect")
var Offset = document.getElementById("graphSteak").offsetTop;
var pos=parseInt(data[0].length-(event.pageY-Offset-margin.top)/(height/yStackMax)+1);
var line=parseInt((event.pageX-margin.left)/(x.rangeBand()+1)-5.0);
$(d3.select('.mylabel')[0][0]).text( meatType+ " temperature is "+ data[line][pos].toFixed(2)+ "\xB0C");
//$(d3.select('.mylabel')[0][0]).text( meatType+ " temperature is "+ data[line][pos].toFixed(2)+ "\xB0C");
//$(d3.select('.mylabel')[0][0]).text("Steak temperature is "+ pos+ "\xB0C");
$("line").remove();
var myLine = d3.select("svg").append("svg:line")
Expand All @@ -175,6 +177,11 @@ $(d3.select('.mylabel')[0][0]).text( meatType+ " temperature is "+ data[line][po
.attr("x2", width*31/30)
.attr("y2", event.pageY-Offset-5)
.style("stroke", "grey");
var ttip=d3.select('.tooltip');
ttip.html(data[line][pos].toFixed(2)+ "\xB0C")
.style("opacity", 1)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY) + "px");
})


Expand Down Expand Up @@ -255,24 +262,24 @@ svg.append("text")
.attr("x",-height+margin.bottom/3)
.attr("transform", "rotate(-90)")
.text("Side 2");
var svgContainer = d3.select("body").append("svg")
.attr("width", '100%')
.attr("height", '80%');
var svgContainer = d3.select(".span6").append("svg")
.attr("width", '50%')
.attr("height", '20%');
var texts=svgContainer.selectAll("text")
.data([0])
.enter().append("text")
.attr("text-anchor", "left")
.attr("x", '10%')
.attr("y", 10)
.text("Maximum internal temperature reached");
.text("Final Protein State Reached");
//Draw the Rectangle
var rectangle = svgContainer.selectAll("rect")
.data(maxTemps.reverse())
.enter().append("rect")
.attr("x", '10%')
.attr("y", function(d,i){return 20+i*5})
.attr("y", function(d,i){return 20+i*1})
.attr("width", '60%')
.attr("height", 5)
.attr("height", 1)
.style('fill', function(d,i) {return color[meatType](getState(d))});
/*
svg.append("g")
Expand Down
5 changes: 4 additions & 1 deletion home-screen.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script src="data.js"></script>
<script src="numeric-1.2.6.js"></script>

Expand All @@ -16,6 +15,8 @@

<link href="home-screen.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">


<link href="graph.css" rel="stylesheet">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

Expand Down Expand Up @@ -101,8 +102,10 @@ <h3 id="myModalLabel">Create Your Meat</h3>

<link href="perfectSteak.css" rel="stylesheet">
<div class="perfectSteak"></div>

<div class='graph' id='graphSteak'></div>
<div class='chart-container'></div>




Expand Down
18 changes: 18 additions & 0 deletions perfectSteak.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,22 @@ input[type="text"] {
#thickInpDiv, #tempInpDiv, #meatTypeDiv{
padding: 5px;
margin:5px;
}
.toggleSwitch {
width: ...;
height: ...;
/* add other styling as appropriate to position element */
position: relative;
}
.slider {
background-image: url(...);
position: absolute;
width: ...;
height: ...;
}
.slider.on {
right: 0;
}
.slider.off {
left: 0;
}
78 changes: 66 additions & 12 deletions perfectSteak.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,36 @@ var perfectSteak = function (div) {
for (var h=0; h<currentInfo["numRows"]; h++){
console.log(h)
console.log($("#inp1_"+h).val())
if (parseFloat($("#inp1_"+h).val())>300||parseFloat($("#inp1_"+h).val())<0){
console.log("ohno")
var side1Alert=$("<div class='alert alert-danger' id='row"+h+"side1alert'>!</div>");
$("#row"+h+"side1").append(side1Alert)
// if (parseFloat($("#inp1_"+h).val())>300){
// var side1Alert=$("<div class='alert alert-danger' id='row"+h+"side1alert'>Too high!</div>");
// $("#row"+h+"side1").append(side1Alert);
// currentInfo["OKToGraph"]=false;
// }
if(parseFloat($("#inp1_"+h).val())<0){
var side1Alert=$("<div class='alert alert-danger' id='row"+h+"side1alert'>Too low!</div>");
$("#row"+h+"side1").append(side1Alert);
currentInfo["OKToGraph"]=false;
}
if(parseFloat($("#inp2_"+h).val())>300||parseFloat($("#inp2_"+h).val())<0){
console.log("ohno2")
var side2Alert=$("<div class='alert alert-danger' id='row"+h+"side2alert'>!</div>");
// if(parseFloat($("#inp2_"+h).val())>300){
// var side2Alert=$("<div class='alert alert-danger' id='row"+h+"side2alert'>Too high!</div>");
// $("#row"+h+"side2").append(side2Alert);
// currentInfo["OKToGraph"]=false;
// }
if(parseFloat($("#inp2_"+h).val())<0){
var side2Alert=$("<div class='alert alert-danger' id='row"+h+"side2alert'>Too low!</div>");
$("#row"+h+"side2").append(side2Alert);
currentInfo["OKToGraph"]=false;
}
if(parseFloat($("#row"+h+"time").val())<0){
var timeAlert=$("<div class='alert alert-danger' id='row"+h+"timeAlert'>Negative time</div>");
$("#duration"+h).append(timeAlert);
currentInfo["OKToGraph"]=false;
}
// if(parseFloat($("#row"+h+"time").val())>7200){
// var timeAlert=$("<div class='alert alert-danger' id='row"+h+"timeAlert'>Max 2 hours</div>");
// $("#duration"+h).append(timeAlert);
// currentInfo["OKToGraph"]=false;
// }
}
}

Expand Down Expand Up @@ -93,6 +111,7 @@ var perfectSteak = function (div) {
}

dataChange(newData);

}

return {
Expand Down Expand Up @@ -162,6 +181,7 @@ var perfectSteak = function (div) {

}
}

var buildDisplay = function () {
console.log("isOK"+model.checkDiv())
console.log("OK"+model.currentInfo["OKToGraph"])
Expand All @@ -174,7 +194,7 @@ var perfectSteak = function (div) {

$("#startModal").modal("show");

cookButton = $("#cookButton");
cookButton = $(".cookButton");
//
// var thicknessInp = ($("<div id=thickInpDiv><input type='text' id='thicknessInp' value='6'></input> Meat Thickness (cm) </div>"));
// thicknessInp.change(function(){
Expand All @@ -195,6 +215,32 @@ var perfectSteak = function (div) {
// var cookbuttonrow = $("<div class='row'></div");
// cookbuttonrow.append(cookButton);

// $('.optionBar').append(thicknessInp, steakTemp, meatInput,cookbuttonrow);


// cookButton = $("<button class='btn' id='cookButton'>Let's get cooking!</button>");
//
// var thicknessInp = ($("<div id=thickInpDiv><input type='text' id='thicknessInp' value='6'></input> Meat Thickness (cm) </div>"));
// thicknessInp.change(function(){
// model.checkDiv();
// if(clicked&&model.currentInfo["OKToGraph"]){graph()}});
// var steakTemp = ($("<div id=tempInpDiv><input type='text' id='steakTemp' value='23'></input>Initial Meat Temperature (&#176;C)</div>"));
// steakTemp.change(function(){
// model.checkDiv();
// if(clicked&&model.currentInfo["OKToGraph"]){graph()}});
// //Item to hold inputs of meat. Append meatInput to your display
// var meatInput=$('<form id="meatInp">What type of meat are you cooking?<br>'
// +'<input type="radio" name="meat" id="Steak" checked>Steak<br>'
// +'<input type="radio" name="meat" id="Tuna">Tuna<br>'
// +'<input type="radio" name="meat" id="Turkey">Turkey</form>');
// meatInput.change(function(){
// model.checkDiv();
// if(clicked&&model.currentInfo["OKToGraph"]){graph()}});
//
//
// var cookbuttonrow = $("<div class='row'></div");
// cookbuttonrow.append(cookButton);
//
// $('.optionBar').append(thicknessInp, steakTemp, meatInput,cookbuttonrow);

buildTable();
Expand All @@ -203,7 +249,10 @@ var perfectSteak = function (div) {
(".")
}
}

var toF=function(C)
{
return (C*(5/9)+32 + "&#176;F");
}
var buildTable = function () {
var inpTabHeader = $("<tr><th class='inpTabHeader'>Total Time(m:s)<th class='inpTabHeader'>Duration (s)</th><th class='inpTabHeader'>Side 1 (&#176;C)</th><th class='inpTabHeader'>Side 2 (&#176;C)</th></tr>");
inputTable.append(inpTabHeader);
Expand Down Expand Up @@ -232,7 +281,7 @@ var perfectSteak = function (div) {
var minSecs=model.convertTime(i*timeStep);
}
var timeCol=$("<td id='timeCol"+i+"'>"+minSecs+"</td>");
var duration = $("<td ><input id='row" + i + "time' type='text' value='15'></td>");
var duration = $("<td id='duration"+i+"'><input id='row" + i + "time' type='text' value='15'></td>");
var inp1 = $("<input type='text' id='inp1_" + i + "'>");
var inp2 = $("<input type='text' id='inp2_" + i + "'>");
var step1Col = $("<td id='row" + i + "side1'></input>");
Expand Down Expand Up @@ -444,8 +493,13 @@ var graph=function(){
var model = Model();
var view = View(div, model);

$('.inputTable').offset({top:10});
view.buildDisplay();



view.buildDisplay();
$('.inputTable').offset({top:60});



};
return {
Expand Down

0 comments on commit 3f357ba

Please sign in to comment.