tvolkmann/smart_garden_server
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

got rid of render delay

Browse Source
This commit is contained in:
Timo Volkmann 2020-07-16 10:53:38 +02:00
parent 16a5521093
commit efe1001682
4 changed files with 116 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/main.jsx
View File

@ -23,7 +23,5 @@ Meteor.startup(() => {
Meteor.subscribe('sensorDataCollection'); Meteor.subscribe('sensorDataCollection');
} }
Meteor.setTimeout(function() { ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<App />, document.getElementById('root'));
}, 1250);
}); });

129
imports/ui/Home.jsx
View File

@ -4,68 +4,83 @@ import SensorCardDeck from './SensorCardDeck'
import {SensorDataCollection} from "../../client/main"; import {SensorDataCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data'; import {useTracker} from 'meteor/react-meteor-data';
import {Col, Row} from "react-bootstrap"; import {Col, Row} from "react-bootstrap";
import { Card, CardDeck } from 'react-bootstrap';
export default function Home() { export default function Home() {
const sensorData = useTracker(() => { const sensorData = useTracker(() => {
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch().reverse(); return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 10 }).fetch().reverse();
}); });
return ( if (sensorData.length <= 0) {
<> return (
<SensorCardDeck/> <CardDeck>
<Card>
<Card.Body>
<Card.Title>Loading!</Card.Title>
<Card.Text>Please wait...</Card.Text>
</Card.Body>
</Card>
</CardDeck>
)
} else {
return (
<>
<SensorCardDeck />
<Row> <Row>
<Col> <Col>
<ResponsiveContainer width='100%' height={375}> <ResponsiveContainer width='100%' height={375}>
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}> <LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
<Line type="monotone" dataKey="temperature" stroke="#10b5de" /> <Line type="monotone" dataKey="temperature" stroke="#10b5de" />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="timestampToString" /> <XAxis dataKey="timestampToString" />
<YAxis /> <YAxis />
<Tooltip /> <Tooltip />
<Legend /> <Legend />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</Col> </Col>
<Col> <Col>
<ResponsiveContainer width='100%' height={375}> <ResponsiveContainer width='100%' height={375}>
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}> <LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
<Line type="monotone" dataKey="humidity" stroke="#ff6f00" /> <Line type="monotone" dataKey="humidity" stroke="#ff6f00" />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="timestampToString" /> <XAxis dataKey="timestampToString" />
<YAxis /> <YAxis />
<Tooltip /> <Tooltip />
<Legend /> <Legend />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col> <Col>
<ResponsiveContainer width='100%' height={375}> <ResponsiveContainer width='100%' height={375}>
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}> <LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
<Line type="monotone" dataKey="brightness" stroke="#ffd500" /> <Line type="monotone" dataKey="brightness" stroke="#ffd500" />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="timestampToString" /> <XAxis dataKey="timestampToString" />
<YAxis /> <YAxis />
<Tooltip /> <Tooltip />
<Legend /> <Legend />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</Col> </Col>
<Col> <Col>
<ResponsiveContainer width='100%' height={375}> <ResponsiveContainer width='100%' height={375}>
<LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}> <LineChart data={sensorData} margin={{ top: 60, right: 60, bottom: 30, left: 5 }}>
<Line type="monotone" dataKey="moisture" stroke="#1c4399" /> <Line type="monotone" dataKey="moisture" stroke="#1c4399" />
<CartesianGrid stroke="#ccc" strokeDasharray="5 5"/> <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="timestampToString" /> <XAxis dataKey="timestampToString" />
<YAxis /> <YAxis />
<Tooltip /> <Tooltip />
<Legend /> <Legend />
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</Col> </Col>
</Row> </Row>
</> </>
) )
}
} }

70
imports/ui/SensorCardDeck.jsx
View File

@ -7,33 +7,45 @@ export default function SensorCardDeck() {
const sensorData = useTracker(() => { const sensorData = useTracker(() => {
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 1 }).fetch(); return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 1 }).fetch();
}); });
if (sensorData.length <= 0) {
return ( return (
<CardDeck> <CardDeck>
<Card> <Card>
<Card.Body> <Card.Body>
<Card.Title>Temperature</Card.Title> <Card.Title>Loading!</Card.Title>
<Card.Text>{sensorData[0].temperature} °C</Card.Text> <Card.Text>Please wait...</Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
<Card> </CardDeck>
<Card.Body> )
<Card.Title>Humidity</Card.Title> } else {
<Card.Text>{sensorData[0].humidity} %</Card.Text> return (
</Card.Body> <CardDeck>
</Card> <Card>
<Card> <Card.Body>
<Card.Body> <Card.Title>Temperature</Card.Title>
<Card.Title>Brightness</Card.Title> <Card.Text>{sensorData[0].temperature} °C</Card.Text>
<Card.Text>{sensorData[0].brightness} lux</Card.Text> </Card.Body>
</Card.Body> </Card>
</Card> <Card>
<Card> <Card.Body>
<Card.Body> <Card.Title>Humidity</Card.Title>
<Card.Title>Moisture</Card.Title> <Card.Text>{sensorData[0].humidity} %</Card.Text>
<Card.Text>{sensorData[0].moisture} %</Card.Text> </Card.Body>
</Card.Body> </Card>
</Card> <Card>
</CardDeck> <Card.Body>
) <Card.Title>Brightness</Card.Title>
<Card.Text>{sensorData[0].brightness} lux</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Body>
<Card.Title>Moisture</Card.Title>
<Card.Text>{sensorData[0].moisture} %</Card.Text>
</Card.Body>
</Card>
</CardDeck>
)
}
} }

3
package.json
View File

@ -2,7 +2,8 @@
"name": "smart_garden_server", "name": "smart_garden_server",
"private": true, "private": true,
"scripts": { "scripts": {
"start": "meteor run", "start": "MONGO_URL=mongodb://garden:99009911@cloud.timovolkmann.de:27017/Smart_Garden meteor run",
"plainstart": "meteor run",
"test": "meteor test --once --driver-package meteortesting:mocha", "test": "meteor test --once --driver-package meteortesting:mocha",
"test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha", "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
"visualize": "meteor --production --extra-packages bundle-visualizer" "visualize": "meteor --production --extra-packages bundle-visualizer"