Sample react app that utilises the Hive heating v6 API to display a temperature graph against target for the last 48 hours
Sample typescript React Native app that uses the Hive heating API to display a temperature graph of actual vs target.
This is a sample react native app tested on an Android Samsung S9. The goals were:
All of the hive APi has been wrapped up into a helper service hive.service.ts
Components that wish to access this can use the high order component withHiveSubscription.tsx
This will login, give access to service and fire prop changes when data is updated.
Sample use can be found in temperature-graph-screen.tsx and looks like this:
hive.init()
.then(()=>{
let id = hive.getNodeId('Thermostat');
hive.getValues(ValueType.targetTemperature, id, Operation.average, start, end.valueOf(), interval )
.then(() => hive.getValues(ValueType.temperature, id, Operation.average, start, end.valueOf(), interval ))
.then(() => {
this.setState({temperaturesLoaded : true });
})
There is also a check for the heating having cut out. For us, this can happen if the oil has run out, the optical flame sensor has become dirty.
This is carried by checking actual vs target temperatures every 20 minutes and checking for lack of heating. This is implemented in cut-out-check.ts
The app is a pretty basic react native application tested on Android. However, it does implement many of the common patterns requried for more substantial applications. These include:
Access to the Hive API inspired by the excelent articals at www.smartofthehome.com
Uses data collected from Hive home products www.hivehome.com