style adjustments to first version

dederomagnolo · Nov 3, 2020 · fd7dfc2 · fd7dfc2
1 parent 052d4e8
commit fd7dfc2
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 60 deletions.
diff --git a/Local Station/bethere_local_station/bethere_local_station.ino b/Local Station/bethere_local_station/bethere_local_station.ino
@@ -28,18 +28,21 @@ DHT dht2(pinDHT2, typeDHT);
 DHT dht3(pinDHT3, typeDHT);
 
 // Network credentials
-char ssid[] = "Satan`s Connection";
-char password[] = "tininha157";
+//char ssid[] = "Satan`s Connection";
+//char password[] = "tininha157";
 //char ssid[] = "iPhone de Débora";
 //char password[] = "texas123";
+char ssid[] = "cogumelos";
+char password[] = "saocarlos";
 
 // Thingspeak credentials
 unsigned long myChannelNumber = 695672;
 const char * myWriteAPIKey = "ZY113X3ZSZG96YC8";
 
 // websocket infos
-const char* websocketServerHost = "192.168.0.34"; 
-const int websocketServerPort = 8080; 
+//const char* websocketServerHost = "192.168.0.34"; 
+//const int websocketServerPort = 8080; 
+const char* websocketServerHost = "https://bethere-be.herokuapp.com/"; 
 
 // Variables declaration
 int pumpFlag = 0; 
@@ -78,16 +81,17 @@ void setup() {
   WiFi.begin(ssid, password);
 
   while(WiFi.status() != WL_CONNECTED) {
-    delay(500);
-    Serial.println("...connecting!"); 
-    yield();
-    ESP.wdtFeed();
+  delay(500);
+  Serial.println("...connecting!"); 
+  yield();
+  ESP.wdtFeed();
   }
   Serial.println("BeThere connected! :D");
 
   // connect with websocket server
-  bool connected = wsclient.connect(websocketServerHost, websocketServerPort, "/");
-
+  // bool connected = wsclient.connect(websocketServerHost, websocketServerPort, "/");
+  bool connected = wsclient.connect(websocketServerHost);
+
   if(connected) {
     Serial.println("Connected with BeThere websocket server!");
     wsclient.send("Olar");
@@ -104,12 +108,22 @@ void setup() {
         if(message.data() == "1") {
           digitalWrite(pumpInputRelay, LOW);
           wsclient.send("Pump on!");
+        } else if(message.data() == "beat") {
+          int lastStat = digitalRead(pumpInputRelay);
+          digitalWrite(pumpInputRelay, lastStat);
+
+          if(lastStat == 1) {
+            wsclient.send("Pump on!");
+          } else {
+            wsclient.send("Pump off!");
+          }
+
         } else {
           digitalWrite(pumpInputRelay, HIGH);
           wsclient.send("Pump off!");
         }    
     });
-  
+
   ThingSpeak.begin(client);
 }
 
@@ -131,7 +145,8 @@ void loop() {
     yield();
   } else {
     Serial.println("reconnecting to websocket server...");
-    wsclient.connect(websocketServerHost, websocketServerPort, "/");
+    // wsclient.connect(websocketServerHost, websocketServerPort, "/");
+    wsclient.connect(websocketServerHost);
     wsclient.send("Be There is alive!"); 
   }
 
@@ -152,6 +167,8 @@ void loop() {
   // calculate the mean for internal sensors
   internalTemperature = (temperature + temperature2)/2;
   internalHumidity = (humidity + humidity2)/2;
+//  internalTemperature = temperature2;
+//  internalHumidity = humidity2;
 
   // Write the measures on LCD 
   lcd.setCursor(0, 0);
@@ -198,12 +215,12 @@ void loop() {
 
   delay(200);
 
-  // Just for debug - print in serial monitor
-  //  Serial.println("H:" + String(humidity) + "T:" + String(temperature));
-  //  Serial.println("H2:" + String(humidity2) + "T2:" + String(temperature2));
-  //  Serial.println("H3:" + String(externalHumidity) + "T3:" + String(externalTemperature));
-  //  Serial.println("Media T1 T2:" + String(internalTemperature));
-  //  Serial.println("Media H1 H2:" + String(internalHumidity));  
+  //Just for debug - print in serial monitor
+  Serial.println("H:" + String(humidity) + "T:" + String(temperature));
+  Serial.println("H2:" + String(humidity2) + "T2:" + String(temperature2));
+  Serial.println("H3:" + String(externalHumidity) + "T3:" + String(externalTemperature));
+  Serial.println("Media T1 T2:" + String(internalTemperature));
+  Serial.println("Media H1 H2:" + String(internalHumidity));  
 
   // TESTING: SEND MEASURES TO WEBSOCKET SERVER
   //  String measures = "H1:" + String(internalHumidity) + "T1:" +String(internalTemperature) + "H2:" + String(externalHumidity) + "T2:" + String(externalTemperature);

diff --git a/bethere-app/src/components/dashboard/graph.jsx b/bethere-app/src/components/dashboard/graph.jsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { ResponsiveLine } from '@nivo/line'; 
+import { GraphContainer } from './styles';
+
+export const Graph = ({chartData}) => {
+    return (
+        <GraphContainer>
+            {console.log(chartData)}
+            <ResponsiveLine
+                data={chartData}
+                margin={{ top: 10, right: 30, bottom: 50, left: 60 }}
+                xScale={{ type: 'point', stacked: true }}
+                yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: false, reverse: false }}
+                axisTop={null}
+                axisRight={null}
+                axisBottom={{
+                    orient: 'bottom',
+                    tickSize: 10,
+                    tickPadding: 5,
+                    tickRotation: 80,
+                    legendOffset: 20,
+                    legendPosition: 'middle',
+                }}
+                curve="monotoneX"
+                axisLeft={{
+                    orient: 'left',
+                    tickSize: 5,
+                    tickPadding: 5,
+                    tickRotation: 0,
+                    legend: 'measure',
+                    legendOffset: -40,
+                    legendPosition: 'middle'
+                }}
+                colors={{ scheme: 'nivo' }}
+                pointSize={2}
+                pointColor={{ theme: 'background' }}
+                pointBorderWidth={8}
+                pointBorderColor={{ from: 'serieColor' }}
+                pointLabel="y"
+                pointLabelYOffset={-10}
+                useMesh={true}
+                legends={[
+                    {
+                        anchor: 'top',
+                        direction: 'column',
+                        justify: false,
+                        translateX: 100,
+                        translateY: 0,
+                        itemsSpacing: 0,
+                        itemDirection: 'left-to-right',
+                        itemWidth: 80,
+                        itemHeight: 20,
+                        itemOpacity: 0.75,
+                        symbolSize: 12,
+                        symbolShape: 'circle',
+                        symbolBorderColor: 'rgba(0, 0, 0, .5)',
+                        effects: [
+                            {
+                                on: 'hover',
+                                style: {
+                                    itemBackground: 'rgba(0, 0, 0, .03)',
+                                    itemOpacity: 1
+                                }
+                            }
+                        ]
+                    }
+                ]}
+            />
+        </GraphContainer>
+    );
+}
diff --git a/bethere-app/src/components/dashboard/index.jsx b/bethere-app/src/components/dashboard/index.jsx
@@ -10,7 +10,7 @@ import {Cards, MainContainer} from './styles';
 import {Graph} from './graph';
 
 const base_channel_url = "https://api.thingspeak.com/channels/695672"
-const bethereUrl = "http://localhost:4000";
+const bethereUrl = "https://bethere-be.herokuapp.com";
 
 const initialState = {
     measures: { 
@@ -26,9 +26,10 @@ export const Dashboard = () => {
     const [blockButtonFlag, setBlockButtonFlag] = useState(false);
     const [timeLeft, setTimeLeft] = useState(null);
     const [measures, setMeasures] = useState(initialState.measures);
-    const [chartData, setChartData] = useState([]);
     const [temperatureData, setTemperatureData] = useState([]);
     const [humidityData, setHumidityData] = useState([]);
+    const [showTemperatureChart, setShowTemperatureChart] = useState(true);
+    const [showHumidityChart, setShowHumidityChart] = useState(false);
     // Week Logics
     /* const lastWeekStartDate = moment().subtract(5, 'days').format("YYYY-MM-DD"); */
     /* const queryStart = `${lastWeekStartDate}%2000:00:00`; */
@@ -59,7 +60,7 @@ export const Dashboard = () => {
             }
             setMeasures(measuresFromRemote);
 
-            if(lastPumpStatus == 1) {
+            if(lastPumpStatus === "1") {
                 setPumpFlag(true);
             } 
         } catch(err) {
@@ -81,43 +82,45 @@ export const Dashboard = () => {
                 const weekFeed = _.get(response, 'data.feeds');
                 const weekFeedSlice = _.slice(weekFeed, 50);
                 const data = [];
-                _.each(weekFeed, (entry, index) => {
-                    if(isOdd(index)) {
+                await _.each(weekFeed, (entry, index) => {
+                    // if(isOdd(index)) {
                         const created_at = _.get(entry, 'created_at');
                         const fieldMeasure = _.get(entry, `field${fieldNumber}`);
                         data.push({
                             "x": moment(created_at).format('hh:mm:ss'),
                             "y": fieldMeasure && fieldMeasure !== "nan" ? Number(fieldMeasure).toFixed(2) : 31.8
                         });
-                    }
+                    // }
                 });
-
-                setChartData((chartData) => [...chartData, {
-                    "id": setMeasureId(fieldNumber),
-                    "color": setColorId(fieldNumber),
-                    "data": data
-                }]);
+
+                console.log(data);
+
+                if(fieldNumber === 4 || fieldNumber === 6) { // internal temperature and external temperature
+                    setTemperatureData((temperatureData) => [...temperatureData, {
+                        "id" : setMeasureId(fieldNumber),
+                        "color": setColorId(fieldNumber),
+                        "data": data
+                    }]);
+                } else {
+                    setHumidityData((humidityData) => [...humidityData, {
+                        "id" : setMeasureId(fieldNumber),
+                        "color": setColorId(fieldNumber),
+                        "data": data
+                    }]);
+                }
+
             } catch(err) {
                 console.log(err);
             }
         }
 
         updateFields(4);
         updateFields(6);
-/*         updateFields(3);
-        updateFields(5); */
+        updateFields(3);
+        updateFields(5);
 
     }, []);
 
-    useEffect(() => {
-        console.log(chartData);
-        const temperatureChartData = [chartData[0], chartData[1]];
-/*         const humidityChartData = [chartData[2], chartData[3]];
-        console.log(temperatureChartData); */
-        console.log(temperatureChartData);
-        setTemperatureData(temperatureChartData);
-        /* setHumidityData(humidityChartData); */
-    }, [chartData])
 
     useEffect(() => {
         if(timeLeft === 0){
@@ -130,7 +133,7 @@ export const Dashboard = () => {
         }, 1000);
 
         return () => clearInterval(intervalId);
-    }, [timeLeft])
+    }, [timeLeft]);
 
     const updatePump = async () => { 
         try{
@@ -159,6 +162,8 @@ export const Dashboard = () => {
 
     return (
         <MainContainer>
+            {console.log(temperatureData)}
+            {console.log(humidityData)}
             <Header title="Dashboard"/>
             <div>
                 {/* <span style={{fontSize: "20px"}}>Hello! Your garden looks good today:</span> */}
@@ -167,13 +172,21 @@ export const Dashboard = () => {
                         label={"Temperature (°C)"} 
                         icon={"thermometer half"} 
                         internalMeasure={measures.internalTemperature} 
-                        externalMeasure={measures.externalTemperature} 
+                        externalMeasure={measures.externalTemperature}
+                        onClick={() => {
+                            setShowTemperatureChart(true);
+                            setShowHumidityChart(false);
+                        }}
                     />
                     <NewCard 
                         label={"Humidity (%)"} 
                         icon={"tint"} 
                         internalMeasure={measures.internalHumidity} 
                         externalMeasure={measures.externalHumidity} 
+                        onClick={() => {
+                            setShowHumidityChart(true)
+                            setShowTemperatureChart(false);
+                        }}
                     />
                     <NewCard 
                         label={"Pump Control"} 
@@ -183,21 +196,19 @@ export const Dashboard = () => {
                             <div>
                                 <Toggle 
                                     backgroundColorChecked="#3bea64" 
-                                    disabled={blockButtonFlag} 
+                                    disabled={true} 
                                     checked={pumpFlag} 
                                     onChange={() => updatePump()}
                                 />
-                                <div>{blockButtonFlag ? `Wait ${timeLeft} seconds to send another command` : "Available!"}</div>
+                                <div>{blockButtonFlag ? `Wait ${timeLeft} seconds to send another command` : "Disabled!"}</div>
                             </div>
                             }
                     >
                     </NewCard>
                 </Cards>
-                {chartData.length > 0 && temperatureData.length > 0 && 
-                    <>
-                        <Graph chartData={chartData}/>
-                        {/* <Graph chartData={humidityData} /> */}
-                    </>}
+                {showTemperatureChart && temperatureData.length > 0 && <Graph chartData={temperatureData}/>}
+                {showHumidityChart && humidityData.length > 0 && <Graph chartData={humidityData}/>}
+                {/* {chartData.length > 0 && <Graph chartData={temperatureData}/>} */}
             </div>
         </MainContainer>
     );

diff --git a/bethere-app/src/components/menuBar/index.jsx b/bethere-app/src/components/menuBar/index.jsx
@@ -14,12 +14,12 @@ const MenuBar = () => {
       Icon: () => <ChartBar />,
       text: 'Charts',
       path: '/charts'
-    },
-    {
+    }
+/*     {
       Icon: () => <Adjustments />,
       text: 'Settings',
       path: '/settings'
-    }
+    } */
   ]
   return (
     <Container>

diff --git a/bethere-app/src/components/newCard/index.js b/bethere-app/src/components/newCard/index.js
@@ -10,10 +10,10 @@ import {
 } from './styles';
 import { Icon } from 'semantic-ui-react';
 
-export const NewCard = ({label, icon, internalMeasure, externalMeasure, pump, children}) => {
+export const NewCard = ({label, icon, internalMeasure, externalMeasure, pump, children, onClick}) => {
 
     return(
-        <CardContainer>
+        <CardContainer onClick={() => onClick && onClick()}>
             <InnerCard>
                 <CardLabel>
                     <Icon name={icon}/>