diff --git a/assets/css/page/map.css b/assets/css/page/map.css index 6ff0d7d..679ba0f 100644 --- a/assets/css/page/map.css +++ b/assets/css/page/map.css @@ -2,16 +2,6 @@ text-align: center; } -iframe { - margin-top: 50px; - margin-left: auto; - margin-right: auto; - display: block; - width: 90vw; - aspect-ratio: 1220/710; - border: 0; -} - section { background-color: rgba(255,255,255,0.3); max-width: 800px; @@ -25,8 +15,74 @@ section { padding: 50px; } +#maps { + position: relative; + display: block; + margin: 5vh auto auto; + width: 90vw; + min-height: 50vh; + border: none; +} + @media (max-width: 700px) { - iframe { + #maps { 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; } \ No newline at end of file diff --git a/assets/map/ajax.php b/assets/map/ajax.php index 612ccd5..e9c2c8a 100644 --- a/assets/map/ajax.php +++ b/assets/map/ajax.php @@ -1,12 +1,12 @@
\nEt juste dessous la cafét pour varier les plaisirs et pour te sauver le soir.', -'Sympa, convivial, grand avant 12h13.', +'Le RU: Sympa, convivial, grand avant 12h13.

La Bib: Ton repère si tu aimes le travail de groupe.

Et juste dessous la cafét pour varier les plaisirs et pour te sauver le soir.', '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', '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'])) { - if (htmlspecialchars($_GET['function']) == "get_map_info") +$_POST = json_decode(file_get_contents('php://input'), true); + +if (isset($_POST["function"])) { + if (htmlspecialchars($_POST['function']) == "get_map_info") get_map_info(); - elseif (htmlspecialchars($_GET['function']) == "get_map_selectors") + elseif (htmlspecialchars($_POST['function']) == "get_map_selectors") get_map_selectors(); } function get_map_selectors() { + header('Content-Type: application/json'); global $selector; @@ -85,9 +87,9 @@ function get_map_selectors() { } 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'); @@ -109,3 +111,7 @@ function show_error() { echo "Échec : "; var_dump($_GET); } + + + + diff --git a/assets/map/alert.js b/assets/map/alert.js new file mode 100644 index 0000000..ac8bae3 --- /dev/null +++ b/assets/map/alert.js @@ -0,0 +1,38 @@ + + + + + +function CustomAlert(){ + this.alert = function(message,title){ + document.body.innerHTML = document.body.innerHTML + '
'; + + 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 = ' '+ title; + } + document.getElementById('dialogboxbody').innerHTML = message; + document.getElementById('dialogboxfoot').innerHTML = ''; + } + + this.ok = function(){ + document.getElementById('dialogbox').style.display = "none"; + document.getElementById('dialogoverlay').style.display = "none"; + } +} + +let customAlert = new CustomAlert(); \ No newline at end of file diff --git a/assets/map/iframe_map.php b/assets/map/iframe_map.php deleted file mode 100644 index 298c499..0000000 --- a/assets/map/iframe_map.php +++ /dev/null @@ -1,149 +0,0 @@ - - - - - - - - - -
-
- - -
- -
-
-
- -
- - - -
- - -
diff --git a/assets/map/map2D.php b/assets/map/map2D.php new file mode 100644 index 0000000..bcbcd26 --- /dev/null +++ b/assets/map/map2D.php @@ -0,0 +1,9 @@ + + + + + \ No newline at end of file diff --git a/assets/map/map2d.svg b/assets/map/map2d.svg index 7642b89..fa0d316 100644 --- a/assets/map/map2d.svg +++ b/assets/map/map2d.svg @@ -11,7 +11,7 @@ preserveAspectRatio="xMinYMin meet" viewBox="0 0 600 800" version="1.1" - id="svg2" + id="map2d" inkscape:version="0.91 r13725" sodipodi:docname="map.svg"> + + + + + + + + + +
+
+
+ + \ No newline at end of file diff --git a/assets/map/script_map2d.js b/assets/map/script_map2d.js index 4544ba5..c67eb2a 100644 --- a/assets/map/script_map2d.js +++ b/assets/map/script_map2d.js @@ -2,47 +2,64 @@ let hoverColor = "#e9b82f"; let normalColor = "#efbd95"; -var rep2 = ""; +const rep2 = "assets/map"; function get_name(id){ return id.replace("map-", ""); } -function clicked(elem){ - $.alert({ - title: 'Chargement...', - content: function () { - let self = this; - let object = { - "function": 'get_map_info', - 'selector': get_name(elem.id), - }; - return $.ajax({ - url: rep2+'ajax.php', - data: object, - method: 'get' - }).done(function (data) { - if (data.length > 0) { - self.setTitle(data[0]['title']); - self.setContent(data[0]['description']); - } else { - self.setTitle('Erreur'); - self.setContent('Une erreur est survenue') - } - }).fail(function(){ - self.setContent('Something went wrong.'); - }); - }, +function clicked(elem) { + + + let payload = { + "function": 'get_map_info', + 'selector': get_name(elem.id), + }; + + function doChecks(response) { + if (!response.ok) { + throw Error(response.statusText); + } + return response; + } + + function readIt(response) { + return response.json() + } + + fetch(rep2 + '/' + 'ajax.php', { + method: 'POST', + body: JSON.stringify(payload), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }).then(doChecks).then(readIt).then((data) => { + if (data.length > 0) { + Swal.fire({ + title: '' + data[0]['title'] + '', + 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){ - $(elem).css({ - "fill": hoverColor, - 'cursor': 'pointer', - }); + const css = elem.style + + css.fill = hoverColor + css.cursor = "pointer" } function hover_out(elem){ - $(elem).css("fill", normalColor); + elem.style.fill = normalColor } \ No newline at end of file diff --git a/assets/map/script_map3d.js b/assets/map/script_map3d.js index 8d68b09..054c8d9 100644 --- a/assets/map/script_map3d.js +++ b/assets/map/script_map3d.js @@ -3,16 +3,19 @@ * 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 { - OrbitControls + OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/controls/OrbitControls.js'; import { - GLTFLoader + GLTFLoader } from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/loaders/GLTFLoader.js'; var container, stats, controls; @@ -25,6 +28,7 @@ render(); var height, width; + /** * Initializes the 3D plan * Creates and loads every needed things @@ -32,145 +36,156 @@ var height, width; function init() { - // - // Creates HTML - // - container = document.createElement('div'); - container.id = 'map3d'; + // + // Creates HTML + // + var maps = document.getElementById("maps"); - height = document.querySelector('#maps').clientHeight; - width = document.querySelector('#maps').clientWidth; - var svg = document.querySelector('#maps #map'); - document.querySelector('#maps').insertBefore(container, svg); + container = document.createElement('div'); + container.id = 'map3d'; + + height = maps.clientHeight; + width = maps.clientWidth; + + maps.appendChild(container); - // - // Creates cameras and scene - // - camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.75, 20000); - camera.position.set(500,1500,500); - scene = new THREE.Scene(); + // + // Creates cameras and scene + // + camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.75, 20000); + camera.position.set(500,1500,500); + scene = new THREE.Scene(); - // - // LIGHTS - // - let sol = new THREE.AmbientLight(0x404040, 1.0); - scene.add(sol); + // + // LIGHTS + // + let sol = new THREE.AmbientLight(0x404040, 1.0); + scene.add(sol); - var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 ); - hemiLight.position.set( 0, 20, 0 ); - scene.add( hemiLight ); + var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 ); + hemiLight.position.set( 0, 20, 0 ); + scene.add( hemiLight ); - var dirLight = new THREE.DirectionalLight( 0xffffff ); - dirLight.position.set( - 3, 10, - 10 ); - scene.add( dirLight ); + var dirLight = new THREE.DirectionalLight( 0xffffff ); + dirLight.position.set( - 3, 10, - 10 ); + scene.add( dirLight ); - //scene.background = new THREE.Color( 0xff0000 ); + //scene.background = new THREE.Color( 0xff0000 ); - raycaster = new THREE.Raycaster(); - mouse = new THREE.Vector2() + raycaster = new THREE.Raycaster(); + mouse = new THREE.Vector2() - // - // Loading screen - // - const loadingManager = new THREE.LoadingManager( () => { - const loadingScreen = document.getElementById('loading-screen'); - loadingScreen.classList.add('fade-out'); - loadingScreen.addEventListener('transitionend', onTransitionEnd); - }); + // + // Loading screen + // + const loadingManager = new THREE.LoadingManager( () => { + const loadingScreen = document.getElementById('loading-screen'); + loadingScreen.classList.add('fade-out'); + loadingScreen.addEventListener('transitionend', onTransitionEnd); + }); - // - // Load the 3D model - // - var loader = new GLTFLoader(loadingManager); + // + // Load the 3D model + // + var loader = new GLTFLoader(loadingManager); - loader.load(rep+'map3D.glb', function(gltf) { - var object = gltf.scene; - gltf.scene.scale.set( 2, 2, 2 ); - gltf.scene.position.x = 0; //Position (x = right+ left-) - gltf.scene.position.y = 0; //Position (y = up+, down-) - gltf.scene.position.z = 0; + loader.load(rep + '/' + 'map3D.glb', function(gltf) { + var object = gltf.scene; + gltf.scene.scale.set( 2, 2, 2 ); + gltf.scene.position.x = 0; //Position (x = right+ left-) + gltf.scene.position.y = 0; //Position (y = up+, down-) + gltf.scene.position.z = 0; - scene.add(gltf.scene); - - render(); + scene.add(gltf.scene); - }); + render(); + }); - // - // RENDERER - // - renderer = new THREE.WebGLRenderer({ - antialias: true, - }); - renderer.setClearColor( 0x000000 ); + // + // RENDERER + // + renderer = new THREE.WebGLRenderer({ + antialias: true, + }); + renderer.setClearColor( 0x000000 ); - renderer.setPixelRatio(window.devicePixelRatio); - renderer.setSize(width, window.innerHeight * 0.75); - renderer.toneMapping = THREE.ACESFilmicToneMapping; - renderer.toneMappingExposure = 1; - renderer.outputEncoding = THREE.sRGBEncoding; - container.appendChild(renderer.domElement); + renderer.setPixelRatio(window.devicePixelRatio); + renderer.setSize(width, window.innerHeight * 0.75); + renderer.toneMapping = THREE.ACESFilmicToneMapping; + renderer.toneMappingExposure = 1; + renderer.outputEncoding = THREE.sRGBEncoding; + container.appendChild(renderer.domElement); - var pmremGenerator = new THREE.PMREMGenerator(renderer); - pmremGenerator.compileEquirectangularShader(); + var pmremGenerator = new THREE.PMREMGenerator(renderer); + pmremGenerator.compileEquirectangularShader(); - // - // CONTROLS - // - controls = new OrbitControls(camera, renderer.domElement); - controls.addEventListener('change', render); // use if there is no animation loop - controls.minDistance = 0; - controls.maxDistance = 3500; - controls.enablePan = true; - controls.target.set(-110, 300, 0); - controls.maxPolarAngle = Math.PI/2.05; - controls.update(); + // + // CONTROLS + // + controls = new OrbitControls(camera, renderer.domElement); + controls.addEventListener('change', render); // use if there is no animation loop + controls.minDistance = 0; + controls.maxDistance = 3500; + controls.enablePan = true; + controls.target.set(-110, 300, 0); + controls.maxPolarAngle = Math.PI/2.05; + controls.update(); - // - // Load Light - // - var ambientLight = new THREE.AmbientLight( 0xcccccc ); - scene.add( ambientLight ); - - var directionalLight = new THREE.DirectionalLight( 0xffffff ); - directionalLight.position.set( 0, 1, 1 ).normalize(); - scene.add( directionalLight ); + // + // Load Light + // + var ambientLight = new THREE.AmbientLight( 0xcccccc ); + scene.add( ambientLight ); + + var directionalLight = new THREE.DirectionalLight( 0xffffff ); + directionalLight.position.set( 0, 1, 1 ).normalize(); + scene.add( directionalLight ); - // - // EVENTS - // - window.addEventListener('resize', onWindowResize, false); + // + // EVENTS + // + window.addEventListener('resize', onWindowResize, false); - renderer.domElement.addEventListener('click', onClick, false); // Mouse - //renderer.domElement.addEventListener('mousemove', onMouseOver,false); - renderer.domElement.addEventListener('touchend', onTouchEnd, false); // Smartphone + renderer.domElement.addEventListener('click', onClick, false); // Mouse + //renderer.domElement.addEventListener('mousemove', onMouseOver,false); + 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) * @returns Array with all the selectors */ 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) { - mouse.x = x; - mouse.y = y; + mouse.x = x; + 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 (intersects.length > 0) { + // If we clicked on a building + 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 - // If we do not wait, everything will be executed before checking what is inside the database - $.when(getSelectors().done(function(data) { - if (data.map(x => x.selector).includes(selector)){ - // Use the same thing as the one for the 2D map - $.alert({ - title: 'Chargement...', - content: function () { - let self = this; - let object = { - "function": 'get_map_info', - 'selector': selector, - }; - return $.ajax({ - url: rep+'ajax.php', - data: object, - method: 'get' - }).done(function (data) { - if (data.length > 0) { - self.setTitle(data[0]['title']); - self.setContent(data[0]['description']); - } else { - self.setTitle('Erreur'); - self.setContent('Une erreur est survenue') - return; - } - }).fail(function(){ - self.setContent('Something went wrong.'); - }); - }, - }); - } else { + let payload = { + "function": 'get_map_info', + 'selector': selector, + }; - } - })); - - } + fetch(rep + '/' + 'ajax.php', { + method: 'POST', + body: JSON.stringify(payload), + headers: { + "Content-type": "application/json; charset=UTF-8" + } + }).then(doChecks).then(readIt).then((data) => { + if (data.length > 0) { + Swal.fire({ + title: '' + data[0]['title'] + '', + html: data[0]['description'] + }) + } else { + Swal.fire({ + title: "Erreur", + html: "Une erreur est survenue", + timer: 3000, + timerProgressBar: true + }) + } + }).catch((error) => { + console.error(error); + }); + } + }).catch((error) => { + console.error(error); + }); + } } /** * 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; - width = document.querySelector('#maps').clientWidth; + //height = document.querySelector('#maps').clientHeight; + //width = document.querySelector('#maps').clientWidth; + const rect = renderer.domElement.getBoundingClientRect(); + mouse.x = ( ( e.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1; + mouse.y = - ( ( e.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; + handleClickOnBuilding(mouse.x, mouse.y); - const rect = renderer.domElement.getBoundingClientRect(); - mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1; - mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; - handleClickOnBuilding(mouse.x, mouse.y); - } /** * Get the position where the user clicked (smartphone) on a building and process it */ -function onTouchEnd() { - var clientX, clientY; +function onTouchEnd(e) { + var clientX, clientY; - clientX = event.changedTouches[0].clientX; - clientY = event.changedTouches[0].clientY; + clientX = e.changedTouches[0].clientX; + clientY = e.changedTouches[0].clientY; - const rect = renderer.domElement.getBoundingClientRect(); - mouse.x = ( ( clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1; - mouse.y = - ( ( clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; + const rect = renderer.domElement.getBoundingClientRect(); + mouse.x = ( ( clientX - rect.left ) / ( rect.right - rect.left ) ) * 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 * @todo add text over the building */ -function onMouseOver() { +function onMouseOver(e) { - event.preventDefault(); + e.preventDefault(); - height = document.querySelector('#maps').clientHeight; - width = document.querySelector('#maps').clientWidth; + height = document.querySelector('#maps').clientHeight; + width = document.querySelector('#maps').clientWidth; - const rect = renderer.domElement.getBoundingClientRect(); - mouse.x = ( ( event.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1; - mouse.y = - ( ( event.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; - - createTextOverBuilding(mouse.x,mouse.y) + const rect = renderer.domElement.getBoundingClientRect(); + mouse.x = ( ( e.clientX - rect.left ) / ( rect.right - rect.left ) ) * 2 - 1; + mouse.y = - ( ( e.clientY - rect.top ) / ( rect.bottom - rect.top) ) * 2 + 1; + createTextOverBuilding(mouse.x,mouse.y) } + function createTextOverBuilding(x,y) { - mouse.x = x; - mouse.y = y; + mouse.x = x; + 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 (intersects.length > 0) { - console.log(intersects); + // If we clicked on a building + if (intersects.length > 0) { + console.log(intersects); - - } - - + } } function makeLabelCanvas(baseWidth, size, name) { - const borderSize = 2; - const ctx = document.createElement('canvas').getContext('2d'); - const font = `${size}px bold sans-serif`; - ctx.font = font; - // measure how long the name will be - const textWidth = ctx.measureText(name).width; + const borderSize = 2; + const ctx = document.createElement('canvas').getContext('2d'); + const font = `${size}px bold sans-serif`; + ctx.font = font; + // measure how long the name will be + const textWidth = ctx.measureText(name).width; - const doubleBorderSize = borderSize * 2; - const width = baseWidth + doubleBorderSize; - const height = size + doubleBorderSize; - ctx.canvas.width = width; - ctx.canvas.height = height; + const doubleBorderSize = borderSize * 2; + const width = baseWidth + doubleBorderSize; + const height = size + doubleBorderSize; + ctx.canvas.width = width; + ctx.canvas.height = height; - // need to set font again after resizing canvas - ctx.font = font; - ctx.textBaseline = 'middle'; - ctx.textAlign = 'center'; + // need to set font again after resizing canvas + ctx.font = font; + ctx.textBaseline = 'middle'; + ctx.textAlign = 'center'; - ctx.fillStyle = 'blue'; - ctx.fillRect(0, 0, width, height); + ctx.fillStyle = 'blue'; + ctx.fillRect(0, 0, width, height); - // scale to fit but don't stretch - const scaleFactor = Math.min(1, baseWidth / textWidth); - ctx.translate(width / 2, height / 2); - ctx.scale(scaleFactor, 1); - ctx.fillStyle = 'white'; - ctx.fillText(name, 0, 0); + // scale to fit but don't stretch + const scaleFactor = Math.min(1, baseWidth / textWidth); + ctx.translate(width / 2, height / 2); + ctx.scale(scaleFactor, 1); + ctx.fillStyle = 'white'; + ctx.fillText(name, 0, 0); - const labelBaseScale = 0.01; - const label = new THREE.Sprite(labelMaterial); - scene.add(label); - label.position.y = head.position.y + headRadius + size * labelBaseScale; + const labelBaseScale = 0.01; + const label = new THREE.Sprite(labelMaterial); + scene.add(label); + label.position.y = head.position.y + headRadius + size * labelBaseScale; - label.scale.x = canvas.width * labelBaseScale; - label.scale.y = canvas.height * labelBaseScale; - return ctx.canvas; + label.scale.x = canvas.width * labelBaseScale; + label.scale.y = canvas.height * labelBaseScale; + return ctx.canvas; } @@ -352,14 +364,17 @@ function makeLabelCanvas(baseWidth, size, name) { */ function onWindowResize() { - height = document.querySelector('#main-content .inner').clientHeight; - width = document.querySelector('#main-content .inner').clientWidth; - camera.aspect = window.innerWidth / window.innerHeight; - camera.updateProjectionMatrix(); + var maps = document.getElementById("maps"); - renderer.setSize(width * 0.9, window.innerHeight * 0.75); // 0.9 and 0.75 so it looks comfortable on the screen - - render(); + height = maps.clientHeight; + width = maps.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 + + render(); } @@ -368,12 +383,12 @@ function onWindowResize() { */ function render() { - renderer.render(scene, camera); + renderer.render(scene, camera); } /* * Remove the loader when the model loaded */ function onTransitionEnd( event) { - event.target.remove(); + event.target.remove(); } \ No newline at end of file diff --git a/map.php b/map.php index 30c5ef6..ce2152b 100755 --- a/map.php +++ b/map.php @@ -2,20 +2,35 @@ ob_start(); // Start reading html //header('Location: construction.php'); ?> -
+ + + +
+
-
Carte de l'INSA
+
Carte de l'INSA - version :
- +
+ + + + + + +
+ + + +

@@ -23,20 +38,30 @@ ob_start(); // Start reading html ensuite le chiffre des centaines pour l'étage, et après à toi de trouver !

- Par exemple, GM 212, c'est au GM, deuxième étage. -
- 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). + Par exemple, GM 212, c'est au GM, deuxième étage.
+ 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).

- Fond de carte issu du site Open Street - Map. + Fond de carte issu du site Open Street Map.

+ + + + + + +