Commit de barbar !

bower.json

@@ -14,5 +14,9 @@
     "bower_components",
     "test",
     "tests"
-  ]
+  ],
+  "dependencies": {
+    "nouislider": "~8.1.0",
+    "normalize-css": "~3.0.3"
+  }
 }

config.js

@@ -6,7 +6,8 @@ var config = {
   index: 'src/index.html',
   outFileMin: 'build.min.js',
   outFile: 'build.js',
-  out: '',
+  out: 'dist/',
+  publicPath: '',
   in: 'src/',
   entryPoint: './src/main.js',
   allIn: ['src/**/*'],

package.json

@@ -11,6 +11,7 @@
     "dat-gui": "^0.5.0",
     "gsap": "^1.18.0",
     "jquery": "^2.1.4",
+    "nouislider": "^8.1.0",
     "raf": "^3.1.0",
     "three": "^0.73.0",
     "three-orbit-controls": "^72.0.0",

src/app.vue

@@ -1,8 +1,8 @@
 <template lang="html">
   <div class="app-container">
     <loader v-if="displayLoader" transition="fade"></loader>
-    <graph></graph>
-    <sidebar></sidebar>
+    <graph :params-data="paramsData"></graph>
+    <sidebar :params-data="paramsData"></sidebar>
   </div>
 </template>
 
@@ -32,7 +32,49 @@ import Sidebar from './components/Sidebar.vue'
 export default {
   data () {
     return {
-      displayLoader: true
+      displayLoader: true,
+      paramsData: {
+        realGeoloc: false,
+  			hauteur: {
+          name: 'Rayon d\'action',
+          slug: 'hauteur',
+  				multiplier: 0.001,
+  				color: 0xffffff,
+  				user_multiplier: 1
+  			},
+  			leafs: {
+          arbres_align_dist: {
+            slug: 'arbres_align_dist',
+            name: 'Arbres',
+    				multiplier: 1,
+            color: 0x16f1d4,
+    				colorLegend: '#16f1d4',
+    				user_multiplier: 1,
+    				max: 104025,
+    				display: true
+    			},
+    			bancs_dist: {
+            slug: 'bancs_dist',
+            name: 'Bancs',
+    				color: 0x18f277,
+    				colorLegend: '#18f277',
+    				max: 11581,
+    				multiplier: 1,
+    				user_multiplier: 1,
+    				display: true
+    			},
+    			poteaux_bois_dist: {
+            slug: 'poteaux_bois_dist',
+            name: 'Poteaux en Bois',
+    				multiplier: 1,
+    				color: 0x1dacdd,
+    				colorLegend: '#1dacdd',
+    				user_multiplier: 0.5,
+    				max: 137,
+    				display: true
+    			}
+        }
+  		}
     };
   },
   components: {
@@ -41,8 +83,11 @@ export default {
     Sidebar
   },
   events: {
-    "loader-off": function () {
+    'loader-off': function () {
       this.displayLoader = false;
+    },
+    'params-update': function (params) {
+      this.$broadcast('update-graph');
     }
   }
 }

src/components/Legend.vue

@@ -0,0 +1,68 @@
+<style lang="sass" scoped>
+  .legend-elem{
+
+    h4{
+      font-family: 'cpcompanyregular', sans-serif;
+      letter-spacing: 1px;
+      color: #cdcdcd;
+    }
+
+    .legend-align{
+
+    }
+
+    .legend-point{
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      -moz-border-radius: 200px;
+      -webkit-border-radius: 200px;
+      border-radius: 200px;
+      margin-right : 30px;
+    }
+  }
+</style>
+
+<template>
+  <div class="legend-elem">
+    <h4>{{ params.name }}</h4>
+    <div class="legend-align">
+      <input v-if="checkbox" type="checkbox" id="checkbox" v-model="params.display">
+      <span v-if="color" class="legend-point" :style="{ backgroundColor: params.colorLegend }"></span>
+      <slider :slug="params.slug" :value="params.user_multiplier * 100" @slider-change="onSliderChange"></slider>
+    </div>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery';
+import Slider from './Slider.vue';
+
+export default {
+  props: ['params'],
+  data: () => {
+    return {
+      checkbox: true,
+      color: true
+    };
+  },
+  ready() {
+
+    if (this.params.colorLegend == undefined) { this.color = false }
+    if (this.params.display == undefined) { this.checkbox = false }
+
+    this.$watch('params.display', function (newVal, oldVal) {
+      this.$dispatch('params-update');
+    });
+  },
+  components: {
+    Slider
+  },
+  methods: {
+    onSliderChange(name, value) {
+      this.params.user_multiplier = value / 100;
+      this.$dispatch('params-update');
+    }
+  }
+}
+</script>

src/components/Sidebar.vue

@@ -9,7 +9,7 @@
     bottom: 0;
 		width : 325px;
     background: $color_main;
-    opacity : 0.98 ;
+    opacity : 0.94;
 		padding-left: 40px;
 		padding-right: 35px;
 
@@ -52,19 +52,38 @@
       <p class="legende-info"><span class="num">2.</span>Jaugez l’importance que vous accordez à  l’impact des
 	 différents facteurs sur la solitude des arbres</p>
       <hr/>
-
+      <legend :params="paramsData.hauteur" @legend-update="onParamsChange"></legend>
+      <hr/>
+      <legend :params="paramsData.leafs.arbres_align_dist" @legend-update="onParamsChange"></legend>
+      <hr/>
+      <legend :params="paramsData.leafs.bancs_dist" @legend-update="onParamsChange";></legend>
+      <hr/>
+      <legend :params="paramsData.leafs.poteaux_bois_dist" @legend-update="onParamsChange";></legend>
   </div>
 </template>
 
 <script>
+import Legend from './Legend.vue'
 import $ from 'jquery';
 
+
 export default {
+  props: ['params-data'],
+  data: () => {
+    return {}
+  },
   ready() {
-
+    
+  },
+  components: {
+    Legend
   },
   methods: {
-
+    onParamsChange(params) {
+      // this[params.slug].value = params.value;
+      // this[params.slug].display = params.display;
+      // this.$root.$broadcast('update-params', params);
+    }
   }
 }
 </script>

src/components/Slider.vue

@@ -0,0 +1,79 @@
+<style lang="sass">
+  .slider{
+    //width: 200px;
+    height: 30px;
+    padding-top: 5px;
+  }
+
+  // noUiSlider
+  .noUi-horizontal.noUi-custom {
+    border: none;
+    border-radius: 0px;
+    height: 4px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    background: #595959;
+    box-shadow: none;
+
+    .noUi-handle {
+      border: none;
+      border-radius: 0px;
+      width: 10px;
+      background: white;
+      height: 28px;
+      left: -5px;
+      top: -12px;
+    }
+    .noUi-handle:before, .noUi-handle:after{
+      content: none;
+    }
+
+    .noUi-base {
+      height: 24px;
+      top: -10px;
+    }
+
+    .noUi-origin {
+      background: #2c2c2c;
+      border-radius: 0px;
+      height: 4px;
+      top: 10px;
+    }
+
+  }
+</style>
+
+<template>
+  <div class="slider">
+    <div class="slider-range noUi-custom"></div>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery';
+import noUiSlider from 'nouislider';
+
+export default {
+  props: ['slug', 'value'],
+  ready() {
+
+    var rangeSlider = $(this.$el).find('.slider-range').get(0);
+
+    noUiSlider.create(rangeSlider, {
+    	start: [ this.value ],
+    	range: {
+    		'min': [  0 ],
+    		'max': [ 100 ]
+    	}
+    });
+
+    rangeSlider.noUiSlider.on('change', ( value, handle ) => {
+      this.value = value;
+    	this.$emit('slider-change', this.slug, parseFloat(value[0]));
+    });
+  },
+  methods: {
+
+  }
+}
+</script>

src/components/graph.vue

@@ -30,8 +30,10 @@ import { loadAllTextures } from '../three/textures';
 import { loadData } from '../modules/data';
 
 export default {
+  props: ['params-data'],
   ready() {
     this.allData = [];
+
     var winHeight = $(window).height();
     $(this.$el).height(winHeight);
     this.webgl = new Webgl(this.$el.clientWidth, this.$el.clientHeight);
@@ -54,6 +56,10 @@ export default {
       this.loaded();
     })
   },
+  events: {
+    'update-params': 'updateParams',
+    'update-graph': 'updateGraph'
+  },
   methods: {
     resizeHandler() {
       this.webgl.resize(this.$el.clientWidth, this.$el.clientHeight);
@@ -64,11 +70,21 @@ export default {
     },
     loaded() {
       if (this.texturesLoaded && this.dataLoaded) {
-        this.webgl.setData(this.allData);
-        this.webgl.start();
-        this.animate();
-        this.$dispatch('loader-off');
+        this.start();
       }
+    },
+    start() {
+      this.webgl.setData(this.allData);
+      this.webgl.setParams(this.paramsData);
+      this.webgl.start();
+      this.animate();
+      this.$dispatch('loader-off');
+    },
+    updateParams(params) {
+      console.log('update params');
+    },
+    updateGraph() {
+      this.webgl.forest.updateTreesParams();
     }
   }
 }

src/index.html

@@ -5,6 +5,7 @@
     <title>Les arbres de Paris se sentent-ils seuls ?</title>
     <!-- build:css styles/vendors.css -->
     <link href="../bower_components/normalize-css/normalize.css" rel="stylesheet">
+    <link href="../bower_components/nouislider/src/nouislider.css" rel="stylesheet">
     <!-- endbuild -->
   </head>
   <body>