Parametric Radiant Slab - Heating

.block

license: mit

README.md

Built with blockbuilder.org

forked from chriswmackey's block: Parametric THERM Model

forked from chriswmackey's block: Parametric THERM Model-UPDATE

forked from chriswmackey's block: Parametric THERM Radiant Slab

forked from chriswmackey's block: Parametric Radiant Slab - Cooling

data.json

allResults = '{"0,80" : [10.333729, 4.011418, 6.32231, 77.239922],"1,80" : [8.901274, 3.43318, 5.468094, 76.7984],"2,80" : [7.611956, 2.972238, 4.639718, 76.5329],"3,80" : [5.698163, 2.241685, 3.456478, 76.28657],"0,81" : [11.631723, 4.511205, 7.120518, 77.892908],"1,81" : [10.017854, 3.860879, 6.156975, 77.396414],"2,81" : [8.566132, 3.342528, 5.223604, 77.097974],"3,81" : [6.411784, 2.521057, 3.890728, 76.821152],"0,82" : [12.931466, 5.010726, 7.92074, 78.545552],"1,82" : [11.135683, 4.288341, 6.847342, 77.994158],"2,82" : [9.521015, 3.712616, 5.808399, 77.662796],"3,82" : [7.125807, 2.800297, 4.32551, 77.355554],"0,83" : [14.232435, 5.509802, 8.722633, 79.197656],"1,83" : [12.254309, 4.71541, 7.538899, 78.591398],"2,83" : [10.476257, 4.082368, 6.393888, 78.227204],"3,83" : [7.83994, 3.079304, 4.760636, 77.889614],"0,84" : [15.534865, 6.008614, 9.526251, 79.849454],"1,84" : [13.373904, 5.142241, 8.231663, 79.188386],"2,84" : [11.432338, 4.451919, 6.980418, 78.791378],"3,84" : [8.554593, 3.35818, 5.196413, 78.423512],"0,85" : [16.838764, 6.50698, 10.331784, 80.500676],"1,85" : [14.494321, 5.56868, 8.92564, 79.78487],"2,85" : [12.388799, 4.821136, 7.567663, 79.35512],"3,85" : [9.269362, 3.636824, 5.632539, 78.957032],"0,86" : [18.144226, 7.005081, 11.139145, 81.15161],"1,86" : [15.615674, 5.994882, 9.620792, 80.381066],"2,86" : [13.346081, 5.19015, 8.155931, 79.918628],"3,86" : [9.984609, 3.915336, 6.069273, 79.490408],"0,87" : [19.451092, 7.502827, 11.948264, 81.802094],"1,87" : [16.738122, 6.420769, 10.317353, 80.976902],"2,87" : [14.303947, 5.558897, 8.745051, 80.481812],"3,87" : [10.700104, 4.193667, 6.506437, 80.023496],"0,88" : [20.759203, 8.00013, 12.759074, 82.45202],"1,88" : [17.861258, 6.846265, 11.014994, 81.572234],"2,88" : [15.26219, 5.927308, 9.334882, 81.044564],"3,88" : [11.41575, 4.471765, 6.943985, 80.556242],"0,89" : [22.068818, 8.497166, 13.571652, 83.101622],"1,89" : [18.985485, 7.271522, 11.713963, 82.167296],"2,89" : [16.221278, 6.295519, 9.925759, 81.607082],"3,89" : [12.131868, 4.749733, 7.382135, 81.088808],"0,90" : [23.379885, 8.993757, 14.386128, 83.750684],"1,90" : [20.110184, 7.696389, 12.413795, 82.761872],"2,90" : [17.180688, 6.663397, 10.517292, 82.169168],"3,90" : [12.848158, 5.027469, 7.820689, 81.621032],"0,91" : [24.69241, 9.490083, 15.202327, 84.39944],"1,91" : [21.23632, 8.121018, 13.115302, 83.35616],"2,91" : [18.141077, 7.031072, 11.110005, 82.73102],"3,91" : [13.564876, 5.305074, 8.259801, 82.153076],"0,92" : [26.006434, 9.985966, 16.020468, 85.04762],"1,92" : [22.363116, 8.545256, 13.817859, 83.949962],"2,92" : [19.101707, 7.398414, 11.703292, 83.29244],"3,92" : [14.281729, 5.582448, 8.699282, 82.68476],"0,93" : [27.321689, 10.481582, 16.840108, 85.695494],"1,93" : [23.49098, 8.969257, 14.521723, 84.543494],"2,93" : [20.06316, 7.765556, 12.297605, 83.853644],"3,93" : [14.999266, 5.859691, 9.139575, 83.216282],"0,94" : [28.638417, 10.976754, 17.661664, 86.342828],"1,94" : [24.619539, 9.392868, 15.226672, 85.13654],"2,94" : [21.025004, 8.132364, 12.89264, 84.414398],"3,94" : [15.716225, 6.136703, 9.579522, 83.747444],"0,95" : [29.956629, 11.47166, 18.484969, 86.98982],"1,95" : [25.749173, 9.816241, 15.932933, 85.729298],"2,95" : [21.987641, 8.498972, 13.488669, 84.974936],"3,95" : [16.434467, 6.413585, 10.020883, 84.278444],"0,96" : [31.276412, 11.966211, 19.310201, 87.636398],"1,96" : [26.879675, 10.2393, 16.640375, 86.321678],"2,96" : [22.950582, 8.865312, 14.08527, 85.535132],"3,96" : [17.15256, 6.690284, 10.462276, 84.809174],"0,97" : [32.597476, 12.460318, 20.137158, 88.2824],"1,97" : [28.011086, 10.661969, 17.349117, 86.913572],"2,97" : [23.914411, 9.231321, 14.68309, 86.094914],"3,97" : [17.871036, 6.966755, 10.904282, 85.339544],"0,98" : [33.920143, 12.954159, 20.965984, 88.928096],"1,98" : [29.143307, 11.084401, 18.058906, 87.505196],"2,98" : [24.879047, 9.597129, 15.281918, 86.654444],"3,98" : [18.589413, 7.243094, 11.346319, 85.869752],"0,99" : [35.24405, 13.447556, 21.796494, 89.573252],"1,99" : [30.276761, 11.506444, 18.770317, 88.096316],"2,99" : [25.843341, 9.962604, 15.880737, 87.21356],"3,99" : [19.308907, 7.519202, 11.789705, 86.399582],"0,100" : [36.569583, 13.940688, 22.628896, 90.218066],"1,100" : [31.410317, 11.928249, 19.482068, 88.687166],"2,100" : [26.809634, 10.327879, 16.481755, 87.772442],"3,100" : [20.02816, 7.795181, 12.232979, 86.929268],"0,101" : [37.896171, 14.433375, 23.462796, 90.86234],"1,101" : [32.546179, 12.349666, 20.196514, 89.27753],"2,101" : [27.775518, 10.692824, 17.082694, 88.330892],"3,101" : [20.74768, 8.07093, 12.67675, 87.458594],"0,102" : [39.224676, 14.925796, 24.29888, 91.50629],"1,102" : [33.681981, 12.770845, 20.911137, 89.867606],"2,102" : [28.742244, 11.057566, 17.684678, 88.889108],"3,102" : [21.467893, 8.346548, 13.121345, 87.98774],"0,103" : [40.554249, 15.417774, 25.136475, 92.1497],"1,103" : [34.818674, 13.191635, 21.627039, 90.457214],"2,103" : [29.709638, 11.421979, 18.287659, 89.446892],"3,103" : [22.188064, 8.621937, 13.566128, 88.516526],"0,104" : [41.885488, 15.909485, 25.976003, 92.792768],"1,104" : [35.956447, 13.612189, 22.344259, 91.046534],"2,104" : [30.676918, 11.786192, 18.890726, 90.00446],"3,104" : [22.908909, 8.897195, 14.011714, 89.04515],"0,105" : [43.218226, 16.400842, 26.817384, 93.435422],"1,105" : [37.095359, 14.032429, 23.06293, 91.635458],"2,105" : [31.646166, 12.150139, 19.496027, 90.561686],"3,105" : [23.62906, 9.172273, 14.456787, 89.573522],"0,106" : [44.55176, 16.891754, 27.660006, 94.077518],"1,106" : [38.233927, 14.452281, 23.781646, 92.223914],"2,106" : [32.614314, 12.513755, 20.100559, 91.11848],"3,106" : [24.349841, 9.447123, 14.902718, 90.101516],"0,107" : [45.887809, 17.382402, 28.505408, 94.71929],"1,107" : [39.375146, 14.871897, 24.503249, 92.812082],"2,107" : [33.584567, 12.877172, 20.707395, 91.675058],"3,107" : [25.071979, 9.721842, 15.350137, 90.629348],"0,108" : [47.223463, 17.872605, 29.350858, 95.360504],"1,108" : [40.516337, 15.291125, 25.225211, 93.399782],"2,108" : [34.554726, 13.240258, 21.314468, 92.231186],"3,108" : [25.793412, 9.996333, 15.797079, 91.15682],"0,109" : [48.563304, 18.362541, 30.200763, 96.001394],"1,109" : [41.659436, 15.710116, 25.94932, 93.987176],"2,109" : [35.525931, 13.603146, 21.922785, 92.787098],"3,109" : [26.515533, 10.270693, 16.244839, 91.68413],"0,110" : [49.902474, 18.852036, 31.050437, 96.641744],"1,110" : [42.802472, 16.12872, 26.673752, 94.574102],"2,110" : [36.4971, 13.965702, 22.531398, 93.342578],"3,110" : [27.237582, 10.544825, 16.692757, 92.21108]}'

index.html

<!DOCTYPE html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta charset = "UTF-8" />
  <script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="data.json"></script>
  <style>
    .inputSliders { font-family:sans-serif;outline:none;padding-top:15px;width:960px;margin: 0 auto;}
    #summary { font-family:sans-serif;font-weight:bold;text-align:center;outline:none;padding-top:15px;width:960px;margin: 0 auto;}
    #content { width:960px;margin: 0 auto;}
    .inputgroup {border:none;}
    .slider { width:210px;float:left;padding:10px;}
    .slider3 { width:210px;float:left;padding:10px;}
    .slider2 { width:440px;float:left;padding:10px;background-color:#e6e6e6}
    .slider2 { font-family:sans-serif;font-weight:bold;text-align:center;outline:none;padding-top:15px;margin: 0 auto;height:70px;}
    label { float:left;font-weight:bold;padding-bottom:10px;}
    input[type=range] { float:left;clear:left;margin-right:10px;width:130px;}
    .slider3 input[type=range] { float:left;clear:left;margin-right:10px;width:130px;}
    #bside { width:250px;}
    input[type=range]::-ms-track { background: transparent;border-color: transparent;color: transparent;-webkit-appearance: none}
    input[type=range]::-ms-track { -ms-appearance: none; height: 3px;background-color: #d5d5d5; margin-right: 0;
    	margin-top: 5px;margin-bottom: 5px;	border:0; }
    input[type=range]::-ms-thumb { background-color: #FFF; border: 3px solid rgb(150,150,150);
        border-radius: 5px; height: 10px;width: 1px; }
    input[type=range]::-webkit-slider-runnable-track { height: 5px;background:#7c7c7c; margin-top: -4px;}
    input[type=range]::-webkit-slider-thumb { margin-top:-6px;}
    #inputSliders p {padding-top:10px;}
    #solarFlux {background-color:#e6e6e6}
    #topThick {background-color:#f2f2f2}
    #pipeSpacing {background-color:#e6e6e6}
    #waterTemp {background-color:#f2f2f2}
    #bottomSide {background-color:#cccccc}
    #areaServed {background-color:#e6e6e6; height:75px;}
    #tempDelta {background-color:#cccccc; height:75px;}
  </style>
</head>

<body>
  <div class="inputSliders">
			<form id="sliders" autocomplete="off">
				<fieldset class="inputgroup">
          <div class="slider3" id="pipeSpacing">
          <label>Pipe Spacing</label>
					<input type="range" name="pspac" id="pspac" value="2" min="0" max="3"  step = "1"><p id="pspacoutput">12"</p></div>
          <div class="slider3" id="waterTemp">
          <label>Water Temperature</label>
					<input type="range" name="temp" id="temp" value="100" min="80" max="110"  step = "1"><p id="tempoutput">90 F</p></div>
          <div class="slider3"><img src="https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data8/legend.png" alt="Temperature Legend" width="420px"></div>
				</fieldset>
			</form>
		</div>

    <div id="content">
    </div>
  
  <div id="summary">
    <div class="slider" id="hfdiv"><div id="hf"></div><p style="margin-top:3px;">Total<br> Heat Flux</p></div>
    <div class="slider" id="rhfdiv"><div id="rhf"></div><p style="margin-top:3px;">Radiant<br> Heat Flux</p></div>
    <div class="slider" id="chfdiv"><div id="chf"></div><p style="margin-top:3px;">Convective<br> Heat Flux</p></div>
    <div class="slider" id="hottestdiv"><div id="hottest"></div><p style="margin-top:3px;">Hotest Surface<br>Temperature</p></div>
   </div>

  
  <div class="inputSliders">
			<form id="sliders" autocomplete="off">
				<fieldset class="inputgroup">
          <div class="slider" id="areaServed">
          <label>Area Served by Slab</label>
					<input type="range" name="area" id="area" value="250" min="25" max="500" step = "25"><p id="areaoutput">250 sf</p></div>
          <div class="slider" id="tempDelta">
          <label>Water Temp Delta</label>
					<input type="range" name="delta" id="delta" value="3" min="1" max="8"  step = "1"><p id="deltaoutput">3 F</p></div>
          <div class="slider2" id="flowrate"><div id="flow"></div><p style="margin-top:3px;">Water Flow Rate</p></div>
				</fieldset>
			</form>
		</div>


  <script>
    // Load in all of the data.
    var dataObj = JSON.parse(allResults)
    
    // Get inputs from the sliders
    var pSpac = $("#pspac").val().toString(); // Pipe Spacing
    var Temp = $("#temp").val().toString(); // Water Temperature
    var Area = $("#area").val().toString(); // Slab Area
    var Delta = $("#delta").val().toString(); // Water Temp Delta

    // Dictionary to interpret the meaning of the integer inputs.
    pSpacDict = {'0':'6"', '1':'9"', '2':'12"', '3':'18"'}

    // Update inputs
    $("#pspac").on("input", function(event) {
      pSpac = $(this).val();
      $("#pspacoutput").text(pSpacDict[pSpac]);
      updateImg();
      updateData();
      updateFowRate();
    });
    $("#temp").on("input", function(event) {
      Temp = $(this).val();
      $("#tempoutput").text(Temp.toString() + 'F');
      updateImg();
      updateData();
      updateFowRate();
    });
    $("#area").on("input", function(event) {
      Area = $(this).val();
      $("#areaoutput").text(Area.toString() + ' sf');
      updateFowRate();
    });
    $("#delta").on("input", function(event) {
      Delta = $(this).val();
      $("#deltaoutput").text(Delta.toString() + ' F');
      updateFowRate();
    });
    
    // Function to retrive the images from github.
    updateImg = function(){
      URL = 'https://raw.githubusercontent.com/chriswmackey/explorer-test/master/data8/NCGMtherm'
      URL = URL + pSpac
      URL = URL + Temp + '_View3.png'
      
      d3.select(".imgdisplay").remove()

      svg.append("image")
        .attr('xlink:href', URL)
        .attr('class', 'pico')
        .attr('width', '800')
      	.attr('height', '345')
      	.attr('x', '80')
    		.attr('y', '0')
    		.attr("class","imgdisplay")
    }

    // Function to update the metrics.
    updateData = function(){
    	// Retrieve the energy use and peak load data from the json.
      var inputList = [pSpac, Temp]
      var jsonStr = inputList.join(',')
      var rawData = dataObj[jsonStr]
      
      // Update the metrics on the bottom.
      d3.selectAll(".resultText").remove();
      
      // Calculate the metrics.
      var hFlux = precisionRound(rawData[0],1);
      var chFlux =  precisionRound(rawData[1], 1)
      var rhFlux =  precisionRound(rawData[2], 1)
      var hotTemp = precisionRound(rawData[3],1)
      
      var galColor = '#000'
      
      d3.select("#hf").append("text")
      	.attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
    		.style('font-size', '30px')
    		.style('font-family', 'sans-serif')
        .text(hFlux.toString() + ' BTU/sf');
     	d3.select("#rhf").append("text")
      	.attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
    		.style('font-size', '30px')
    		.style('font-family', 'sans-serif')
        .text(rhFlux.toString()+ ' BTU/sf');
      d3.select("#chf").append("text")
      	.attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
    		.style('font-size', '30px')
    		.style('font-family', 'sans-serif')
        .text(chFlux.toString()+ ' BTU/sf');
      d3.select("#hottest").append("text")
      	.attr("class", "resultText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
    		.style('font-size', '30px')
    		.style('font-family', 'sans-serif')
      	.style('color', galColor)
        .text(hotTemp.toString()+ ' F');
    }
    
    
    // Function to update the flow rate.
    updateFowRate = function(){
      // Retrieve the energy use and peak load data from the json.
      var inputList = [pSpac, Temp]
      var jsonStr = inputList.join(',')
      var rawData = dataObj[jsonStr]
      
    	var totalHeat =  Area * (rawData[0] / 3.41214163) // Heat added by floor in Watts
      var tempDeltaC = Delta * (5/9)
      var massFlow = totalHeat / (4186 * tempDeltaC) // Water mass flow in kg/s
      var volumeFlow = massFlow / 1000 // Water volume flow in m3/s
      var volumeFlowIP = volumeFlow * 35.3147 // Water voume in ft3/s
      var pipeCross = Math.PI * (0.03125*0.03125) // Cross sectional area of pipe in ft2
      var waterSpeed = volumeFlowIP/pipeCross // Speed of water in the pipe in fps
      var waterSpeedDisplay = precisionRound(waterSpeed,2);
      
      // Update the metrics on the bottom.
      d3.selectAll(".flowText").remove();
      
      d3.select("#flow").append("text")
      	.attr("class", "flowText")
        .attr("text-anchor", "start")
        .attr("fill", "#000")
    		.style('font-size', '30px')
    		.style('font-family', 'sans-serif')
        .text(waterSpeedDisplay.toString() + ' fps');
    }
    
    // Utility Functions
    function add(a, b) {
    	return a + b;
		}
    function precisionRound(number, precision) {
  		var factor = Math.pow(10, precision);
  		return Math.round(number * factor) / factor;
		}
    
    
    // Display the image in the scene.
    var svg = d3.select("#content").append("svg")
    .attr("width", 960)
    .attr("height", 400)
   updateImg()
   updateData()
   updateFowRate()
   
   d3.select(self.frameElement).style("height", 900 + "px");
  </script>
  
</body>

thumbnail.png