Removed usage of ColorGradientVisualizer (#327)

* Removed usage of ColorGradientVisualizer * Non-hardcoded examples for hls * Parametrized dem examples
sentinel-hub · Sep 10, 2024 · 28452f7 · 28452f7
1 parent f7af3a8
commit 28452f7
Show file tree

Hide file tree

Showing 48 changed files with 862 additions and 874 deletions.
diff --git a/_layouts/script.html b/_layouts/script.html
@@ -16,6 +16,7 @@
   S5_SO2: S5_SO2_CDAS
   S1_AWS_EW_HHHV: S1_CDAS_EW_HHHV
   S1_MOSAIC: 3c662330-108b-4378-8899-525fd5a225cb
+  DEM_MAPZEN: DEM_COPERNICUS_30_CDAS
 ---
 
 <h1 class="d-inline" id={{page.slug}}> {{page.title}} </h1>
@@ -55,7 +56,7 @@ <h1 class="d-inline" id={{page.slug}}> {{page.title}} </h1>
 </div>
 
 {% if page.examples %}
-<h2 class="d-inline"> Evaluate and Visualize </h2>
+<h2 id="evaluate-and-visualize"> <a href="#evaluate-and-visualize" class="anchor-heading" aria-labelledby="evaluate-and-visualize"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Evaluate and Visualize </h2>
 {% for example in page.examples %}
 {% if example.name %}
 <h3 class="d-inline"> {{example.name}} </h2>

diff --git a/dem/dem-color/README.md b/dem/dem-color/README.md
@@ -4,14 +4,24 @@ parent: DEM
 layout: script
 permalink: /dem/dem-color/
 nav_exclude: true
+scripts:
+- - Visualization
+  - script.js
+- - EO Browser
+  - eob.js
+examples:
+- zoom: '10'
+  lat: '42.40876'
+  lng: '12.00634'
+  datasetId: DEM_MAPZEN
+  fromTime: '2023-10-02T00:00:00.000Z'
+  toTime: '2023-10-02T23:59:59.999Z'
+  platform:
+  - CDSE
+  - EOB
+  evalscripturl: https://custom-scripts.sentinel-hub.com/dem/dem-color/eob.js
 ---
 
-
-## Evaluate and visualize
-
-- [EO Browser](https://sentinelshare.page.link/HNQV)
-- [Copernicus Browser](https://sentinelshare.page.link/h2as)
-
 ## Description
 
 This script returns a color visualization of a digital elevation model, assigning continuous colors to the elevation borders. 

diff --git a/dem/dem-color/eob.js b/dem/dem-color/eob.js
@@ -1,11 +1,10 @@
 //VERSION=3
 // To set custom max and min values, set
-// defaultVis to false and choose your max and
-// min values. The color map will then be scaled
+// choose your max and min values. 
+// The color map will then be scaled
 // to those max and min values
-const defaultVis = true
 const max = 9000
-const min = -9000
+const min = -12000
 
 function setup() {
     return {
@@ -18,14 +17,6 @@ function setup() {
     };
 }
 
-function updateMap(max, min) {
-    const numIntervals = map.length
-    const intervalLength = (max - min) / (numIntervals - 1);
-    for (let i = 0; i < numIntervals; i++) {
-        map[i][0] = max - intervalLength * i
-    }
-}
-
 const map = [
     [9000, 0xffffff],
     [7000, 0xdcefff],
@@ -51,8 +42,7 @@ const map = [
     [-12000, 0x000028],
 ];
 
-if (!defaultVis) updateMap(max, min);
-const visualizer = new ColorRampVisualizer(map);
+const visualizer = new ColorRampVisualizer(map, min, max);
 
 function evaluatePixel(sample) {
     let val = sample.DEM;

diff --git a/dem/dem-color/script.js b/dem/dem-color/script.js
@@ -1,11 +1,10 @@
 //VERSION=3
 // To set custom max and min values, set
-// defaultVis to false and choose your max and
-// min values. The color map will then be scaled
+// choose your max and min values. 
+// The color map will then be scaled
 // to those max and min values
-const defaultVis = true
 const max = 9000
-const min = -9000
+const min = -12000
 
 function setup() {
     return {
@@ -14,14 +13,6 @@ function setup() {
     };
 }
 
-function updateMap(max, min) {
-    const numIntervals = map.length
-    const intervalLength = (max - min) / (numIntervals - 1);
-    for (let i = 0; i < numIntervals; i++) {
-        map[i][0] = max - intervalLength * i
-    }
-}
-
 const map = [
     [9000, 0xffffff],
     [7000, 0xdcefff],
@@ -47,8 +38,7 @@ const map = [
     [-12000, 0x000028],
 ];
 
-if (!defaultVis) updateMap(max, min);
-const visualizer = new ColorRampVisualizer(map);
+const visualizer = new ColorRampVisualizer(map, min, max);
 
 function evaluatePixel(sample) {
     let val = sample.DEM;

diff --git a/dem/dem-difference/README.md b/dem/dem-difference/README.md
@@ -4,6 +4,17 @@ parent: DEM
 layout: script
 permalink: /dem/dem-difference/
 nav_exclude: true
+examples:
+- zoom: '12'
+  lat: '42.40876'
+  lng: '12.00634'
+  datasetId: DEM_MAPZEN
+  fromTime: '2023-10-02T00:00:00.000Z'
+  toTime: '2023-10-02T23:59:59.999Z'
+  platform:
+  - CDSE
+  - EOB
+  evalscripturl: https://custom-scripts.sentinel-hub.com/dem/dem-difference/script.js
 ---
 
 

diff --git a/dem/dem-difference/script.js b/dem/dem-difference/script.js
@@ -1,22 +1,20 @@
 // Mapzen and Copernicus DEM difference Visualization
 //VERSON = 3
 function setup() {
-    return {
-      input: [
-          {datasource: "map", bands:["DEM"]},
-          {datasource: "cop", bands:["DEM"]}
-          ],
-      output: [
-        {id: "default", bands: 3, sampleType: "UINT8"}
-      ]
-    };
-  }
-
-  function evaluatePixel(samples) {
-    var map = samples.map[0];
-    var cop = samples.cop[0];
-    let d_dem = map.DEM - cop.DEM;
-    const ramps = [
+  return {
+    input: [
+      { datasource: "map", bands: ["DEM"] },
+      { datasource: "cop", bands: ["DEM"] },
+    ],
+    output: [{ id: "default", bands: 3, sampleType: "UINT8" }],
+  };
+}
+
+function evaluatePixel(samples) {
+  var map = samples.map[0];
+  var cop = samples.cop[0];
+  let d_dem = map.DEM - cop.DEM;
+  const ramps = [
     [-300, [202, 0, 32]],
     [-100, [244, 128, 85]],
     [-40, [255, 160, 125]],
@@ -26,11 +24,11 @@ function setup() {
     [10, [196, 209, 255]],
     [40, [155, 127, 255]],
     [100, [73, 98, 222]],
-    [300, [8, 0, 176]]
-    ];
-    const visualizer = new ColorRampVisualizer(ramps);
-    vis_dem = visualizer.process(d_dem);
-    return {
-      default: vis_dem
-    };
-  }
+    [300, [8, 0, 176]],
+  ];
+  const visualizer = new ColorRampVisualizer(ramps);
+  vis_dem = visualizer.process(d_dem);
+  return {
+    default: vis_dem,
+  };
+}
diff --git a/dem/dem-grayscale/README.md b/dem/dem-grayscale/README.md
@@ -4,14 +4,24 @@ parent: DEM
 layout: script
 permalink: /dem/dem-grayscale/
 nav_exclude: true
+scripts:
+- - Visualization
+  - script.js
+- - EO Browser
+  - eob.js
+examples:
+- zoom: '10'
+  lat: '42.40876'
+  lng: '12.00634'
+  datasetId: DEM_MAPZEN
+  fromTime: '2023-10-02T00:00:00.000Z'
+  toTime: '2023-10-02T23:59:59.999Z'
+  platform:
+  - CDSE
+  - EOB
+  evalscripturl: https://custom-scripts.sentinel-hub.com/dem/dem-grayscale/eob.js
 ---
 
-
-## Evaluate and visualize
-
-- [EO Browser](https://sentinelshare.page.link/2dbx)
-- [Copernicus Browser](https://sentinelshare.page.link/3nLx)
-
 ## Description
 
 This script returns a grayscale visualization of a digital elevation model, assigning continuous colors to the elevation borders. 

diff --git a/dem/dem-grayscale/eob.js b/dem/dem-grayscale/eob.js
@@ -1,11 +1,10 @@
 //VERSION=3
 // To set custom max and min values, set
-// defaultVis to false and choose your max and
-// min values. The color map will then be scaled
+// choose your max and min values. 
+// The color map will then be scaled
 // to those max and min values
-const defaultVis = true
 const max = 9000
-const min = -9000
+const min = -12000
 
 function setup() {
     return {
@@ -18,14 +17,6 @@ function setup() {
     };
 }
 
-function updateMap(max, min) {
-    const numIntervals = map.length
-    const intervalLength = (max - min) / (numIntervals - 1);
-    for (let i = 0; i < numIntervals; i++) {
-        map[i][0] = max - intervalLength * i
-    }
-}
-
 const map = [
     [9000, 0xffffff],
     [7000, 0xf9f9f9],
@@ -51,8 +42,7 @@ const map = [
     [-12000, 0x000000],
 ];
 
-if (!defaultVis) updateMap(max, min);
-const visualizer = new ColorRampVisualizer(map);
+const visualizer = new ColorRampVisualizer(map, min, max);
 
 function evaluatePixel(sample) {
     let val = sample.DEM;

diff --git a/dem/dem-grayscale/script.js b/dem/dem-grayscale/script.js
@@ -1,59 +1,49 @@
 //VERSION=3
 // To set custom max and min values, set
-// defaultVis to false and choose your max and
-// min values. The color map will then be scaled
+// choose your max and min values.
+// The color map will then be scaled
 // to those max and min values
-const defaultVis = true
-const max = 9000
-const min = -9000
+const max = 9000;
+const min = -12000;
 
 function setup() {
-    return {
-        input: ["DEM", "dataMask"],
-        output: { bands: 4, sampleTYPE: "AUTO" },
-    };
-}
-
-function updateMap(max, min) {
-    const numIntervals = map.length
-    const intervalLength = (max - min) / (numIntervals - 1);
-    for (let i = 0; i < numIntervals; i++) {
-        map[i][0] = max - intervalLength * i
-    }
+  return {
+    input: ["DEM", "dataMask"],
+    output: { bands: 4, sampleTYPE: "AUTO" },
+  };
 }
 
 const map = [
-    [9000, 0xffffff],
-    [7000, 0xf9f9f9],
-    [5000, 0xf5f5f5],
-    [3000, 0xebebeb],
-    [1000, 0xe0e0e0],
-    [500, 0xd6d6d6],
-    [400, 0xc7c7c7],
-    [300, 0xb4b4b4],
-    [200, 0x9f9f9f],
-    [50, 0x8b8b8b],
-    [30, 0x828282],
-    [10, 0x6d6d6d],
-    [0, 0x636363],
-    [-10, 0x5a5a5a],
-    [-20, 0x545454],
-    [-50, 0x505050],
-    [-200, 0x4a4a4a],
-    [-500, 0x464646],
-    [-1000, 0x3d3d3d],
-    [-5000, 0x373737],
-    [-9000, 0x181818],
-    [-12000, 0x000000],
+  [9000, 0xffffff],
+  [7000, 0xf9f9f9],
+  [5000, 0xf5f5f5],
+  [3000, 0xebebeb],
+  [1000, 0xe0e0e0],
+  [500, 0xd6d6d6],
+  [400, 0xc7c7c7],
+  [300, 0xb4b4b4],
+  [200, 0x9f9f9f],
+  [50, 0x8b8b8b],
+  [30, 0x828282],
+  [10, 0x6d6d6d],
+  [0, 0x636363],
+  [-10, 0x5a5a5a],
+  [-20, 0x545454],
+  [-50, 0x505050],
+  [-200, 0x4a4a4a],
+  [-500, 0x464646],
+  [-1000, 0x3d3d3d],
+  [-5000, 0x373737],
+  [-9000, 0x181818],
+  [-12000, 0x000000],
 ];
 
-if (!defaultVis) updateMap(max, min);
-const visualizer = new ColorRampVisualizer(map);
+const visualizer = new ColorRampVisualizer(map, min, max);
 
 function evaluatePixel(sample) {
-    let val = sample.DEM;
-    let imgVals = visualizer.process(val)
+  let val = sample.DEM;
+  let imgVals = visualizer.process(val);
 
-    // Return the 4 inputs and define content for each one
-    return [...imgVals, sample.dataMask]
+  // Return the 4 inputs and define content for each one
+  return [...imgVals, sample.dataMask];
 }