kasviloordi
/
tinyforest-frontend
mirror of https://github.com/NikoHakala/tinyforest
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Browse Source

json stuff

master
Niko Hakala 5 years ago
parent
921bedbcda
commit
c19c713ad1
8 changed files with 367 additions and 178 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/Photos/jarjestelma07112019.jpg
  2. +1
    -1
      public/index.html
  3. +266
    -118
      public/plantinfo.json
  4. +23
    -35
      src/App.css
  5. +8
    -4
      src/Components/Home.js
  6. +11
    -11
      src/Components/Plants.js
  7. +58
    -8
      src/Components/Sysinfo.js
  8. +0
    -1
      src/logo.svg

BIN
public/Photos/jarjestelma07112019.jpg View File

Before After
Width: 1600  |  Height: 900  |  Size: 117 KiB

+ 1
- 1
public/index.html View File

@ -23,7 +23,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title>
<title>TinyForest</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>


+ 266
- 118
public/plantinfo.json View File

@ -1,136 +1,284 @@
{ {
"id": "Valkosipuli",
"type": "Sipuli",
"description": "Sipulilajike joka maistuu hyvältä",
"imagefile": "../Photos/valkosipulivk1.jpeg",
"logfile_output": "/path/to/plant/log/file.log",
"istutuspv": "10.10.2019",
"plant": {
"id": "PLT01",
"nimi": "Valkosipuli",
"type": "Sipuli",
"planting_day": "10.10.2019",
"short_description": "Sipulikasvi, joka maistuu hyvältä",
"long_description": "Sipulikasvi, joka maistuu hyvältä ja viihtyy hyvin",
"imagefile": "../Photos/valkosipulivk1.jpeg",
"logfile": "/path/to/plant/log/file.log"
},
"sensor": {
"waterpump_1": {
"pin": 23,
"pindirection": "out",
"friendly_name": "Water pump (1)"
},
"nutrientpump_1": {
"pin": 24,
"pindirection": "out",
"friendly_name": "Nutrient pump (1)"
},
"lightbulb_1": {
"pin": 18,
"pindirection": "out",
"friendly_name": "Light bulb (1)"
},
"moisturedetect_1": {
"pin": 16,
"pindirection": "in",
"friendly_name": "Moisture sensor (1)",
"data": {
"type": "pindata",
"path": "",
"parser": ""
"sensors": {
"moisture": {
"enabled": true,
"sensor_type": "common",
"gpio_pin": 16,
"gpio_pin_initialstate": "LOW",
"gpio_pin_upstate": "HIGH",
"sensor_friendly_name": "Moisture sensor (1)",
"trigger_data_type": "dummy_on_off",
"trigger_min": 0.00,
"trigger_max": 1.00,
"time": {
"use_time": true,
"months": {
"1": true,
"2": true,
"3": true,
"4": true,
"5": true,
"6": true,
"7": true,
"8": true,
"9": true,
"10": true,
"11": true,
"12": true
},
"weeks": {
"1": true,
"2": true,
"3": true,
"4": true
},
"days": {
"mon": { "enabled": true, "interval": ["12.00", "18.00"] },
"tue": { "enabled": true, "interval": ["08.00", "16.00"] },
"wed": { "enabled": true, "interval": ["13.00", "20.00"] },
"thu": { "enabled": true, "interval": ["04.00", "12.00"] },
"fri": { "enabled": true, "interval": ["12.00", "18.00"] },
"sat": { "enabled": true, "interval": ["06.00", "14.00"] },
"sun": { "enabled": true, "interval": ["15.00", "23.59"] }
} }
}, },
"aciddetect_1": {
"pin": 26,
"pindirection": "in",
"friendly_name": "pH sensor (1)",
"data": {
"type": "file",
"path": "/path/to/raw/device/data",
"parser": "name-of-internal-python-parser-function"
"devices_out": {
"common": {
"use_devices_out": true,
"keepalivetime_min": 0.25,
"keepalivetime_max": 5.00
},
"devices_out_spec": [
{
"enabled": true,
"gpio_pin": 23,
"gpio_pin_initialstate": "LOW",
"gpio_pin_upstate": "HIGH",
"operation_type": "irrigation",
"name": "pump_1",
"friendly_name": "Water pump (1)"
},
{
"enabled": true,
"gpio_pin": 24,
"gpio_pin_initialstate": "LOW",
"gpio_pin_upstate": "HIGH",
"operation_type": "irrigation",
"name": "pump_2",
"friendly_name": "Water pump (2)"
}
]
}
},
"light": {
"enabled": true,
"sensor_type": "common",
"gpio_pin": "",
"gpio_pin_initialstate": "LOW",
"gpio_pin_upstate": "HIGH",
"sensor_friendly_name": "Light sensor (1)",
"trigger_data_type": "i2c_device: 200",
"trigger_min": 0.00,
"trigger_max": 1.00,
"time": {
"use_time": true,
"months": {
"1": true,
"2": true,
"3": true,
"4": true,
"5": true,
"6": true,
"7": true,
"8": true,
"9": true,
"10": true,
"11": true,
"12": true
},
"weeks": {
"1": true,
"2": true,
"3": true,
"4": true
},
"days": {
"mon": { "enabled": true , "interval": ["12.00", "18.00"] },
"tue": { "enabled": true , "interval": ["08.00", "16.00"] },
"wed": { "enabled": true , "interval": ["13.00", "20.00"] },
"thu": { "enabled": true , "interval": ["04.00", "12.00"] },
"fri": { "enabled": true , "interval": ["12.00", "18.00"] },
"sat": { "enabled": true , "interval": ["06.00", "14.00"] },
"sun": { "enabled": true , "interval": ["15.00", "23.59"] }
} }
}, },
"tempdetect_1": {
"friendly_name": "Temperature sensor (1)"
},
"lightdetect_1": {
"pin": 8,
"pindirection": "in",
"friendly_name": "Light detection sensor (1)",
"data": {
"type": "file",
"path": "/path/to/raw/device/data",
"parser": "name-of-internal-python-parser-function"
}
"devices_out": {
"common": {
"use_devices_out": true,
"keepalivetime_min": 5.00,
"keepalivetime_max": 600.00
},
"devices_out_spec": [
{
"enabled": true,
"gpio_pin": "",
"gpio_pin_initialstate": "LOW",
"gpio_pin_upstate": "HIGH",
"operation_type": "lighting",
"name": "light_1",
"friendly_name": "UV lamp (1)"
}
]
} }
}, },
"feedplant": {
"light": {
"time": {
"dates": ["mon, tue, wed, thu, fri, sat, sun"],
"clock": ["06.30-12.00","14.00-19.00"],
"clock_reverserange": false
"temperature": {
"enabled": true,
"sensor_type": "temperature",
"device_type": "THERM_SENSOR_DS18B20",
"device_id": "",
"sensor_friendly_name": "Temperature sensor (1)",
"time": {
"use_time": true,
"months": {
"1": true,
"2": true,
"3": true,
"4": true,
"5": true,
"6": true,
"7": true,
"8": true,
"9": true,
"10": true,
"11": true,
"12": true
}, },
"sensors": [ {
"trigger_sensor": {
"name": "lightdetect_1",
"trigger_min": 5,
"trigger_max": 10
},
"activate_sensor": {
"name": "lightbulb_1",
"ignoretrigger": false,
"ignoredates": false,
"ignoreclock": false,
"minkeepalivetime": 5,
"maxkeepalivetime": 0
}
} ]
"weeks": {
"1": true,
"2": true,
"3": true,
"4": true
},
"days": {
"mon": { "enabled": true , "interval": ["12.00", "18.00"] },
"tue": { "enabled": true , "interval": ["08.00", "16.00"] },
"wed": { "enabled": true , "interval": ["13.00", "20.00"] },
"thu": { "enabled": true , "interval": ["04.00", "12.00"] },
"fri": { "enabled": true , "interval": ["12.00", "18.00"] },
"sat": { "enabled": true , "interval": ["06.00", "14.00"] },
"sun": { "enabled": true , "interval": ["15.00", "23.59"] }
}
},
"temperature": {
"format": "celsius",
"baseline": 30.00,
"threshold": 0.10,
"tolerance": 4.00,
"precision": 12
}, },
"nutrient": {
"time": {
"dates": ["mon, tue, wed, thu, fri, sat, sun"],
"clock": ["00.00-23.59"],
"clock_reverserange": false
"devices_out": {
"common": {
"use_devices_out": true,
"keepalivetime_min": 0.25,
"keepalivetime_max": 500.00
}, },
"sensors": [ {
"trigger_sensor": {
"name": "aciddetect_1",
"trigger_min": 0.9,
"trigger_max": 1.6
"devices_out_spec": [
{
"enabled": true,
"gpio_pin": 25,
"gpio_pin_initialstate": "HIGH",
"gpio_pin_upstate": "LOW",
"operation_type": "warming",
"name": "warming_1",
"friendly_name": "Battery (1)"
}, },
"activate_sensor": {
"name": "nutrientpump_1",
"ignoretrigger": false,
"ignoredates": false,
"ignoreclo¿ck": false,
"minkeepalivetime": 0.25,
"maxkeepalivetime": 5
{
"enabled": true,
"gpio_pin": 26,
"gpio_pin_initialstate": "HIGH",
"gpio_pin_upstate": "LOW",
"operation_type": "cooling",
"name": "cooling_1",
"friendly_name": "Cooling box (1)"
} }
} ]
]
}
},
"acidity": {
"enabled": true,
"sensor_type": "common",
"gpio_pin": "",
"gpio_pin_initialstate": "LOW",
"gpio_pin_upstate": "HIGH",
"sensor_friendly_name": "pH sensor (1)",
"trigger_data_type": "i2c_device: 200",
"trigger_min": 0.00,
"trigger_max": 1.00,
"time": {
"use_time": true,
"months": {
"1": true,
"2": true,
"3": true,
"4": true,
"5": true,
"6": true,
"7": true,
"8": true,
"9": true,
"10": true,
"11": true,
"12": true
},
"weeks": {
"1": true,
"2": true,
"3": true,
"4": true
},
"days": {
"mon": { "enabled": true , "interval": ["12.00", "18.00"] },
"tue": { "enabled": true , "interval": ["08.00", "16.00"] },
"wed": { "enabled": true , "interval": ["13.00", "20.00"] },
"thu": { "enabled": true , "interval": ["04.00", "12.00"] },
"fri": { "enabled": true , "interval": ["12.00", "18.00"] },
"sat": { "enabled": true , "interval": ["06.00", "14.00"] },
"sun": { "enabled": true , "interval": ["15.00", "23.59"] }
}
}, },
"moisture": {
"time": {
"dates": ["mon, tue, wed, thu, fri, sat, sun"],
"clock": ["00.00-23.59"],
"clock_reverserange": false
"devices_out": {
"common": {
"use_devices_out": true,
"keepalivetime_min": 0.25,
"keepalivetime_max": 5.00
}, },
"sensors": [ {
"trigger_sensor": {
"name": "moisturedetect_1",
"trigger_min": 0,
"trigger_max": 1
},
"activate_sensor": {
"name": "waterpump_1",
"ignoretrigger": false,
"ignoredates": false,
"ignoreclock": false,
"minkeepalivetime": 0.25,
"maxkeepalivetime": 5
"devices_out_spec": [
{
"enabled": true,
"gpio_pin": "",
"gpio_pin_initialstate": "LOW",
"gpio_pin_upstate": "HIGH",
"operation_type": "fertilize",
"name": "fert_1",
"friendly_name": "Fertilizer pump (1)"
} }
} ]
},
"temperature": {
"format": "celcius",
"baselinevalue": 22,
"threshold": 4,
"decimals": 3,
"loglevel": 0
]
} }
} }
}
}
}

+ 23
- 35
src/App.css View File

@ -2,17 +2,15 @@
text-align: center; text-align: center;
} }
.wrapper h2{
font-size: 55px;
.wrapper {
background: rgba(245, 245, 245, 0.6);
padding: 10px;
} }
.wrapper{
.wrapperSys {
background: rgba(245, 245, 245, 0.6); background: rgba(245, 245, 245, 0.6);
width: 90%;
padding: 10px; padding: 10px;
font-size: 40px;
} }
.plants { .plants {
width: 60%; width: 60%;
display: grid; display: grid;
@ -21,46 +19,34 @@
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.sensors {
display: grid;
grid-column-gap: 2px;
grid-row-gap: 2px;
grid-template-columns: 1fr 1fr;
}
.plant1 { .plant1 {
background: rgb(240, 240, 240); background: rgb(240, 240, 240);
text-align: center; text-align: center;
border: rgb(0, 0, 0) solid 1px; border: rgb(0, 0, 0) solid 1px;
font-size: 25px;
}
.plant1 h6{
font-size: 25px;
} }
.plant2 { .plant2 {
margin-left:10px; margin-left:10px;
background: rgb(240, 240, 240); background: rgb(240, 240, 240);
text-align: center; text-align: center;
border: rgb(0, 0, 0) solid 1px;
font-size: 25px;
}
.plant2 h6{
font-size: 25px;
border: rgb(0, 0, 0) solid 1px;
} }
.sys1 { .sys1 {
width: 40%;
margin-left:10px;
margin-top:20px;
width: 90%;
margin-top: 20px;
background: rgb(240, 240, 240); background: rgb(240, 240, 240);
text-align: center; text-align: center;
border: rgb(0, 0, 0) solid 2px; border: rgb(0, 0, 0) solid 2px;
} }
.sys1 h6{
font-size: 25px;
}
.sys1 h5{
font-size: 35px;
}
.Modaldiv{ .Modaldiv{
margin-top: 50px; margin-top: 50px;
margin-left: 300px; margin-left: 300px;
@ -83,17 +69,19 @@
} }
.navbar-brand{ .navbar-brand{
padding: 3px;
font-size: 35px;
font-size: 30px;
} }
.home-wrapper { .home-wrapper {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
display: grid;
grid-template-columns: 1fr 1fr;
position: fixed;
} }
.hometext { .hometext {
padding: 20px;
padding: 15px;
} }
.gridimages {
padding: 5px;
}

+ 8
- 4
src/Components/Home.js View File

@ -10,7 +10,7 @@ import MultipleGridImages from 'react-multiple-image-grid'
const Home = () => { const Home = () => {
return ( return (
<div className="home-wrapper"> <div className="home-wrapper">
<div className="gridimages" style={{width: '50%'}}>
<div className="gridimages">
<MultipleGridImages images={[ <MultipleGridImages images={[
"../Photos/kokous1.jpeg", "../Photos/kokous1.jpeg",
"../Photos/kolvaus1.jpeg", "../Photos/kolvaus1.jpeg",
@ -23,12 +23,16 @@ const Home = () => {
"../Photos/rpiTemp.jpeg", "../Photos/rpiTemp.jpeg",
"../Photos/valkosipulivk1.jpeg", "../Photos/valkosipulivk1.jpeg",
"../Photos/valkosipulivk2.jpg", "../Photos/valkosipulivk2.jpg",
"../Photos/valkosipulivk3.jpg"]}/>
"../Photos/valkosipulivk3.jpg",
"../Photos/jarjestelma07112019.jpg"]}/>
</div> </div>
<div className="hometext"> <div className="hometext">
<h3>About</h3>
<h3>Monialaprojekti TinyForest</h3>
<p> <p>
Tekstiä
Projektimme tarkoitus on tuottaa järjestelmä joka automatisoi kasvien kasvatusta ja monitoroi lämpötilaa, kosteutta ja valoa.
</p>
<p>
Projektin osalliset ovat Juska Forelius (Projektipäällikkö), Niko Hakala, Konstantin Gurin ja Pekka Helenius.
</p> </p>
</div> </div>
</div> </div>


+ 11
- 11
src/Components/Plants.js View File

@ -16,7 +16,7 @@ const Plants = () => {
const jsonFetch = () => { const jsonFetch = () => {
fetch('../plantinfo.json') fetch('../plantinfo.json')
.then((res) => res.json()) .then((res) => res.json())
.then(data => setPlant(data))
.then(data => setPlant(data.plant))
.catch(err => console.error(err)) .catch(err => console.error(err))
} }
@ -27,19 +27,19 @@ const Plants = () => {
<div className="wrapper"> <div className="wrapper">
<h2 style={{padding:10}}>Plant Information</h2> <h2 style={{padding:10}}>Plant Information</h2>
<div className="plants"> <div className="plants">
<div className="plant1"> <div className="plant1">
<h6>Nimi: {plant.id}</h6>
<h6>Tyyppi: {plant.type}</h6>
<h6>Istutuspäivä: {plant.istutuspv}</h6>
<img alt="Broken" src={plant.imagefile} width="200" ></img>
<h5>ID: {plant.id}</h5>
<h5>Nimi: {plant.nimi}</h5>
<h5>Tyyppi: {plant.type}</h5>
<h5>Istutuspäivä: {plant.planting_day}</h5>
<img alt="No_image" title={plant.short_description} src={plant.imagefile} width="200" ></img>
</div> </div>
<div className="plant2"> <div className="plant2">
<h6>Nimi: Kasvi2</h6>
<h6>Tyyppi: Kasvi2Tyyppi</h6>
<h6>Istutuspäivä: Istutuspv2</h6>
<img alt="Broken" src={plant.imagefile2} width="200" ></img>
<h5>ID: PL2ID</h5>
<h5>Nimi: Kasvi2</h5>
<h5>Tyyppi: Kasvi2Tyyppi</h5>
<h5>Istutuspäivä: kasvi2ispv</h5>
<img alt="No_image" src={plant.imagefile2} width="200" ></img>
</div> </div>
</div> </div>
</div> </div>


+ 58
- 8
src/Components/Sysinfo.js View File

@ -1,12 +1,52 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
const Sysinfo = () => { const Sysinfo = () => {
const [moisture, setMoisture] = useState([]);
const [light, setLight] = useState([]);
const [temperature, setTemperature] = useState([]);
useEffect(() => {
fetchMoisture();
fetchLight();
fetchTemperature();
}, [])
const fetchMoisture = () => {
fetch('../plantinfo.json')
.then((res) => res.json())
.then(data => setMoisture(data.sensors.moisture))
.catch(err => console.error(err))
}
const fetchLight = () => {
fetch('../plantinfo.json')
.then((res) => res.json())
.then(data => setLight(data.sensors.light))
.catch(err => console.error(err))
}
const fetchTemperature = () => {
fetch('../plantinfo.json')
.then((res) => res.json())
.then(data => setTemperature(data.sensors.temperature))
.catch(err => console.error(err))
}
console.log(moisture.sensor_friendly_name)
console.log(light.sensor_friendly_name)
console.log(temperature.sensor_friendly_name)
//console.log(sensors.light)
//console.log(sensors.temperature)
//console.log(sensors.acidity)
// TODO Pull system info etc. // TODO Pull system info etc.
//const [sysinfo, setSysinfo] = useState([]); //const [sysinfo, setSysinfo] = useState([]);
// const jsonFetch = () => {
//const jsonFetch = () => {
// fetch('../sysinfo.json') // fetch('../sysinfo.json')
// .then((res) => res.json()) // .then((res) => res.json())
// .then(data => setSysinfo(data)) // .then(data => setSysinfo(data))
@ -15,13 +55,23 @@ const Sysinfo = () => {
return ( return (
<div> <div>
<div className="wrapper">
<div className="wrapperSys">
<h2 style={{padding:10}}>System Information</h2> <h2 style={{padding:10}}>System Information</h2>
<div className="sys1">
<h5>System Information</h5>
<h6>Temperature: Pull system temp</h6>
<h6>Kernel: Pull kernel info</h6>
</div>
<div className="sensors">
<div className="sys1">
<h5>Sensor name: {moisture.sensor_friendly_name}</h5>
<h5>Connected to pin: {moisture.gpio_pin}</h5>
</div>
<div className="sys1">
<h5>Sensor name: {light.sensor_friendly_name}</h5>
<h5>Connected to pin: {light.gpio_pin}</h5>
</div>
<div className="sys1">
<h5>Sensor name: {temperature.sensor_friendly_name}</h5>
<h5>Connected to pin: {temperature.gpio_pin}</h5>
</div>
</div>
</div> </div>
</div> </div>
); );


+ 0
- 1
src/logo.svg
File diff suppressed because it is too large
View File


Write Preview
Loading…
Cancel
Save