jhodges/dev
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

d

Browse Source
This commit is contained in:
James 2020-03-29 08:31:40 +01:00
parent b185150343
commit 9363fea748
7 changed files with 438 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,2 +1,2 @@
*.css
dev.css
error.txt

6
dev.less
View File

@ -101,3 +101,9 @@ body::before {
}
}
/*** calc ***/
#heatcalc{
color:#000;
}

1
heatcalc/data.json Normal file
View File

File diff suppressed because one or more lines are too long

93
heatcalc/index.css Normal file
View File

@ -0,0 +1,93 @@
#heatcalc *{
width: auto;
}
#hc_table{
border-top:1px solid black;
border-left:1px solid black;
text-align: center;
border-collapse: separate;
}
#hc_table td{
border-bottom:1px solid black;
border-right:1px solid black;
padding:2px;
}
#hc_table th{
border-bottom:1px solid black;
border-right:1px solid black;
background: #bbb;
}
#hc_table .filtered{
color:#aaa;
}
label{
text-align: right;
}
fieldset{
text-align: center;
}
body>fieldset{
margin-bottom:10px;
}
legend{
margin: 0 auto;
}
#filters input,#temps input{
width:50px;
}
#filters fieldset{
display: inline;
}
td.hover, tr.hover td{
background-color:#990000;
color:#fff;
}
#button_container{
position: fixed;
z-index: 250;
}
#button_container button{
font-size: 50px;
background-color: rgba(153, 0, 0, 0.75);
color:#fff;
z-index: 250;
}
#button_container button#left{
left: 8%;
}
#button_container button#right{
right: 8%;
}
#table_container{
overflow: auto;
overflow-y: hidden;
overflow-scrolling: touch;
}
.field{
white-space: nowrap;
}
#heatcalc thead th{
z-index: 150;
}
#heatcalc tbody th{
z-index: 100;
}
#heatcalc thead th:nth-child(1){
z-index: 200;
}
#heatcalc td, #heatcalc th{
padding: 2px 5px;
text-align: center;
font-family: arial;
}
select{
width:auto;
}
fieldset{
border:1px solid #888;
padding:5px;
margin:5px;
}

61
heatcalc/index.html Normal file
View File

@ -0,0 +1,61 @@
<script src="scripts/require.js"></script>
<script>
require(['heatcalc'], function (hc) {
hc.init("<?php echo $block->getFileUrl('data.json');?>");
});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo $block->getFileUrl('heatcalc.css');?>" />
<div id="heatcalc_loading">
Loading.....
</div>
<div id="heatcalc" style="display:none;">
<fieldset>
<legend>Product</legend>
<select id="hc_product"><option>Select...</option></select>
</fieldset>
<fieldset id="temps">
<legend>Temperature</legend>
<span class="field"><label for="t_flow">Flow:</label> <input value="75" type="text" name="t_flow"/></span>
<span class="field"><label for="t_return">Return:</label> <input value="65" type="text" name="t_return"/></span>
<span class="field"><label for="t_room">Room:</label> <input value="20" type="text" name="t_room"/></span>
<select name="mode"/>
<option value="a" selected>Arithmetic</option>
<option value="l">Logarithmic</option>
</select>
<span class="field"><label for="dt">dT</label> <input type="text" name="dt" readonly/></span>
</fieldset>
<fieldset id="filters">
<legend>Filter/Highlight</legend>
<fieldset>
<legend>Output (W)</legend>
<span class="field"><label for="w_min">Min:</label>
<input type="text" name="w_min"/></span>
<span class="field"><label for="w_max">Max:</label>
<input type="text" name="w_max"/></span>
</fieldset>
<fieldset>
<legend>Lenght (mm)</legend>
<span class="field"><label for="l_min">Min:</label>
<input type="text" name="l_min"/></span>
<span class="field"><label for="l_max">Max:</label>
<input type="text" name="l_max"/></span>
</fieldset>
<fieldset>
<legend>Height (mm)</legend>
<span class="field"><label for="h_min">Min:</label>
<input type="text" name="h_min"/></span>
<span class="field"><label for="h_max">Max:</label>
<input type="text" name="h_max"/></span>
</fieldset>
</fieldset>
<div id="button_container">
<button id='left'>&lt;&lt;</button>
<button id='right'>&gt;&gt;</button>
<div id="table_container">
</div>
</div>
</div>

271
heatcalc/index.js Normal file
View File

@ -0,0 +1,271 @@
define(["jquery"], function ($) {
"use strict";
var data;
return {
init: function(datapath){
$().ready(function(){
// hook into the on change events to update things when user input happens
$("#temps input,#temps select").change(function(){
calc_dt();
populate_table();
});
$("#hc_product").change(function(){
draw_table();
populate_table();
check_scroll();
});
$("#filters").change(function(){
populate_table();
});
$("#right").click(function(event) {
event.preventDefault();
$("#table_container").animate({
scrollLeft: "+=300px"
}, "slow", function() {
check_scroll();
});
});
$("#left").click(function(event) {
event.preventDefault();
$("#table_container").animate({
scrollLeft: "-=300px"
}, "slow", function() {
check_scroll();
});
});
//calc the inital dt
calc_dt();
//init the scroller icons
check_scroll();
$(window).scroll(check_scroll);
$("#table_container").scroll(check_scroll);
$.getJSON(datapath, function(d) {
data=d;
// create the product switcher
var sel=$("#hc_product");
// loop through the product names and create the options
$.each(data, function(idx, obj) {
sel.append( $("<option>",{"value":idx}).text(idx) );
});
//finally display the calculator
$("#heatcalc_loading").hide();
$("#heatcalc").show();
});
});
}
};
function check_scroll(){
// make sure the left/right buttons are hidden if already at far left/right
var sl=$("#table_container").scrollLeft();
var sl_max = $("#hc_table").outerWidth() - $("#table_container").width();
if(sl>0){
$("#left").show();
}else{
$("#left").hide();
}
if(sl<(sl_max-1)){
$("#right").show();
}else{
$("#right").hide();
}
// make sure buttons are not scrolled off the top of the page
// and same for the thead
var scrollTop = $(window).scrollTop();
var tableTop = $("#table_container").offset().top;
var buttonTop = $('#button_container').offset().top;
console.log("tt:"+tableTop+" st:"+scrollTop+" bt:"+buttonTop);
if( scrollTop > tableTop ){
$("#button_container").css('top', tableTop-(scrollTop-tableTop));
}else{
$("#button_container").css('top', tableTop);
}
/*
buttonOffset = $('#button_container').offset().top;
//buttonOffset = parseInt(buttonOffset, 10) || 0;
if(scrollPosition > buttonOffset){
$("#button_container").css('top', scrollPosition-buttonOffset);
$("#heatcalc thead th").css('top', scrollPosition-buttonOffset-1);
}else{
$("#button_container").css('top', 0);
$("#heatcalc thead th").css('top', 0);
}
$('#heatcalc tbody th').css("left", $("#table_container").scrollLeft());
$('#heatcalc thead th:nth-child(1)').css("left", $("#table_container").scrollLeft());
*/
}
function draw_table(){
var prod_name = $("#hc_product option:selected").val();
// creates the empty table
// each cell has id=type-x-y for targeting during population
// get the data for just this product
var prod_data=data[prod_name];
//get a list of y values unique and complete for all type/depth and x combos
var y_vals={};
$.each(prod_data, function(idx1,val1) { // type/depth
$.each(val1, function(idx2,val2) { // x
$.each(val2, function(idx3,val3) { // y
y_vals[idx3]=true;
});
});
});
//delete any old table
$("#hc_table").remove();
// create the new table
var table=$("<table id='hc_table'>");
var thead=$("<thead>");
//header row 1: type/depths
var row=$("<tr>");
var cell=$("<th>").text("Type/Depth");
row.append(cell);
$.each(prod_data, function(idx1,val1) {
// each "type/depth" will contain multiple x vales, so the cell needs to span them
// count into x_count
var x_count=0;
$.each(val1, function(idx2,val2) {
x_count++;
});
//create the cell
var cell=$("<th colspan='"+x_count+"'>").text(idx1);
row.append(cell);
});
thead.append(row);
//header row 2: height x"s
var row=$("<tr>");
var cell=$("<th>").text("Length \\ Height");
row.append(cell);
$.each(prod_data, function(idx1,val1) {
// each "type/depth" will contain multiple x vales
$.each(val1, function(idx2,val2) {
cell=$("<th>").text(idx2);
row.append(cell);
});
});
thead.append(row);
table.append(thead);
//data row, for all y_vals
$.each(y_vals, function(y) {
var row=$("<tr>");
var cell=$("<th>").text(y);
row.append(cell);
//now all the x"s
$.each(prod_data, function(idx1,val1) {
// each "type/depth" will contain multiple x vales
$.each(val1, function(idx2,val2) {
cell=$("<td>").text("-").attr("id",idx1.replace(/\s/g,"").replace(/[\.\/]/g,"_")+"-"+idx2.replace(/\s/g,"").replace(/[\.\/]/g,"_")+"-"+y.replace(/\s/g,"").replace(/[\.\/]/g,"_"));
row.append(cell);
});
});
table.append(row);
});
// display the table
$("#table_container").append(table);
//enable highlighting
$("#hc_table td").on("mouseover", function() {
$(this).closest("tr").addClass("hover");
$(this).closest("table").find("td:nth-child(" + ($(this).index() + 1) + ")").addClass("hover");
});
$("#hc_table td").on("mouseout", function() {
$(this).closest("table").find("td,tr").removeClass("hover");
});
}
function populate_table(){
var prod_name = $("#hc_product option:selected").val();
var dt=calc_dt();
var mode=$("[name='mode']").val();
var dtr;
if(mode=="a"){
dtr=dt/50;
}
if(mode=="l"){
dtr=dt/49.83;
}
var w_min=parseFloat($("[name='w_min']").val());
var w_max=parseFloat($("[name='w_max']").val());
var l_min=parseFloat($("[name='l_min']").val());
var l_max=parseFloat($("[name='l_max']").val());
var h_min=parseFloat($("[name='h_min']").val());
var h_max=parseFloat($("[name='h_max']").val());
// get the data for just this product
var prod_data=data[prod_name];
//lets do the calcs!
$.each(prod_data, function(type,type_vals) {
$.each(type_vals, function(x,x_vals) {
$.each(x_vals, function(y,vals) {
if(vals.w==0){
return;
}
var target_cell=$("#"+type.replace(/\s/g,"").replace(/[\.\/]/g,"_")+"-"+x.replace(/\s/g,"").replace(/[\.\/]/g,"_")+"-"+y.replace(/\s/g,"").replace(/[\.\/]/g,"_"));
var n=parseFloat(vals.n);
var k=Math.pow(dtr,n);
var w=(parseFloat(vals.w)*k).toFixed(0);
target_cell.text( w + "W");
if(
(w_min>0 && w<w_min) ||
(w_max>0 && w>w_max) ||
(l_min>0 && y<l_min) ||
(l_max>0 && y>l_max) ||
(h_min>0 && x<h_min) ||
(h_max>0 && x>h_max)
){
target_cell.addClass("filtered");
}else{
target_cell.removeClass("filtered");
}
});
});
});
}
function calc_dt(){
var mode=$("[name='mode']").val();
var t_flow=parseInt($("[name='t_flow']").val());
var t_return=parseInt($("[name='t_return']").val());
var t_room=parseInt($("[name='t_room']").val());
var dt;
if(mode=="a"){
dt=((t_flow+t_return)/2)-t_room;
}
if(mode=="l"){
dt=((t_flow-t_return)/Math.log((t_flow-t_room)/(t_return-t_room)));
}
$("[name='dt']").val(dt.toFixed(2));
return dt;
}
});

5
heatcalc/require.js Normal file
View File

File diff suppressed because one or more lines are too long