Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Barogram auto-rescale on window re-size #75

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Barogram auto-rescale on window re-size #75

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
07b7601
Add baro_update function
nbonniere Sep 14, 2017
1b6bb99
Add window-resize listener
nbonniere Sep 14, 2017
1418d15
Update barogram.js
nbonniere Sep 14, 2017
b0efb53
Fix missing altitude-stick on offline markers.
nbonniere Jan 23, 2018
e5195f1
Merge pull request #1 from nbonniere/Latitude-stick-offline-fix
nbonniere Jan 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 32 additions & 25 deletions barogram.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,13 +28,14 @@ var yAxis = []; // optional scale labels
var margin = 10; // all around line graph
var X_legend = 0;
var Y_legend = 0;
var maxAlt = 5000;
var maxAlt = 1000;
var X_lines = 5+1;
var Y_lines = 5+1;
var Y_lines = 5+1;
var currentUnit = "";
var scaleFlag = 0;
var X_offset = 0;
var Y_offset = margin+X_legend;
var reScale = 0;

// show altitude scale on the graph
function plotScale() {
Expand Down Expand Up @@ -89,37 +90,17 @@ function baro_Init() {
Y_min = 0;

baroCanvas = document.getElementById("div_baro");
baroCanvas.height = parseInt(document.getElementById("dbaro").offsetHeight, 10);
baroCtx = baroCanvas.getContext("2d");
baroCtx.fillStyle = "#808080"; // color of text
baroCtx.font = "12px Arial";

baroScale = document.getElementById("div_baroScale");
baroScale.height = parseInt(document.getElementById("dbaro").offsetHeight, 10);
baroScaleCtx = baroScale.getContext("2d");
baroScaleCtx.fillStyle = "#808080"; // color of text
baroScaleCtx.font = "12px Arial";

baroMarker = document.getElementById("div_baroMark");
baroMarker.height = parseInt(document.getElementById("dbaro").offsetHeight, 10);
baroMarkCtx = baroMarker.getContext("2d");
baroMarkCtx.fillStyle = "#808080"; // color of text
baroMarkCtx.font = "12px Arial";

xWidth = baroCanvas.width;
yHeight = baroCanvas.height - X_legend - 2*margin;

yScale = (yHeight) / (Y_max - Y_min);
xScale = (xWidth) / (X_max - X_min);

plotScale();
plotGrid();

// create a clipping region - simpler than checking X_min
// baroCtx.beginPath();
// baroCtx.rect(0, margin+X_legend, 0+xWidth, margin+X_legend+yHeight);
// baroCtx.clip();
baro_update();
}

String.prototype.toSeconds = function () { if (!this) return null; var hms = this.split(':'); return (+hms[0]) * 60 * 60 + (+hms[1]) * 60 + (+hms[2] || 0); }

// plot a line with color and [x,y] array - rely on clipping region
Expand Down Expand Up @@ -153,7 +134,8 @@ yHeight = baroCanvas.height - X_legend - 2*margin;
// auto adjust the range
// (unit == "i") ? maxRange = Math.ceil((maxRange+250)/2000)*2000 : maxRange = Math.ceil((maxRange+100)/1000)*1000; // 2000 ft or 1000 m increments
(unit == "i") ? maxRange = Math.ceil((maxRange+500)/1000)*1000 : maxRange = Math.ceil((maxRange+250)/500)*500; // 1000 ft or 500 m increments
if ((maxRange != Y_max) || (unit != currentUnit)) {
if ((maxRange != Y_max) || (unit != currentUnit) || (reScale == 1)) {
reScale = 0;
currentUnit = unit;
Y_max = maxRange;
yScale = (yHeight) / (Y_max - Y_min) * m2ft[unit]; // adjust scale with unit here to avoid and extra multiply every y point
Expand All @@ -173,6 +155,31 @@ yHeight = baroCanvas.height - X_legend - 2*margin;
scaleFlag = 0;
}

// on window re-size, update the baro scaling
function baro_update() {
// document.getElementById('div_baro').height = dbaro.clientHeight;
baroCanvas.height = dbaro.clientHeight;
// need to update after size change (?)
baroScaleCtx.fillStyle = "#808080"; // color of text
baroScaleCtx.font = "12px Arial";

// document.getElementById('div_baroScale').height = dbaro.clientHeight;
baroScale.height = dbaro.clientHeight;
// need to update after size change (?)
baroScaleCtx.fillStyle = "#808080"; // color of text
baroScaleCtx.font = "12px Arial";

// document.getElementById('div_baroMark').height = dbaro.clientHeight;
baroMarker.height = dbaro.clientHeight;
// need to update after size change (?)
baroMarkCtx.fillStyle = "#808080"; // color of text
baroMarkCtx.font = "12px Arial";

// flag re-scale required at next refresh
reScale = 1;
baro_plotRefresh();
}

// set the time and altitude scales on the barogram
function Set_XY_Scale(tim,alt) {
if (scaleFlag++ == 0) { // use first item as a reference
Expand Down
33 changes: 23 additions & 10 deletions cunimb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1069,8 +1069,8 @@ function gesmark() {
window[stickvar].set('nom', "" + cn + " - " + ps);
window[stickvar].set('baton', "" + stickvar);

// window[stickvar].getPath().push(posi);
// window[stickvar].getPath().push(posiBaton);
window[stickvar].getPath().push(posi);
window[stickvar].getPath().push(posiBaton);

// création du Marker
window[markvar] = new google.maps.Marker({
Expand Down Expand Up @@ -1142,6 +1142,14 @@ function gesmark() {
if (++ccolor == tcolor.length) ccolor = 0;
} // fin du if typeof...

if (stick === 1) {
window[stickvar].setOptions({visible: true});
window[markvar].setPosition(posiBaton); // déplace le marker
} else {
window[stickvar].setOptions({visible: false});
window[markvar].setPosition(posi); // déplace le marker
}

var difalt = vz * 1;

colcn = window[polyvar].strokeColor;
Expand Down Expand Up @@ -1169,22 +1177,21 @@ function gesmark() {
if (window[polyvar].getPath().getLength() >= pathl) window[polyvar].getPath().removeAt(0); // remove first point of the trace
}


window[polyvar].getPath().push(posi); // ajout d'une position sur le tracé
// window[markvar].setPosition(posi); // déplace le marker
if (stick === 1) {
window[stickvar].setOptions({visible: true});
window[markvar].setPosition(posiBaton); // déplace le marker
// if (stick === 1) {
// window[stickvar].setOptions({visible: true});
// window[markvar].setPosition(posiBaton); // déplace le marker
// window[stickvar].getPath().pop(); // déplace le baton
// window[stickvar].getPath().pop(); // for now - better way ?
// window[stickvar].getPath().push(posi);
// window[stickvar].getPath().push(posiBaton);
window[stickvar].getPath().setAt(0,posi);
window[stickvar].getPath().setAt(1,posiBaton);
} else {
window[stickvar].setOptions({visible: false});
window[markvar].setPosition(posi); // déplace le marker
}
// } else {
// window[stickvar].setOptions({visible: false});
// window[markvar].setPosition(posi); // déplace le marker
// }

// change l'altitude affichée
window[markvar].setTitle("" + cn + " - " + ps + " @ " + (alt * m2ft[unit]).toFixed() + am2ft[unit] + " @ " + tim);
Expand Down Expand Up @@ -1926,4 +1933,10 @@ function initialize() {

// barogram plotting
baro_Init();

// re-scale baro after window resize
google.maps.event.addDomListener(window, "resize", function() {
baro_update();
});

}