Skip to content

Changes

Page history
more authored by Alan Mitchell's avatar Alan Mitchell
Show whitespace changes
Inline Side-by-side
Developer/BMON-Architecture.md
View page @ f889de66
...@@ -156,6 +156,8 @@ BMSAPP_NAV_LINKS = ( ('Map', 'map'), ...@@ -156,6 +156,8 @@ BMSAPP_NAV_LINKS = ( ('Map', 'map'),
The main Charts/Reports page is the core of the application. It functions as a [[Single Page Application|https://en.wikipedia.org/wiki/Single-page_application]]. With the initial loading of that page, all of the static HTML of the page and all of HTML Input elements are downloaded from the server. As the user changes inputs, AJAX calls are made to the server to update the contents of various selection inputs (e.g. update the sensor selection dropdown due to a new building being selected) and to update the final chart or report results. The main Charts/Reports page is the core of the application. It functions as a [[Single Page Application|https://en.wikipedia.org/wiki/Single-page_application]]. With the initial loading of that page, all of the static HTML of the page and all of HTML Input elements are downloaded from the server. As the user changes inputs, AJAX calls are made to the server to update the contents of various selection inputs (e.g. update the sensor selection dropdown due to a new building being selected) and to update the final chart or report results.
### User Interface Configuration based on Chart/Report Type
As discussed before, each type of chart or report has Python class on the server that is responsible for generation of the chart/report. Each one of those classes also contains some configuration properties that control: As discussed before, each type of chart or report has Python class on the server that is responsible for generation of the chart/report. Each one of those classes also contains some configuration properties that control:
* which HTML input elements are visible in the browser client for that chart type, * which HTML input elements are visible in the browser client for that chart type,
...@@ -193,6 +195,10 @@ class BaseChart(object): ...@@ -193,6 +195,10 @@ class BaseChart(object):
These class properties are converted to HTML attributes and sent to the browser client; [[The main JavaScript file for the browser app|https://github.com/alanmitchell/bmon/blob/master/bmsapp/static/bmsapp/scripts/bmsapp.coffee]] reads these attributes and controls the user interface accordingly. These class properties are converted to HTML attributes and sent to the browser client; [[The main JavaScript file for the browser app|https://github.com/alanmitchell/bmon/blob/master/bmsapp/static/bmsapp/scripts/bmsapp.coffee]] reads these attributes and controls the user interface accordingly.
### Updating the Main Chart or Report Content
As the user changes inputs in the browser application, the main chart or report requires updating. When an update is required, the browser makes a request to the server `reports/results/` URL, passing all of the user's inputs to the server. The server responds with JSON content created from the `result()` method for the particular chart type being viewed. This content was [described above](Report/Chart Creation) and consists of an HTML string and list of objects for the browser to create. Here is the CoffeeScript code in `bmsapp.coffee` that requests that content from the server, inserts the HTML in the `results` div and then creates the requested browser objects (Highcharts charts, Highstock charts, and Dashboards.)
```coffee ```coffee
# Updates the results portion of the page # Updates the results portion of the page
update_results = -> update_results = ->
......