DTux/dtux__avion-poeme
Archived
1
0
Fork 0
Code

update repo

Browse Source
This commit is contained in:
mberard 2021-12-14 22:33:54 +01:00
parent 0a87a3a0cb
commit bff6df4a35
8 changed files with 54919 additions and 620 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54004
dist/html2pdf/html2pdf.bundle.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

18
include/db.class.php
View File

@ -1,6 +1,5 @@
<?php
if ( !isset($site) )
{
if (!isset($site)) {
require_once("config.inc.php");
header('Location: ' . $accueil);
}
@ -59,11 +58,9 @@ class db
function open()
{
if ( !$this->connect )
{
if (!$this->connect) {
$this->connect = new mysqli($this->server, $this->user, $this->passwd, $this->database);
if ( $this->connect->connect_errno )
{
if ($this->connect->connect_errno) {
log_error("Échec de la connexion : => " . $this->connect->connect_error . "<br />" . __file__ . ' ligne ' . __line__, false, false);
return false;
}
@ -98,8 +95,7 @@ class db
function newPlane() //return 0 on error
{
global $base_url;
if (round($this->startLat,3,PHP_ROUND_HALF_DOWN)==round($this->destLat,3,PHP_ROUND_HALF_DOWN) && round($this->startLon,3,PHP_ROUND_HALF_DOWN)==round($this->destLon,3,PHP_ROUND_HALF_DOWN))
{
if (round($this->startLat, 3, PHP_ROUND_HALF_DOWN) == round($this->destLat, 3, PHP_ROUND_HALF_DOWN) && round($this->startLon, 3, PHP_ROUND_HALF_DOWN) == round($this->destLon, 3, PHP_ROUND_HALF_DOWN)) {
$this->destLon += 0.001;
$this->destLat += 0.001;
}
@ -133,7 +129,6 @@ class db
$this->urlAvion = $base_url . "/?avionpoeme=" . $this->uid;
$this->newPeripetie();
courrielEnvoi($this);
}
function getPlane($uid)
@ -170,7 +165,7 @@ class db
function getCurrentPlanes()
{
$query = "SELECT idAvion as uid, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, destLat, destLon, destName, message, UNIX_TIMESTAMP(startTime) as startTime, startTZ, startLon, startLat, startName, color, message FROM avionpoeme WHERE deliveryTimeServer>NOW()";
$query = "SELECT idAvion as uid, UNIX_TIMESTAMP(deliveryTime) as deliveryTime, deliveryTZ, destLat, destLon, destName, destMail, message, expeMail, deliveryTimeServer, deliveryMethod, UNIX_TIMESTAMP(startTime) as startTime, startTZ, startLon, startLat, startName, color, message FROM avionpoeme WHERE deliveryTimeServer>NOW()";
$this->query($query);
$planes = $this->result->fetch_all(MYSQLI_ASSOC);
print json_encode($planes);
@ -217,8 +212,7 @@ class db
{
$query = "SELECT *, DATEDIFF(quand,CURDATE()) as datePeripetie FROM peripeties WHERE quand IS NULL";
$this->query($query);
while ( ($result = $this->result->fetch_assoc()) )
{
while (($result = $this->result->fetch_assoc())) {
$this->idPeripetie = $result["idPeripetie"];
if ((mt_rand(0, 100) <= $result["probabilite"])) //calcul de la probabilité de la péripétie
{

3
index.php
View File

@ -133,13 +133,14 @@
</div>
</div>
</div>
<div id="closePlane"></div>
<div id="downloadPlaneMessage" class="btn btn-outline-primary">Télécharger l'avion-poème</div>
<script src="src/map.js"></script>
<script src="src/geocoder.js"></script>
<script src="src/paperPlaneAnimation.js"></script>
<script src="src/formValidation.js"></script>
<script src="src/newPlane.js"></script>
<script src="src/translation.js"></script>
<script src="src/anthology.js"></script>
</body>
</html>

1
parts/head.php
View File

@ -33,4 +33,5 @@
<script src="dist/rasterizeHTML/rasterizeHTML.allinone.js"></script>
<script src="dist/leaflet-locatecontrol/L.Control.Locate.min.js"></script>
<script src='dist/leaflet-fullscreen/Leaflet.fullscreen.min.js'></script>
<script src='dist/html2pdf/html2pdf.bundle.min.js'></script>
</head>

141
src/anthology.js
View File

@ -1,79 +1,136 @@
function flightTime(a, b) {
var days = Math.round((b-a)/86400 * 100) / 100
var months = Math.round(days/30)
var years = Math.round(months/12)
var days = Math.round(((b - a) / 86400) * 100) / 100;
var months = Math.round(days / 30);
var years = Math.round(months / 12);
if (days < 30) {
return ""+days+" "+dictionnary.jours
}
else if (days >= 30 && days < 365){
return "" + days + " " + dictionnary.jours;
} else if (days >= 30 && days < 365) {
if (months > 1) {
return ""+months+" "+dictionnary.mois_pluriel
return "" + months + " " + dictionnary.mois_pluriel;
} else {
return "" + months + " " + dictionnary.mois;
}
else{
return ""+months+" "+dictionnary.mois
}
}
else if (days >= 365){
} else if (days >= 365) {
if (years > 1) {
return ""+years+" "+dictionnary.ans
}
else{
return ""+years+" "+dictionnary.an
return "" + years + " " + dictionnary.ans;
} else {
return "" + years + " " + dictionnary.an;
}
}
}
//load
var nPages;
var nPagesLoaded = 1
var nPagesLoaded = 1;
$.post("getAnthology.php", function (pages) {
pages = $.parseJSON(pages)
nPages = Number(pages.nPages)
})
pages = $.parseJSON(pages);
nPages = Number(pages.nPages);
});
function displayAnthology(){ // clean and display first page
$("#anthologyItems").html('')
nPagesLoaded = 1
function displayAnthology() {
// clean and display first page
$("#anthologyItems").html("");
nPagesLoaded = 1;
$.post("getAnthology.php?page=1", function (result) {
results = $.parseJSON(result)
results = $.parseJSON(result);
var momentLocale = lang;
if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
moment.locale(momentLocale)
if (momentLocale == "zh") {
momentLocale = "zh-cn";
} //troubleshot for chinese
moment.locale(momentLocale);
for (var i in results) {
addAnthologyLine(results[i])
addAnthologyLine(results[i]);
}
})
});
}
$("#anthology").scroll(function () {
if ($("#anthology").scrollTop() + 700 > $("#anthologyItems").height()) {
if (nPagesLoaded < nPages) {
nPagesLoaded++
console.log('Loading anthology page '+nPagesLoaded+'/'+nPages)
nPagesLoaded++;
console.log("Loading anthology page " + nPagesLoaded + "/" + nPages);
$.post("getAnthology.php?page=" + nPagesLoaded + "", function (result) {
results = $.parseJSON(result)
results = $.parseJSON(result);
var momentLocale = lang;
if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
moment.locale(momentLocale)
if (momentLocale == "zh") {
momentLocale = "zh-cn";
} //troubleshot for chinese
moment.locale(momentLocale);
for (var i in results) {
addAnthologyLine(results[i])
addAnthologyLine(results[i]);
}
})
});
}
}
});
function addAnthologyLine(results) {
if (lang == 'ar'){ // arabic : rtl + add <br>
if (lang == "ar") {
// arabic : rtl + add <br>
$("#anthologyItems").append(
'<small style="float:right">'+dictionnary.origine+': <b>'+results.startName+'</b> &bull; '+dictionnary.destination+': <b>'+results.destName+'</b> &bull; '+dictionnary.date_arrivee+': <b>'+moment(Number(results.deliveryTime)*1000).format('LL')+'</b> &bull; '+dictionnary.temps_de_vol+': <b>'+flightTime(Number(results.startTime),Number(results.deliveryTime))+'</b></small><br><br>'+results.message+'<br><hr><br>'
)
}
else{
'<small style="float:right">' +
dictionnary.origine +
": <b>" +
results.startName +
"</b> &bull; " +
dictionnary.destination +
": <b>" +
results.destName +
"</b> &bull; " +
dictionnary.date_arrivee +
": <b>" +
moment(Number(results.deliveryTime) * 1000).format("LL") +
"</b> &bull; " +
dictionnary.temps_de_vol +
": <b>" +
flightTime(Number(results.startTime), Number(results.deliveryTime)) +
"</b></small><br><br>" +
results.message +
"<br><hr><br>"
);
} else {
$("#anthologyItems").append(
'<small>'+dictionnary.origine+': <b>'+results.startName+'</b> &bull; '+dictionnary.destination+': <b>'+results.destName+'</b> &bull; '+dictionnary.date_arrivee+': <b>'+moment(Number(results.deliveryTime)*1000).format('LL')+'</b> &bull; '+dictionnary.temps_de_vol+': <b>'+flightTime(Number(results.startTime),Number(results.deliveryTime))+'</b></small><br><br>'+results.message+'<br><hr><br>'
)
"<small>" +
dictionnary.origine +
": <b>" +
results.startName +
"</b> &bull; " +
dictionnary.destination +
": <b>" +
results.destName +
"</b> &bull; " +
dictionnary.date_arrivee +
": <b>" +
moment(Number(results.deliveryTime) * 1000).format("LL") +
"</b> &bull; " +
dictionnary.temps_de_vol +
": <b>" +
flightTime(Number(results.startTime), Number(results.deliveryTime)) +
"</b></small><br><br>" +
results.message +
"<br><hr><br>"
);
}
}
$.post("avionJournalier.php", function (result) {
result = result.replace(/'/g, '"');
result = $.parseJSON(result);
nbPlane = Number(result.nAvion);
console.log(result);
$("#buttonNewPlane").val(
"Lancer un avion-poème " + Number(result.nAvion) + "/100"
);
$("#buttonNewPlane").on("click", () => {
window.location.replace("/");
});
});
$(document).ready(function () {
$.getJSON("lang/" + lang + "", function (s) {
displayAnthology();
$("#anthologyTitle").html(s.anthologie);
$("#anthologyDisclaimer").html(s.suppr_message_public);
$("#closeAnthologyAbout").html(s.retour_carte);
});
});

43
src/app.css
View File

@ -337,6 +337,49 @@ a#navbarDropdownLang.nav-link.dropdown-toggle::after {
}
}
.custom-file-label {
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
padding-right: 9em;
white-space: nowrap;
}
.custom-file-label::after {
content: attr(data-after);
}
#closePlane {
position: fixed;
top: 70px;
right: 40px;
visibility: hidden;
opacity: 0;
cursor: pointer;
z-index: 10000;
}
#closePlane:before {
content: "\f00d";
font-family: "Font Awesome 5 Pro";
color: white;
font-size: 3em;
}
#downloadPlaneMessage {
position: fixed;
z-index: 10000;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
color: var(--primary);
background-color: white;
opacity: 0;
visibility: hidden;
}
#downloadPlaneMessage:before {
content: "\f019";
font-family: "Font Awesome 5 Pro";
color: var(--primary);
margin-right: 10px;
}

684
src/map.js
View File

@ -1,141 +1,163 @@
var loader = new PIXI.Loader();
var colors = ['66FF00','FF5555','FFE419','2A7FFF','BC5FD3','C8AB37','ECECEC','FF6600'];
var colors = [
"66FF00",
"FF5555",
"FFE419",
"2A7FFF",
"BC5FD3",
"C8AB37",
"ECECEC",
"FF6600",
];
for (var i in colors) {
loader.add('marker'+colors[i]+'', 'src/img/plane-'+colors[i]+'.png');
loader.add("marker" + colors[i] + "", "src/img/plane-" + colors[i] + ".png");
}
//global variable
var nbPlane = 0
var nbPlane = 0;
loader.add('shadow', 'src/img/shadow.png');
loader.add("shadow", "src/img/shadow.png");
loader.load(function (loader, resources) {
var pixiContainer = new PIXI.Container();
var map = L.map('map',{
var map = L.map("map", {
zoomControl: false,
minZoom: 2,
maxZoom: 16,
maxBounds: [
[-Infinity, -360],
[Infinity, 360]
[Infinity, 360],
],
//worldCopyJump: true,
attributionControl: false
})
attributionControl: false,
});
//zoom controls
L.control.zoom({position: 'bottomright'}).addTo(map);
L.control.zoom({ position: "bottomright" }).addTo(map);
//Locate user
L.control.locate({position: 'bottomright'}).addTo(map);
L.control.locate({ position: "bottomright" }).addTo(map);
//fullscreen
map.addControl(new L.Control.Fullscreen({position: 'bottomright'}));
map.addControl(new L.Control.Fullscreen({ position: "bottomright" }));
// Licence Icon
L.Control.Watermark = L.Control.extend({
onAdd: function (map) {
var img = L.DomUtil.create('img');
var img = L.DomUtil.create("img");
img.src = 'src/img/licence.svg';
img.style.width = '100px';
img.src = "src/img/licence.svg";
img.style.width = "100px";
return img;
}
},
});
L.control.watermark = function (opts) {
return new L.Control.Watermark(opts);
}
L.control.watermark({ position: 'bottomleft' }).addTo(map);
};
L.control.watermark({ position: "bottomleft" }).addTo(map);
//scale
L.control.scale().addTo(map);
//disabling send plane button if alreada 100 planes sent the current day
$.post("avionJournalier.php", function (result) {
result = result.replace(/'/g, '"');
result = $.parseJSON(result)
nbPlane = Number(result.nAvion)
$("#buttonNewPlane").val("Lancer un avion-poème "+Number(result.nAvion)+"/100")
result = $.parseJSON(result);
nbPlane = Number(result.nAvion);
$("#buttonNewPlane").val(
"Lancer un avion-poème " + Number(result.nAvion) + "/100"
);
if (nbPlane > 99) {
$("#buttonNewPlane").prop("disabled", true);
} else {
}
else{
}
translateUI(lang)
})
translateUI(lang);
});
//background
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: '',
L.tileLayer(
"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
{
attribution: "",
//minZoom:8,
maxZoom: 16,
}).addTo(map);
}
).addTo(map);
//adding terminator
var terminator = L.terminator()
.addTo(map);
var terminator = L.terminator().addTo(map);
setInterval(function () {
terminator.setTime();
}, 1000);
//center map on sun by default
function centerOnSun() {
var equator = turf.lineString([[-1000, 0], [1000, 0]])
var equator = turf.lineString([
[-1000, 0],
[1000, 0],
]);
var intersects = turf.lineIntersect(equator, terminator.toGeoJSON());
//console.log(intersects)
var lonCenter = ((intersects.features[1].geometry.coordinates[0])+(intersects.features[2].geometry.coordinates[0]))/2
var lonCenter =
(intersects.features[1].geometry.coordinates[0] +
intersects.features[2].geometry.coordinates[0]) /
2;
//console.log(lonCenter)
return lonCenter
return lonCenter;
}
map.setView([30, 0], 2);
//could layer from GBIS NASA - always 1 day of delay
var twoDaysAgo = moment(new Date()).subtract(2, "days").format('YYYY-MM-DD')
L.tileLayer('https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/'+twoDaysAgo+'/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg', {
attribution: '',
var twoDaysAgo = moment(new Date()).subtract(2, "days").format("YYYY-MM-DD");
L.tileLayer(
"https://map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_SNPP_CorrectedReflectance_TrueColor/default/" +
twoDaysAgo +
"/GoogleMapsCompatible_Level9/{z}/{y}/{x}.jpg",
{
attribution: "",
maxZoom: 8,
opacity:0.4
})
.addTo(map);
opacity: 0.4,
}
).addTo(map);
//Bluring the terminator | Source: https://stackoverflow.com/questions/28235792/leaflet-polygon-with-fuzzy-outline
var svg = map.getPanes().overlayPane.firstChild,
svgFilter = document.createElementNS('http://www.w3.org/2000/svg', 'filter'),
svgBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
svgFilter.setAttribute('id', 'blur');
svgFilter.setAttribute('x', '-100%');
svgFilter.setAttribute('y', '-100%');
svgFilter.setAttribute('width', '500%');
svgFilter.setAttribute('height', '500%');
svgBlur.setAttribute('stdDeviation', 15);
svgFilter = document.createElementNS(
"http://www.w3.org/2000/svg",
"filter"
),
svgBlur = document.createElementNS(
"http://www.w3.org/2000/svg",
"feGaussianBlur"
);
svgFilter.setAttribute("id", "blur");
svgFilter.setAttribute("x", "-100%");
svgFilter.setAttribute("y", "-100%");
svgFilter.setAttribute("width", "500%");
svgFilter.setAttribute("height", "500%");
svgBlur.setAttribute("stdDeviation", 15);
svgFilter.appendChild(svgBlur);
svg.appendChild(svgFilter);
terminator._path.setAttribute('filter', 'url(#blur)');
terminator._path.setAttribute("filter", "url(#blur)");
//geojson for arclines
//travel
var arcTravelStyle = {
"color": "#00ff00",
"weight": 2.5,
"dashArray": "10 5",
"opacity": 0.65
color: "#00ff00",
weight: 2.5,
dashArray: "10 5",
opacity: 0.65,
};
var arcTravel = L.geoJSON([], { style: arcTravelStyle }).addTo(map);
//travelled
var arcTravelledStyle = {
"color": "#00ff00",
"weight": 2.5,
"opacity": 0.65
color: "#00ff00",
weight: 2.5,
opacity: 0.65,
};
var arcTravelled = L.geoJSON([], { style: arcTravelledStyle }).addTo(map);
var pulsatingMarker = L.layerGroup([]).addTo(map)
var originMarker = L.layerGroup([]).addTo(map)
var pulsatingMarker = L.layerGroup([]).addTo(map);
var originMarker = L.layerGroup([]).addTo(map);
var firstDraw = true;
var prevZoom;
@ -148,73 +170,90 @@ loader.load(function(loader, resources) {
var scale = utils.getScale();
if (firstDraw) {
//get planes
$.post("getCurrentPlanes.php", function (result) {
// console.log(result)
var planes = $.parseJSON(result)
console.log(planes)
var planes = $.parseJSON(result);
console.log(planes);
function formatResults(data) {
data.deliveryTime = Number(data.deliveryTime)*1000
data.startTime = Number(data.startTime)*1000
return data
data.deliveryTime = Number(data.deliveryTime) * 1000;
data.startTime = Number(data.startTime) * 1000;
return data;
}
function displayPlane(data) {
var line = turf.greatCircle(turf.point([Number(data.startLon),Number(data.startLat)]), turf.point([Number(data.destLon),Number(data.destLat)]),{offset:20})
var lineDistance = turf.length(line);
var dateStart = moment(data.startTime)
var dateEnd = moment(data.deliveryTime)
var dateNow = moment(new Date())
var totalSeconds = dateEnd.diff(dateStart,'seconds');
var travelledSeconds = dateNow.diff(dateStart,'seconds')
var travelRatio = travelledSeconds/totalSeconds
var travelledDistance = lineDistance*travelRatio // getting the travelled distance
var segment;
if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline, well it's a mess.
var l1 = turf.lineString(line.geometry.coordinates[0]) // creating a line from first segment
var l2 = turf.lineString(line.geometry.coordinates[1]) // creating a line from second segment
var l1Length = turf.length(l1) // calculating length of first segment
if (travelledDistance < l1Length){ // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
segment = l1
data.position = 1
}
else{
segment = l2 // otherwise on segment 2
data.position = 2
travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
}
}
else{
segment = line
data.position = 0
}
var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
if(currentPosition.geometry.coordinates[0] > 180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]-Number(360)}
//calculating bearing based on two points, one just before and one just after
var positionBefore = turf.along(segment, (travelledDistance)-0.00001,{units: 'kilometers'})
var positionAfter = turf.along(segment, (travelledDistance)+0.00001,{units: 'kilometers'})
var rotation = turf.bearing(
positionBefore,
positionAfter
var line = turf.greatCircle(
turf.point([Number(data.startLon), Number(data.startLat)]),
turf.point([Number(data.destLon), Number(data.destLat)]),
{ offset: 20 }
);
var lineDistance = turf.length(line);
var dateStart = moment(data.startTime);
var dateEnd = moment(data.deliveryTime);
var dateNow = moment(new Date());
var totalSeconds = dateEnd.diff(dateStart, "seconds");
var travelledSeconds = dateNow.diff(dateStart, "seconds");
var travelRatio = travelledSeconds / totalSeconds;
var travelledDistance = lineDistance * travelRatio; // getting the travelled distance
var segment;
if (line.geometry.type == "MultiLineString") {
// if the arc is cutting the dateline, well it's a mess.
var l1 = turf.lineString(line.geometry.coordinates[0]); // creating a line from first segment
var l2 = turf.lineString(line.geometry.coordinates[1]); // creating a line from second segment
var l1Length = turf.length(l1); // calculating length of first segment
if (travelledDistance < l1Length) {
// if the travelled distance is inferior to segment 1 line, the point is somewhere in it
segment = l1;
data.position = 1;
} else {
segment = l2; // otherwise on segment 2
data.position = 2;
travelledDistance = Number(travelledDistance) - Number(l1Length); // we remove the travel distance done in s1
}
} else {
segment = line;
data.position = 0;
}
var currentPosition = turf.along(segment, travelledDistance, {
units: "kilometers",
});
if (currentPosition.geometry.coordinates[0] < -180) {
currentPosition.geometry.coordinates[0] =
currentPosition.geometry.coordinates[0] + 360;
}
if (currentPosition.geometry.coordinates[0] > 180) {
currentPosition.geometry.coordinates[0] =
currentPosition.geometry.coordinates[0] - Number(360);
}
//calculating bearing based on two points, one just before and one just after
var positionBefore = turf.along(
segment,
travelledDistance - 0.00001,
{ units: "kilometers" }
);
var positionAfter = turf.along(segment, travelledDistance + 0.00001, {
units: "kilometers",
});
var rotation = turf.bearing(positionBefore, positionAfter);
//plane
var iconColor = 'marker'+data.color
var iconColor = "marker" + data.color;
var markerTexture = resources[iconColor].texture;
var marker = new PIXI.Sprite(markerTexture);
marker.anchor.set(0.5, 0.5);
var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
var markerCoords = project([
currentPosition.geometry.coordinates[1],
currentPosition.geometry.coordinates[0],
]);
marker.x = markerCoords.x;
marker.y = markerCoords.y;
marker.angle = rotation;
marker.scale.set(5);
marker.interactive = true;
marker.cursor = 'pointer'
marker.data = data
marker.data.line = line
marker.data.currentPosition = currentPosition
marker.cursor = "pointer";
marker.data = data;
marker.data.line = line;
marker.data.currentPosition = currentPosition;
//shadow
var shadowTexture = resources.shadow.texture;
@ -224,72 +263,96 @@ loader.load(function(loader, resources) {
shadow.y = markerCoords.y + 0.5;
shadow.angle = rotation;
shadow.scale.set(0.00025);
shadow.alpha = 0.3
shadow.visible = false
shadow.alpha = 0.3;
shadow.visible = false;
//popup
marker.popup = L.popup({className: 'pixi-popup'})
marker.popup = L.popup({ className: "pixi-popup" });
pixiContainer.addChild(shadow);
pixiContainer.addChild(marker);
renderer.render(container)
renderer.render(container);
//adapting scale based on zoom level. Max zoom = writting visible
map.on('zoomend', function() {
marker.scale.set((1/(utils.getScale(map.getZoom())*20))+(Math.pow(map.getZoom(),2)/100*2*(1/(utils.getScale(map.getZoom())*20))))
map.on("zoomend", function () {
marker.scale.set(
1 / (utils.getScale(map.getZoom()) * 20) +
(Math.pow(map.getZoom(), 2) / 100) *
2 *
(1 / (utils.getScale(map.getZoom()) * 20))
);
if (map.getZoom() == 16) {
shadow.visible = true
}
else{
shadow.visible = false
shadow.visible = true;
} else {
shadow.visible = false;
}
});
//animating moving plane
setInterval(function () {
animate();
}, 1000)
}, 1000);
function animate() {
if (map.getZoom() > 12){ // we animate only starting zoom 12
var bounds = map.getBounds()
var bbox = [bounds._southWest.lng, bounds._southWest.lat, bounds._northEast.lng, bounds._northEast.lat];
if (map.getZoom() > 12) {
// we animate only starting zoom 12
var bounds = map.getBounds();
var bbox = [
bounds._southWest.lng,
bounds._southWest.lat,
bounds._northEast.lng,
bounds._northEast.lat,
];
var extentPoly = turf.bboxPolygon(bbox);
var planeInExtent = turf.booleanWithin(marker.data.currentPosition, extentPoly);
if(planeInExtent == true){ // we animate only the planes in map extent
var dateNow = moment(new Date())
var totalSeconds = dateEnd.diff(dateStart,'seconds');
var travelledSeconds = dateNow.diff(dateStart,'seconds')
var travelRatio = travelledSeconds/totalSeconds
var planeInExtent = turf.booleanWithin(
marker.data.currentPosition,
extentPoly
);
if (planeInExtent == true) {
// we animate only the planes in map extent
var dateNow = moment(new Date());
var totalSeconds = dateEnd.diff(dateStart, "seconds");
var travelledSeconds = dateNow.diff(dateStart, "seconds");
var travelRatio = travelledSeconds / totalSeconds;
var lineDistance = turf.length(line);
var segment;
var travelledDistance = lineDistance*travelRatio // getting the travelled distance
if(line.geometry.type == "MultiLineString"){ // if the arc is cutting the dateline
var l1 = turf.lineString(line.geometry.coordinates[0]) // creating a line from first segment
var l2 = turf.lineString(line.geometry.coordinates[1]) // creating a line from second segment
var l1Length = turf.length(l1) // calculating length of first segment
if (travelledDistance < l1Length){ // if the travelled distance is inferior to segment 1 line, the point is somewhere in it
segment = l1
marker.data.position = 1 // we store it, usefull for popup event
var travelledDistance = lineDistance * travelRatio; // getting the travelled distance
if (line.geometry.type == "MultiLineString") {
// if the arc is cutting the dateline
var l1 = turf.lineString(line.geometry.coordinates[0]); // creating a line from first segment
var l2 = turf.lineString(line.geometry.coordinates[1]); // creating a line from second segment
var l1Length = turf.length(l1); // calculating length of first segment
if (travelledDistance < l1Length) {
// if the travelled distance is inferior to segment 1 line, the point is somewhere in it
segment = l1;
marker.data.position = 1; // we store it, usefull for popup event
} else {
segment = l2; // otherwise on segment 2
marker.data.position = 2;
travelledDistance =
Number(travelledDistance) - Number(l1Length); // we remove the travel distance done in s1
}
else{
segment = l2 // otherwise on segment 2
marker.data.position = 2
travelledDistance = Number(travelledDistance)-Number(l1Length) // we remove the travel distance done in s1
} else {
segment = line;
}
}
else{
segment = line
}
var currentPosition = turf.along(segment, travelledDistance,{units: 'kilometers'})
var currentPosition = turf.along(segment, travelledDistance, {
units: "kilometers",
});
//troubleshooting extreme lons
if(currentPosition.geometry.coordinates[0] < -180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]+360}
if(currentPosition.geometry.coordinates[0] > 180){currentPosition.geometry.coordinates[0] = currentPosition.geometry.coordinates[0]-Number(360)}
marker.data.currentPosition = currentPosition
var markerCoords = project([currentPosition.geometry.coordinates[1],currentPosition.geometry.coordinates[0]]);
if (currentPosition.geometry.coordinates[0] < -180) {
currentPosition.geometry.coordinates[0] =
currentPosition.geometry.coordinates[0] + 360;
}
if (currentPosition.geometry.coordinates[0] > 180) {
currentPosition.geometry.coordinates[0] =
currentPosition.geometry.coordinates[0] - Number(360);
}
marker.data.currentPosition = currentPosition;
var markerCoords = project([
currentPosition.geometry.coordinates[1],
currentPosition.geometry.coordinates[0],
]);
marker.x = markerCoords.x;
marker.y = markerCoords.y;
shadow.x = markerCoords.x;
@ -301,40 +364,117 @@ loader.load(function(loader, resources) {
//if parameter in URL, zoom on it
var queryString = window.location.search;
queryString = queryString.split('=')[1]
queryString = queryString.split("=")[1];
if (Number(queryString) == data.uid) {
$("#back").attr("src", "src/img/back-" + data.color + ".jpg");
html = data.message;
var canvas1 = document.getElementById("blankCanvas1");
rasterizeHTML.drawHTML(html, canvas1,{zoom:0.7}).then(function success(renderResult) {
rasterizeHTML
.drawHTML(html, canvas1, { zoom: 0.7 })
.then(function success(renderResult) {
var canvas2 = document.getElementById("blankCanvas2");
var ctx = canvas2.getContext("2d");
ctx.fillStyle = "#" + data.color;
ctx.fillRect(0, 0, 400, 400);
ctx.drawImage(canvas1, 0, 0,400,400)
ctx.drawImage(canvas1, 0, 0, 400, 400);
ctx.font = "9px Courier";
$("#front").attr('src',document.getElementById("blankCanvas2").toDataURL())
$("#canvas3d").css('display','block')
$("#front").attr(
"src",
document.getElementById("blankCanvas2").toDataURL()
);
$("#canvas3d").css("opacity", 0);
$("#canvas3d").css("display", "block");
animePlane();
})
setTimeout(function () {
$("#canvas3d").css("opacity", 1);
}, 0);
const startDate = new Date(data.startTime);
const deliveryDate = new Date(data.deliveryTime);
const diffTime = Math.abs(deliveryDate - startDate);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
setTimeout(function () {
$("#closePlane").css("opacity", 1);
$("#closePlane").css("visibility", "visible");
$("#downloadPlaneMessage").css("opacity", 1);
$("#downloadPlaneMessage").css("visibility", "visible");
$("#closePlane").on("click", function () {
$("#canvas3d").css("display", "none");
$(this).css("display", "none");
});
$("#downloadPlaneMessage").on("click", function () {
const htmlRender =
"<div>" +
"<div><u>Métadonnées du message :</u></div>" +
"<ul>" +
"<li>" +
data.startName +
" - " +
data.destName +
"</li>" +
"<li>" +
data.expeMail +
" - " +
data.destMail +
"</li>" +
"<li>" +
diffDays +
" days" +
"</li>" +
"<li>" +
moment(deliveryDate).format("DD/MM/YYYY") +
"</li>" +
"</ul><br>" +
"<div><u>Champs message :</u></div><br>" +
html +
"</div>";
const opt = {
margin: 10,
filename: "peome.pdf",
image: { type: "jpeg", quality: 1 },
html2canvas: {
scale: 2,
removeContainer: false,
logging: true,
},
pagebreak: { avoid: "img" },
};
html2pdf().set(opt).from(htmlRender).save();
});
}, 5000);
});
setTimeout(function () {
map.setView(
[
data.currentPosition.geometry.coordinates[1],
data.currentPosition.geometry.coordinates[0],
],
15
);
openPopup(marker);
}, 100);
}
}
for (var i in planes) {
displayPlane(formatResults(planes[i]),0)
displayPlane(formatResults(planes[i]), 0);
}
});
function openPopup(target) {
//drawing arcs
arcTravel.clearLayers()
arcTravelled.clearLayers()
arcTravelStyle.color = '#'+target.data.color
arcTravelledStyle.color = '#'+target.data.color
var travel = target.data.line
var start = turf.point([Number(target.data.startLon),Number(target.data.startLat)])
var current = target.data.currentPosition
var end = turf.point([Number(target.data.destLon),Number(target.data.destLat)])
arcTravel.clearLayers();
arcTravelled.clearLayers();
arcTravelStyle.color = "#" + target.data.color;
arcTravelledStyle.color = "#" + target.data.color;
var travel = target.data.line;
var start = turf.point([
Number(target.data.startLon),
Number(target.data.startLat),
]);
var current = target.data.currentPosition;
var end = turf.point([
Number(target.data.destLon),
Number(target.data.destLat),
]);
// for linestrings
if (travel.geometry.type == "LineString") {
var sliced1 = turf.lineSlice(start, current, travel);
@ -346,122 +486,197 @@ loader.load(function(loader, resources) {
function createCopy(c) {
for (var i in c.geometry.coordinates) {
if (c.geometry.coordinates[i][0] > 0) {
c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] - Number(360)
}
else{
c.geometry.coordinates[i][0] = c.geometry.coordinates[i][0] + Number(360)
c.geometry.coordinates[i][0] =
c.geometry.coordinates[i][0] - Number(360);
} else {
c.geometry.coordinates[i][0] =
c.geometry.coordinates[i][0] + Number(360);
}
}
return c
return c;
}
//for multilinetrings
if (travel.geometry.type == "MultiLineString") {
var l1 = turf.lineString(travel.geometry.coordinates[0]) // creating a line from first segment
var l2 = turf.lineString(travel.geometry.coordinates[1]) // creating a line from second segment
var l1 = turf.lineString(travel.geometry.coordinates[0]); // creating a line from first segment
var l2 = turf.lineString(travel.geometry.coordinates[1]); // creating a line from second segment
if (target.data.position == 1) {
var sliced1 = turf.lineSlice(start, current, l1);
var sliced2 = turf.lineSlice(current, turf.point(l1.geometry.coordinates[l1.geometry.coordinates.length-1]), l1);
var sliced2 = turf.lineSlice(
current,
turf.point(
l1.geometry.coordinates[l1.geometry.coordinates.length - 1]
),
l1
);
arcTravelled.addData(sliced1);
arcTravel.addData(sliced2);
arcTravel.addData(l2);
}
else if(target.data.position == 2){
var sliced1 = turf.lineSlice(turf.point(l2.geometry.coordinates[0]), current, l2);
} else if (target.data.position == 2) {
var sliced1 = turf.lineSlice(
turf.point(l2.geometry.coordinates[0]),
current,
l2
);
var sliced2 = turf.lineSlice(current, end, l2);
arcTravelled.addData(l1);
arcTravelled.addData(sliced1);
arcTravel.addData(sliced2);
}
var travelledGeoJSON = arcTravelled.toGeoJSON()
var travelledGeoJSON = arcTravelled.toGeoJSON();
for (var i in travelledGeoJSON.features) {
arcTravelled.addData(createCopy(travelledGeoJSON.features[i]))
arcTravelled.addData(createCopy(travelledGeoJSON.features[i]));
}
var travelGeoJSON = arcTravel.toGeoJSON()
var travelGeoJSON = arcTravel.toGeoJSON();
for (var i in travelGeoJSON.features) {
arcTravel.addData(createCopy(travelGeoJSON.features[i]))
arcTravel.addData(createCopy(travelGeoJSON.features[i]));
}
}
//add pulsating marker on destination;
pulsatingMarker.clearLayers()
pulsatingMarker.clearLayers();
var pulseIcon = L.divIcon({
className: 'pulse-icon', //empty class to overwrite leaflet defaults
html: '<div class="pulse-icon-anim" style="border-color:#'+target.data.color+'"></div>',
iconSize: [22,22]
className: "pulse-icon", //empty class to overwrite leaflet defaults
html:
'<div class="pulse-icon-anim" style="border-color:#' +
target.data.color +
'"></div>',
iconSize: [22, 22],
});
var endCoordo = [Number(target.data.destLat),Number(target.data.destLon)]
var endCoordo = [
Number(target.data.destLat),
Number(target.data.destLon),
];
pulsatingMarker.addLayer(new L.marker(endCoordo, { icon: pulseIcon }));
if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker
pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]-Number(360)], {icon: pulseIcon}));
pulsatingMarker.addLayer(new L.marker([endCoordo[0],endCoordo[1]+Number(360)], {icon: pulseIcon}));
if (travel.geometry.type == "MultiLineString") {
//if arc cross dateline, we multiply the marker
pulsatingMarker.addLayer(
new L.marker([endCoordo[0], endCoordo[1] - Number(360)], {
icon: pulseIcon,
})
);
pulsatingMarker.addLayer(
new L.marker([endCoordo[0], endCoordo[1] + Number(360)], {
icon: pulseIcon,
})
);
}
//adding static marker on origin
originMarker.clearLayers()
var startCoordo = [Number(target.data.startLat),Number(target.data.startLon)]
originMarker.addLayer(new L.circleMarker(startCoordo, {radius: 6,opacity:0.7, weight:2,color:'#'+target.data.color}));
if(travel.geometry.type == "MultiLineString"){ //if arc cross dateline, we multiply the marker
originMarker.addLayer(new L.circleMarker([startCoordo[0],startCoordo[1]-Number(360)], {radius: 6,opacity:0.7,weight:2,color:'#'+target.data.color}));
originMarker.addLayer(new L.circleMarker([startCoordo[0],startCoordo[1]+Number(360)], {radius: 6,opacity:0.7,color:'#'+target.data.color}));
originMarker.clearLayers();
var startCoordo = [
Number(target.data.startLat),
Number(target.data.startLon),
];
originMarker.addLayer(
new L.circleMarker(startCoordo, {
radius: 6,
opacity: 0.7,
weight: 2,
color: "#" + target.data.color,
})
);
if (travel.geometry.type == "MultiLineString") {
//if arc cross dateline, we multiply the marker
originMarker.addLayer(
new L.circleMarker([startCoordo[0], startCoordo[1] - Number(360)], {
radius: 6,
opacity: 0.7,
weight: 2,
color: "#" + target.data.color,
})
);
originMarker.addLayer(
new L.circleMarker([startCoordo[0], startCoordo[1] + Number(360)], {
radius: 6,
opacity: 0.7,
color: "#" + target.data.color,
})
);
}
//popup
var momentLocale = lang;
if (momentLocale == 'zh'){momentLocale = 'zh-cn'} //troubleshot for chinese
moment.locale(momentLocale)
if (momentLocale == "zh") {
momentLocale = "zh-cn";
} //troubleshot for chinese
moment.locale(momentLocale);
target.popup.setLatLng([target.data.currentPosition.geometry.coordinates[1],target.data.currentPosition.geometry.coordinates[0]])
target.popup.setLatLng([
target.data.currentPosition.geometry.coordinates[1],
target.data.currentPosition.geometry.coordinates[0],
]);
//arabic popup
if (lang == "ar") {
target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">'+target.data.destName+'</th></tr><tr><th style="text-align:center"><small>'+moment(target.data.startTime).fromNow()+'</small></th><th></th><th style="text-align:center"><small>'+moment(target.data.deliveryTime).fromNow()+'</small></th></tr></tbody></table>')
target.popup.setContent(
'<table><tbody><tr><th style="text-align:center">' +
target.data.startName +
'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">' +
target.data.destName +
'</th></tr><tr><th style="text-align:center"><small>' +
moment(target.data.startTime).fromNow() +
'</small></th><th></th><th style="text-align:center"><small>' +
moment(target.data.deliveryTime).fromNow() +
"</small></th></tr></tbody></table>"
);
}
//other languages
else {
target.popup.setContent('<table><tbody><tr><th style="text-align:center">'+target.data.startName+'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">'+target.data.destName+'</th></tr><tr><th style="text-align:center"><small>'+moment(target.data.startTime).fromNow()+'</small></th><th></th><th style="text-align:center"><small>'+moment(target.data.deliveryTime).fromNow()+'</small></th></tr></tbody></table>')
target.popup.setContent(
'<table><tbody><tr><th style="text-align:center">' +
target.data.startName +
'</th><th>&nbsp;<i class="fas fa-plane"></i>&nbsp;</th><th style="text-align:center">' +
target.data.destName +
'</th></tr><tr><th style="text-align:center"><small>' +
moment(target.data.startTime).fromNow() +
'</small></th><th></th><th style="text-align:center"><small>' +
moment(target.data.deliveryTime).fromNow() +
"</small></th></tr></tbody></table>"
);
}
target.popup.openOn(map);
target.popup.on('remove', function() {
arcTravel.clearLayers()
arcTravelled.clearLayers()
pulsatingMarker.clearLayers()
originMarker.clearLayers()
target.popup.on("remove", function () {
arcTravel.clearLayers();
arcTravelled.clearLayers();
pulsatingMarker.clearLayers();
originMarker.clearLayers();
});
target.popup.on('popupclose', function() {
arcTravel.clearLayers()
arcTravelled.clearLayers()
pulsatingMarker.clearLayers()
originMarker.clearLayers()
target.popup.on("popupclose", function () {
arcTravel.clearLayers();
arcTravelled.clearLayers();
pulsatingMarker.clearLayers();
originMarker.clearLayers();
});
}
//utils for popup
utils.getMap().on('click', function(e) {
utils.getMap().on("click", function (e) {
var interaction = utils.getRenderer().plugins.interaction;
var pointerEvent = e.originalEvent;
var pixiPoint = new PIXI.Point();
interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
interaction.mapPositionToPoint(
pixiPoint,
pointerEvent.clientX,
pointerEvent.clientY
);
var target = interaction.hitTest(pixiPoint, container);
if (target && target.popup) {
openPopup(target)
openPopup(target);
}
});
utils.getMap().on('touchend', function(e) {
utils.getMap().on("touchend", function (e) {
var interaction = utils.getRenderer().plugins.interaction;
var pointerEvent = e.originalEvent;
var pixiPoint = new PIXI.Point();
interaction.mapPositionToPoint(pixiPoint, pointerEvent.clientX, pointerEvent.clientY);
interaction.mapPositionToPoint(
pixiPoint,
pointerEvent.clientX,
pointerEvent.clientY
);
var target = interaction.hitTest(pixiPoint, container);
if (target && target.popup) {
openPopup(target)
openPopup(target);
}
});
}
firstDraw = false;
@ -471,22 +686,17 @@ loader.load(function(loader, resources) {
pixiOverlay.addTo(map);
});
//hack to make white lines between lines disapear on non-retina screens (from: https://github.com/Leaflet/Leaflet/issues/3575 )
(function () {
var originalInitTile = L.GridLayer.prototype._initTile
var originalInitTile = L.GridLayer.prototype._initTile;
L.GridLayer.include({
_initTile: function (tile) {
originalInitTile.call(this, tile);
var tileSize = this.getTileSize();
tile.style.width = tileSize.x + 1 + 'px';
tile.style.height = tileSize.y + 1 + 'px';
}
tile.style.width = tileSize.x + 1 + "px";
tile.style.height = tileSize.y + 1 + "px";
},
});
})()
})();

11
src/translation.js
View File

@ -104,13 +104,7 @@ function translateUI(l) {
$("#navTitle").html(s.avionpoeme);
$("#buttonAnthology").html(s.anthologie);
$("#buttonAbout").html(s.apropos);
if (typeof nbPlane !== "undefined") {
$("#buttonNewPlane").val(s.lancer_avion + " " + nbPlane + "/100");
} else {
$("#buttonNewPlane").on("click", () => {
window.location.replace("/");
});
}
//new plane form
$("#newPlaneModalTitle").html(s.lancer_avion);
$("#newPlaneModalMessage").html(s.message);
@ -139,11 +133,6 @@ function translateUI(l) {
$("#publicTooltip").attr("title", s.public_tooltip).tooltip("_fixTitle");
$('#selectDestLang option[value="' + lang + '"]').prop("selected", true); //selecting by default recipient language same as interface
//Anthology
displayAnthology();
$("#anthologyTitle").html(s.anthologie);
$("#anthologyDisclaimer").html(s.suppr_message_public);
$("#closeAnthologyAbout").html(s.retour_carte);
//About
$("#aboutTitle").html(s.apropos);