cropai / frontend Goto Github PK
View Code? Open in Web Editor NEWCrop Analyzer Web Application
Home Page: https://cropai.netlify.app
License: GNU General Public License v3.0
Crop Analyzer Web Application
Home Page: https://cropai.netlify.app
License: GNU General Public License v3.0
index.html, index.js
form should not submit without input, give proper warning
design input button
inside event listener for form submit, store image in a variable.
pass that img variable to update_result function, add relevant parameter in function definiton
inside update_result, add code that will update the image in result_container
Delete the lib folder (present inside src folder)
folder structure should look like this:
design
Web Designs _(contents remain same)_
logo-designs
submitted-logos
--logodesign-1.png
--logodesign-2.png
--corpAi-logo.png (copy of logodesign-2)
--gssoc-logo.png
Refer the landing page of design-1 in Web Designs
Create almost the same background as you see in the picture, find the resources in design-1 folder itself. (do not create any button, links, text),i.e only the leaves, glass and bg color to be updated.
Make sure your it occupies whole screen, and no scrolling should be there.
Do not touch the 3 internal divs leave them as it is work on outer div with id=background
index.html
On clicking about show brief of project/application on right side (or wherever you like, but be sane :p), it should look good and the user must get a good experience,
Do not remove the button while showing this, size or position may be changed (but avoid change of position/size)
You may show this "CorpAi is a crop advisory app for farmers and gardeners. It can diagnose pest damage, plant disease and nutrient deficiencies that are affecting crops and can offer corresponding treatment measures."
Any modification should be done inside div with id=landing_container
Index.html index.js
In result container before appending the result, clear the previous content.
Test your functionality by submitting input multiple times (use analyze other crop button below the results and submit the form again)
Understand current functionality before starting!
If there is any doubt, Kindly ask.
Code neatly, Comment nicely!!
refer landing page of design-2 in Web Designs
Create almost the same background as you see in the picture, find the resources in design-2 folder itself. (do not create any button, links, text)
add latest Bootstrap CDN to
src/index.html
src/landing pages/landing-pages-2/landing2.html
src/landing pages/landing-pages-3/landing3.html
I will add github actions to the project. GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD.
Should i work with this as this will be very good for the project.
@rajats98 should i proceed with it.
About me:-
GSSoC Aspirant.
landing2.html
Navbar links
remove Blog And Contact Us from navBar
rename Product to Analyze Crop, link it to index.html?q=analysis (relative address to index.html)
link Team to contributors.html (src/contributors page/contributor.html)
Also Link the Analyze button to index.html?q=analysis
Add heading and button in landing-page2
(/src/landing pages/landing-page-2/landing2.html)
Remember, do not alter the background and button should be dummy.
Make sure the page remains not scrollable.
--refer landing page in Web Designs/design-2/
index.html
Add a form with single input(file input) inside div with id=input_container
NOTE: while working add hidden class to div with id=landing_container and result_container
while submitting add hidden class to input_container and result container
If there is any confusion, kindly ask : ).
refer landing page of design-3 in Web Designs
Create almost the same background as you see in the picture, find the resources in design-3 folder itself. (do not create any button, links, text)
landing3.html
rename Product to Analyze Crop, link it to index.html?q=analysis (relative address to index.html)
rename contact us to Team, link it to contributors.html (src/contributors page/contributor.html), use relative address
Also Link the Start analysing button to index.html?q=analyze
../src/index.html
create a divs as described
div1 id:"background"
div2 id: landing_container
div3 id: input_container
div4 id: result_container
i.e. one div enclosing 3 divs
Update Frontend/README.md
Under heading IMPORTANT LINKS, add details about data-modeling repo in brief (tech-stack, techniques, dataset etc.), give it a heading (eg. Data-Modeling)
the link to repo should be there
The PR template helps the reviewer to go through the changes made by the contributor rather than going through lines of codes to find it. I can design a PR template according to the structure of CropAi project. It can have Easy/ Medium as the Labels.
Is your feature request related to a problem? Please describe.
This is feature which help new contributor to understand how they can contribute project and how we can help this project more effect and do understand what this project really is and how we can get started. Let's get started with making this project more better ๐
Describe the solution you'd like
Build a Document CONTRIBUTE.md that help everyone to understand what this project is and how the collaborator get started with this and understand what the current project status and Where they need to take.
inside input_container
show input image on the form( at place of dummy image icon)
At one time only one of the div will be shown (landing_container/ input_container/ result_container).
On submitting form
create a new js function() with following functionality
stop default action of form.
store input_image in a variable
create a js variable as
analysis_report_json = {
Disease: "Pepper Bell Healthy",
Symptoms: {
"1":
"Initial symptoms of infection are the formation of small, circular, water-soaked spots on leaves, stems, petioles and/or peduncles",
"2":
"Infected Pepper Bell have Circular lesions on fruit which contain tan to orange to black concentric rings in the center.",
"3":
"It can have lesions may also occur on leaves and stems and appear as irregularly shaped gray spots with dark margins",
"4":
"Seeds did not germinate; seedlings collapsing and dying; dark stems which are shriveled near the soil line",
"5": " Water-soaked lesions on the stem and discolored roots.",
"6":
"High numbers of lesions may form on leaves causing them to turn yellow and drop from the plant."
},
Treatment: {
"1":
"Plant only diseasefree, certified seed",
"2":
"Always plant disease-free seeds and transplants.",
"3":
"Seeds can be freed from infection by treating with hot water.",
"4":
"Use disease free planting material; remove and destroy all crop debris after harvest, or plow material deeply under soil",
"5":"Magnesium deficiency can be prevented by applying dolomite lime to the soil, if an increase in soil pH is required, or through applications of a fertilizer containing magnesium."
},
Recommended_Product: {
"1": "Chlorothalonil-720-SFT : https://www.amazon.com/Chlorothalonil-Generic-Daconil-weatherstik-quali-1060/dp/B004GTOKSO",
"2": " Tafgor-Dimethoate : https://www.amazon.in/Tata-TATA-Tafgor-Dimethoate-Insecticide/dp/B074CCXPKF",
"3": "Ethion Insecticide : https://www.indiamart.com/proddetail/ethion-insecticide-12777127212.html",
"4":"Vector Super : https://www.amazon.in/Vector-100ML-IMIDACLOPRID-Systemic-Insecticide/dp/B07D7YTYTB"
}
}
update the data in result_container using js, while writing code keep in mind the analysis_report_json will be differnt for differnt input( no. of points under any inner-obect may change), you may change html as required(like you may add id to suitable elements)
call show_result_container()
delete dummy data from result_container (keep the required structure)
Create a docs folder and move all .md files inside it
and update the files as follows
PR_template.md
rename to pull_request_template.md
add a comment in Fixes issue, "Use one of fixes or addresses and remove the other one"
README.md
Remove How to start contributing section
Inside Important Notice add this line and add relative links to both files
Before contributing to this project do check CONTRIBUTING.md file and CODE_OF_CONDUCT.md file.
In case of any doubt,ask!
Update src/index.html
refer designs/Web Designs/design-1/landing-page
Add both the buttons and heading, the buttons should be dummy.
Add these content inside div#landing_container
you might need to change the code written before, change it but make sure it almost looks same as design.
src/landing pages/landing-page-2/landing2.html
Update bootstrap to latest version (4.4.1)
Try to use bootstrap extensively to design, position(spacing and size etc.) elements,
make the page responsive
some alteration in the design are allowed but it should look good
remove/update the redundant CSS on the go.
If there is any doubt, Kindly ask.
Code neatly, Comment nicely!!
Create a folder contributors page (exactly same) inside src
Create a js script named script_for_fetching_userdata.js (or similar name)
Add GitHub username of contributors to an array ( say, contributor_usernames)
get contributors from each of the 4 repository present in github.com/CropAi
get details for all users from https://api.github.com/users/{username}, and store only following keys
login
avatar
html_url
name
bio
for each user in contributor_usernames array.
If there is any doubt, Kindly ask.
Code neatly, Comment nicely!!
Design the webpage using any designing software
It should have two parts
Add shape(maybe rectangle) containing an image(profile), Name, and role(Admin, mentor or participant)
It will be assigned to 5 participants, each participant must only submit one design, if you have more than one ideas, design and submit the best one.
Deadline 7th April
EDIT:
This is an open Issue - This issue will not be assigned, anyone can work on this
Any PR not satisfying guidelines will be ignored
Add your logo to /design/logo-designs/submitted-logos
ISSUE TO CLOSE ON 05/04/2020
Add a brief introduction and working of application. Write basic working, it will be properly updated later on with screenshots.
Add links to backend and data-modeling repos (give overview of each repo, if possible).
Also mention about Gssoc in the intro or separately.
Refer to #4 to get some idea.
index.html
dummy image on form instead of empty image
download empty image icon/pic
show it input container's form
Create a folder contributors page inside src (name the form exactly same)
create a file contributors.html
Check designs/contributors/contributors-4, we need a similar page with few changes in it
Use the latest bootstrap(4.4.1) to design the page
In case of any doubt, Kindly ask
Code neatly, Comment nicely!!
Edit: Upgraded tag to hard (creating a responsive page from scratch)
src/contributors page
contributor.html
navbar --> link ANALYZE CROP NOW to index.html?q=analysis (relative address to index.html)
move contributor.css to assets and update the same in contributor.html
../src
../assets
../img
../lib
../landing pages
../landing page 2
../landing page 3
Index.html
NOTE: hidden class is already present in assests/index.css
Add 'hidden' class to div#input_container, div#result_container
make 3 functions in assets/index.js
show_landing_container() show_input_container() show_result_container()
each function should add hidden class to other two div, and remove from the div to be shown, eg ,if show_input_container() is called remove the hidden class from #input_container and add it to landing_container and result_container
(you can use jQuery, or plain js, it is not necessary to use hidden class method, you may use jQuery/js functions)
On click Analyze call show_input_container()
In case of any doubts ask : ).
create a new function which will called on clicking Analyze
function should do the following
append '?q=analyze' to url (do not redirect, use windows.pushState(), or any other method)
call show_input_container()
index.html , index.js
routing structure (consider base_url = "...../index.html" or "www.domain.com"
1. when url is hit
base_url
?q=analyze --> show input container
otherwise --> show landing container
2. Our routing Structure (no refresh should take place,route should be changed, you may use function like window.history.pushstate())
analyze btn clicked -> ?q=analyze
form submitted -> ?q=result
current bugs
1. When base_url?q=analyze is refreshed, a glimpse of landing is seen (you may hide all 3 divs initially and show according to route)
2. click analyze btn, ?q=analyze will open, but on pressing back(browser's back) only url changes (on back, you may reload the page after changing url)
You have to do the routing and fix the bugs.
Before commenting make sure you have a well executable plan, and you have explored how to do each step clearly
Participants with excellent js skill should ask for this assignment
In case of doubts asked.
download latest stable version jQuery (min, not slim) and save it to ../src/lib and add it to ../src/index.html
Or
Add using jquery CDN
Move vision, from CONTRIBUTE.md to README (below INTRO)
Update Project Admin and Mentors, Slack Channel from CONTRIBUTE.md (i.e. name with github link)
Remove owners, mentors, slack channel from CONTRIBUTE.md
Move Our Pledge, Our Standards, Our Responsibilities, Scope, Enforcement, Attribution from CONTRIBUTE.md to CODE_OF_CONDUCT.md (create new file).
Please don't comment if you are working on any issue(except #1, #57)
on the load of the page check url
www.domainname.com?q="section"
(eg. www.corp-ai.com?q=analyze)
if section == analyze
call show_input_container();
if section == result
redirect to '/'
Index.js
Add a button in result_container, with text like Analyze other crop or something like
Design and position it properly.
Onclick call function analyze_click()
You may use Bootstrap (CDN added already)
The issue template helps the contributor to briefly mention the issue and the change required to fix it. I can design a issue template according to the structure of CropAi project. It can have Easy/ Medium as the Labels.
index.html
You need to show the following data inside the div(id=result_container), Don't make table with 3 columns as made in any of the designs.
Show some creativity
ONLY MAKE CHANGES IN div#result_container
NOTE: while working add hidden class to div with id=landing_container and input_container
while submitting add hidden class to input_container and result container
If there is any confusion, kindly ask : ).
For now hard code this data
Disease Name: Pepper__bell___Bacterial_spot
Symptoms :
1 : Leaf spots that appear on the lower surface of older leaves as small, pimples and on the upper leaf surface as small water-soaked spots are a symptom of bacterial spot.
2 : Eventually, the spots develop gray to tan centers with darker borders. Lesions enlarge during warm, humid weather. Leaves may then turn yellow, then brown and drop. Lesions may also develop on stems.
3: Lesions may also develop on stems. Fruits develop small, raised rough spots that do not affect eating quality. Severely infected leaves will drop resulting in
Treatment :
1 : Treat seeds by soaking them for 2 minutes in a 10% chlorine bleach solution (1 part bleach; 9 parts water). Thoroughly rinse seeds and dry them before planting.
2 : Mulch plants deeply with a thick organic material like newspaper covered with straw or grass clippings.
3 : Spray every 10-14 days with fixed copper (organic fungicide) to slow down the spread of infection.
4: Rotate peppers to a different location if infections are severe and cover the soil with black plastic mulch or black landscape fabric prior to planting.
Recommended products :
1 : Neem Oil : https://www.planetnatural.com/product/organic-neem-oil/
2 : Garden Dust : https://www.planetnatural.com/product/garden-dust/
index.html
Update bootstrap to the latest version (4.4.1)
update bootstrap to latest version and update pages according to that, no scrolling on any page (expect result page, when content is large, only vertical scroll), no horizontal scroll in any case
Use bootstrap extensively to design, position(spacing and size, etc.) elements
colors/design may be changed, it must look aesthetic.
remove/update the redundant CSS on the go.
Make the design responsive
Before starting with it, understand what each and every element does.
Understand the flow of the whole code and website.
No functionality should be changed, no functionality should be broken.
If there is any doubt, Kindly ask.
Code neatly, Comment nicely!!
This issue will be assigned to @abhu-A-J, considering the previous contributions and understanding of the code.
on clicking logo, go to "/"
There is no navbar in he index file.
Change the href to # for Corp Ai anchor tag in navbar.
Find and Change the tree in the bg to a similar tree(of bigger size), so that it looks clear.
We need 1-3 pages i.e.
Landing/Cover Page
Depends on your creativity, you can add a description, animation, or anything you feel
relevant
Input form
This form contains only one required input field, that takes an image of leaf as input.
Result
Here the result presented under 3 categories, namely, Symptoms, Treatment, and
Recommended products.
Add all the pictures/animations/icons or their link with your PR.
Submit in a proper format, so that UI developers can use it without having the designing tool.
This task is open to the creativity of the contributor.
Refer these:
https://medium.theuxblog.com/11-best-prototyping-tools-for-ui-ux-designers-how-to-choose-the-right-one-c5dc69720c47
https://www.creativebloq.com/how-to/20-best-ui-design-tools
add a class name hidden in ../src/assets/index.css
it, when added to any div, should hide that div ( it must hide the div, as it is removed, after hiding it should not take space)
src/landing pages/ landing-2 and landing-3
Add jQuery in both html files above the bootstrap script tag.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.