rebillar/site-accueil-insa
1
1
Fork 1
forked from vergnet/site-accueil-insa
Code Issues Pull requests Releases Wiki Activity

les maps

Browse source
This commit is contained in:
Guillaume Joffre 2022-06-13 01:21:54 +02:00
parent c0a5f12777
commit ac14795c8a
10 changed files with 561 additions and 439 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
assets/css/page/map.css
View file

@ -2,16 +2,6 @@
text-align: center; text-align: center;
} }
iframe {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
display: block;
width: 90vw;
aspect-ratio: 1220/710;
border: 0;
}
section { section {
background-color: rgba(255,255,255,0.3); background-color: rgba(255,255,255,0.3);
max-width: 800px; max-width: 800px;
@ -25,8 +15,74 @@ section {
padding: 50px; padding: 50px;
} }
#maps {
position: relative;
display: block;
margin: 5vh auto auto;
width: 90vw;
min-height: 50vh;
border: none;
}
@media (max-width: 700px) { @media (max-width: 700px) {
iframe { #maps {
width: 100%; width: 100%;
} }
} }
/*iframe {
margin-top: 50px;
margin-left: auto;
margin-right: auto;
display: block;
width: 90vw;
aspect-ratio: 1220/710;
border: 0;
}*/
.change-map-button {
cursor: pointer;
border: solid 2px #c49621;
padding: 0.5em;
}
.animated {
background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%);
background-size: auto auto;
background-clip: border-box;
background-size: 200% auto;
color: #fff;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: textclip 2s linear infinite;
display: inline-block;
}
@keyframes textclip {
to {
background-position: 200% center;
}
}
.change-map-button:after {
content: "2D";
}
body.flat .change-map-button:after {
content: "3D";
}
body.flat #map3d {
display: none;
}
#map2d {
display: none;
}
body.flat #map2d {
display: block;
}

28
assets/map/ajax.php
View file

@ -1,12 +1,12 @@
<?php <?php
$selector = ['gymnase', 'bib', 'ru', 'csh', 'tp', 'stpi', 'gc', 'gpe', 'gp', 'gei', 'gm', 'exam', 'loge', 'laverie', 'gmm', 'r3', 'r4', 'r5', 'r6', 'r7', 'r1', 'r2', 'amicale', 'pk', 'trou'];
$selector = ['gymnase', 'ru_bib', 'csh', 'tp', 'stpi', 'gc', 'gpe', 'gp', 'gei', 'gm', 'exam', 'loge', 'laverie', 'gmm', 'r3', 'r4', 'r5', 'r6', 'r7', 'r1', 'r2', 'amicale', 'pk', 'trou'];
//attention, les éléments sont dans l'ordre //attention, les éléments sont dans l'ordre
$title = [ $title = [
'Le gymnase', 'Le gymnase',
'bib\'insa et cafet', 'ru, bib\'insa et cafet',
'le ru',
'Le CSH', 'Le CSH',
'Le bâtiment des TPs', 'Le bâtiment des TPs',
'Le STPI, amphi Riquet et amphi Vinci', 'Le STPI, amphi Riquet et amphi Vinci',
@ -33,8 +33,7 @@ $title = [
$desc = [ $desc = [
'Parce qu\'à l\'INSA on fait aussi du sport.', 'Parce qu\'à l\'INSA on fait aussi du sport.',
'Ton repère si tu aimes le travail de groupe.\n<br><br>\nEt juste dessous la cafét pour varier les plaisirs et pour te sauver le soir.', 'Le RU: Sympa, convivial, grand avant 12h13.<br><br>La Bib: Ton repère si tu aimes le travail de groupe.<br><br>Et juste dessous la cafét pour varier les plaisirs et pour te sauver le soir.',
'Sympa, convivial, grand avant 12h13.',
'LE bâtiment avec TOUTES tes matières préférées : en plus de l\'anglais et des autres langues enseignées à l\'INSA, on t\'y parle aussi d\'Expression, de Gestion, de Philo, de PPI...youpi !', 'LE bâtiment avec TOUTES tes matières préférées : en plus de l\'anglais et des autres langues enseignées à l\'INSA, on t\'y parle aussi d\'Expression, de Gestion, de Philo, de PPI...youpi !',
'Nom bizarre pour un bâtiment mais tu y iras seulement pour les TP d\'Electrocinétique et d\'Optique\n', 'Nom bizarre pour un bâtiment mais tu y iras seulement pour les TP d\'Electrocinétique et d\'Optique\n',
'Le bâtiment des salles de cours classiques, avec son bureau des stages, son administration des premières années, et...ses sous-sols.\n\nY\'a aussi l\'amphi Vinci (et ses 300 places, souvent occupées en même temps sauf étonnamment en gestion) et l\'amphi Riquet (pour Pierre-Paul, celui qui a initié la construction du canal, il est plus petit mais plus convivial).', 'Le bâtiment des salles de cours classiques, avec son bureau des stages, son administration des premières années, et...ses sous-sols.\n\nY\'a aussi l\'amphi Vinci (et ses 300 places, souvent occupées en même temps sauf étonnamment en gestion) et l\'amphi Riquet (pour Pierre-Paul, celui qui a initié la construction du canal, il est plus petit mais plus convivial).',
@ -61,16 +60,19 @@ $desc = [
//c'est peu compréhensible mais l'ancien systeme (avant Baptiste Rébillard <- moi) utilisait inutilement une base de donnée //c'est peu compréhensible mais l'ancien systeme (avant Baptiste Rébillard & Guillaume Joffre (shameless promotion)) utilisait inutilement une base de donnée
if (isset($_GET['function'])) { $_POST = json_decode(file_get_contents('php://input'), true);
if (htmlspecialchars($_GET['function']) == "get_map_info")
if (isset($_POST["function"])) {
if (htmlspecialchars($_POST['function']) == "get_map_info")
get_map_info(); get_map_info();
elseif (htmlspecialchars($_GET['function']) == "get_map_selectors") elseif (htmlspecialchars($_POST['function']) == "get_map_selectors")
get_map_selectors(); get_map_selectors();
} }
function get_map_selectors() { function get_map_selectors() {
header('Content-Type: application/json'); header('Content-Type: application/json');
global $selector; global $selector;
@ -85,9 +87,9 @@ function get_map_selectors() {
} }
function get_map_info() { function get_map_info() {
if (isset($_GET['selector'])) { if (isset($_POST['selector'])) {
$select = htmlspecialchars($_GET['selector']); $select = htmlspecialchars($_POST['selector']);
header('Content-Type: application/json'); header('Content-Type: application/json');
@ -109,3 +111,7 @@ function show_error() {
echo "Échec : "; echo "Échec : ";
var_dump($_GET); var_dump($_GET);
} }

38
assets/map/alert.js Normal file
View file

@ -0,0 +1,38 @@
function CustomAlert(){
this.alert = function(message,title){
document.body.innerHTML = document.body.innerHTML + '<div id="dialogoverlay"></div><div id="dialogbox" class="slit-in-vertical"><div><div id="dialogboxhead"></div><div id="dialogboxbody"></div><div id="dialogboxfoot"></div></div></div>';
let dialogoverlay = document.getElementById('dialogoverlay');
let dialogbox = document.getElementById('dialogbox');
let winH = window.innerHeight;
dialogoverlay.style.height = winH+"px";
dialogbox.style.top = "100px";
dialogoverlay.style.display = "block";
dialogbox.style.display = "block";
document.getElementById('dialogboxhead').style.display = 'block';
if(typeof title === 'undefined') {
document.getElementById('dialogboxhead').style.display = 'none';
} else {
document.getElementById('dialogboxhead').innerHTML = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i> '+ title;
}
document.getElementById('dialogboxbody').innerHTML = message;
document.getElementById('dialogboxfoot').innerHTML = '<button class="pure-material-button-contained active" onclick="customAlert.ok()">OK</button>';
}
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}
}
let customAlert = new CustomAlert();

149
assets/map/iframe_map.php
View file

@ -1,149 +0,0 @@
<?php
//ce fichier doit être inclut dans une page html avec un iframe de telle sorte à ce que tout les liens dans les js soient OK.
require_once 'ajax.php';
?>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<style>
.hidden {
display: none;
}
/* Map loading */
#loading-screen {
position: absolute;
z-index: 2;
/*top: 0; */
left: 0;
width: 100vw;
height: 50vh;
background-color: #000000;
opacity: 1;
transition: 1s opacity;
}
#loading-screen.fade-out {
opacity: 0;
}
.loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 40vh;
height: 40vh;
margin: -20vh 0 0 -20vh;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #9370DB;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #BA55D3;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FF00FF;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#map_section {
position: absolute;
margin: auto;
margin-top: 0;
left: 0;
top: 0;
width: 100vw;
}
</style>
<script>
function enable3DMap() {
var map3d = document.querySelector('#maps #map3d');
var map = document.querySelector('#maps #map');
map3d.classList.add("hidden");
map.classList.add("hidden");
map3d.classList.remove("hidden");
}
function enable2DMap() {
var map3d = document.querySelector('#maps #map3d');
var map = document.querySelector('#maps #map');
map.classList.add("hidden");
map3d.classList.add("hidden");
map.classList.remove("hidden");
}
</script>
<section id="map_section">
<div id="maps_button">
<button onclick="enable3DMap()" class="main-button">Map 3D</button>
<button onclick="enable2DMap()" class="main-button">Map 2D</button>
</div>
<section id="loading-screen">
<div class="loader"></div>
</section>
<div id="maps" class="">
<script src="script_map3d.js" type="module"></script>
<div id="map" class="hidden">
<?php echo file_get_contents("map2d.svg"); ?>
<canvas id="canvasID"></canvas>
</div>
</div>
<script type="text/javascript" src="script_map2d.js"></script>
</section>

9
assets/map/map2D.php Normal file
View file

@ -0,0 +1,9 @@
<?php
require_once 'ajax.php';
?>
<?php echo file_get_contents("assets/map/map2d.svg"); ?>
<script type="text/javascript" src="assets/map/script_map2d.js"></script>

2
assets/map/map2d.svg
View file

@ -11,7 +11,7 @@
preserveAspectRatio="xMinYMin meet" preserveAspectRatio="xMinYMin meet"
viewBox="0 0 600 800" viewBox="0 0 600 800"
version="1.1" version="1.1"
id="svg2" id="map2d"
inkscape:version="0.91 r13725" inkscape:version="0.91 r13725"
sodipodi:docname="map.svg"> sodipodi:docname="map.svg">
<metadata <metadata

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 565 KiB

After

Width:  |  Height:  |  Size: 565 KiB

105
assets/map/map3D.php Normal file
View file

@ -0,0 +1,105 @@
<?php
require_once 'ajax.php';
?>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>
<style>
#loading-screen {
position: absolute;
z-index: 2;
/*top: 0; */
left: 0;
width: 100%;
height: 100%;
opacity: 1;
transition: 1s opacity;
}
#loading-screen.fade-out {
opacity: 0;
}
.loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 40vh;
height: 40vh;
margin: -20vh 0 0 -20vh;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #9370DB;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
.loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #BA55D3;
-webkit-animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
.loader:after {
content: "";
position: absolute;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FF00FF;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<div id="loading-screen">
<div class="loader"></div>
</div>
<script src="assets/map/script_map3d.js" type="module"></script>

79
assets/map/script_map2d.js
View file

@ -2,47 +2,64 @@
let hoverColor = "#e9b82f"; let hoverColor = "#e9b82f";
let normalColor = "#efbd95"; let normalColor = "#efbd95";
var rep2 = ""; const rep2 = "assets/map";
function get_name(id){ function get_name(id){
return id.replace("map-", ""); return id.replace("map-", "");
} }
function clicked(elem){ function clicked(elem) {
$.alert({
title: 'Chargement...',
content: function () { let payload = {
let self = this; "function": 'get_map_info',
let object = { 'selector': get_name(elem.id),
"function": 'get_map_info', };
'selector': get_name(elem.id),
}; function doChecks(response) {
return $.ajax({ if (!response.ok) {
url: rep2+'ajax.php', throw Error(response.statusText);
data: object, }
method: 'get' return response;
}).done(function (data) { }
if (data.length > 0) {
self.setTitle(data[0]['title']); function readIt(response) {
self.setContent(data[0]['description']); return response.json()
} else { }
self.setTitle('Erreur');
self.setContent('Une erreur est survenue') fetch(rep2 + '/' + 'ajax.php', {
} method: 'POST',
}).fail(function(){ body: JSON.stringify(payload),
self.setContent('Something went wrong.'); headers: {
}); "Content-type": "application/json; charset=UTF-8"
}, }
}).then(doChecks).then(readIt).then((data) => {
if (data.length > 0) {
Swal.fire({
title: '<strong id="modal-title">' + data[0]['title'] + '</strong>',
html: data[0]['description']
})
} else {
Swal.fire({
title: "Erreur",
html: "Une erreur est survenue",
timer: 3000,
timerProgressBar: true
})
}
}).catch((error) => {
console.error(error);
}); });
} }
function hover_in(elem){ function hover_in(elem){
$(elem).css({ const css = elem.style
"fill": hoverColor,
'cursor': 'pointer', css.fill = hoverColor
}); css.cursor = "pointer"
} }
function hover_out(elem){ function hover_out(elem){
$(elem).css("fill", normalColor); elem.style.fill = normalColor
} }

465
assets/map/script_map3d.js
View file

@ -3,16 +3,19 @@
* Code : Ronan Bonnet * Code : Ronan Bonnet
* *
*/ */
var rep = "";
/** repository containing this script and the map3D.glb **/
var rep = "./assets/map";
import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.module.js'; import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.119.1/build/three.module.js';
import { import {
OrbitControls OrbitControls
} from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/controls/OrbitControls.js'; } from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/controls/OrbitControls.js';
import { import {
GLTFLoader GLTFLoader
} from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/loaders/GLTFLoader.js'; } from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/loaders/GLTFLoader.js';
var container, stats, controls; var container, stats, controls;
@ -25,6 +28,7 @@ render();
var height, width; var height, width;
/** /**
* Initializes the 3D plan * Initializes the 3D plan
* Creates and loads every needed things * Creates and loads every needed things
@ -32,145 +36,156 @@ var height, width;
function init() { function init() {
// //
// Creates HTML // Creates HTML
// //
container = document.createElement('div'); var maps = document.getElementById("maps");
container.id = 'map3d';
height = document.querySelector('#maps').clientHeight; container = document.createElement('div');
width = document.querySelector('#maps').clientWidth; container.id = 'map3d';
var svg = document.querySelector('#maps #map');
document.querySelector('#maps').insertBefore(container, svg); height = maps.clientHeight;
width = maps.clientWidth;
maps.appendChild(container);
// //
// Creates cameras and scene // Creates cameras and scene
// //
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.75, 20000); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.75, 20000);
camera.position.set(500,1500,500); camera.position.set(500,1500,500);
scene = new THREE.Scene(); scene = new THREE.Scene();
// //
// LIGHTS // LIGHTS
// //
let sol = new THREE.AmbientLight(0x404040, 1.0); let sol = new THREE.AmbientLight(0x404040, 1.0);
scene.add(sol); scene.add(sol);
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 ); var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 20, 0 ); hemiLight.position.set( 0, 20, 0 );
scene.add( hemiLight ); scene.add( hemiLight );
var dirLight = new THREE.DirectionalLight( 0xffffff ); var dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( - 3, 10, - 10 ); dirLight.position.set( - 3, 10, - 10 );
scene.add( dirLight ); scene.add( dirLight );
//scene.background = new THREE.Color( 0xff0000 ); //scene.background = new THREE.Color( 0xff0000 );
raycaster = new THREE.Raycaster(); raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2() mouse = new THREE.Vector2()
// //
// Loading screen // Loading screen
// //
const loadingManager = new THREE.LoadingManager( () => { const loadingManager = new THREE.LoadingManager( () => {
const loadingScreen = document.getElementById('loading-screen'); const loadingScreen = document.getElementById('loading-screen');
loadingScreen.classList.add('fade-out'); loadingScreen.classList.add('fade-out');
loadingScreen.addEventListener('transitionend', onTransitionEnd); loadingScreen.addEventListener('transitionend', onTransitionEnd);
}); });
// //
// Load the 3D model // Load the 3D model
// //
var loader = new GLTFLoader(loadingManager); var loader = new GLTFLoader(loadingManager);
loader.load(rep+'map3D.glb', function(gltf) { loader.load(rep + '/' + 'map3D.glb', function(gltf) {
var object = gltf.scene; var object = gltf.scene;
gltf.scene.scale.set( 2, 2, 2 ); gltf.scene.scale.set( 2, 2, 2 );
gltf.scene.position.x = 0; //Position (x = right+ left-) gltf.scene.position.x = 0; //Position (x = right+ left-)
gltf.scene.position.y = 0; //Position (y = up+, down-) gltf.scene.position.y = 0; //Position (y = up+, down-)
gltf.scene.position.z = 0; gltf.scene.position.z = 0;
scene.add(gltf.scene); scene.add(gltf.scene);
render(); render();
});
});
// //
// RENDERER // RENDERER
// //
renderer = new THREE.WebGLRenderer({ renderer = new THREE.WebGLRenderer({
antialias: true, antialias: true,
}); });
renderer.setClearColor( 0x000000 ); renderer.setClearColor( 0x000000 );
renderer.setPixelRatio(window.devicePixelRatio); renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, window.innerHeight * 0.75); renderer.setSize(width, window.innerHeight * 0.75);
renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 1; renderer.toneMappingExposure = 1;
renderer.outputEncoding = THREE.sRGBEncoding; renderer.outputEncoding = THREE.sRGBEncoding;
container.appendChild(renderer.domElement); container.appendChild(renderer.domElement);
var pmremGenerator = new THREE.PMREMGenerator(renderer); var pmremGenerator = new THREE.PMREMGenerator(renderer);
pmremGenerator.compileEquirectangularShader(); pmremGenerator.compileEquirectangularShader();
// //
// CONTROLS // CONTROLS
// //
controls = new OrbitControls(camera, renderer.domElement); controls = new OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render); // use if there is no animation loop controls.addEventListener('change', render); // use if there is no animation loop
controls.minDistance = 0; controls.minDistance = 0;
controls.maxDistance = 3500; controls.maxDistance = 3500;
controls.enablePan = true; controls.enablePan = true;
controls.target.set(-110, 300, 0); controls.target.set(-110, 300, 0);
controls.maxPolarAngle = Math.PI/2.05; controls.maxPolarAngle = Math.PI/2.05;
controls.update(); controls.update();
// //
// Load Light // Load Light
// //
var ambientLight = new THREE.AmbientLight( 0xcccccc ); var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight ); scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff ); var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize(); directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight ); scene.add( directionalLight );
// //
// EVENTS // EVENTS
// //
window.addEventListener('resize', onWindowResize, false); window.addEventListener('resize', onWindowResize, false);
renderer.domElement.addEventListener('click', onClick, false); // Mouse renderer.domElement.addEventListener('click', onClick, false); // Mouse
//renderer.domElement.addEventListener('mousemove', onMouseOver,false); //renderer.domElement.addEventListener('mousemove', onMouseOver,false);
renderer.domElement.addEventListener('touchend', onTouchEnd, false); // Smartphone renderer.domElement.addEventListener('touchend', onTouchEnd, false); // Smartphone
} }
function doChecks(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
function readIt(response) {
return response.json()
}
/** /**
* Get all the selectors (buildings identifiers) * Get all the selectors (buildings identifiers)
* @returns Array with all the selectors * @returns Array with all the selectors
*/ */
function getSelectors() { function getSelectors() {
let info = {};
let object = {
"function": 'get_map_selectors',
'info': info,
}
return $.ajax({
url: rep+'ajax.php',
data: object,
method: 'get',
success: function(data){
} const payload = {
}); "function": 'get_map_selectors'
}
return fetch(rep + '/' + 'ajax.php', {
method: 'POST',
body: JSON.stringify(payload),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
}).then(doChecks).then(readIt)
} }
/* /*
@ -179,90 +194,90 @@ function getSelectors() {
*/ */
function handleClickOnBuilding(x,y) { function handleClickOnBuilding(x,y) {
mouse.x = x; mouse.x = x;
mouse.y = y; mouse.y = y;
raycaster.setFromCamera(mouse, camera); raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children, true); var intersects = raycaster.intersectObjects(scene.children, true);
// If we clicked on a building // If we clicked on a building
if (intersects.length > 0) { if (intersects.length > 0) {
var selector = intersects[0].object.name.toString().toLowerCase(); // Name of the building we clicked on var selector = intersects[0].object.name.toString().toLowerCase(); // Name of the building we clicked on
console.debug(selector)
// Wait for getSelectors() to be done
// If we do not wait, everything will be executed before checking what is inside the database
getSelectors().then((data) => {
if (data.map(x => x.selector).includes(selector)){
// Wait for getSelectors() to be done let payload = {
// If we do not wait, everything will be executed before checking what is inside the database "function": 'get_map_info',
$.when(getSelectors().done(function(data) { 'selector': selector,
if (data.map(x => x.selector).includes(selector)){ };
// Use the same thing as the one for the 2D map
$.alert({ fetch(rep + '/' + 'ajax.php', {
title: 'Chargement...', method: 'POST',
content: function () { body: JSON.stringify(payload),
let self = this; headers: {
let object = { "Content-type": "application/json; charset=UTF-8"
"function": 'get_map_info', }
'selector': selector, }).then(doChecks).then(readIt).then((data) => {
}; if (data.length > 0) {
return $.ajax({ Swal.fire({
url: rep+'ajax.php', title: '<strong id="modal-title">' + data[0]['title'] + '</strong>',
data: object, html: data[0]['description']
method: 'get' })
}).done(function (data) { } else {
if (data.length > 0) { Swal.fire({
self.setTitle(data[0]['title']); title: "Erreur",
self.setContent(data[0]['description']); html: "Une erreur est survenue",
} else { timer: 3000,
self.setTitle('Erreur'); timerProgressBar: true
self.setContent('Une erreur est survenue') })
return; }
} }).catch((error) => {
}).fail(function(){ console.error(error);
self.setContent('Something went wrong.'); });
}); }
}, }).catch((error) => {
console.error(error);
}); });
} else { }
}
}));
}
} }
/** /**
* Get the position where the user clicked (mouse) on a building and process it * Get the position where the user clicked (mouse) on a building and process it
*/ */
function onClick() { function onClick(e) {
event.preventDefault(); e.preventDefault();
height = document.querySelector('#maps').clientHeight; //height = document.querySelector('#maps').clientHeight;
width = document.querySelector('#maps').clientWidth; //width = document.querySelector('#maps').clientWidth;
const rect = renderer.domElement.getBoundingClientRect();
const rect = renderer.domElement.getBoundingClientRect(); mouse.x = ( ( e.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1; mouse.y = - ( ( e.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; handleClickOnBuilding(mouse.x, mouse.y);
handleClickOnBuilding(mouse.x, mouse.y);
} }
/** /**
* Get the position where the user clicked (smartphone) on a building and process it * Get the position where the user clicked (smartphone) on a building and process it
*/ */
function onTouchEnd() { function onTouchEnd(e) {
var clientX, clientY; var clientX, clientY;
clientX = event.changedTouches[0].clientX; clientX = e.changedTouches[0].clientX;
clientY = event.changedTouches[0].clientY; clientY = e.changedTouches[0].clientY;
const rect = renderer.domElement.getBoundingClientRect(); const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1; mouse.x = ( ( clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
mouse.y = - ( ( clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; mouse.y = - ( ( clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
handleClickOnBuilding(mouse.x, mouse.y); handleClickOnBuilding(mouse.x, mouse.y);
} }
@ -270,80 +285,77 @@ function onTouchEnd() {
* Process something when the user moved the mouse over a building * Process something when the user moved the mouse over a building
* @todo add text over the building * @todo add text over the building
*/ */
function onMouseOver() { function onMouseOver(e) {
event.preventDefault(); e.preventDefault();
height = document.querySelector('#maps').clientHeight; height = document.querySelector('#maps').clientHeight;
width = document.querySelector('#maps').clientWidth; width = document.querySelector('#maps').clientWidth;
const rect = renderer.domElement.getBoundingClientRect(); const rect = renderer.domElement.getBoundingClientRect();
mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1; mouse.x = ( ( e.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1;
mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; mouse.y = - ( ( e.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1;
createTextOverBuilding(mouse.x,mouse.y)
createTextOverBuilding(mouse.x,mouse.y)
} }
function createTextOverBuilding(x,y) { function createTextOverBuilding(x,y) {
mouse.x = x; mouse.x = x;
mouse.y = y; mouse.y = y;
raycaster.setFromCamera(mouse, camera); raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children, true); var intersects = raycaster.intersectObjects(scene.children, true);
// If we clicked on a building // If we clicked on a building
if (intersects.length > 0) { if (intersects.length > 0) {
console.log(intersects); console.log(intersects);
}
}
} }
function makeLabelCanvas(baseWidth, size, name) { function makeLabelCanvas(baseWidth, size, name) {
const borderSize = 2; const borderSize = 2;
const ctx = document.createElement('canvas').getContext('2d'); const ctx = document.createElement('canvas').getContext('2d');
const font = `${size}px bold sans-serif`; const font = `${size}px bold sans-serif`;
ctx.font = font; ctx.font = font;
// measure how long the name will be // measure how long the name will be
const textWidth = ctx.measureText(name).width; const textWidth = ctx.measureText(name).width;
const doubleBorderSize = borderSize * 2; const doubleBorderSize = borderSize * 2;
const width = baseWidth + doubleBorderSize; const width = baseWidth + doubleBorderSize;
const height = size + doubleBorderSize; const height = size + doubleBorderSize;
ctx.canvas.width = width; ctx.canvas.width = width;
ctx.canvas.height = height; ctx.canvas.height = height;
// need to set font again after resizing canvas // need to set font again after resizing canvas
ctx.font = font; ctx.font = font;
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
ctx.textAlign = 'center'; ctx.textAlign = 'center';
ctx.fillStyle = 'blue'; ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
// scale to fit but don't stretch // scale to fit but don't stretch
const scaleFactor = Math.min(1, baseWidth / textWidth); const scaleFactor = Math.min(1, baseWidth / textWidth);
ctx.translate(width / 2, height / 2); ctx.translate(width / 2, height / 2);
ctx.scale(scaleFactor, 1); ctx.scale(scaleFactor, 1);
ctx.fillStyle = 'white'; ctx.fillStyle = 'white';
ctx.fillText(name, 0, 0); ctx.fillText(name, 0, 0);
const labelBaseScale = 0.01; const labelBaseScale = 0.01;
const label = new THREE.Sprite(labelMaterial); const label = new THREE.Sprite(labelMaterial);
scene.add(label); scene.add(label);
label.position.y = head.position.y + headRadius + size * labelBaseScale; label.position.y = head.position.y + headRadius + size * labelBaseScale;
label.scale.x = canvas.width * labelBaseScale; label.scale.x = canvas.width * labelBaseScale;
label.scale.y = canvas.height * labelBaseScale; label.scale.y = canvas.height * labelBaseScale;
return ctx.canvas; return ctx.canvas;
} }
@ -352,14 +364,17 @@ function makeLabelCanvas(baseWidth, size, name) {
*/ */
function onWindowResize() { function onWindowResize() {
height = document.querySelector('#main-content .inner').clientHeight; var maps = document.getElementById("maps");
width = document.querySelector('#main-content .inner').clientWidth;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(width * 0.9, window.innerHeight * 0.75); // 0.9 and 0.75 so it looks comfortable on the screen height = maps.clientHeight;
width = maps.clientWidth;
render(); camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(width * 0.9, window.innerHeight * 0.75); // 0.9 and 0.75 so it looks comfortable on the screen
render();
} }
@ -368,12 +383,12 @@ function onWindowResize() {
*/ */
function render() { function render() {
renderer.render(scene, camera); renderer.render(scene, camera);
} }
/* /*
* Remove the loader when the model loaded * Remove the loader when the model loaded
*/ */
function onTransitionEnd( event) { function onTransitionEnd( event) {
event.target.remove(); event.target.remove();
} }

41
map.php
View file

@ -2,20 +2,35 @@
ob_start(); // Start reading html ob_start(); // Start reading html
//header('Location: construction.php'); //header('Location: construction.php');
?> ?>
<main>
<main id ="reference">
<div class="box-jaune"> <div class="box-jaune">
<span class="corners corners-top"></span> <span class="corners corners-top"></span>
<span class="corners corners-bottom"></span> <span class="corners corners-bottom"></span>
<div class="title">Carte de l'INSA</div> <div class="title">Carte de l'INSA - <span class="change-map-button animated" id="change-map-button">version : </span></div>
<span class="circles circles-top"></span> <span class="circles circles-top"></span>
<span class="circles circles-bottom"></span> <span class="circles circles-bottom"></span>
</div> </div>
<iframe id="iframe-map" src="assets/map/iframe_map.php"></iframe>
<div id="maps">
<!-- content will be included in #map3d -->
<?php include('assets/map/map3D.php') ?>
<!-- content wil be in #map2d -->
<?php include('assets/map/map2D.php') ?>
</div>
<!-- Note -->
<section> <section>
<p> <p>
@ -23,20 +38,30 @@ ob_start(); // Start reading html
ensuite le chiffre des centaines pour l'étage, et après à toi de trouver ! ensuite le chiffre des centaines pour l'étage, et après à toi de trouver !
</p> </p>
<p> <p>
Par exemple, GM 212, c'est au GM, deuxième étage. Par exemple, GM 212, c'est au GM, deuxième étage.<br>
<br> Et si t'as Amphi 108, c'est au premier étage du STPI (c'est ton département et c'est là où il y a les amphis).
Et si t'as Amphi 108, c'est au premier étage du STPI(c'est ton département et c'est là où il y a les amphis).
</p> </p>
<p id="hint"> <p id="hint">
Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591" class="link">Open Street Fond de carte issu du site <a href="https://www.openstreetmap.org/#map=17/43.57103/1.46591" class="link">Open Street Map</a>.
Map</a>.
</p> </p>
</section> </section>
</main> </main>
<!-- needed for showing custom alert, JE FERAI UN TRUC MAISON PLUS TARD TKT -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!--- Switch between 2D and 3d maps --->
<script defer>
const Thatbutton = document.getElementById("change-map-button");
Thatbutton.addEventListener("click", (e) => {
document.body.classList.toggle("flat");
})
</script>
<?php <?php
$infopage = ["", "Plan", ob_get_clean(), "", "map"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6 $infopage = ["", "Plan", ob_get_clean(), "", "map"]; //relativepath, pagetitle, pagecontent, pagescript, pagename | cf structure/template.php ligne 2 à 6
include("structure/template.php"); include("structure/template.php");