-
Notifications
You must be signed in to change notification settings - Fork 0
Developer Documentation
Path: client/app/o2rInteractiveFigure
Description: Creates a single interactive figure within an erc. It handles opencpu requests and listens to parameter changes. Also handles different comparison types for maps as well as timeseries. Enables downloading the computed figures as well as their corresponding parameters.
Inputs:
-
o2r-figure: metadata of a single figure, i.e.
metadata.o2r.interaction[n] - ercid: id of an erc
Example:
<o2r-interactive-figure o2r-figure="figure" ercid="{{ercId}}"></o2r-interactive-figure>Path: client/app/largeInteractiveView
Description: Creates a fullscreen dialog that contains a single interactive figure
Inputs:
-
o2r-figure: metadata of a single figure, i.e.
metadata.o2r.interaction[n] - ercid: id of an erc
Example:
<large-interactive-view o2r-figure="figure" ercid="{{ercId}}"></large-interactive-view>Path: client/app/o2rSideBySide
Description: Displays two figures side by side, regardless if the content is a time series or a raster map. Uses img-tag for raster data and calls o2rTimeseries-directive for handling time series.
Inputs:
-
o2r-original-figure: metadata for a single figure containing the original data (img path or time series json), i.e.
metadata.o2r.interaction[n] - o2r-modified-figure: data retrieved from the openCPU request (img path or time series json).
- plotly-Layout: Styling object for plotly.js. Amongst others, contains title of a figure
Example:
<o2r-side-by-side o2r-original-figure="figure" o2r-modified-figure="modifiedFigure" plotly-Layout="layout"></o2r-side-by-side>Path: client/app/o2rTimeseries
Description: o2r-wrapper for plotly.js. Creates an interactive time series. Expects a json conformant with the plotly.js specification. Can handle one or multiple time series in a single plot.
Inputs:
- o2r-data: time series json, conformant with plotly.js specification
- o2r-layout: layout object. See plotly.js specification for more details
Example:
var data = [{
x: [2000,2001,2002,2003,2004,.....,2010],
y: [4,1,5,17,...,3]
}];
// where x are the x-axis value and the y are the values for the y-axis.
// For multiple lines in the plot just insert multiple objects into the array.
var layout = {title: 'Title of the plot'};<o2r-timeseries o2r-data="data" o2r-layout="layout" </o2r-timeseries>Path: client/app/sliderImageDirective
Description: Creates swipe interaction for maps. Places one map above the other. Using a slider a user can regulate the visibility of the upper map.
Inputs:
- o2r-original-figure: path to original image file
- o2r-modified-figure: path the modified image file, i.e. path from openCPU response
Example:
<slide-image-comparison o2r-original-figure="figure.original.image" o2r-modified-figure="figure.modifiedFigure"></slide-image-comparison>Github Repo: https://github.com/Interactive2017/rasterSweep
Description: Peephole highlighting difference between two images. Interaction via moving a sliding windows over two images. Displays content of one image within sliding window; the other image outside of the sliding window. Bordercolor of window highlights the amount of different pixels between the two images for the area within the sliding window. Sliding window is resizable.
Inputs:
- rs-base: path to base image
- rs-overlay: path to overlay image
Example:
<raster-sweep rs-base="/foo/bar/base.img" rs-overlay="/foo/bar/overlay.img"></raster-sweep>Installation: bower install raster-sweep --save