Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
weatherbox:dashboard_v2:weatherboxes:start [2018/02/28 19:47] gli [Weatherboxes Page Design Doc] |
weatherbox:dashboard_v2:weatherboxes:start [2021/09/19 21:59] (current) |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| This page references the design doc for the weatherboxes page of dashboard v2. We will discuss the design of the dashboard weatherboxes page. | This page references the design doc for the weatherboxes page of dashboard v2. We will discuss the design of the dashboard weatherboxes page. | ||
| + | |||
| + | ---- | ||
| === Motivation === | === Motivation === | ||
| - | This is the page where users can view a weahterbox's data based on what weatherbox and node they choose. The following data were collected by each weatherbox and will be displayed into graphs: solar irradiance, pressure, temperature, humidity, uptime, battery voltage, and panel voltage. | + | This is the page where users can view a weahterbox's data based on what weatherbox and node they choose. The following data were collected by each weatherbox and will be displayed into line graphs: solar irradiance, pressure, temperature, humidity, uptime, battery voltage, and panel voltage. |
| + | |||
| + | ---- | ||
| + | === Weatherboxes Page Block Diagram === | ||
| + | {{ :weatherbox:dashboard_v2:weatherboxes:weatherbox_page_block_diagram.png?600 |}}\\ | ||
| + | |||
| + | The users will select a weatherbox from the weatherbox selection module which prompts the server for the data. The user then selects the node(s) they want to be displayed up on the statistical values, environmental display, and diagnostics display modules. The weatherbox page encompasses all four modules mentioned. | ||
| + | |||
| + | ---- | ||
| === Design Considerations === | === Design Considerations === | ||
| - | We want to consider the page to be user friendly while being able to see all collected data listed above. This includes the ease of being able to select a specific weatherbox and its corresponding nodes from a drop down menu. The organization of the page will allow users to see both environmental and diagnostics data where specific environmental data can be seen by switching a tab. | + | We want to consider the page to be user friendly while being able to see all collected data listed above. This includes the ease of being able to select a specific weatherbox and its corresponding nodes from a drop down menu. The organization of the page will allow users to see tables for statistical values and both environmental and diagnostics data where specific environmental data can be seen by switching a tab. |
| - | === Sketch === | ||
| - | {{ :weatherbox:dashboard_v2:weatherboxes:weatherboxes_sketch.jpg?600 |}} | ||
| ---- | ---- | ||
| - | === Electronic Version === | + | |
| - | {{ :weatherbox:dashboard_v2:weatherboxes:design_doc_weatherboxes_01_24_2018.png?600 |}} | + | === Mockups === |
| + | | {{ :weatherbox:dashboard_v2:weatherboxes:weatherboxes_sketch.jpg?200 }} | {{ :weatherbox:dashboard_v2:weatherboxes:design_2.png?200 }} | {{ :weatherbox:dashboard_v2:weatherboxes:design_3.png?200 }} | | ||
| + | ^ Initial Design ^ Second Design ^ Current Design ^ | ||
| ---- | ---- | ||
| - | The design of the landing page will consist of displaying environmental and diagnostics data from a selected weatherbox and node. This will be the main source of data visualization for the dashboard where users are provided with streamed information. | + | === Electronic Copies === |
| + | | {{ :weatherbox:dashboard_v2:weatherboxes:design_doc_weatherboxes_01_24_2018.png?200 }} | {{ :weatherbox:dashboard_v2:weatherboxes:electronic_2.png?200 }} | {{ :weatherbox:dashboard_v2:weatherboxes:electronic_3.png?200 }} | | ||
| + | ^ Initial Design ^ Second Design ^ Current Design ^ | ||
| + | | Weatherbox Selection: Select weatherbox from drop down, then select available weatherbox node from drop down | Weatherbox Selection: Select weatherbox from drop down (node selection switched to being part of graphing options) | Weatherbox Selection: Select weatherbox from drop down (node selection switched to being part of graphing options) | | ||
| + | | Statistical Values: Not implemented in this design | Statistical Values: Displaying maxima and minima with corresponding timestamps for each data category | Statistical Values: Displaying mean, standard deviation, and recently collected values with corresponding timestamps for each node | | ||
| + | | Environmental Display: Click between solar irradiance, pressure, temperature, and humidity buttons to display data (solar irradiance data shown by default) | Environmental Display: Shows solar irradiance, pressure, temperature, and humidity graphs with solar irradiance being the largest | Environmental Display: Click between solar irradiance, pressure, temperature, and humidity buttons to display data (solar irradiance data shown by default) | | ||
| + | | Diagnostics Display: Shows uptime, battery voltage, and panel voltage graphs | Diagnostics Display: Shows uptime, battery voltage, and panel voltage graphs | Diagnostics Display: Shows uptime, battery voltage, and panel voltage graphs | | ||
| + | |||
| + | ---- | ||
| === Technologies involved in the weatherboxes page === | === Technologies involved in the weatherboxes page === | ||
| There are no technologies involved with the current design of the weatherboxes page. | There are no technologies involved with the current design of the weatherboxes page. | ||
| + | |||
| + | ---- | ||
| === Additional Features === | === Additional Features === | ||
| Additional features in consideration include displaying environmental data side by side like how the diagnostics data was laid out and a description of the selected weatherbox for users not related with the lab. | Additional features in consideration include displaying environmental data side by side like how the diagnostics data was laid out and a description of the selected weatherbox for users not related with the lab. | ||
| + | |||
| + | ---- | ||
| === Evaluation of Design === | === Evaluation of Design === | ||
| Line 32: | Line 55: | ||
| - Being able to choose a specific time scale (i.e. selecting only one day, one week, one month, one year, all historical, etc). | - Being able to choose a specific time scale (i.e. selecting only one day, one week, one month, one year, all historical, etc). | ||
| - Not only display the graphs, but provide some other useful information for the graphs. | - Not only display the graphs, but provide some other useful information for the graphs. | ||
| + | |||
| + | After CDR, feedback was given on features on the weatherboxes page. The following were discussed in the presentation: | ||
| + | - Retain changing button display for environmental display | ||
| + | - Consider other statistical values to display rather than maxima and minima (e.g. mean and standard deviation) for data anaylsis | ||
| + | |||
| + | ---- | ||
| + | === Issues and Set Backs === | ||
| + | The weatherbox page was set back in terms of progress due to personal and server issues. Currently, the implementation of the weatherbox page uses one set of data from the National Renewable Energy Laboratory (NREL) for testing as server was not able to store collected data from deployed weatherboxes. Due to this, the following features are have not been fully implemented: | ||
| + | * Weatherbox selection | ||
| + | * Node selection | ||
| + | * Statistical values | ||
| + | |||
| + | For new members, please go through the freeCodeCamp and React tutorials and exercises as the features on the weatherbox page requires you to understand object oriented programming languages, specifically ES6. Notable features: | ||
| + | * Changing environmental display with buttons | ||
| + | * State changes with button handlers | ||
| + | * Weatherbox selection | ||
| + | * Handling of data being displayed | ||
| + | * Statistical values | ||
| + | * Data retrieval and manipulating them for calculated values | ||
| + | |||
| + | ---- | ||
| === Future Implementation === | === Future Implementation === | ||
| Line 40: | Line 84: | ||
| - Simultaneous graphing of nodes | - Simultaneous graphing of nodes | ||
| - Useful data values from graphs | - Useful data values from graphs | ||
| + | |||
| + | //As of Wednesday May 11, 2018//\\ | ||
| + | The following features will be implemented in the future: | ||
| + | - Node selection | ||
| + | - Weatherbox selection | ||
| + | - Compact statistical tables | ||