From b107f524ca7d3f74a98e7bceb1f965f70e4aa740 Mon Sep 17 00:00:00 2001
From: Fabien Benetou <fabien-services@benetou.fr>
Date: Mon, 31 Oct 2022 16:14:00 +0100
Subject: [PATCH] more in depth portal and start button

---
 index.html   | 69 ++++++++++++----------------------------------------
 portail.html | 19 ++++++++++++---
 2 files changed, 30 insertions(+), 58 deletions(-)

diff --git a/index.html b/index.html
index 9f128af..e6d03b1 100644
--- a/index.html
+++ b/index.html
@@ -195,16 +195,6 @@ for (var i=0;i<elevation_res;i++)
 var queryElevation = 'https://api.open-elevation.com/api/v1/lookup'
 	// doesn't seem to have sufficient resolution, might use IGN instead
 
-// animate water based on flood data
-	// done as animation on blue plane
-	// see simulation_data_example.json
-
-// allow viewer to control the animation e.g restart, pause, change time
-	// seek on the set of animations
-
-// modify environment to reflect time of day
-	// done as animation on point light
-
 var buildingHeight = 6
 var forceHeight = AFRAME.utils.getUrlParameter('height');
 if ( forceHeight ) buildingHeight = Number( forceHeight )
@@ -470,14 +460,6 @@ AFRAME.registerComponent('elevation', {
   }
 })
 
-AFRAME.registerComponent('courbes', {
-  init: function () {
-	var el = this.el
-		console.log("elevation data from ign courbes.json file")
-		fetch("courbe_clipped.json" ).then(response => response.json()).then(data => curvesTo3DElements(data.features, el ) )
-  }
-})
-
 AFRAME.registerComponent('osm', {
   init: function () {
 	var el = this.el
@@ -628,13 +610,16 @@ var animationTime = 0 // this isn't exactly aligned with animations
 
 loadedosmways = [];
 
-function playSound(){
+function playSound(param){
 	var entity = document.querySelector('[sound]');
 	entity.components.sound.playSound();
+	document.querySelector("a-entity[sound]").components.sound.playSound()
+	param.style.display = "none";
+	resetAnimations()
 }
 </script>
- <button style="z-index: 1; position: absolute;" onclick="playSound()">Play sound</button> 
-    <a-scene NOcourbes displaymodels forcestats>
+ <button style="z-index: 1; position: absolute; width:50%; margin: auto; text-align:center; top:45%; left:30%; height:30%;" onclick="playSound(this)">Demarrer l'experience</button> 
+    <a-scene displaymodels forcestats>
 	<a-entity id="hotspots" hotspots ></a-entity>
       <!-- Quest available only during event, otherwise cardboard -->
       <a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity>
@@ -648,7 +633,9 @@ function playSound(){
 		      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_CRACK_MAISON_04.mp3)"></a-sound>
 		      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_SIRENNES_POMPIER.mp3)"></a-sound>
 		      <a-sound class="randomfx" autoplay="false" loop="false" src="src: url(Sounds/FX/CEREMA_SIRENNE_COMMUNALE.mp3)"></a-sound>
-		      <!-- a faire crescendo <a-sound autoplay="false" loop="true" src="src: url(CEREMA_BOUCLE_EAU.mp3)"></a-sound> -->
+		      <a-entity sound="src: url(Sounds/FX/CEREMA_BOUCLE_EAU.mp3); loop:true; autoplay:false; volume:0;"
+			      animation="property: sound.volume; from:0; to: 1; dur: 9000; easing: linear; loop: false;"
+			      ></a-entity>
 			<!-- consider time as HUD text display-->
 		      <a-entity cursor="fuse: true; fuseTimeout: 500"
 			      position="0 0 -1"
@@ -668,44 +655,18 @@ function playSound(){
 
       <a-entity position="-70 0 -42" osm id="osm"></a-entity>
       <!--
-      <a-entity elevation id="elevation" visible="false"></a-entity>
-Visuals/TEXTURE_BAT/TEXTURE_BAT_Base_Color.jpg
-Visuals/TEXTURE_BAT/TEXTURE_TOIT_Normal_OpenGL.jpg
-Visuals/TEXTURE_BAT/TEXTURE_BAT02_Base_Color.jpg
-Visuals/TEXTURE_BAT/TEXTURE_SOL_Base_Color.jpg
-Visuals/TEXTURE_BAT/TEXTURE_TOIT_Base_Color.jpg
-Visuals/TEXTURE_BAT/TEXTURE_BAT02_Normal_OpenGL.jpg
-Visuals/TEXTURE_BAT/TEXTURE_SOL_Normal_OpenGL.jpg
-Visuals/TEXTURE_BAT/TEXTURE_BAT_Normal_OpenGL.jpg
-
-Visuals/TEXTURE_EAU/Texture_eau_Base_Color.png
-Visuals/TEXTURE_EAU/Texture_eau_Metallic.png
-Visuals/TEXTURE_EAU/Texture_eau_Normal_OpenGL.png
-Visuals/TEXTURE_EAU/Texture_eau_Roughness.png
-Visuals/TEXTURE_EAU/Texture_eau_Height.png
-
-Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_route.glb
-Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Boite01.glb
-Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Trottoir.glb
-Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Jardin.glb
-Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Boite02.glb
-Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Ruelle_Lampadaire.glb
-Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Baquets_Haie.glb
-Visuals/EXPORTS/EXPORTS_gltf/ModelsSolo/AA_Baquets_Barriere.glb
-
-Visuals/EXPORTS/EXPORTS_gltf/AA_Citedesbaquets.glb
-Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Arbre.glb
-Visuals/EXPORTS/EXPORTS_gltf/AA_Ruelle_Buisson.glb
-Visuals/EXPORTS/EXPORTS_gltf/AA_Quaidelaruelle.glb
+live layers (deactivated by default)
+
+material="src: https://wxs.ign.fr/ortho/geoportail/r/wms?LAYERS=ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO&EXCEPTIONS=text/xml&FORMAT=image/jpeg&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&STYLES=&CRS=CRS:84&BBOX=0.470286,49.338484,0.556117,49.381417&WIDTH=4096&HEIGHT=4096; displacementScale: 20; displacementMap: https://wxs.ign.fr/altimetrie/geoportail/r/wms?LAYERS=ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES&EXCEPTIONS=text/xml&FORMAT=image/jpeg&SERVICE=WMS&VERSION=1.3.0&REQUEST=GETMAP&STYLES=&CRS=CRS:84&BBOX=0.470286,49.338484,0.556117,49.381417&WIDTH=1024&HEIGHT=1024;" ></a-plane>
       -->
+
 	<!-- offset on test data for easier vr testing -->
 <a-gltf-model class="models_ruelle" visible="" position="-140.71021 0.73 -28.54369" scale="1.2 1.2 1.2" rotation="0 -111.8545396388247 0" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Quaidelaruelle.glb" listosmways=""></a-gltf-model>
 <a-gltf-model class="models_baquets" visible="" position="95.71286 -1.33294 -307.27021" scale="1.2 1.2 1.2" rotation="0 179.42402537639782 0" gltf-model="Visuals/EXPORTS/EXPORTS_gltf/AA_Citedesbaquets.glb" listosmways=""></a-gltf-model>
 	<a-plane id="landscape" position="0 -20 0" scale="10 10 10" rotation="-90 0 -90" width="100" height="100" geometry="segmentsHeight: 128; segmentsWidth: 128"
-material="src: https://wxs.ign.fr/ortho/geoportail/r/wms?LAYERS=ORTHOIMAGERY.ORTHOPHOTOS.BDORTHO&EXCEPTIONS=text/xml&FORMAT=image/jpeg&SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&STYLES=&CRS=CRS:84&BBOX=0.470286,49.338484,0.556117,49.381417&WIDTH=4096&HEIGHT=4096; displacementScale: 20; displacementMap: https://wxs.ign.fr/altimetrie/geoportail/r/wms?LAYERS=ELEVATION.ELEVATIONGRIDCOVERAGE.HIGHRES&EXCEPTIONS=text/xml&FORMAT=image/jpeg&SERVICE=WMS&VERSION=1.3.0&REQUEST=GETMAP&STYLES=&CRS=CRS:84&BBOX=0.470286,49.338484,0.556117,49.381417&WIDTH=1024&HEIGHT=1024;" ></a-plane>
-<!-- somehow the displacement map does not seem to work anymore despite being accessible. Might have to rollback from git history. -->
+material="src: ign_terrain_cached.jpg; displacementScale: 20; displacementMap: ign_elevation_cached.jpg;"></a-plane>
 
-	<a-plane id="watersim" cerema="" position="0 -50.25 0" rotation="-90 90 0" src="b1rwater0002.jpg" 
+	<a-plane id="watersim" cerema="" position="0 -50.25 0" rotation="-90 90 0" src="Visuals/TEXTURE_EAU/Texture_eau_Base_Color.png" 
 		material="displacementScale: 0.01; wireframe: false; displacementMap: ruelle_sim_data/crop_outpy_1.jpg"
 		geometry="segmentsHeight: 128; segmentsWidth: 128" scale="1000 1000 100"></a-plane>
 
diff --git a/portail.html b/portail.html
index d637361..9d01a8b 100644
--- a/portail.html
+++ b/portail.html
@@ -1,9 +1,17 @@
 <html>
+	<img src="cerema_logo_horizontal.jpg" />
+	<h1>Les effets d'une crue de la Seine a Pont-Audemer</h1>
 	<h2>Experience par lieu</h2>
-	<ul>
-		<li><a target="_blank" class="experiencelinks" href="https://fabien.benetou.fr/pub/home/CEREMA/?">Quai de la Ruelle</a></li>
-		<li><a target="_blank" class="experiencelinks" href="https://fabien.benetou.fr/pub/home/CEREMA/?position=1">Les Baquets</a></li>
-	</ul>
+	<center>
+		<table><tr>
+			<td><a target="_blank" class="experiencetdnks" href="https://fabien.benetou.fr/pub/home/CEREMA/?">
+				<img src="ruelle_osm.png" width="300px"/><br><br>
+			<center>Quai de la Ruelle</center></a></td>
+			<td><a target="_blank" class="experiencetdnks" href="https://fabien.benetou.fr/pub/home/CEREMA/?position=1">
+				<img src="baquet_osm.png" width="300px"/><br><br>
+			<center>Les Baquets</center></a></td>
+		</tr></table>
+	</center>
 
 	<h2>Options</h2>
 	<ul>
@@ -24,6 +32,9 @@
 
 	<h2>Documentation</h2>
 	Utiliser <a href="https://hmd.link">hmd.link</a> dans le navigateur Web du casque pour partager le lien genere ou <a href="https://fabien.benetou.fr/pub/home/CEREMA/portail.html">ce portail</a>.
+	<h2>Code</h2>
+	Disponible en open-source a <a href="https://git.benetou.fr/utopiah/CEREMA/">https://git.benetou.fr/utopiah/CEREMA/</a>
+	<br><br><hr><br><center>Conception immersive<br><img src="marelle.png" /></center>
 <script>
 var links = Array.from(document.querySelectorAll(".experiencelinks"))
 function adjustHeight(param){