Translator is the end-user client for Rosetta Home. Rosetta Home 2.0 is an open source building performance monitoring platform which is located here. Translator is a web application meant for interaction with your Rosetta Home sensors (Touchstones). The backbone of the project is a lightweight version of React called Preact. Webpack and babel-core are used for compiling the web app. Authentication is done through Bearer and tokens which are valid up to one month at a time. The application makes use of redux store for managing the data set from the Satori API.
The backend for Rosetta Home located here.
- Authentication
- Login
- Signup
- Confirm Account
- Recover Password
- Improvement Two-Step Verification (Security In-Mind!)
- Google Material Theme
- Dashboard Charts
- Live Graph
- Bullet Chart
- Simple Data Point with Brush
- Multi Data Points with Brush
- Radial Compare
- Spark Graph
- Now Card
- Date Range Picker
- Web App Life Cycle
- Detect UnAuth User
- Changes Current Route
- NavBar Title Change (Uses on-broadcast-emitter)
- SideMenu Options Change (Uses on-broadcast-emitter)
- Footer
- Login Page
- Dashboard Page
- Setup Page
- Signup Page
- src/
- auth
- components/
- elements (Graphs)
- layout (App layout components -> header,sidemenu,footer,navtitle)
- pages (Login,Dashboard,etc.)
- Setup
- App.js (The skeleton of the app)
- NotificationCenter.js (Notification component list)
- service
- style (CSS files)
- actions.js
- configs.js
- index.js
- reducers.js
- store.js
- util.js
<div className="App">
{/* Root of the Translator application, here is the basic layout of the web app with Google Material. */}
<Layout fixed-header fixed-drawer>
{/* Header component with title */}
<Header/>
{/* SideMenu with the options and router links */}
<SideMenu/>
{/* Provider for the redux storage */}
<Layover/>
<Provider store={store}>
{/* Layout content area for the preact component */}
<Layout.Content>
<NotificationCenter/>
{this.props.children}
</Layout.Content>
{/* Layout content area end tag */}
</Provider>
{/* Provider for the redux storage end tag */}
</Layout>
{/* Footer for the whole applicaiton */}
<Footer/>
</div>
Header contains the NavTitle and RightItem component which when linked to the react broadcast will change the contents of the children when an event is emitted, i.e. the title of the current page in the body. Layover is in charge of handling all the modal pop ups. Once a layover is rendered with the component props ,if a valid VNode is passed it will be rendered within the layover. The callback payload is optional. SideMenu contains all the options for the current state. For example if the user is not logined into their Rosetta Home account, no token will be detected and the SideMenu will display options for a guest user, such as, Login, Setup, Help, Home, etc. Once a session is confirmed the react broadcast will emit a update to the SideMenu which will re-render the component with auth-user options (Dashboard,Settings,etc.) without re-rendering the whole App from the Root node down. NotificationCenter will display notifications from the user interaction from failed Login to issues with the touchstones themselves. The {this.props.children} is the pages in the current route state from the URL matching in the index.js. Everything in the life cycle of the application will play in the Layout.Content.
The websocket promise is located in wsp.js. It has two parts: the first is the websocket and the promise manager. When an instance of the wsp is created, it requires a URI link to connect. Once it has been connected, JSON Objects can be sent in the way of payloads. As a request is created, a unique ID is added to the payload for the backend to return with processed request. The purpose of having a unique token is that as the request is processing promises are going into a pending state until an onmessage is trigged and resolves the pending promises with the response data.
| Parameters | |
|---|---|
| datapoint | This is the datapoint ID you want to have for the Graph/Chart render, for example, datapoint="ieq.co2" |
| startDateTime | The starting date and time to retrieve the data set. Needs to be formatted as UTC. |
| endtDateTime | The ending date and time to retrieve the data set. Needs to be formatted as UTC. |
| dres | The data resolutions for the data retrieved from the backend. |
BulletChart a simple Bulletchat that displays the min, mean, max, and current values of the datapoint.
const point = "ieq.co2";
const dres = '1d';
<BulletChart datapoint={point} startDateTime={fromValue} endDateTime={toValue} dres={dres}/>
BarChart is a simple bar chart which can take in only one datapoint at the current time.
const point = "ieq.co2";
const dres = '1d';
<BarChart datapoint={point} axisEnabled={false} startDateTime={fromValue} endDateTime={toValue}/>
Now is an overview of the current datapoint with min max avg and tend via sparkline.
const point = "weather_station.humidity";
const dres = '1d';
<NowCard datapoint={point} startDateTime={fromValue} endDateTime={toValue} dres={dres}/>
HeatMap allows the user to see a HeatMap of the datapoint that was selected, as well as in the given date range.
const point = "ieq.co2";
const dres = '1d';
<HeatMap datapoint={point} startDateTime={fromValue} endDateTime={toValue} dres={dres}/>
MultiDPChart is a simple line chart which has the option for a threshold and populates more than one data point, i.e. all the data points from the weather station.
/* Data points to graph */
const dres = '1d';
const points = "weather_station.humidity,weather_station.outdoor_temperature,weather_station.indoor_temperature";
<MultiDPChart datapoints={points} startDateTime={fromValue} endDateTime={toValue} dres={dres}/>
SparkGraphLive is a mix of the sparkline and the LiveGraph. The component has the most current value on the left side of the component and a sparkline to the right.
/* Id of the data point */
const datapoint = "weather_station.humidity";
const dres = '1d';
<SparkGraphLive type={datapoint} startDateTime={fromValue} endDateTime={toValue} dres={dres}/>
LiveGraph is a live graph component that interfaces with Satori and redux provider.
/* Rosetta Home NodeID on Satori */
const nodeID = "0000000081474d35";
/* Data points to stream */
const points = "weather_station.outdoor_temperature";
<RHLiveGraph nodeID={nodeID} type={points} startDateTime={fromValue} endDateTime={toValue}/>