PLANTEST

• 

  PLANTEST logo

Inspiration

We wanted to make an easy to use web-app that would let people design and visualize their garden, teach them about the plants they want to grow, and allow them to easily buy the seeds for their plants all in one place.

This project was made for the Saturn (Agriculture) course of Citrus Hack 2020.

What it does

PLANTEST lets you design your own garden straight from your web browser. It keeps track off all of the types of plants you have put in your design, and tells you how much it will cost to make your garden in real life. It also provides you with links on where to buy the seeds for your plants online.

Once you've bought your supplies, you can download and print a PDF file which contains your design, along with watering and seasonal information for each one of the plants in your garden. You can take this printout with you to your garden as a reference to make your design a reality!

You can also save your garden file, which can be shared with friends or anywhere online. This file can be loaded on any other computer within the app so others can use and expand on your plans.

Find it here: https://fanrco.github.io/PLANTEST/

(Please Note that PLANTEST is meant to be used in Google Chrome on a Desktop/Laptop Computer)

How we built it

We used: Javascript for the overall functionality of the web app

Bootstrap, HTML5, and CSS for the overall web interface

The p5.js library for the garden interface

The jsPDF library for creating the printable .pdf file

Challenges We ran into

The jsPDF library requires images to be of a DataURL format. We had to figure out how to convert our p5.js canvas to a DataURL in order to add it to the PDF

Another issue with the jsPDF library is that our plant information text was too large to fit on the PDF document. We found a method in the documentation, however, that allowed us to implement Word Wrapping.

While testing our project on our local machines, we kept getting a CORS error. We fixed this by hosting our images on a free image hosting website.

We planned to save and load our garden files using a JSON.stringify method on our garden object, however this did not work. So we created our own methods and data formats for Saving and Loading garden projects.

Accomplishments that we are proud of

We are really proud of the look, feel, and simplicity of our interface. We're also proud of the Save/Load feature as it allows users to share their work with other users. The PDF feature is probably our favorite part, though, as it was a huge challenge to make and gives the user something physical to go out and use in their garden.

What we learned

We learned a TON of HTML, CSS, and JavaScript today. At first our plans seemed overly ambitious, but through the help of online forums, libraries, and self-study websites, we were able to implement all of the functionality we planned.

We also learned a lot about how important watering, spacing, and the seasons are for having a good garden. We we're surprised to see how cheap seeds are too! Even the most complex garden we designed only ended up costing 28 dollars.

What's next for PLANTEST

We plan to add more plant varieties, gardening supplies such as pots and potting soil, and add the ability to customize your garden size.

It would also be nice to create a forum where people can share their designs, real world progress, and helpful tips.

Built With

• bootstrap
• css
• html5
• javascript
• jspdf
• p5.js