wiki:raswct/guide

Version 19 (modified by pbaumann, 23 months ago) (diff)

--

raswct User guide

The main purpose of this toolkit is to allow developers to create user interfaces for displaying data from a raster database. The toolkit is developed in Javascript and uses popular libraries like jQuery to achieve its goals. Its structure follows the principle of separating data transmission and processing from the presentation, using two main namespaces reflecting this philosophy:

  • Query namespace - containing all the classes that can be used to retrieve data from a server, be it a simple HTTP server or a rasdaman server.
  • Widget namespace - containing all the classes that can be used to display the data in meaningful ways.

For more details please refer to the raswct developer guide.

Query namespace

Base Query

Description

Base class for the query classes. It does nothing on its own, but is a good starting point for any class that wants to have data transport capabilities.

Examples
This class should not be used on its own, it is provided only as a mean for exposing new ways of querying the data from the server. Please note that although there is no mechanism in js to enforce this any child class should implement a transport method.

Select Query

Description

The SelectQuery class provides an abstraction over the select query sent to the server. It allows widget developers to easy modify queries by adding new variables to the query that can be replaced with meaningful values at the transmission time.

Examples
The following code snippet creates a raster query:

 var rasQuery =[[BR]]
 new Rj.Query.!SelectQuery(“http://example.org/raster_service”, “SELECT (x.red > $red, x.green > $green) FROM collection as x”, {});
 rasQuery.setVariable(“$red”, 25);
 rasQuery.setVariable(“$green”, 50);
 rasQuery.setVariable(“$red”, rasQuery.getVariable(“$red”) + 10);
 console.log(rasQuery.replaceVariablesInQuery());

This would output SELECT jpeg(x.red > 35, x.green > 50) FROM collection as x. Please note that in most cases you will not need to use the replaceVariablesInQuery method as all transport methods call it automatically.

URL Query

Description

The UrlQuery class provides an abstraction over queries sent to a server. It allows seamless request-response transactions to a http server.

Examples
The following code snippet creates an UrlQuery and modifies its parameters. Please see QueryExecutor for the data retrieval procedure:

var exQuery = new Rj.Query.!UrlQuery(“http://example.org/data_service/”, Rj.Constants.!UrlQuery.POST, { param1 : “some value” param2 : “some value 2” });
exQuery.addParameter(“param3”, “value 3”);
exQuery.removeParameter(“param2”);

We now have a query object that retrieves data from http://example.org/data_service/ via a POST request sending several parameters (param1, param3).

Query Executor

Description

The QueryExecutor is a singleton class that is responsible for the communication with the server. It can receive queries from any BaseQuery descendants and then send them to the server through an HTTP request responding to the requester with the result object received from the server. The requests are done asynchronous in a non-blocking way so that multiple widgets can request queries from the server without waiting one for the other.

Examples

var rasQuery = new Rj.Query.!SelectQuery( “http://example.org/raster_service”, “SELECT jpeg(x.red > $red, x.green > $green) FROM collection as x”, {} );
rasQuery.setVariable(“$red”, 25);
rasQuery.setVariable(“$green”, 50);

var executor = Rj.Query.!QueryExecutor(rasQuery);
executor.callback(function(response){
    //We have the response from the server here
    console.log(response);
});

Please note that the executor is a deferrable object, similar to Future objects in Java, so that means you will get the result asynchronously, e.g. you can register a handle that will be executed when the data is retrieved from the server.

Widget Namespace

Base Widget

Description

The base widget is a wrapper class that has to be extended by any widget that want to interact with the system. It wraps an existing widget from a library like jQuery UI or any other a developer might need, providing it with a simple eventcommunication system and with a BaseQuery that can modify the database results.

Examples
This is a base class for widgets so it shouldn’t be initialized or used except for extending the current widget system.

Input Widget

Description

InputWidget is a simple grouper class that helps better define the relationships between widgets.

Examples
This is a base class for widgets so it shouldn’t be initialized or used except for extending the current widget system.

Text Widget

Description

Defines a widget which allows the user to input text queries.

Examples

Js code:

var txtWidget = new Rj.Widget.!TextWidget();
txtWidget.renderTo(“#text-widget-example”);
txtWidget.setValue(“Hello World”);

Html code:

...
<div id=”#text-widget-example”>The widget will be rendered here</div>
...

Slider Widget

Description

Defines an abstraction of a widget which allows the user to use a multiple level slider.

Examples

The following example will dipslay a slider with values from 1000 to 11000 with a step size of 500. When the slider is moved a message will be printed to the console.

var thresholdSlider = new Rj.Widget.!SliderWidget( 1000, 11000, Rj.Constants.!WidgetSlider.VERTICAL, 500, 8000 );
//min, max, orientation, step size, default
thresholdSlider.renderTo(“#thr”);
//Using the changevalue event to detect modification to the slider
thresholdSlider.addListener(
    “myAppName”, “changevalue”,
    function(value){
        console.log(“This is the new value: “ + value.toString();
} );

Map Widget

Description

Defines an a widget used for displaying maps composed of several layers. The implementation is based on the OpenLayers library < http://openlayers.org />.

Examples
The following code will display a map with one layer.

//Define the map widget and the coordinate system
var map = new Rj.Widget.!MapWidget( {
    projection : "EPSG:32633",
    maxExtent : new !OpenLayers.Bounds(489750,7988500,492750,7990000),
    tileSize : new !OpenLayers.Size(500, 500),
    numZoomLevel : 4
} );
//Define a new base layer for the map. Any WMS service url will work
var !HakoonBathymetryLayer = new Rj.Widget.!LayerWidget(
    "Hakon_Bathymetry",
    [ ”http://212.201.49.173:8080/rasogc/rasogc”,
    { layers: 'Hakon_Bathymetry', styles: 'colored', format : "image/png", version : "1.1.0", exceptions : 'application/vnd.ogc.se_xml', customdem : 'minLevel,maxLevel,T' },
    { transitionEffect : 'resize' }
);
//Add the layer to the map
map.addLayers( [!HakoonBathymetryLayer] );
//... and render it to the #maps div
map.renderTo("#maps");

Linear Diagram

Description

Defines a widget used for displaying linear graphs.

Examples

JS Code:

//Initialize the query - we are using an URL Query object
var source = “NN3_10”;
var query = new Rj.Query.!UrlQuery( "wcpsParser.php", 'GET', { "coverageId": source } );
//Create the widget
var diagram = new Rj.Widget.!LinearDiagram(query, "#chartPlace", source);
// Get the diagram axis and labels before the data is rendered by listening to the datapreload event
diagram.addListener('wcps','datapreload', function(response){
//Check if any errors occurred, and if so display a nice error message
    if(response.error){
        $("body").append("<div id='dialog'>"+response.error+'</div>');
        $( "#dialog" ).dialog({ modal : true, title : 'Parse Error' }).show();
        throw "Error while processing the data";
    }
    var values = [];
    for(var i = 0; i < response.data.length; i++){
        values.push([i, parseInt(response.data[i], 10)]);
    }
    //Configure the widget axes
    this.configure({ axes : { xaxis:{ title : response.domainInfo.axisLabel }, yaxis : { title : "Values" }' } });
    return { data : [values] };
});
//load the data and render the widget
diagram.loadData(true);

HTML Code:

<div id=’chartPlace’ style=’width:600px; height:500px;’>
<!-- The chart will go here -->
</div>

Area Diagram

Description

Defines a widget used for displaying area graphs.

Examples

JS Code:

var source = “NN3_10”
//Initialize the query - we are using an URL Query object
var query = new Rj.Query.!UrlQuery("wcpsParser.php", 'GET', { "coverageId": source });
//Create the widget
var diagram = new Rj.Widget.!AreaDiagram(query, "#chartPlace", source);
// Get the diagram axis and labels before the data is rendered
diagram.addListener('wcps','datapreload', function(response){
    var values = [];
    for(var i = 0; i < response.data.length; i++){
        values.push([i, parseInt(response.data[i], 10)]);
}
//Configure the widget labels
this.configure({ axes : { xaxis:{ title : response.domainInfo.axisLabel }, yaxis : { title : "Values" } } });
return { data : values }; });
//Load the data and render the widget
diagram.loadData(true);

HTML Code:

<div id=’chartPlace’ style=’width:600px; height:500px;’>
<!-- The chart will go here -->
</div>

Scatter Diagram

Description

Defines a widget used for displaying scatter graphs.

Examples

JS Code:

//Initialize the query - we are using an URL Query object
var source = “NN3_10”
var query = new Rj.Query.!UrlQuery( "wcpsParser.php", 'GET', { "coverageId": source } );
//Create the widget
var diagram = new Rj.Widget.!ScatterDiagram(query, "#chartPlace", source);
// Get the diagram axis and labels after the data is loaded by listening
// to the datapreload event
diagram.addListener('wcps','datapreload', function(response){
    var values = [];
    for(var i = 0; i < response.data.length; i++){
    values.push([i, parseInt(response.data[i], 10)]);
}
//Configure the widget labels
this.configure( { axes : { xaxis:{ title : response.domainInfo.axisLabel }, yaxis : { title : "Values" } } } );
return { data : values }; });
diagram.loadData(true);

HTML Code:

<div id=’chartPlace’ style=’width:600px; height:500px;’>
<!-- The chart will go here -->
</div>

Working examples

For real-life examples of raswct see this OGC WCS showcase, in particular the WCPS Console.