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
  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", "plant": {
"type": "Sipuli", "id": "PLT01",
"description": "Sipulilajike joka maistuu hyvältä", "nimi": "Valkosipuli",
"imagefile": "../Photos/valkosipulivk1.jpeg", "type": "Sipuli",
"logfile_output": "/path/to/plant/log/file.log", "planting_day": "10.10.2019",
"istutuspv": "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"
},
"sensors": {
"sensor": { "moisture": {
"waterpump_1": { "enabled": true,
"pin": 23, "sensor_type": "common",
"pindirection": "out", "gpio_pin": 16,
"friendly_name": "Water pump (1)" "gpio_pin_initialstate": "LOW",
}, "gpio_pin_upstate": "HIGH",
"nutrientpump_1": { "sensor_friendly_name": "Moisture sensor (1)",
"pin": 24, "trigger_data_type": "dummy_on_off",
"pindirection": "out", "trigger_min": 0.00,
"friendly_name": "Nutrient pump (1)" "trigger_max": 1.00,
}, "time": {
"lightbulb_1": { "use_time": true,
"pin": 18, "months": {
"pindirection": "out", "1": true,
"friendly_name": "Light bulb (1)" "2": true,
}, "3": true,
"moisturedetect_1": { "4": true,
"pin": 16, "5": true,
"pindirection": "in", "6": true,
"friendly_name": "Moisture sensor (1)", "7": true,
"data": { "8": true,
"type": "pindata", "9": true,
"path": "", "10": true,
"parser": "" "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": { "devices_out": {
"pin": 26, "common": {
"pindirection": "in", "use_devices_out": true,
"friendly_name": "pH sensor (1)", "keepalivetime_min": 0.25,
"data": { "keepalivetime_max": 5.00
"type": "file", },
"path": "/path/to/raw/device/data", "devices_out_spec": [
"parser": "name-of-internal-python-parser-function" {
"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": { "devices_out": {
"friendly_name": "Temperature sensor (1)" "common": {
}, "use_devices_out": true,
"lightdetect_1": { "keepalivetime_min": 5.00,
"pin": 8, "keepalivetime_max": 600.00
"pindirection": "in", },
"friendly_name": "Light detection sensor (1)", "devices_out_spec": [
"data": { {
"type": "file", "enabled": true,
"path": "/path/to/raw/device/data", "gpio_pin": "",
"parser": "name-of-internal-python-parser-function" "gpio_pin_initialstate": "LOW",
} "gpio_pin_upstate": "HIGH",
"operation_type": "lighting",
"name": "light_1",
"friendly_name": "UV lamp (1)"
}
]
} }
}, },
"temperature": {
"feedplant": { "enabled": true,
"light": { "sensor_type": "temperature",
"time": { "device_type": "THERM_SENSOR_DS18B20",
"dates": ["mon, tue, wed, thu, fri, sat, sun"], "device_id": "",
"clock": ["06.30-12.00","14.00-19.00"], "sensor_friendly_name": "Temperature sensor (1)",
"clock_reverserange": false "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": [ { "weeks": {
"trigger_sensor": { "1": true,
"name": "lightdetect_1", "2": true,
"trigger_min": 5, "3": true,
"trigger_max": 10 "4": true
}, },
"activate_sensor": { "days": {
"name": "lightbulb_1", "mon": { "enabled": true , "interval": ["12.00", "18.00"] },
"ignoretrigger": false, "tue": { "enabled": true , "interval": ["08.00", "16.00"] },
"ignoredates": false, "wed": { "enabled": true , "interval": ["13.00", "20.00"] },
"ignoreclock": false, "thu": { "enabled": true , "interval": ["04.00", "12.00"] },
"minkeepalivetime": 5, "fri": { "enabled": true , "interval": ["12.00", "18.00"] },
"maxkeepalivetime": 0 "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": { "devices_out": {
"time": { "common": {
"dates": ["mon, tue, wed, thu, fri, sat, sun"], "use_devices_out": true,
"clock": ["00.00-23.59"], "keepalivetime_min": 0.25,
"clock_reverserange": false "keepalivetime_max": 500.00
}, },
"sensors": [ { "devices_out_spec": [
"trigger_sensor": { {
"name": "aciddetect_1", "enabled": true,
"trigger_min": 0.9, "gpio_pin": 25,
"trigger_max": 1.6 "gpio_pin_initialstate": "HIGH",
"gpio_pin_upstate": "LOW",
"operation_type": "warming",
"name": "warming_1",
"friendly_name": "Battery (1)"
}, },
"activate_sensor": { {
"name": "nutrientpump_1", "enabled": true,
"ignoretrigger": false, "gpio_pin": 26,
"ignoredates": false, "gpio_pin_initialstate": "HIGH",
"ignoreclo¿ck": false, "gpio_pin_upstate": "LOW",
"minkeepalivetime": 0.25, "operation_type": "cooling",
"maxkeepalivetime": 5 "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": { "devices_out": {
"time": { "common": {
"dates": ["mon, tue, wed, thu, fri, sat, sun"], "use_devices_out": true,
"clock": ["00.00-23.59"], "keepalivetime_min": 0.25,
"clock_reverserange": false "keepalivetime_max": 5.00
}, },
"sensors": [ { "devices_out_spec": [
"trigger_sensor": { {
"name": "moisturedetect_1", "enabled": true,
"trigger_min": 0, "gpio_pin": "",
"trigger_max": 1 "gpio_pin_initialstate": "LOW",
}, "gpio_pin_upstate": "HIGH",
"activate_sensor": { "operation_type": "fertilize",
"name": "waterpump_1", "name": "fert_1",
"ignoretrigger": false, "friendly_name": "Fertilizer pump (1)"
"ignoredates": false,
"ignoreclock": false,
"minkeepalivetime": 0.25,
"maxkeepalivetime": 5
} }
} ] ]
},
"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{ .wrapper {
font-size: 55px; 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; border: rgb(0, 0, 0) solid 1px;
font-size: 25px;
}
.plant2 h6{
font-size: 25px;
} }
.sys1 { .sys1 {
width: 40%; width: 90%;
margin-left:10px; margin-top: 20px;
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: 30px;
font-size: 35px;
} }
.home-wrapper { .home-wrapper {
display: flex; display: grid;
flex-direction: row; grid-template-columns: 1fr 1fr;
flex-wrap: wrap; position: fixed;
align-items: flex-start;
} }
.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> <h5>ID: {plant.id}</h5>
<h6>Tyyppi: {plant.type}</h6> <h5>Nimi: {plant.nimi}</h5>
<h6>Istutuspäivä: {plant.istutuspv}</h6> <h5>Tyyppi: {plant.type}</h5>
<img alt="Broken" src={plant.imagefile} width="200" ></img> <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> <h5>ID: PL2ID</h5>
<h6>Tyyppi: Kasvi2Tyyppi</h6> <h5>Nimi: Kasvi2</h5>
<h6>Istutuspäivä: Istutuspv2</h6> <h5>Tyyppi: Kasvi2Tyyppi</h5>
<img alt="Broken" src={plant.imagefile2} width="200" ></img> <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"> <div className="sensors">
<h5>System Information</h5> <div className="sys1">
<h6>Temperature: Pull system temp</h6> <h5>Sensor name: {moisture.sensor_friendly_name}</h5>
<h6>Kernel: Pull kernel info</h6> <h5>Connected to pin: {moisture.gpio_pin}</h5>
</div> </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
|||||||
|||||||
xxxxxxxxxx
 
​
000:0
​x
 
​
000:0
Loading…
Cancel
Save