Skip to content

Commit 7b518ea

Browse files
jonasViehwegerjonasViehweger
authored
Added documentation on how to add examples (#300)
1 parent b0acc90 commit 7b518ea

File tree

11 files changed

+216
-254
lines changed

11 files changed

+216
-254
lines changed

‎contribute/example-multiple-scripts/eob.js

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
//VERSION=3
2+
function setup() {
3+
return {
4+
input: ["B03", "B04", "B08", "dataMask"],
5+
output: [
6+
{ id: "default", bands: 4 },
7+
{ id: "index", bands: 1, sampleType: "FLOAT32" },
8+
{ id: "eobrowserStats", bands: 2, sampleType: 'FLOAT32' },
9+
{ id: "dataMask", bands: 1 }
10+
]
11+
};
12+
}
13+
14+
const ramp = [
15+
[-0.5, 0x0c0c0c],
16+
[-0.2, 0xbfbfbf],
17+
[-0.1, 0xdbdbdb],
18+
[0, 0xeaeaea],
19+
[0.025, 0xfff9cc],
20+
[0.05, 0xede8b5],
21+
[0.075, 0xddd89b],
22+
[0.1, 0xccc682],
23+
[0.125, 0xbcb76b],
24+
[0.15, 0xafc160],
25+
[0.175, 0xa3cc59],
26+
[0.2, 0x91bf51],
27+
[0.25, 0x7fb247],
28+
[0.3, 0x70a33f],
29+
[0.35, 0x609635],
30+
[0.4, 0x4f892d],
31+
[0.45, 0x3f7c23],
32+
[0.5, 0x306d1c],
33+
[0.55, 0x216011],
34+
[0.6, 0x0f540a],
35+
[1, 0x004400],
36+
];
37+
38+
const visualizer = new ColorRampVisualizer(ramp);
39+
40+
function evaluatePixel(samples) {
41+
let val = index(samples.B08, samples.B04);
42+
// The library for tiffs works well only if there is only one channel returned.
43+
// So we encode the "no data" as NaN here and ignore NaNs on frontend.
44+
const indexVal = samples.dataMask === 1 ? val : NaN;
45+
const imgVals = visualizer.process(val);
46+
47+
return {
48+
default: imgVals.concat(samples.dataMask),
49+
index: [indexVal],
50+
eobrowserStats: [val, isCloud(samples) ? 1 : 0],
51+
dataMask: [samples.dataMask]
52+
};
53+
}
54+
55+
function isCloud(samples) {
56+
const NGDR = index(samples.B03, samples.B04);
57+
const bRatio = (samples.B03 - 0.175) / (0.39 - 0.175);
58+
return bRatio > 1 || (bRatio > 0 && NGDR > 0);
59+
}

‎contribute/example-multiple-scripts/index.md

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: Example product
3+
parent: Contribute
4+
layout: script
5+
nav_exclude: true
6+
scripts:
7+
- [Visualization, script.js]
8+
- [EO Browser, eob.js]
9+
- [Raw Values, raw.js]
10+
examples:
11+
- zoom: '10'
12+
lat: '42.76703'
13+
lng: '11.22847'
14+
datasetId: S2L2A
15+
fromTime: '2020-07-12T00:00:00.000Z'
16+
toTime: '2020-07-12T23:59:59.999Z'
17+
platform:
18+
- CDSE
19+
- EOB
20+
evalscripturl: https://custom-scripts.sentinel-hub.com/custom-scripts/contribute/example-multiple-scripts/eob.js
21+
---
22+
23+
The layout `script` automatically adds the title defined in the front matter and adds buttons to visualize the script. For the buttons to work the evalscript has to be named `script.js` and must be in the same directory as the `README.md` file.
24+
25+
## Adding examples
26+
27+
This page shows how example links can be added by defining the parameters in the [front matter](https://jekyllrb.com/docs/front-matter/).
28+
An example is defined like this:
29+
30+
```yaml
31+
examples:
32+
- zoom: '10'
33+
lat: '42.76703'
34+
lng: '11.22847'
35+
datasetId: S2L2A
36+
fromTime: '2020-07-12T00:00:00.000Z'
37+
toTime: '2020-07-12T23:59:59.999Z'
38+
platform:
39+
- CDSE
40+
- EOB
41+
evalscripturl: https://custom-scripts.sentinel-hub.com/custom-scripts/sentinel-2/ndvi/eob.js
42+
```
43+
44+
From these parameters, example urls are built automatically in the [layout file](https://github.com/sentinel-hub/custom-scripts/blob/main/_layouts/script.html?plain=1). The parameter `platform` specifies for which visualization platform the example links should be built. Right now the only options are Copernicus Browser (CDSE) and EO Browser (EOB).
45+
46+
If a script only works on one platform but not the other, only the platform the script works on should be specified (See for example [cloud statistics](https://github.com/sentinel-hub/custom-scripts/blob/main/sentinel-2/cloud_statistics/README.md)). If the page has separate versions for each platform, multiple examples can be specified in the list (See [markuse fire](https://github.com/sentinel-hub/custom-scripts/blob/main/sentinel-2/markuse_fire/README.md?plain=1)).
47+
48+
The evalscript can be given as an `evalscripturl` like done here. This is the preferred option since it keeps maintenance of example links to a minimum since nothing needs to be updated if the evalscript is changed at a later point.
49+
50+
Alternatively the evalscript can be passed into the parameter `evalscript`. Here the evalscript needs to be Base64 encoded. See the [Forest Hurricane Script](https://github.com/sentinel-hub/custom-scripts/blob/main/sentinel-1/forest_hurricane/README.md?plain=1) as an example.
51+
52+
When multiple different evalscripts are added, they can also be named by passing the parameter `name` to each entry of the example list.
53+
54+
It is also possible to pass more url query parameters to the built example link by specifying `additionalQueryParams`. See the [NDVI Time Series](https://github.com/sentinel-hub/custom-scripts/blob/main/sentinel-2/ndvi_time_series/README.md?plain=1) script as an example.
55+
56+
## General description of the script
57+
58+
## References
59+
60+
- possible references (scientific articles, wiki/web references, ...)

‎contribute/example-multiple-scripts/raw.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
//VERSION=3
2+
function setup() {
3+
return {
4+
input: ["B04", "B08"],
5+
output: {
6+
bands: 1,
7+
sampleType: "FLOAT32"
8+
}
9+
};
10+
}
11+
12+
function evaluatePixel(samples) {
13+
return [index(samples.B08, samples.B04)]
14+
}

‎contribute/example-multiple-scripts/script.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
//VERSION=3
2+
function setup() {
3+
return {
4+
input: ["B04", "B08", "dataMask"],
5+
output: { bands: 4 }
6+
};
7+
}
8+
9+
const ramp = [
10+
[-0.5, 0x0c0c0c],
11+
[-0.2, 0xbfbfbf],
12+
[-0.1, 0xdbdbdb],
13+
[0, 0xeaeaea],
14+
[0.025, 0xfff9cc],
15+
[0.05, 0xede8b5],
16+
[0.075, 0xddd89b],
17+
[0.1, 0xccc682],
18+
[0.125, 0xbcb76b],
19+
[0.15, 0xafc160],
20+
[0.175, 0xa3cc59],
21+
[0.2, 0x91bf51],
22+
[0.25, 0x7fb247],
23+
[0.3, 0x70a33f],
24+
[0.35, 0x609635],
25+
[0.4, 0x4f892d],
26+
[0.45, 0x3f7c23],
27+
[0.5, 0x306d1c],
28+
[0.55, 0x216011],
29+
[0.6, 0x0f540a],
30+
[1, 0x004400],
31+
];
32+
33+
const visualizer = new ColorRampVisualizer(ramp);
34+
35+
function evaluatePixel(samples) {
36+
let ndvi = index(samples.B08, samples.B04);
37+
let imgVals = visualizer.process(ndvi);
38+
return imgVals.concat(samples.dataMask)
39+
}

‎contribute/example/index.md

+41-3
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,54 @@
11
---
22
title: Example product
33
parent: Contribute
4-
54
layout: script
65
nav_exclude: true
6+
examples:
7+
- zoom: '10'
8+
lat: '42.76703'
9+
lng: '11.22847'
10+
datasetId: S2L2A
11+
fromTime: '2020-07-12T00:00:00.000Z'
12+
toTime: '2020-07-12T23:59:59.999Z'
13+
platform:
14+
- CDSE
15+
- EOB
16+
evalscripturl: https://custom-scripts.sentinel-hub.com/custom-scripts/contribute/example/script.js
717
---
818

919
The layout `script` automatically adds the title defined in the front matter and adds buttons to visualize the script. For the buttons to work the evalscript has to be named `script.js` and must be in the same directory as the `README.md` file.
1020

11-
## Evaluate and visualize
21+
## Adding examples
22+
23+
This page shows how example links can be added by defining the parameters in the [front matter](https://jekyllrb.com/docs/front-matter/).
24+
An example is defined like this:
25+
26+
```yaml
27+
examples:
28+
- zoom: '10'
29+
lat: '42.76703'
30+
lng: '11.22847'
31+
datasetId: S2L2A
32+
fromTime: '2020-07-12T00:00:00.000Z'
33+
toTime: '2020-07-12T23:59:59.999Z'
34+
platform:
35+
- CDSE
36+
- EOB
37+
evalscripturl: https://custom-scripts.sentinel-hub.com/custom-scripts/sentinel-2/ndvi/eob.js
38+
```
39+
40+
From these parameters, example urls are built automatically in the [layout file](https://github.com/sentinel-hub/custom-scripts/blob/main/_layouts/script.html?plain=1). The parameter `platform` specifies for which visualization platform the example links should be built. Right now the only options are Copernicus Browser (CDSE) and EO Browser (EOB).
41+
42+
If a script only works on one platform but not the other, only the platform the script works on should be specified (See for example [cloud statistics](https://github.com/sentinel-hub/custom-scripts/blob/main/sentinel-2/cloud_statistics/README.md)). If the page has separate versions for each platform, multiple examples can be specified in the list (See [markuse fire](https://github.com/sentinel-hub/custom-scripts/blob/main/sentinel-2/markuse_fire/README.md?plain=1)).
43+
44+
The evalscript can be given as an `evalscripturl` like done here. This is the preferred option since it keeps maintenance of example links to a minimum since nothing needs to be updated if the evalscript is changed at a later point.
45+
46+
Alternatively the evalscript can be passed into the parameter `evalscript`. Here the evalscript needs to be Base64 encoded. See the [Forest Hurricane Script](https://github.com/sentinel-hub/custom-scripts/blob/main/sentinel-1/forest_hurricane/README.md?plain=1) as an example.
47+
48+
When multiple different evalscripts are added, they can also be named by passing the parameter `name` to each entry of the example list.
49+
50+
It is also possible to pass more url query parameters to the built example link by specifying `additionalQueryParams`. See the [NDVI Time Series](https://github.com/sentinel-hub/custom-scripts/blob/main/sentinel-2/ndvi_time_series/README.md?plain=1) script as an example.
1251

13-
- [EO Browser](https://apps.sentinel-hub.com/eo-browser/#lat=41.9&lng=12.5&zoom=10&datasource=Sentinel-2%20L1C&time=2017-10-08&preset=CUSTOM&layers=B01,B02,B03&evalscripturl=https://raw.githubusercontent.com/sentinel-hub/customScripts/master/example/script.js){:target="\_blank"}
1452

1553
## General description of the script
1654

0 commit comments

Comments
 (0)