Skip to content

Commit

Permalink
Updated interface
Browse files Browse the repository at this point in the history
  • Loading branch information
@thorn573
thorn573 committed Jan 12, 2024
1 parent b0b8152 commit b286402
Show file tree
Hide file tree
Showing 5 changed files with 206 additions and 67 deletions.
163 changes: 121 additions & 42 deletions Leaflet.PithEstimate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,18 @@ function PithEstimateInterface(Lt) {
*/
function EstimateData(Inte) {
this.data = [];
this.recent = null;

/**
* Save estimate data to array.
* @function
*
* @param {*} innerHeight
* @param {*} innerWidth
* @param {*} growthRate
* @param {float} innerHeight -
* @param {float} innerWidth -
* @param {float} innerRadius -
* @param {integer} growthRate -
* @param {integer} innerYear -
* @param {integer} estYear -
*/
EstimateData.prototype.saveEstimateData = function(innerHeight, innerLength, innerRadius, growthRate, innerYear, estYear) {
let newDataElement = {
Expand All @@ -50,6 +56,17 @@ function EstimateData(Inte) {

this.data.push(newDataElement);
}

/**
* Update value which controls what is shown to user.
* @function
*
* @param {integer} estYear - Estimated inner year value.
*/
EstimateData.prototype.updateRecent = function(estYear) {
this.recent = estYear;
Inte.treering.metaDataText.updateText();
}
}

/**
Expand Down Expand Up @@ -157,7 +174,7 @@ function NewEstimate(Inte) {

// Push change to undo stack:
// Inte.treering.undo.push();

Inte.newEstimateDialog.openInstructions();
this.action();
}

Expand Down Expand Up @@ -223,14 +240,16 @@ function NewEstimate(Inte) {
// Equation found by Duncan in 1989 paper:
this.innerRadius = ((this.innerLength**2) / (8*this.innerHeight)) + (this.innerHeight/2);

Inte.newEstimateDialog.open(this.innerLength, this.innerHeight, this.innerRadius);
Inte.newEstimateDialog.openInterface(this.innerLength, this.innerHeight, this.innerRadius);
break;
}
});
}

/**
*
* @param {*} numYears
* @returns
*/
NewEstimate.prototype.findYear = function(numYears) {
let allDistances = Inte.treering.helper.findDistances();
Expand All @@ -239,11 +258,11 @@ function NewEstimate(Inte) {
let totalGrowth = twDistances.slice(0, numYears).reduce((partialSum, x) => partialSum + x, 0);
let growthRate = totalGrowth / numYears;
let innerYear = this.innerRadius / growthRate;
let estYear = allDistances.tw.x[0] - innerYear;
let estYear = Math.round(allDistances.tw.x[0] - innerYear);

Inte.estimateData.saveEstimateData(this.innerHeight, this.innerLength, this.innerRadius, growthRate, innerYear, estYear);
alert(`Estimated innermost year value: ${estYear.toFixed(3)}`);
this.disable();

return estYear;
}
}

Expand All @@ -258,17 +277,9 @@ function NewEstimateDialog(Inte) {
this.numAvailableYears = 0;

let minWidth = 200;
let minHeight = 260;
let minHeight = 290;
this.size = [minWidth, minHeight];
this.anchor = [50, 0];

let html = document.getElementById("PithEstimate-growthRateDialog-template").innerHTML;
this.template = Handlebars.compile(html);
let content = this.template({
l: 0,
h: 0,
r: 0
});

this.dialog = L.control.dialog({
"size": this.size,
Expand All @@ -277,16 +288,31 @@ function NewEstimateDialog(Inte) {
"position": 'topleft',
"maxSize": [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER],
"minSize": [minWidth, minHeight],
}).setContent(content).addTo(Inte.treering.viewer);
}).addTo(Inte.treering.viewer);
this.dialog.hideClose();

this.dialogOpen = false;

/**
* Opens dialog window.
* Opens instructional dialog window.
* @function
*/
NewEstimateDialog.prototype.open = function(length, height, radius) {
NewEstimateDialog.prototype.openInstructions = function() {
let content = document.getElementById("PithEstimate-instructionDialog-template").innerHTML;
this.dialog.setContent(content);
this.dialog.open();
this.dialogOpen = true;
}

/**
* Opens interactable dialog window.
* @function
*
* @param {float} length - Number representing length of arc in mm.
* @param {float} height - Number representing height of arc in mm.
* @param {float} radius - Number representing radius of arc in mm.
*/
NewEstimateDialog.prototype.openInterface = function(length, height, radius) {
let allDistances = Inte.treering.helper.findDistances();
this.numAvailableYears = allDistances.tw.x.length;

Expand All @@ -296,11 +322,18 @@ function NewEstimateDialog(Inte) {
let year30DNE = this.numAvailableYears < 30;
let customMax = this.numAvailableYears;

let content = this.template({
let html = document.getElementById("PithEstimate-growthRateDialog-template").innerHTML;
let template = Handlebars.compile(html);

let content = template({
l: length.toFixed(3),
h: height.toFixed(3),
r: radius.toFixed(3),
customLimit: customMax
customLimit: customMax,
yearEst5: Inte.newEstimate.findYear(5),
yearEst10: Inte.newEstimate.findYear(10),
yearEst20: Inte.newEstimate.findYear(20),
yearEst30: Inte.newEstimate.findYear(30),
});

this.dialog.setContent(content);
Expand Down Expand Up @@ -330,37 +363,51 @@ function NewEstimateDialog(Inte) {
* @function
*/
NewEstimateDialog.prototype.createDialogEventListeners = function () {
$("#PithEstimate-5-btn").on("click", () => {
$("#PithEstimate-customYearInput").hide();
$("#PithEstimate-customBtn-container").show();
this.numYears = parseInt($("#PithEstimate-5-btn").val());
$("#PithEstimate-5-row").on("click", () => {
this.disableCustom();
this.highlightRow("#PithEstimate-5-row");
this.numYears = 5;
});

$("#PithEstimate-10-btn").on("click", () => {
$("#PithEstimate-customYearInput").hide();
$("#PithEstimate-customBtn-container").show();
this.numYears = parseInt($("#PithEstimate-10-btn").val());
$("#PithEstimate-10-row").on("click", () => {
this.disableCustom();
this.highlightRow("#PithEstimate-10-row");
this.numYears = 10;
});

$("#PithEstimate-20-btn").on("click", () => {
$("#PithEstimate-customYearInput").hide();
$("#PithEstimate-customBtn-container").show();
this.numYears = parseInt($("#PithEstimate-20-btn").val());
$("#PithEstimate-20-row").on("click", () => {
this.disableCustom();
this.highlightRow("#PithEstimate-20-row");
this.numYears = 20;
});

$("#PithEstimate-30-btn").on("click", () => {
$("#PithEstimate-customYearInput").hide();
$("#PithEstimate-customBtn-container").show();
this.numYears = parseInt($("#PithEstimate-30-btn").val());
$("#PithEstimate-30-row").on("click", () => {
this.disableCustom();
this.highlightRow("#PithEstimate-30-row");
this.numYears = 30;
});

$("#PithEstimate-custom-btn").on("click", () => {
$("#PithEstimate-custom-row").on("click", () => {
$("#PithEstimate-customYearInput").show();
$("#PithEstimate-customBtn-container").hide();
})
$("#PithEstimate-customBtn-text").hide();

this.highlightRow("#PithEstimate-custom-row");
});

$("#PithEstimate-customYearInput").on("input", () => {
this.numYears = parseInt($("#PithEstimate-customYearInput").val());

if (this.numYears > this.numAvailableYears) {
let yearDiff = this.numYears - this.numAvailableYears;
alert(`Error: Need ${yearDiff} more measurements to use selected growth rate.`);
return
} else if (this.numYears < 1) {
alert("Error: Growth rate must be calculated from >0 years.");
return
}

let yearEst = Inte.newEstimate.findYear(this.numYears);
$("#PithEstimate-customBtn-estimate").html(yearEst);
})

$("#PithEstimate-confirm-btn").on("click", () => {
Expand All @@ -372,7 +419,39 @@ function NewEstimateDialog(Inte) {
alert("Error: Growth rate must be calculated from >0 years.");
return
}
Inte.newEstimate.findYear(this.numYears);

let yearEst = Inte.newEstimate.findYear(this.numYears);
Inte.estimateData.updateRecent(yearEst);
console.log(Inte.estimateData.recent);
Inte.newEstimate.disable();
});
}

/**
* Changes which row in 'Inner Year Estimate' table is highlighted.
* @function
*
* @param {string} rowID - HTML element id of table row.
*/
NewEstimateDialog.prototype.highlightRow = function (rowID) {
let highlightColor = "#e6f0ce";

$("#PithEstimate-5-row").css("background-color", "");
$("#PithEstimate-10-row").css("background-color", "");
$("#PithEstimate-20-row").css("background-color", "");
$("#PithEstimate-30-row").css("background-color", "");
$("#PithEstimate-custom-row").css("background-color", "");

$(rowID).css("background-color", highlightColor);
}

/**
* Disables custom input in 'Inner Year Estimate' table.
* @function
*/
NewEstimateDialog.prototype.disableCustom = function() {
$("#PithEstimate-customYearInput").hide();
$("#PithEstimate-customBtn-text").show();
$("#PithEstimate-customBtn-estimate").html("NaN");
}
}
35 changes: 35 additions & 0 deletions Style.PithEstimate.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,41 @@
flex-direction: column;
}

.PithEstimate-table-container {
display: flex;
justify-content: center;
}

.PithEstimate-table {
font-family: arial, sans-serif;
border-collapse: collapse;
border: none;

width: 100%;

margin-top: 4px;
}

.PithEstimate-table td, th {
border: none;
padding: 0;
padding-top: 2px;
padding-bottom: 2px;
}

.PithEstimate-table th {
background-color: #d9f0a3;
}

.PithEstimate-table tr:nth-child(even) {
background-color: #f5f5f5;
}

.PithEstimate-table tr:hover {
background-color: #d6d6d6;
cursor: pointer;
}

.PithEstimate-btn-container {
display: flex;
flex-direction: row;
Expand Down
63 changes: 38 additions & 25 deletions Template.PithEstimate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,37 +16,50 @@
</p>
</div>
<div class="PithEstimate-sub-container">
<p class="PithEstimate-subTitle">
Growth Rate:
</p>
<div class="PithEstimate-btn-container">
<div class="PithEstimate-sub-container">
<input id="PithEstimate-5-btn" type="radio" name="PithEstimate-yearInput" value="5">
<label class="PithEstimate-label" for="PithEstimate-5-btn">5 years</label><br>

<input id="PithEstimate-10-btn" type="radio" name="PithEstimate-yearInput" value="10">
<label class="PithEstimate-label" for="PithEstimate-10-btn">10 years</label><br>
</div>
<div class="PithEstimate-sub-container" style="margin-left: 8px;">
<input id="PithEstimate-20-btn" type="radio" name="PithEstimate-yearInput" value="20">
<label class="PithEstimate-label" for="PithEstimate-20-btn">20 years</label><br>

<input id="PithEstimate-30-btn" type="radio" name="PithEstimate-yearInput" value="30">
<label class="PithEstimate-label" for="PithEstimate-30-btn">30 years</label><br>
</div>
</div>
<div class="PithEstimate-btn-container" style="justify-content: center;">
<div id="PithEstimate-customBtn-container" class="PithEstimate-sub-container">
<input id="PithEstimate-custom-btn" type="radio" name="PithEstimate-yearInput" value="custom">
<label class="PithEstimate-label" for="PithEstimate-custom-btn">Custom</label><br>
</div>
<div class="PithEstimate-table-container">
<table class="PithEstimate-table">
<tr><th>Growth Rate</th><th>Year Est.</th></tr>
<tr id="PithEstimate-5-row"><td>5 years</td><td>{{yearEst5}}</td></tr>
<tr id="PithEstimate-10-row"><td>10 years</td><td>{{yearEst10}}</td></tr>
<tr id="PithEstimate-20-row"><td>20 years</td><td>{{yearEst20}}</td></tr>
<tr id="PithEstimate-30-row"><td>30 years</td><td>{{yearEst30}}</td></tr>
<tr id="PithEstimate-custom-row">
<td>
<span id="PithEstimate-customBtn-text">Custom</span>
<input id="PithEstimate-customYearInput" type="number" min="0" max="{{customLimit}}" style="width: 52px;" hidden>
</td>
<td>
<span id="PithEstimate-customBtn-estimate">NaN</span>
</td></tr>
</table>
</div>
<input id="PithEstimate-customYearInput" type="number" min="0" max="{{customLimit}}" style="width: 160px;" hidden>

</div>
<div class="PithEstimate-sub-container">
<div id="PithEstimate-confirm-btn">
C o n f i r m
</div>
</div>
</div>
</script>

<script id="PithEstimate-instructionDialog-template" type="text/x-handlebars-template">
<div class="PithEstimate-container">
<p class="PithEstimate-title">
Geometric / Duncan &nbsp;
Inner Year Estimate:
</p>
<p class="PithEstimate-instruction-text">
<b>1)</b> Click to place first width point
</p>
<p class="PithEstimate-instruction-text">
<b>2)</b> Click to place right width point
</p>
<p class="PithEstimate-instruction-text">
<b>3)</b> Click along generated line to place midpoint
</p>
<p class="PithEstimate-instruction-text">
<b>4)</b> Click to place height point
</p>
</div>
</script>
Loading

0 comments on commit b286402

Please sign in to comment.