examples/web/workflow.html

<!DOCTYPE html>
<html>

<head>
  <title>openEO JS client - Workflow example</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/axios@1/dist/axios.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@openeo/js-client@2/openeo.min.js"></script>
  <script type="text/javascript">
    async function run() {
      // Show the client version
      log("Client Version: " + OpenEO.clientVersion());

      try {
        // Connect to the back-end
        var con = await OpenEO.connect("https://earthengine.openeo.org");

        // Show implemented API version of the back-end
        var capabilities = con.capabilities();
        log("Server API version: " + capabilities.apiVersion());

        // List collection names
        var collections = await con.listCollections();
        log("Collections: " + collections.collections.map(c => c.id).join(', '));

        // List process ids
        var processes = await con.listProcesses();
        log("Processes: " + processes.processes.map(p => p.id).join(', '));

        // List supported file types
        var types = await con.listFileTypes();
        log("Input file formats: " + Object.keys(types.getInputTypes()).join(', '));
        log("Output file formats: " + Object.keys(types.getOutputTypes()).join(', '));

        // Authenticate at back-end using HTTP Basic
        await con.authenticateBasic("group1", "test123");

        // Request user info
        var user = await con.describeAccount();
        log("User: " + user.user_id);

        // Check whether synchronous previews are supported
        var syncSupport = capabilities.hasFeature("computeResult");
        log("Synchronous previews: " + (syncSupport ? "supported" : "NOT supported"));

        // Write an algorithm / process to run
        var builder = await con.buildProcess();

        // Simplified geometry of central Münster (Germany)
        var msGeometry = {"type":"Polygon","coordinates":[[[7.637799974419459,52.01332193589061],[7.62398169352488,52.00969307661495],[7.619823829597119,52.00158245346181],[7.590738404820496,52.00730662092496],[7.563811834154673,52.001308616165645],[7.573636346303766,51.992180777860874],[7.569855884060181,51.98545643508868],[7.543540879611669,51.96991821995572],[7.577623151858387,51.93997003636344],[7.559435909709811,51.931123434089656],[7.556625867211423,51.92504156203243],[7.564681636267283,51.9188162156423],[7.577387619476905,51.9233317429785],[7.588347839936553,51.918646814268996],[7.595284932021921,51.92479589461621],[7.621031519108772,51.917243800385535],[7.656038175955233,51.91943727698611],[7.67194795756578,51.92238830466648],[7.686556925502693,51.9290516727655],[7.690291911499357,51.93671875429201],[7.699225443980613,51.936707107569255],[7.687961904959071,51.94731673700126],[7.675211564663383,51.94964649247447],[7.678202838213879,51.976670456099136],[7.667564910410129,51.97853371878003],[7.660981470643656,51.98621447362924],[7.660952980726099,52.00839143191412],[7.652037968822863,52.01317315906101],[7.637799974419459,52.01332193589061]]]};

        var datacube = builder.load_collection(
          "COPERNICUS/S2_SR",
          msGeometry,
          ["2019-06-23", "2019-06-30"],
          ["B2", "B4", "B8"]
        );

        var eviAlgorithm = new Formula('2.5 * (($B2 - $B4) / (1 + $B2 + 6 * $B4 + -7.5 * $B8))');
        // The formula is the equivalent to this code:
 /*     var eviAlgorithm = function(data) {
          var nir = data[2];
          var red = data[1];
          var blue = data[0];
          return this.multiply(
            2.5,
            this.divide(
              this.subtract(nir, red),
              this.sum([
                1,
                nir,
                this.multiply(6, red),
                this.multiply(-7.5, blue)
              ])
            )
          );
        }; */
        datacube = builder.reduce_dimension(datacube, eviAlgorithm, "bands")
                          .description("Compute the EVI. Formula: 2.5 * (NIR - RED) / (1 + NIR + 6*RED + -7.5*BLUE)");
                          
        var reducer = function(data) { return this.max(data); };
        datacube = builder.reduce_dimension(datacube, reducer, "t");

        var scale = function(x) { return this.linear_scale_range(x, -1, 1, 0, 255); }; // Use -0.5 instead of -1 for more contrast
        datacube = builder.apply(datacube, scale);

        datacube = builder.save_result(datacube, "PNG");

        // Request a preview synchronously for the process
        if (syncSupport) {
          log("Running process...");
          // This returns an object containing a binary PNG file in the data property you could further process or show.
          var preview = await con.computeResult(datacube);

          // Show image in the browser
          log('<img src="' + URL.createObjectURL(preview.data) + '" />');
        }
      } catch (e) {
        log("Error: " + e.message);
      }
    }
    function log(text) {
      document.getElementById('console').innerHTML += "<p>" + text + "</p>";
    }
  </script>
</head>

<body onload="run()">
  <code id="console"></code>
</body>

</html>