diff --git a/.gitignore b/.gitignore
index 38adffa64e8300a31b749218081149e1fe3deaaa..4356310f89054fdbdd022499f08f7728caf19050 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,7 @@ coverage
*.njsproj
*.sln
*.sw?
+
+__pycache__/
+env/
+archive.zip
diff --git a/app.py b/app.py
new file mode 100644
index 0000000000000000000000000000000000000000..4fbabd10ba15b8586c15c1c557ae087a22749e01
--- /dev/null
+++ b/app.py
@@ -0,0 +1,36 @@
+from flask import Flask, jsonify, render_template, send_from_directory
+from flask_cors import CORS
+
+app = Flask(__name__, static_folder="./dist/assets", template_folder="./dist")
+CORS(app)
+
+
+@app.route("/")
+def main():
+ return render_template("index.html")
+
+
+@app.route("/values")
+def values():
+ values = [{"N": 10}, {"P": 11}, {"K": 12}, {"T": 5}, {"H": 6}, {"M": 7}]
+ return jsonify(values)
+
+@app.route("/past-values")
+def pastValues():
+ past_values = {"npkData": {
+ "nitrogen": [10, 22, 15, 18, 25, 30, 35],
+ "phosphorus": [5, 8, 10, 12, 20, 22, 25],
+ "potassium": [8, 12, 13, 17, 23, 28, 33]
+ },
+ "thmData": {
+ "temperature": [4, 15, 16, 18, 20, 10, 12],
+ "humidity": [25, 12, 2, 22, 19, 16, 25],
+ "moisture": [8, 12, 13, 33, 23, 28, 10]
+ }}
+ return jsonify(past_values)
+
+
+@app.route('/favicon.ico')
+def favicon():
+ return send_from_directory(app.template_folder,
+ 'favicon.ico', mimetype='image/vnd.microsoft.icon')
diff --git a/deploy.sh b/deploy.sh
new file mode 100755
index 0000000000000000000000000000000000000000..baa69e92a5f9aff2dd4ddd05dad364a335997a36
--- /dev/null
+++ b/deploy.sh
@@ -0,0 +1,48 @@
+#!/bin/bash -ex
+
+# Check if npm is installed
+if ! hash npm 2>/dev/null; then
+ echo "Error: npm is not installed."
+ exit 1
+fi
+
+# Check if zip is installed
+if ! hash zip 2>/dev/null; then
+ echo "Error: zip is not installed."
+ exit 1
+fi
+
+# Remove 'dist' and 'node_modules' directories if they exist
+echo "Cleaning up old 'dist' and 'node_modules' directories..."
+rm -rf dist node_modules
+
+# Run npm install
+echo "Running npm install..."
+npm ci
+
+# Run npm build
+echo "Running npm run build..."
+npm run build
+
+# Check if the build was successful and 'dist' directory exists
+if [ ! -d "dist" ]; then
+ echo "Error: 'dist' directory not found. Build may have failed."
+ exit 1
+fi
+
+# Check if 'requirements.txt' exists
+if [ ! -f "requirements.txt" ]; then
+ echo "Error: 'requirements.txt' file not found."
+ exit 1
+fi
+
+# Check if 'app.py' exists
+if [ ! -f "app.py" ]; then
+ echo "Error: 'app.py' file not found."
+ exit 1
+fi
+
+# Create a zip file
+zip -r archive.zip requirements.txt app.py dist
+
+echo "Archive 'archive.zip' created successfully."
diff --git a/index.html b/index.html
index 99f583aa2b835f6885f2c233a0e1f6d395fa42af..c6c273042ea8548696e9c233e88fd30a2b24df91 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
diff --git a/package-lock.json b/package-lock.json
index f9a8c4c079c63749fc793de9cfc67f549985bc67..29d62574b2eb4cdb3c213bc186537d0f64c155c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
"name": "nanopatch",
"version": "0.0.0",
"dependencies": {
+ "axios": "^1.6.2",
+ "bootstrap": "^5.3.2",
+ "chart.js": "^4.4.0",
"vue": "^3.3.4"
},
"devDependencies": {
@@ -383,6 +386,21 @@
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
},
+ "node_modules/@kurkle/color": {
+ "version": "0.3.2",
+ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+ "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+ },
+ "node_modules/@popperjs/core": {
+ "version": "2.11.8",
+ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+ "peer": true,
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/popperjs"
+ }
+ },
"node_modules/@vitejs/plugin-vue": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.4.1.tgz",
@@ -498,11 +516,74 @@
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz",
"integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw=="
},
+ "node_modules/asynckit": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+ "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+ },
+ "node_modules/axios": {
+ "version": "1.6.2",
+ "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+ "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+ "dependencies": {
+ "follow-redirects": "^1.15.0",
+ "form-data": "^4.0.0",
+ "proxy-from-env": "^1.1.0"
+ }
+ },
+ "node_modules/bootstrap": {
+ "version": "5.3.2",
+ "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+ "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+ "funding": [
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/twbs"
+ },
+ {
+ "type": "opencollective",
+ "url": "https://opencollective.com/bootstrap"
+ }
+ ],
+ "peerDependencies": {
+ "@popperjs/core": "^2.11.8"
+ }
+ },
+ "node_modules/chart.js": {
+ "version": "4.4.0",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.0.tgz",
+ "integrity": "sha512-vQEj6d+z0dcsKLlQvbKIMYFHd3t8W/7L2vfJIbYcfyPcRx92CsHqECpueN8qVGNlKyDcr5wBrYAYKnfu/9Q1hQ==",
+ "dependencies": {
+ "@kurkle/color": "^0.3.0"
+ },
+ "engines": {
+ "pnpm": ">=7"
+ }
+ },
+ "node_modules/combined-stream": {
+ "version": "1.0.8",
+ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+ "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+ "dependencies": {
+ "delayed-stream": "~1.0.0"
+ },
+ "engines": {
+ "node": ">= 0.8"
+ }
+ },
"node_modules/csstype": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
"integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
},
+ "node_modules/delayed-stream": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+ "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+ "engines": {
+ "node": ">=0.4.0"
+ }
+ },
"node_modules/esbuild": {
"version": "0.18.20",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -545,6 +626,38 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
},
+ "node_modules/follow-redirects": {
+ "version": "1.15.3",
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+ "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+ "funding": [
+ {
+ "type": "individual",
+ "url": "https://github.com/sponsors/RubenVerborgh"
+ }
+ ],
+ "engines": {
+ "node": ">=4.0"
+ },
+ "peerDependenciesMeta": {
+ "debug": {
+ "optional": true
+ }
+ }
+ },
+ "node_modules/form-data": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+ "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+ "dependencies": {
+ "asynckit": "^0.4.0",
+ "combined-stream": "^1.0.8",
+ "mime-types": "^2.1.12"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -570,6 +683,25 @@
"node": ">=12"
}
},
+ "node_modules/mime-db": {
+ "version": "1.52.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+ "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
+ "node_modules/mime-types": {
+ "version": "2.1.35",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+ "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+ "dependencies": {
+ "mime-db": "1.52.0"
+ },
+ "engines": {
+ "node": ">= 0.6"
+ }
+ },
"node_modules/nanoid": {
"version": "3.3.7",
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -619,6 +751,11 @@
"node": "^10 || ^12 || >=14"
}
},
+ "node_modules/proxy-from-env": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+ },
"node_modules/rollup": {
"version": "3.29.4",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
diff --git a/package.json b/package.json
index 2c07c2f2a42e19f345d30aecdd87536995396001..33324004f418fc9cd7aad3b2615f9d65ebc1c754 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,9 @@
"preview": "vite preview"
},
"dependencies": {
+ "axios": "^1.6.2",
+ "bootstrap": "^5.3.2",
+ "chart.js": "^4.4.0",
"vue": "^3.3.4"
},
"devDependencies": {
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000000000000000000000000000000000000..5b1378454b1c2c493e72d223f8ceff5a88f2ddec
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,2 @@
+Flask
+flask-cors
diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..a36766285ba7818ebd6146b6764ac9ef3a509810 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,123 @@
<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+import ValueTabs from "./components/ValueTabs.vue";
</script>
-<template>
- <header>
- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+<script>
+import axios from "axios"
+import MultiLineChart from './components/MultiLineChart.vue';
+import MultiAxisChart from './components/MultiAxisChart.vue';
- <div class="wrapper">
- <HelloWorld msg="You did it!" />
- </div>
- </header>
+export default {
+ components: {
+ MultiLineChart,
+ MultiAxisChart
+ },
+ mounted() {
+ this.getPastValues();
+ },
+ created() {
+ this.pastSevenDaysData = this.getPastSevenDays();
+ },
+ methods: {
+ getPastValues() {
+ axios
+ .get('http://127.0.0.1:5000/past-values')
+ .then((response) => {
+ this.npkData = response.data.npkData
+ this.thmData = response.data.thmData
+ })
+ },
+ getPastSevenDays() {
+ const dates = [];
+ for (let i = 6; i >= 0; i--) {
+ const date = new Date();
+ date.setDate(date.getDate() - i);
+ const formattedDate = `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1).toString().padStart(2, '0')}`;
+ dates.push(formattedDate);
+ }
+ return dates;
+ }
+ },
+ data() {
+ return {
+ pastSevenDaysData: [],
+ npkData: null,
+ thmData: null
+ }
+ }
+}
+</script>
- <main>
- <TheWelcome />
- </main>
+<template>
+ <div class="app-container">
+ <div class="top-section">
+ <div class="logo-container">
+ <img alt="Vue logo" src="./assets/NanoPatch.png" />
+ </div>
+ <div class="value-tabs-container">
+ <ValueTabs />
+ </div>
+ </div>
+ <div class="bottom-section">
+ <MultiLineChart v-if="npkData" :chart-data="npkData" :x-axis-data=pastSevenDaysData />
+ <MultiAxisChart v-if="thmData" :chart-data="thmData" :x-axis-data=pastSevenDaysData />
+ </div>
+ </div>
</template>
<style scoped>
-header {
- line-height: 1.5;
+.app-container {
+ display: flex;
+ flex-direction: column;
+ height: 100vh;
+}
+
+.top-section {
+ display: flex;
+ flex: 1;
+}
+
+.logo-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.logo-container img {
+ width: 35vw;
+ height: auto;
+}
+
+.value-tabs-container {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
}
-.logo {
- display: block;
- margin: 0 auto 2rem;
+.bottom-section {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex: 0.5;
+ gap: 10px; /* Adds a gap between the Graph components */
}
-@media (min-width: 1024px) {
- header {
- display: flex;
- place-items: center;
- padding-right: calc(var(--section-gap) / 2);
+/* Responsive adjustments for mobile screens */
+@media (max-width: 768px) {
+ .bottom-section {
+ flex-direction: column; /* Stack the Graph components */
+ gap: 0; /* Removes the gap when stacked vertically */
}
- .logo {
- margin: 0 2rem 0 0;
+ .logo-container img {
+ width: 50vw; /* Adjust logo size for smaller screens */
}
- header .wrapper {
- display: flex;
- place-items: flex-start;
- flex-wrap: wrap;
+ .value-tabs-container {
+ right: 10%;
+ width: 80%;
}
}
</style>
diff --git a/src/assets/NanoPatch.png b/src/assets/NanoPatch.png
new file mode 100644
index 0000000000000000000000000000000000000000..2da8cae6c432de00535e121e8dfa3a9f06850f12
Binary files /dev/null and b/src/assets/NanoPatch.png differ
diff --git a/src/assets/base.css b/src/assets/base.css
deleted file mode 100644
index 8816868a41b651f318dee87c6784ebcd6e29eca1..0000000000000000000000000000000000000000
--- a/src/assets/base.css
+++ /dev/null
@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
- --vt-c-white: #ffffff;
- --vt-c-white-soft: #f8f8f8;
- --vt-c-white-mute: #f2f2f2;
-
- --vt-c-black: #181818;
- --vt-c-black-soft: #222222;
- --vt-c-black-mute: #282828;
-
- --vt-c-indigo: #2c3e50;
-
- --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
- --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
- --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
- --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
- --vt-c-text-light-1: var(--vt-c-indigo);
- --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
- --vt-c-text-dark-1: var(--vt-c-white);
- --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
- --color-background: var(--vt-c-white);
- --color-background-soft: var(--vt-c-white-soft);
- --color-background-mute: var(--vt-c-white-mute);
-
- --color-border: var(--vt-c-divider-light-2);
- --color-border-hover: var(--vt-c-divider-light-1);
-
- --color-heading: var(--vt-c-text-light-1);
- --color-text: var(--vt-c-text-light-1);
-
- --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --color-background: var(--vt-c-black);
- --color-background-soft: var(--vt-c-black-soft);
- --color-background-mute: var(--vt-c-black-mute);
-
- --color-border: var(--vt-c-divider-dark-2);
- --color-border-hover: var(--vt-c-divider-dark-1);
-
- --color-heading: var(--vt-c-text-dark-1);
- --color-text: var(--vt-c-text-dark-2);
- }
-}
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
- margin: 0;
- font-weight: normal;
-}
-
-body {
- min-height: 100vh;
- color: var(--color-text);
- background: var(--color-background);
- transition:
- color 0.5s,
- background-color 0.5s;
- line-height: 1.6;
- font-family:
- Inter,
- -apple-system,
- BlinkMacSystemFont,
- 'Segoe UI',
- Roboto,
- Oxygen,
- Ubuntu,
- Cantarell,
- 'Fira Sans',
- 'Droid Sans',
- 'Helvetica Neue',
- sans-serif;
- font-size: 15px;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
diff --git a/src/assets/main.css b/src/assets/main.css
index e8667cd4508b6163e44e675ff899de1896544c84..db7be3238afccff587208ba376d8473387d2c524 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,5 +1,3 @@
-@import './base.css';
-
#app {
max-width: 1280px;
margin: 0 auto;
@@ -20,16 +18,3 @@ a,
background-color: hsla(160, 100%, 37%, 0.2);
}
}
-
-@media (min-width: 1024px) {
- body {
- display: flex;
- place-items: center;
- }
-
- #app {
- display: grid;
- grid-template-columns: 1fr 1fr;
- padding: 0 2rem;
- }
-}
diff --git a/src/components/MultiAxisChart.vue b/src/components/MultiAxisChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..888f190f63b6ce443c4651c9bfca38f5da1b1bb6
--- /dev/null
+++ b/src/components/MultiAxisChart.vue
@@ -0,0 +1,87 @@
+<template>
+ <div class="chart-container" style="position: relative; height:40vh; width:80vw">
+ <canvas ref="multiAxisChart"></canvas>
+ </div>
+</template>
+
+<script>
+import { Chart, registerables } from 'chart.js';
+Chart.register(...registerables);
+
+export default {
+ props: {
+ chartData: {
+ type: Object,
+ required: true
+ },
+ xAxisData: {
+ type: Array,
+ required: true
+ },
+ },
+ mounted() {
+ const ctx = this.$refs.multiAxisChart.getContext('2d');
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: this.xAxisData,
+ datasets: [
+ {
+ label: 'Temperature',
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ borderColor: 'rgba(75, 192, 192, 1)',
+ data: this.chartData.temperature,
+ fill: false,
+ yAxisID: 'y',
+ },
+ {
+ label: 'Humidity',
+ backgroundColor: 'rgba(153, 102, 255, 0.2)',
+ borderColor: 'rgba(153, 102, 255, 1)',
+ data: this.chartData.humidity,
+ fill: false,
+ yAxisID: 'y1',
+ },
+ {
+ label: 'Moisture',
+ backgroundColor: 'rgba(255, 0, 255, 0.2)', // Magenta with transparency
+ borderColor: 'rgba(255, 0, 255, 1)', // Solid magenta
+ data: this.chartData.moisture,
+ fill: false,
+ yAxisID: 'y1',
+ }
+ ]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: '°C'
+ }
+ },
+ y1: {
+ type: 'linear',
+ display: true,
+ position: 'right',
+ title: {
+ display: true,
+ text: '%'
+ },
+
+ // grid line settings
+ grid: {
+ drawOnChartArea: false, // only want the grid lines for one axis to show up
+ },
+ },
+ }
+ }
+ });
+ }
+}
+</script>
+
+<style scoped>
+</style>
+
\ No newline at end of file
diff --git a/src/components/MultiLineChart.vue b/src/components/MultiLineChart.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9d8aa370ced4390a7a5abb46006e140e92b3f793
--- /dev/null
+++ b/src/components/MultiLineChart.vue
@@ -0,0 +1,70 @@
+<template>
+ <div class="chart-container" style="position: relative; height:40vh; width:80vw">
+ <canvas ref="multiLineChart"></canvas>
+ </div>
+</template>
+
+<script>
+import { Chart, registerables } from 'chart.js';
+Chart.register(...registerables);
+
+export default {
+ props: {
+ chartData: {
+ type: Object,
+ required: true
+ },
+ xAxisData: {
+ type: Array,
+ required: true
+ },
+ },
+ mounted() {
+ const ctx = this.$refs.multiLineChart.getContext('2d');
+ new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: this.xAxisData,
+ datasets: [
+ {
+ label: 'Nitrogen',
+ backgroundColor: 'rgba(255, 99, 132, 0.2)',
+ borderColor: 'rgba(255, 99, 132, 1)',
+ data: this.chartData.nitrogen,
+ fill: false,
+ },
+ {
+ label: 'Phosphorus',
+ backgroundColor: 'rgba(54, 162, 235, 0.2)',
+ borderColor: 'rgba(54, 162, 235, 1)',
+ data: this.chartData.phosphorus,
+ fill: false,
+ },
+ {
+ label: 'Potassium',
+ backgroundColor: 'rgba(255, 206, 86, 0.2)',
+ borderColor: 'rgba(255, 206, 86, 1)',
+ data: this.chartData.potassium,
+ fill: false,
+ }
+ ]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'ppm'
+ }
+ }
+ }
+ }
+ });
+ }
+}
+</script>
+
+<style scoped>
+</style>
+
\ No newline at end of file
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
deleted file mode 100644
index dab95367d4cb1dfe39b9c898fcd087ee3eda35b6..0000000000000000000000000000000000000000
--- a/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<script setup>
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
- <WelcomeItem>
- <template #icon>
- <DocumentationIcon />
- </template>
- <template #heading>Documentation</template>
-
- Vue’s
- <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
- provides you with all information you need to get started.
- </WelcomeItem>
-
- <WelcomeItem>
- <template #icon>
- <ToolingIcon />
- </template>
- <template #heading>Tooling</template>
-
- This project is served and bundled with
- <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
- recommended IDE setup is
- <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
- <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
- you need to test your components and web pages, check out
- <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
- <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
- >Cypress Component Testing</a
- >.
-
- <br />
-
- More instructions are available in <code>README.md</code>.
- </WelcomeItem>
-
- <WelcomeItem>
- <template #icon>
- <EcosystemIcon />
- </template>
- <template #heading>Ecosystem</template>
-
- Get official tools and libraries for your project:
- <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
- <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
- <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
- <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
- you need more resources, we suggest paying
- <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
- a visit.
- </WelcomeItem>
-
- <WelcomeItem>
- <template #icon>
- <CommunityIcon />
- </template>
- <template #heading>Community</template>
-
- Got stuck? Ask your question on
- <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
- Discord server, or
- <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
- >StackOverflow</a
- >. You should also subscribe to
- <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
- the official
- <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
- twitter account for latest news in the Vue world.
- </WelcomeItem>
-
- <WelcomeItem>
- <template #icon>
- <SupportIcon />
- </template>
- <template #heading>Support Vue</template>
-
- As an independent project, Vue relies on community backing for its sustainability. You can help
- us by
- <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
- </WelcomeItem>
-</template>
diff --git a/src/components/ValueTabs.vue b/src/components/ValueTabs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..229c8170f8b96a1ea8abf82d4bd6b1a993c78b84
--- /dev/null
+++ b/src/components/ValueTabs.vue
@@ -0,0 +1,85 @@
+<script>
+import axios from "axios"
+
+export default {
+ data() {
+ return {
+ values: { 0: { N: 0 }, 1: { P: 0 }, 2: { K: 0 }, 3: { T: 0 }, 4: { H: 0 }, 5: { M: 0 } },
+ }
+ },
+ mounted() {
+ this.getValues();
+ setInterval(this.getValues, 5000);
+ },
+ methods: {
+ getValues() {
+ axios
+ .get('http://127.0.0.1:5000/values')
+ .then((response) => {
+ this.values = response.data
+ })
+ },
+ getClass(value, warn_min, good_min, good_max, warn_max) {
+ if (value > good_min && value <= good_max) {
+ return 'list-group-item-success'; // Success class
+ } else if ((value >= warn_min && value <= good_min) || (value > good_max && value <= warn_max)) {
+ return 'list-group-item-warning'; // Warning class
+ } else {
+ return 'list-group-item-danger'; // Danger class
+ }
+ },
+ },
+}
+</script>
+
+<template>
+ <div class="allBoxes">
+ <div>
+ <div class="valueBox">
+ Nitrogen (N):
+ <li class="list-group-item" v-bind:class="getClass(values[0].N, 0, 5, 10, 15)">{{ values[0].N }} ppm</li>
+ </div>
+ <div class="valueBox">
+ Phosphorus (P):
+ <li class="list-group-item" v-bind:class="getClass(values[1].P, 0, 5, 10, 15)">{{ values[1].P }} ppm</li>
+ </div>
+ <div class="valueBox">
+ Potassium (K):
+ <li class="list-group-item" v-bind:class="getClass(values[2].K, 0, 5, 10, 15)">{{ values[2].K }} ppm</li>
+ </div>
+ <div class="valueBox">
+ Temperature:
+ <li class="list-group-item" v-bind:class="getClass(values[3].T, 0, 5, 10, 15)">{{ values[3].T }} °C</li>
+ </div>
+ <div class="valueBox">
+ Humidity:
+ <li class="list-group-item" v-bind:class="getClass(values[4].H, 0, 5, 10, 15)">{{ values[4].H }} %</li>
+ </div>
+ <div class="valueBox">
+ Moisture:
+ <li class="list-group-item" v-bind:class="getClass(values[5].M, 0, 5, 10, 15)">{{ values[5].M }} %</li>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.allBoxes{
+ /* font-size: 40px; */
+ font-size: 2vw;
+ width: fit-content;
+ /* padding-top: 5%; */
+}
+
+.valueBox {
+ display: flex;
+ padding-bottom: 2%;
+}
+
+/* Responsive adjustments for mobile screens */
+@media (max-width: 768px) {
+ .allBoxes{
+ font-size: 1.6vh;
+ }
+}
+</style>
diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
deleted file mode 100644
index 6d7086aea08fbb770b2f570dbeb4f8fcd86cb291..0000000000000000000000000000000000000000
--- a/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
- <div class="item">
- <i>
- <slot name="icon"></slot>
- </i>
- <div class="details">
- <h3>
- <slot name="heading"></slot>
- </h3>
- <slot></slot>
- </div>
- </div>
-</template>
-
-<style scoped>
-.item {
- margin-top: 2rem;
- display: flex;
- position: relative;
-}
-
-.details {
- flex: 1;
- margin-left: 1rem;
-}
-
-i {
- display: flex;
- place-items: center;
- place-content: center;
- width: 32px;
- height: 32px;
-
- color: var(--color-text);
-}
-
-h3 {
- font-size: 1.2rem;
- font-weight: 500;
- margin-bottom: 0.4rem;
- color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
- .item {
- margin-top: 0;
- padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
- }
-
- i {
- top: calc(50% - 25px);
- left: -26px;
- position: absolute;
- border: 1px solid var(--color-border);
- background: var(--color-background);
- border-radius: 8px;
- width: 50px;
- height: 50px;
- }
-
- .item:before {
- content: ' ';
- border-left: 1px solid var(--color-border);
- position: absolute;
- left: 0;
- bottom: calc(50% + 25px);
- height: calc(50% - 25px);
- }
-
- .item:after {
- content: ' ';
- border-left: 1px solid var(--color-border);
- position: absolute;
- left: 0;
- top: calc(50% + 25px);
- height: calc(50% - 25px);
- }
-
- .item:first-of-type:before {
- display: none;
- }
-
- .item:last-of-type:after {
- display: none;
- }
-}
-</style>
diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue
deleted file mode 100644
index 2dc8b055253af30fb797037e2fe260505f0cf711..0000000000000000000000000000000000000000
--- a/src/components/icons/IconCommunity.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
- <path
- d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
- />
- </svg>
-</template>
diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue
deleted file mode 100644
index 6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed..0000000000000000000000000000000000000000
--- a/src/components/icons/IconDocumentation.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
- <path
- d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
- />
- </svg>
-</template>
diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue
deleted file mode 100644
index c3a4f078c0bd340a33c61ea9ecd8a755d03571ed..0000000000000000000000000000000000000000
--- a/src/components/icons/IconEcosystem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
- <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
- <path
- d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
- />
- </svg>
-</template>
diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue
deleted file mode 100644
index 7452834d3ef961ce24c3a072ddba2620b6158bae..0000000000000000000000000000000000000000
--- a/src/components/icons/IconSupport.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
- <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
- <path
- d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
- />
- </svg>
-</template>
diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue
deleted file mode 100644
index 660598d7c76644ffe126a1a1feb1606650bfb937..0000000000000000000000000000000000000000
--- a/src/components/icons/IconTooling.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
- <svg
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- aria-hidden="true"
- role="img"
- class="iconify iconify--mdi"
- width="24"
- height="24"
- preserveAspectRatio="xMidYMid meet"
- viewBox="0 0 24 24"
- >
- <path
- d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
- fill="currentColor"
- ></path>
- </svg>
-</template>
diff --git a/src/main.js b/src/main.js
index 0ac3a5ff0ceea45d1a9066b2df477773977a338b..0406742d8ac8f7e13b423409488b2321d92e8850 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,5 @@
import './assets/main.css'
+import "bootstrap/dist/css/bootstrap.min.css";
import { createApp } from 'vue'
import App from './App.vue'