Dropdown
*/
d3.select('#optionsWrapper').append('button')
.style('margin-left', '5px')
.classed('btn btn-primary btn-mini', true)
.text('Get image')
.on('click', getImageClick);
var imgSizes = [{
desc: 'Standard (1024x512px)',
x: 1024,
y: 512
}, {
desc: 'Huge (1920x1080px)',
x: 1920,
y: 1080
}, {
desc: 'Square (640x640px)',
x: 640,
y: 640
}, {
desc: 'Big square (1080x1080px)',
x: 1080,
y: 1080
}, {
desc: 'Cinema (1080x360px)',
x: 1080,
y: 360
}, {
desc: 'Big cinema (1920x720px)',
x: 1920,
y: 720
}, {
desc: 'Massive (3300x3300px)',
x: 3300,
y: 3300
}, {
desc: '4K (3840x2160px)',
x: 3840,
y: 2160
}, {
desc: 'Eurosport (1024x750px)',
x: 1024,
y: 750
}, {
desc: 'Instagram Story (1080x1920px)',
x: 1080,
y: 1920
}, {
desc: 'Zwift (3840x2160px)',
x: 3840,
y: 2160
}];
vvt = d3.select('#imgSizeSelect')
.on('change', function() {
imageSize = this.selectedOptions[0].__data__;
})
.selectAll('options')
.data(imgSizes)
.enter()
.append('option')
.text(function(d) {
return d.desc
});
d3.select('#swapImgSize')
.on('click', getImageClick);
}
function setEmbed() {
//var embedStyle = document.querySelector('input[name="embedBGRadios"]:checked').value;
//var embedMarker = document.querySelector('input[name="embedMarkersRadios"]:checked').value;
var embedMap = document.querySelector('input[name="embedMapRadios"]:checked').value;
var default2d = document.getElementById('defaultTo2Dcb') != null && document.getElementById('defaultTo2Dcb').checked ? '?default2d=y' : '';
default2d += document.getElementById('defaultToMilescb') != null && document.getElementById('defaultToMilescb').checked ? (default2d == '' ? '?' : '&') + 'units=i' : '';
var si = ((segment.type == 'activity' || segment.type == 'route') ? (typeof(id) === 'undefined' ? 0 : id) : (typeof(activity) === 'undefined' ? (typeof(segmentId) === 'undefined' ? id : segmentId) : activity.id));
if (pageType3d == 'activity') {
d3.select('#embedTA').text('
');
} else {
d3.select('#embedTA').text('
');
}
}
d3.selectAll('.embedBGRadios, .embedMapRadios, .embedMarkersRadios').on('change', setEmbed);
if (typeof(embed) === 'undefined' && typeof(pageType3d) !== 'undefined' /*&& pageType3d != 'activity'*/ ) {
d3.select('#optionsWrapper').append('button')
.classed('btn btn-primary btn-mini', true)
.text('Embed')
.attr('title', 'Get the code to embed the current view of the profile on your own website.')
.on('click', function() {
d3.select('#profileImg').attr('src', null);
$('#embedModal').modal();
setEmbed();
if (origSpinXVal != spinXVal || (is3d ? origElevMult3D != elevMult3d : origElevMult2D != elevMult2d)) {
displayImage();
}
});
}
if (getParameterByName('hidePrint') == '') {
d3.select('#optionsWrapper').append('button')
.classed('btn btn-primary btn-mini', true)
.html('3D Print')
.attr('title', 'Print this profile at Print My Ride.')
//.attr('style', (typeof(embed) === 'undefined' || !embed ? 'display:block;position:absolute;right:0px;top:21px' : ''))
.on('click', function() {
sendToPMR(segment.latLngArr2.map(function(d, i) { return { x: d.lng, y: d.lat, z: segment.elevationArr2[i] } }), (typeof(segment.altName) === 'undefined' || segment.altName == null || segment.altName == '' ? segment.name : segment.altName))
});
}
/*if (typeof(locked) !== 'undefined' && !locked) {
d3.select('#optionsWrapper').append('button')
.classed('btn btn-primary btn-mini', true)
.text('Set as default View')
.attr('title', 'Sets the current view (angle and elevation stretch) to be the default view for all users.')
.on('click', function() {
$('#pleaseWaitDialog').modal();
setTimeout(function() {
displayImage();
}, 100);
});
}*/
//(origSpinXVal == 90 && origSpinXVal != spinXVal)
/*
*/
var resizeTimer;
d3.select('#detailRange')
.on('change', function(d) {
detailLevel = Math.max(is3d ? 0.015 : 0.01, parseFloat(this.value));
if (moveTimer == null) {
moveTimer = setTimeout(function() {
var startTime = new Date().getTime();
if (isTS && typeof(p3dDrawTSProfile) !== 'undefined') {
p3dDrawTSProfile()
} else {
set3dSegment();
}
drawTime = new Date().getTime() - startTime;
moveTimer = null;
}, Math.min(drawTime * 1.1, 250));
}
});
d3.select('#elevRange')
.on('change', function(d) {
elevMult = parseFloat(this.value);
if (moveTimer == null) {
moveTimer = setTimeout(function() {
var startTime = new Date().getTime();
if (is3d) {
elevMult3d = elevMult;
} else {
if (isTS) {
elevMultTS = elevMult;
} else {
elevMult2d = elevMult;
}
}
d3.selectAll('#profile3dsvg .Scene *').remove();
sizep3d();
if (isTS && typeof(p3dDrawTSProfile) !== 'undefined') {
p3dDrawTSProfile()
} else {
p3dInit();
}
drawTime = new Date().getTime() - startTime;
moveTimer = null;
}, Math.min(drawTime * 1.1, 250));
}
});
d3.select('#showGridCB')
.on('change', function(d) {
if (hasLocalStorage) {
localStorage['grid3d'] = (document.getElementById('showGridCB') == null ? true : document.getElementById('showGridCB').checked);
}
d3.selectAll('#profile3dsvg .Scene *').remove();
sizep3d();
p3dInit();
});
d3.select('#transparencyCB')
.on('change', function(d) {
if (document.getElementById('transparencyCB').checked) {
d3.selectAll('.Scene path').attr('opacity', 0.667);
} else {
d3.selectAll('.Scene path').attr('opacity', null);
}
});
function filterData(points, tau) {
tau = tau || 30; //30 seconds default
var directions = [-1, 1];
var yPrev, xPrev, ySmooth;
var xds = points[3].x - points[0].x;
var yds = points[3].y - points[0].y;
var xde = points[points.length - 1].x - points[points.length - 3].x;
var yde = points[points.length - 1].y - points[points.length - 3].y;
points = d3.merge([d3.range(0, tau).map(function(d) { return { x: points[0].x + (d - tau) * xds, y: points[0].y + (d - tau) * yds } }), points, d3.range(0, tau).map(function(d) { return { x: points.last().x + d * xde, y: points.last().y + d * yde } })]);
for (var a = 0; a < directions.length; a++) {
var direction = directions[a];
for (var i = 0; i < points.length; i++) {
var n = direction == 1 ? i : points.length - 1 - i;
var x = points[n].x;
var y = points[n].y;
if (ySmooth == null || xPrev == null || yPrev == null) {
ySmooth = y
} else {
var u = Math.abs(x - xPrev) / tau;
var z = Math.exp(-u);
var dy = y - yPrev;
if (u > 0) {
ySmooth = ySmooth * z + y * (1 - z) + (dy / u) * ((u + 1) * z - 1);
}
}
//trace([y, ySmooth])
yPrev = y;
xPrev = x;
if (direction == -1) {
points[n].ySmooth = ySmooth;
} else {
points[n].ySmooth = (points[n].ySmooth + ySmooth) / 2;
}
}
}
return points.slice(tau, points.length - tau);
}
function resizeBy() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
resize()
}, 100);
}
function resize() {
sizep3d();
d3.selectAll('#profile3dsvg .Scene *').remove();
p3dInit();
}
/* if (typeof(defSpinXVal) !== 'undefined') {
spinXVal = defSpinXVal;
spinYVal = defSpinYVal;
spinLightXVal = defSpinLightXVal;
spinLightYVal = defSpinLightYVal;
elevMult = defElevMult;
}*/
//onload=set3dSegment(0);
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if (result == null) {
result = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i.exec(hex);
if (result != null) {
result = result.map(function(d, i) {
return (i == 0 ? d : d + d)
});
}
}
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
function getGeoNames(maxLat, minLat, maxLng, minLng) {
$.ajax({
url: '/api/getCity3D.php?maxLat=' + maxLat + '&minLat=' + minLat + '&maxLng=' + maxLng + '&minLng=' + minLng,
success: function(result) {
if (typeof(result.error) === 'undefined') {
placeMarkers = result.geonames;
} else {
console.debug(result.error);
}
set3dSegment();
}
});
}
if (location.hash != '') {
var hashArr = location.hash.split('|');
if (hashArr[0] != '') {
p3dStart = parseInt(hashArr[0].replace('#', ''));
p3dEnd = parseInt(hashArr[1]);
}
}
d3.select('#p3dDistElev')
.style('margin-top', '-6px')
.append('label')
.style({
'float': 'left'
})
.text('Markers:');
d3.select('#p3dDistElev')
.append('select')
.style({
'max-width': '180px',
'height': '20px',
'margin-left': '4px'
})
.on('change', function(d) {
show3dDistMarkers = false;
show3dDistEndMarkers = false;
show3dDistSelMarkers = false;
show3dDistEndSelMarkers = false;
show3dElevMarkers = false;
show3dPlaceMarkers = false;
show3dGradMarkers = false;
show3dWayMarkers = false;
switch (this.selectedOptions[0].__data__.i) {
case 0:
show3dDistMarkers = true;
break;
case 1:
show3dDistEndMarkers = true;
break;
case 5:
show3dDistSelMarkers = true;
break;
case 6:
show3dDistEndSelMarkers = true;
break;
case 7:
show3dWayMarkers = true;
break;
case 2:
show3dElevMarkers = true;
break;
case 3:
show3dPlaceMarkers = true;
break;
case 4:
show3dGradMarkers = true;
/*//if (placeMarkers == null) {
if (typeof(segment.maxLat) === 'undefined') {
var ext = d3.extent(segment.latlngArr.filter(function(d, i) {
return i % 2 == 0 && (typeof(p3dStart) === 'undefined' || i / 2 >= p3dStart) && (typeof(p3dEnd) === 'undefined' || i / 2 < p3dEnd)
}));
segment.minLat = ext[0];
segment.maxLat = ext[1];
ext = d3.extent(segment.latlngArr.filter(function(d, i) {
return i % 2 == 1 && (typeof(p3dStart) === 'undefined' || i / 2 >= p3dStart) && (typeof(p3dEnd) === 'undefined' || i / 2 < p3dEnd)
}));
segment.minLng = ext[0];
segment.maxLng = ext[1];
}
getGeoNames(segment.maxLat, segment.minLat, segment.maxLng, segment.minLng);
} else {
set3dSegment();
}
return;*/
break;
}
if (isTS && typeof(p3dDrawTSProfile) !== 'undefined') {
p3dDrawTSProfile()
} else {
set3dSegment();
}
})
.selectAll('option')
.data([{
i: 4,
n: 'Gradients',
d: 'Gradients'
}, {
i: 0,
n: 'Dist |<',
d: 'Distance from start (full)'
}, {
i: 1,
n: 'Dist >|',
d: 'Distance to end (full)'
}, {
i: 5,
n: 'Dist |<',
d: 'Distance from start (selection)'
}, {
i: 6,
n: 'Dist >|',
d: 'Distance to end (selection)'
}, {
i: 2,
n: 'Elev',
d: 'Main points of elevation'
}, {
i: 3,
n: 'Places',
d: 'Place names'
}, {
i: 10,
n: 'None',
d: 'No markers'
}].filter(function(d) {
return pageType3d == 'segment' && (d.i == 5 || d.i == 6) ? false : true
}))
.enter()
.append('option')
.property("selected", function(d) {
return (d.i === 10)
})
.text(function(d) {
return d.d;
});
if (document.getElementById('detailRange') != null) {
document.getElementById('detailRange').max = 0.75;
}
if (d3.select('#swapImgSize').text('Generate new image').node() != null) {
d3.select(d3.select('#swapImgSize').text('Generate new image').node().parentElement).select('p').html('Save the image below to your device to share.
Please leave the logos in place!');
}
/*d3.select('#svgWrapper').style('cursor', 'pointer')
.append('img')
.attr({
'src':'http://cf.veloviewer.com/img/touch100.png',
'id':'touchImg',
'class':'shake',
'style':'position:absolute;margin:auto;top:0;bottom:0;left:0;right:0'
})*/