Skip to content

2
2021-010
Commit 6496da8b authored by Lakshan Wijewardana W.M.W-IT18132588's avatar Lakshan Wijewardana W.M.W-IT18132588
Browse files
Options

update server templates

parent 960a4e48
Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 50 deletions
Server/templates/client.html
View file @ 6496da8b
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3 fixed-top"> <nav class="navbar navbar-expand-lg bg-dark navbar-dark py-3 fixed-top">
<div class="container"> <div class="container">
<a href="client.html" class="navbar-brand"> <img src="{{ url_for('static',filename='img/orgicheck lolgomini.png') }}" style="height: 3rem;" alt="logo" /></a> <a href="/" class="navbar-brand"> <img src="{{ url_for('static',filename='img/orgicheck lolgomini.png') }}" style="height: 3rem;" alt="logo" /></a>
<button <button
...@@ -107,11 +107,22 @@ ...@@ -107,11 +107,22 @@
<div class="card bg-dark text-light"> <div class="card bg-dark text-light">
<div class="card-body text-center"> <div class="card-body text-center">
<div class="h1 mb-3"> <div class="h1 mb-3">
<i class="bi bi-bookmark-heart"></i> <i class="bi bi-bug"></i>
</div> </div>
<h3 class="card-title mb-3">Organicness</h3> <h3 class="card-title mb-3">Diseases</h3>
<a href="/cucumber"><button class="btn btn-success">Cucumber</button></a>
<a href="/ndvi"><button class="btn btn-success">Orange</button></a> <form action="/">
<input class="btn btn-primary" type="file" id="img" name="img" accept="image/*">
<br>
<br>
<button data-bs-toggle="modal"
data-bs-target="#diseases" class="btn btn-warning">Check with choosed image</button>
</form>
or
<br>
<button data-bs-toggle="modal"
data-bs-target="#diseases" class="btn btn-success">Check with captured image</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -119,23 +130,47 @@ ...@@ -119,23 +130,47 @@
<div class="card bg-dark text-light"> <div class="card bg-dark text-light">
<div class="card-body text-center"> <div class="card-body text-center">
<div class="h1 mb-3"> <div class="h1 mb-3">
<i class="bi bi-bug"></i> <i class="bi bi-hand-thumbs-up"></i>
</div> </div>
<h3 class="card-title mb-3">Diseases</h3> <h3 class="card-title mb-3">Quality</h3>
<form action="/">
<input class="btn btn-primary" type="file" id="img" name="img" accept="image/*">
<br>
<br>
<button data-bs-toggle="modal"
data-bs-target="#quality" class="btn btn-warning">Check with choosed image</button>
</form>
or
<br>
<button data-bs-toggle="modal" <button data-bs-toggle="modal"
data-bs-target="#diseases" class="btn btn-success">Check</button> data-bs-target="#quality" class="btn btn-success">Check with captured image</button>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md"> <div class="col-md">
<div class="card bg-dark text-light"> <div class="card bg-dark text-light">
<div class="card-body text-center"> <div class="card-body text-center">
<div class="h1 mb-3"> <div class="h1 mb-3">
<i class="bi bi-hand-thumbs-up"></i> <i class="bi bi-cash"></i>
</div> </div>
<h3 class="card-title mb-3">Quality</h3> <h3 class="card-title mb-3">Price</h3>
<button data-bs-toggle="modal"
data-bs-target="#quality" class="btn btn-success">Check</button> <form action="#"method="post">
<input class="btn btn-primary" type="file" id="img" name="img" accept="image/*">
<br>
<br>
<button type="submit" data-bs-toggle="modal"
data-bs-target="#price" class="btn btn-warning">Check with choosed image</button>
</form>
or
<br>
<form action="#"method="post">
<button type="submit" class="btn btn-success">Check with captured image</button>
</form>
</div> </div>
</div> </div>
</div> </div>
...@@ -143,11 +178,11 @@ ...@@ -143,11 +178,11 @@
<div class="card bg-dark text-light"> <div class="card bg-dark text-light">
<div class="card-body text-center"> <div class="card-body text-center">
<div class="h1 mb-3"> <div class="h1 mb-3">
<i class="bi bi-cash"></i> <i class="bi bi-bookmark-heart"></i>
</div> </div>
<h3 class="card-title mb-3">Price</h3> <h3 class="card-title mb-3">Organicness</h3>
<button data-bs-toggle="modal" <a href="/cucumber"><button class="btn btn-success">Cucumber</button></a>
data-bs-target="#price" class="btn btn-success">Check</button> <a href="/ndvi"><button class="btn btn-success">Orange</button></a>
</div> </div>
</div> </div>
</div> </div>
......
Server/templates/cucumberOrg.html
View file @ 6496da8b
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
<div class="collapse navbar-collapse" id="navmenu"> <div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#cam" class="nav-link">Device Connection</a> <a href="#cam" class="nav-link">Camera Device Connection</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#team" class="nav-link">Team</a> <a href="#team" class="nav-link">Team</a>
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
Our utmost aim is to help our community to explore the real status of the fruits and vegetables that they are consuming. Use <span class="text-warning"> OrgiCheck&trade; Smart</span> Our utmost aim is to help our community to explore the real status of the fruits and vegetables that they are consuming. Use <span class="text-warning"> OrgiCheck&trade; Smart</span>
to check whether you are paying real value of vegetable and fruits. to check whether you are paying real value of vegetable and fruits.
</p> </p>
<a href="#check" class="btn btn-success btn-lg"> <a href="#instructions" class="btn btn-success btn-lg">
Instructions Instructions
</a> </a>
<!-- <button <!-- <button
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
<input type="text" class="form-control" placeholder="Enter ip address" /> <input type="text" class="form-control" placeholder="Enter ip address" />
<button class="btn btn-dark btn-lg" type="button">Connect</button> <button class="btn btn-dark btn-lg" type="button">Connect</button>
</div> </div>
<span style="padding-left:50px;" class="mb-3 mb-md-0">Connected...</span> <span style="padding-left:50px;" class="mb-3 mb-md-0"></span>
</div> </div>
</div> </div>
</section> </section>
...@@ -135,34 +135,77 @@ ...@@ -135,34 +135,77 @@
<span class="text-warning"> OrgiCheck&trade; Smart</span> <span class="text-warning"> OrgiCheck&trade; Smart</span>
</p> </p>
<div class="row g-4"> <div class="row g-4">
<div class="col-md-6"> <div class="col-lg-6 d-flex flex-column">
<div class="card bg-light"> <div class="row">
<div class="card-body text-center"> <div class="col-md-6 col-lg-12 grid-margin stretch-card">
<img <div class="card card-rounded">
src="{{imagesource}}" <div class="card-body h-75">
style="max-width:560px;" <div class="card bg-light">
alt="" <div class="card-body text-center">
/> {% if imagesource %}
<img
src="{{imagesource}}"
style="width: 500px;"
alt=""
/>
{% endif %}
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-lg-6 d-flex flex-column">
<div class="col-md-6"> <div class="row">
<div class="card bg-light"> <div class="col-md-6 col-lg-12 grid-margin stretch-card">
<div class="card-body text-center"> <div class="card card-rounded">
<img <div class="card-body h-75">
src="http://www.cssmyschool.info/schimg/done.gif" <div class="card bg-light">
style="max-width:140px;" <div class="card-body text-center">
alt="" {% if pred1 %}
/> {% if pred1 == "Organic" %}
<h3 class="card-title mb-3">{{label}}</h3> <img
src="http://www.cssmyschool.info/schimg/done.gif"
style="width:50px;"
alt=""
/>
<h5 class="card-title mb-3">Its {{pred1}}</h5>
<h4 class="card-title mb-3">Organic = {{labelOrg}} %</h4>
<h4 class="card-title mb-3">Inorganic = {{labelIno}} %</h4>
{% else %}
<img
src="{{ url_for('static',filename='img/wrong.gif') }}"
style="width: 100px;"
alt=""
/>
<h5 class="card-title mb-3">Its {{pred1}}</h5>
<h4 class="card-title mb-3">Inorganic = {{labelIno}} %</h4>
<h4 class="card-title mb-3">Organic = {{labelOrg}} %</h4>
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section id="instructions" class="p-5 bg-white bg-success">
<div class="container">
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<h3 class="card-title mb-3">Instructions</h3>
<p>Before uploading the image, the images should be taken by placing the cucumber horizontally on a clear background in a well lighted place and not low light.</p>
</div>
</div>
</div>
</div>
</section>
<section id="team" class="p-5 bg-dark bg-success"> <section id="team" class="p-5 bg-dark bg-success">
<div class="container"> <div class="container">
......
Server/templates/orangeNdvi.html
View file @ 6496da8b
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
<div class="collapse navbar-collapse" id="navmenu"> <div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav ms-auto">
<li class="nav-item"> <li class="nav-item">
<a href="#cam" class="nav-link">Device Connection</a> <a href="#cam" class="nav-link">NDVI Device Connection</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a href="#team" class="nav-link">Team</a> <a href="#team" class="nav-link">Team</a>
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
content of the subject. Use <span class="text-warning"> OrgiCheck&trade; Smart</span> content of the subject. Use <span class="text-warning"> OrgiCheck&trade; Smart</span>
to check whether you are paying real value of vegetable and fruits. to check whether you are paying real value of vegetable and fruits.
</p> </p>
<a href="#check" class="btn btn-success btn-lg"> <a href="#instructions" class="btn btn-success btn-lg">
Instructions Instructions
</a> </a>
<!-- <button <!-- <button
...@@ -95,7 +95,9 @@ ...@@ -95,7 +95,9 @@
<button class="btn btn-dark btn-lg" type="submit" name="submit" value="add">Connect</button> <button class="btn btn-dark btn-lg" type="submit" name="submit" value="add">Connect</button>
</div> </div>
</form> </form>
<span style="padding-left:50px;" class="mb-3 mb-md-0 text-dark">{{conn}}</span> <div>
<span class="mb-3 mb-md-0 text-dark text-center">{{conn}}</span>
</div>
</div> </div>
</div> </div>
</section> </section>
...@@ -109,13 +111,13 @@ ...@@ -109,13 +111,13 @@
</p> </p>
<div class="row g-4"> <div class="row g-4">
<div class="col-md-6"> <div class="col-md-6">
<div class="card bg-light"> <div class="card" style="background: linear-gradient(180deg,#f5f4f3,#aee4ae);">
<div class="card-body text-center"> <div class="card-body text-center">
<p>The device developed uses Near Infrared rays to check organic <p>The device developed uses Near Infrared rays to check organic
content of the subject.Their displays the measured value in terms of an NDVI reading (ranging from 0.00 to 0.99)</p> content of the subject.Their displays the measured value in terms of an NDVI reading (ranging from 0.00 to 0.99)</p>
<br> <hr>
<h4 id="data" class="card-title mb-3">Organic content - {{n}} (NDVI)</h3> <h4 id="data" class="card-title mb-3">Organic content - <span class="text-success" >{{n}}</span> (NDVI)</h3>
<br> <hr>
<div class="progress"> <div class="progress">
</div> </div>
...@@ -125,12 +127,12 @@ ...@@ -125,12 +127,12 @@
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="card bg-light"> <div class="card" style="background: linear-gradient(180deg,#e4e3e1,#aceca6);">
<div class="card-body text-center"> <div class="card-body text-center">
<br> <br>
<h3 class="card-title mb-3">Organic content</h3> <h3 class="card-title mb-3"> <i class="bi bi-bookmark-heart"></i> Organic content</h3>
<hr>
<br> <br>
<div class="container-fluid"> <div class="container-fluid">
{% if n %} {% if n %}
<h4>Organic content = {{n}} (NDVI)</h4> <h4>Organic content = {{n}} (NDVI)</h4>
...@@ -138,11 +140,10 @@ ...@@ -138,11 +140,10 @@
<h5>Nir reflection = {{r}} lux</h5> <h5>Nir reflection = {{r}} lux</h5>
{% endif %} {% endif %}
{% if mess %} {% if mess %}
<h2 class="test-center"> {{ mess }}</h2> <h2 class="text-center text-danger"> {{ mess }}</h2>
{% endif %} {% endif %}
</div> </div>
<br>
</div> </div>
</div> </div>
</div> </div>
...@@ -169,6 +170,19 @@ ...@@ -169,6 +170,19 @@
</div> </div>
</section> </section>
<section id="instructions" class="p-5 bg-success bg-success">
<div class="container">
<div class="col-md">
<div class="card bg-dark text-light">
<div class="card-body text-center">
<h3 class="card-title mb-3">Instructions</h3>
<p>First you need to connect the device to a 5v voltage and then wait until it connects to a wifi. It has a green light bulb to see if it is connected to wifi. Then open the box, put the orange in the appropriate place, close the lid and enter the unique id of the device in the above entry position to get the NDVI value. Press the refresh button to get the updated sensor data. </p>
</div>
</div>
</div>
</div>
</section>
<section id="team" class="p-5 bg-dark bg-success"> <section id="team" class="p-5 bg-dark bg-success">
<div class="container"> <div class="container">
<h2 class="text-center text-white">Our Team</h2> <h2 class="text-center text-white">Our Team</h2>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment