Rasdaman Web Client Toolkit

Examples

HTML:

<div id='area-widget'></div>

Javascript:

var dataSeries = new Rj.util.DataSeries([1,5,2,4,10]);
var widget = new Rj.widget.AreaDiagram("#area-widget", dataSeries);

See in Code Playground

Examples

The following example shows how to display an image that comes as response from a WCPS query.

HTML:

<div id='image-widget'></div>

Javascript:

//Set up the WCPS Service
Rj.util.ConfigManager.setWCPSService({
    url           : "http://flanche.net:8080/petascope/",
    queryParameter: "request"
});

//Declare the query, with binary format
var query = new Rj.query.WCPSQuery('for m in (mean_summer_airtemp) return encode((char) m, "png" )');
query.setBinaryFormat(true);

//evaluate the query and set-up the widget from its response
query.evaluate(function(response){
      var img = new Rj.widget.BinaryImage("#image-widget", "image/png", response);
      img.setWidth(300);
});

Alternative, using binders:

//Set up the WCPS Service
Rj.util.ConfigManager.setWCPSService({
    url           : "http://example.org:8080/petascope/",
    queryParameter: "request"
});

//Declare the query, with binary format
var query = new Rj.query.WCPSQuery('for m in (mean_summer_airtemp) return encode((char) m, "png" )');
query.setBinaryFormat(true);

var img = new Rj.widget.BinaryImage("#image-widget", "image/png");
img.bind(query);
query.evaluate();

See in Code Playground

Examples

The following example shows how to display a gauge which takes a random value every 2 seconds.

HTML:

<div id='gauge-widget'></div>

Javascript:

var gauge = new Rj.widget.Gauge("#gauge-widget", 0, 1000);
setInterval(function(){
    var value = Math.random()*1000;
    gauge.setValue(value);
}, 2000);

See in Code Playground

Examples

The following example shows how to display a led which takes a random value every 2 seconds.

HTML:

<div id='led-widget'></div>

Javascript:

var led = new Rj.widget.Led("#led-widget");
setInterval(function(){
    var value = Math.random()*100 + Math.random();
    led.setValue(value);
}, 2000);

See in Code Playground

Examples

HTML:

<div id='map-widget'></div>

Javascript:

var WMS_SERVICE_URL = "http://212.201.49.173:8080/rasogc/rasogc";

var map = new Rj.widget.Map('#map-widget', {
    projection : "EPSG:32633",
    maxExtent : new OpenLayers.Bounds(489750,7988500,492750,7990000),
    tileSize : new OpenLayers.Size(500, 500),
    numZoomLevel : 4
});

var layerHakoon = new Rj.util.MapLayer("Hakoon Drive", WMS_SERVICE_URL, {
     layers: 'Hakoon_Dive_1',
     styles: 'standard',
     format : "image/png",
     transparent: "true",
     version : "1.1.0",
     exceptions : 'application/vnd.ogc.se_xml',
     customdem : 'minLevel,maxLevel,T'
     },
     {
     isBaseLayer: false,
     transitionEffect : 'resize'
});

map.addLayers([layerHakoon]);

See in Code Playground

Examples

The follwoing examples shows how to display a SpeedoMeter widget that takes a random value every 5 seconds.

HTML:

<div id='speedometer-widget'></div>

Javascript:

var speedoMeter = new Rj.widget.SpeedoMeter("#speedometer-widget");
setInterval(function(){
    var value = Math.random()*100;
    speedoMeter.setValue(value);
}, 2000);

See in Code Playground

Examples

HTML:

<div id='tooltip-widget' style='width:100px; margin-top:100px;'>Hover me!</div>

Javascript:

var tooltip = new Rj.widget.ToolTip("#tooltip-widget");
tooltip.setValue("This is my tooltip");

See in Code Playground

Examples

HTML:

<div id='slider-widget' style='margin-top:100px;'></div>

Javascript:

var slider = new Rj.widget.HorizontalSlider("#slider-widget", 0, 10);
slider.addListener("hSliderListener", "valuechanged", function(value){
    alert("The new value of the slider is:" + value);
})

See in Code Playground

Examples

HTML:

<div id='slider-widget' style='margin-top: 100px;'></div>

Javascript:

var slider = new Rj.widget.VerticalSlider("#slider-widget", 0, 10);
slider.addListener("vSliderListener", "valuechanged", function(value){
    alert("The new value of the slider is:" + value);
})

See in Code Playground

Examples

HTML:

<div id='knob-widget'></div>

Javascript:

var knob = new Rj.widget.Knob("#knob-widget", 0, 10);
knob.setValue(3);

See in Code Playground

Examples

HTML:

<div id='text-widget'></div>

Javascript:

var textWidget = new Rj.widget.Text("#text-widget", "Initial text.");
textWidget.setValue("Another piece of text.");

See in Code Playground

Examples

Javascript:

//set up the WCPS service
Rj.util.ConfigManager.setWCPSService({
    url           : "http://flanche.net:8080/petascope/",
    queryParameter: "request"
});

var query = new Rj.query.WCPSQuery('for t1 in (mean_summer_airtemp) return encode (t1[ x(126), y(-10) ], "csv")');
query.evaluate(function(response){
        alert("The query result is: " + response);
})

See in Code Playground

Examples

Javascript:

//set up the WCS service
Rj.util.ConfigManager.setWCSService({
      baseUrl:"http://flanche.net:8080/petascope/",
      name   :"WCS",
      version:"2.0.0"
});

var query = new Rj.query.wcs.GetCoverage("mean_summer_airtemp");
query.evaluate(function(response){
    alert("The query result is: " + response);
});

See in Code Playground

Examples

This example shows how to bind a query to a slider: when the slider moves the value of the query changes.

The query string is then printed to a text widget with a custom binder.

HTML:

<div id='slider-widget' style='margin-top: 30px;'></div>
<div id='text-widget'></div>

Javascript:

//set up the wcps service
Rj.util.ConfigManager.setWCPSService({
      url           : "http://flanche.net:8080/petascope/",
      queryParameter: "request"
});

var slider = new Rj.widget.HorizontalSlider("#slider-widget", 126, 130);
var query = new Rj.query.WCPSQuery('for t1 in (mean_summer_airtemp) return encode (t1[ x(126:$x) ], "csv")', ['$x']);
query.bind(slider, '$x');

var text = new Rj.widget.Text("#text-widget");
text.bind(query, function(text, bind){
    //set the initial value
    text.setValue(query.toString());

    //when the query evaluates, change to the new value
    query.addListener('textModifier', 'evaluated', function(){
        text.setValue(query.toString());
    });
});

See in Code Playground

Examples

Javascript:

//set up a WCS service
Rj.util.ConfigManager.setWCSService({
      baseUrl:"http://flanche.net:8080/petascope/",
      name   :"WCS",
      version:"2.0.0"
});

See in Code Playground

Examples

Javascript:

//set up a WCPS service
Rj.util.ConfigManager.setWCPSService({
      url           : "http://flanche.net:8080/petascope/",
      queryParameter: "request"
});

var query = new Rj.query.WCPSQuery('for t2 in (mean_summer_airtemp) return encode (t2 [x(160), y(0)], "csv")');
query.evaluate(function(response){
      var parser = new Rj.util.CSVParser(response, function(e){
        return parseInt(e, 10);
      });
      alert(parser.toNativeJsArray());
});

See in Code Playground

Examples

HTML:

<div id='slider-widget' style='margin-top:30px'></div>
<div id='text-widget'></div>

Javascript:

var slider = new Rj.widget.HorizontalSlider("#slider-widget", 0, 50);
var text = new Rj.widget.Text("#text-widget");

//when the value of the slider changes, it fires "valuechanged"
//we make the value in the text change with a listener
slider.addListener("mySliderText", "valuechanged", function(value){
   text.setValue(value);
});

See in Code Playground

Examples

HTML:

<div id='diagram-widget' style='margin-top:30px'></div>

Javascript:

var dataSeries = new Rj.util.DataSeries([[1,2], [5,9], [6,4]]);
var diagram = new Rj.widget.LinearDiagram("#diagram-widget", dataSeries);

//after 5 seconds change the color, and add a new point
setTimeout(function(){
    dataSeries.setColor("green");
    dataSeries.addPoint(7,5);
}, 5000);

See in Code Playground