Frontend Architecture

Frontend "Architecture"

Two main components: reflectivity layer + forecast layer(s). Both datasources are processed asynchronously, but a forecast always belongs to a reflectivity layer. This can be expressed as a FSM:

Edit on draw.io

On initial pageload, the FSM is initialized to one of the three states through a query to /api/reflectivity/. All future transitions are done thorugh re-initialization or using socket.io.

SocketIO Events

XXX write docs

API Level

XXX

JavaScript API

XXX

Basic Interaction

• When entering foreground (when the app has been suspended, but not terminated), it's necessary for clients to execute window.manualTileUpdateFn() to refresh the map.
• As soon as new location updates are provided to the App, they need to be injected into the webview with window.lm.updateLocation(lat, lon, accuracy, zoom, focus). zoom is a boolean parameter that controls whether or not the map view should move and zoom to the injected location. accuracy is the location accuracy in meters (usually provided along with lat/lon by the OS)

Playback Interaction

• window.downloadForecast(cb) downloads the currently available forecast tiles. It accepts an optional callback that is executed as soon as the download has finished.
• window.playForecast() will automatically play a previously downloaded forecast. Must only be called after the download is finished.
• window.setForecastLayer(n) switches to a forecast frame (0 = 5 min, 1 = 10 min, 2 = 15 min, etc). Currently supports 8 frames.

Settings

The frontend exposes a settings interface that can be written to using window.injectSettings(). It's supposed to be the main method of communication between Apps and the map view. Settings are stored persistently in the browser's (or webview's) LocalStorage. A list of key/value pairs is passed to injectSetting() like in this example: window.injectSettings({"mapRotation": false});

A possibly incomplete list of settings (check out index.js for more):

• mapRotation controls whether the map can be rotated with two fingers
• proMode not yet implemented, will switch between a noob and pro view automatically
• layerLightning controlls whether or not the lightning layer is active
• layerMesocyclones controlls whether or not the mesocyclone layer is active
• darkMode use a dark base map