DEV Community: BorisKlco

Watering System 💦 with web interface on Raspberry Pi

BorisKlco — Tue, 24 Oct 2023 09:56:14 +0000

Alright, alright I know what you thinking... Oh jeepers 😣 yet another raspberry watering tutorial with 4 lines of while loop... But hA! I will do it differently! I will make it "harder" on purpose! 😅

What about 🤔 somehow nice box, cam module for creating time lapse video AND web interface?

If you rlly want, something like this can be amazing project for learning basic electronics. Running linux on own HW, even learn little bit of soldering!

In this article I will describe my thought process, links and articles that helped me understand what is and how to use GPIO pins...

Schematic and thought process
Code review
Images, web site, github
Component breakdown

Schematic and thought process

My idea was do something "fancy" but not too much, main reason was that I dont have any experiences with custom design like 3D printed casing.

MacGyver time! I chose an old box from my GPU as a case, and used the internal anti-shock foam to hold the components in place.

Final product just unwraped itself! Only thing I did before setting it into case was inform myself about GPIO pins and what and how I need to connect tham.
For this I chose to use online graphic tool Excalidraw...
And after few rectangles, lines and dream later I have basic schematic for my watering system...

Code review

Path of least resistance

best choice for Raspberry Pi is Python... Quick, simple, and many things like GPIO, Cam driver is build for us. Bonus? do web interface in Flask. Do you need some fetching? Do htmx! You dont even need htmx... Flask will do everything for you... Building this with something like next.js is just... overkill.. But you do you 😅

Main reason why I split watering code and flask code is that I wanna run frontend on my VPS.
After watering, Pi will send data about it, as time, photo taken to my VPS.

VPS will resize photo, create new time lapse video, add record into db and serve all of it in frontend...

Let's write controller class for somehow manageable GPIO control..

controller.py

First we define how we wanna let our code know what GPIO pin we want to control.
We have 2 options, GPIO.BCM, GPIO.BOARD, difference is, BCM refers to literal name of pin, and BOARD is physical location on board.

ALL ABOUT PINS, and info for every pin can be found on https://pinout.xyz/

# GPIO/BCM Number
GPIO.setmode(GPIO.BCM)

# Physical/Board pin
# GPIO.setmode(GPIO.BOARD)

GPIO(General-purpose input/output) have 2 modes.. Input and Output.
after setting up how we wanna refer to our pin. We need pick what pin we wanna use and what mod will be used.

For more info how relay works, pleas read end of article Component breakdown

Relay class:

We will not read data from relay, we want control relay by sending low/high state of pin.
init will setup pin to GPIO.OUT
we will control On/Off state of relay by sending GPIO.output()
to power on relay we need send GPIO.LOW/0/False
to power on relay we need send GPIO.HIGH/1/True

Why Low to On and High to Off? Again, pleas refer to Component breakdown

class Relay:
    def __init__(self, pin):
        self.pin = pin

    def init(self, name):
        GPIO.setup(self.pin, GPIO.OUT)
        print(f"{name} - GPIO.OUT - pin {self.pin} - init...")

    def on(self):
        GPIO.output(self.pin, GPIO.LOW)

    def off(self):
        GPIO.output(self.pin, GPIO.HIGH)

Sensor class:

After powering on Relay what control voltage to Sensor, we want to read data from it.
Now we setup init class as GPIO.IN
We will read data from it just by calling GPIO.input(pin)

class Sensor:
    def __init__(self, pin):
        self.pin = pin

    def init(self, name):
        GPIO.setup(self.pin, GPIO.IN)
        print(f"{name} - GPIO.IN - pin {self.pin} - init...")

    def output(self):
        return GPIO.input(self.pin)

Setting up app.py to run code

We import controller
We define 2 relays and reading for sensor data

from controller import Relay, Sensor

sensor_data = Sensor(22)
pump = Relay(23)
sensor = Relay(24)

Now create few functions to make while loop clean

init() to set up modes for devices
sensor_output() , Turn on relay to power up sensor --> Make reading --> Turn off relay --> return reading(True or False)
water(sec=5), Turn on relay to power up pump --> sleep for x sec while pump is going --> Turn off relay

def init():
    sensor_data.init("Sensor output data")
    pump.init("Pump Relay")
    sensor.init("Sensor Relay")


def sensor_output():
    sensor.on()
    time.sleep(2)
    reading = sensor_data.output()
    time.sleep(1)
    sensor.off()
    return reading


def water(sec=5):
    pump.on()
    time.sleep(sec)
    pump.off()

While loop

call init() so we can control relay and sensor
create infinity while True: loop, we dont need to run code every sec,min or hour... Set up SLEEP_INTERVAL for something like 24h,48h.
to play it safe we can add GPIO.cleanup() to finally block to clear pins.

try:
    init()

    while True:
        time.sleep(SLEEP_INTERVAL)
        dry_soil = sensor_output()
        if dry_soil :
            print("WATERING!!!")
            water()

finally:
    print("\n-- END -- \ncleaning GPIO channels...")
    GPIO.cleanup()

Images, web site, github

Web interface have temporary images while I gather more data to put there...

Website: https://pi.tricksofthe.trade/
Github: https://github.com/BorisKlco/pi.watering-system

Component breakdown

Here, I will list all components and aliexpress listing for it.

5v Relay 2 channel

Best video about relay what you can watch is from Brad Henson! Depends on you, what type of relay you will buy, but in my case I have Relay One in his video

In very short explanation, we will use voltage from Pi, 5v -> VCC to power relay and activating it. This is why we have jumper connecting VCC and JD-VCC.

This is reason why we have define ON state in our code as Low State or GPIO.LOW, when we set INC pin to Low, we have 0 volts potential on that pin. This will create ground option for our VCC and turn on LED and activate relay.

WARNING!!! - DON'T SWAP VCC and INC PINS ON PI TO USE HIGH STATE AS ON STATE... CAN DMG YOUR PI IF RELAY WILL NOT USE EXTERNAL POWER SOURCE...

    def on(self):
        GPIO.output(self.pin, GPIO.LOW)

    def off(self):
        GPIO.output(self.pin, GPIO.HIGH)

Humidity Sensor

As with everything else you can buy several types of humidity sensor.

Andreas Spiess 10 min video explaining different type of sensors and how they works

Quick overview:

Two-legged sensor with controller PCB: Output is digital and analog but will be quicky destroyed after uninterrupted connection of power source...
Capacitive, unexposed copper sensor: Legs can't be dissolved in water, no exposed cooper. 555 timer creates a square wave for one leg, another leg of sensor is Ground, after sensor is submerged into water, two legs will create capacitator... fuucking genius!

Best possible choice what you can do is buy Capacitive Soil Sensor, but be careful! Quality of sensor in this case matters.

For this part I can advice you to watch video from Flaura - Smart Plant Pot , amazing overview of Capacitive Sensor and what can go wrong. Link to video

Quick overview:

Check if 555 timer and 662k voltage regulator is present.

Check if hole is between resistors and not under.

Pump

Any 3v,5v pump 💪 will do...

Cam

Buy Pi supported cam, you can even experiment with new python lib PiCamera2.

Tubes

Check Pump output width, from there you can pick "perfect" tubes for that...

Cables

1P-female to female will do...

Thank you for reading ♥ My next project will be watering system but on STM32 😮

Media Downloader in Next.js, tailwind, Flask&sqlAlchemy

BorisKlco — Tue, 25 Jul 2023 07:52:36 +0000

It sounds easy, right? 🤔 Just take the link from the user, do some stuff on the backend, and serve them the file. 🎉 In theory, everything sounds easy. Even 6-hour video tutorials on how to build a Twitter/Instagram or Spotify clone sound easy...🙄

But then you close the tutorial you were watching and try to do it yourself, only to discover that you have trouble even setting up the configurations... ☝🤓

What I'm trying to say is that beginnings are hard, man.

Link: https://scrappy.tricksofthe.trade/
Github: BorisKlco/nextjs.videoDownloader

I'm sure a more experienced person could rewrite this much better, but this is my first project, and I'm happy with what I learned. I learned about Next.js's new App Router options, how to run a Flask API, and how to store data with SQLAlchemy.

First, I created a draft template in Figma to visualize how I wanted the website to look. My goal was to create a simple design, as I believe that simplicity is king. Many websites that are designed for downloading media are bloated with unnecessary content, which is often done for the sake of SEO. However, I believe that a simple design is more user-friendly..

Backend and Flask API

I will use yt-dlp, a youtube-dl fork with Python support. To obtain information about the posted link and provide users with options to download media from it.

After user submits the form data to backend endpoint, I will use the yt-dlp class .extract_info to get a JSON object with all the information about the video, including the title, date, thumbnail, and formats.

@app.route("/extract_info", methods=["POST"])
def post_info():
    data = request.json
    with YoutubeDL() as ydl:
        try:
           info = ydl.extract_info(data, download=False)

               #Storing visit to db
               save_view = History(
                    title=info["title"],
                    image=info["thumbnail"],
                    link=info["original_url"],
                )
                db.session.add(save_view)
                db.session.commit()

           return jsonify(ydl.sanitize_info(info))
        except:
            return {"error": "Wrong URL"}

Another Flask endpoint will be /get_me_link, which will download selected media and provide user with a link to download it.

@app.route("/get_me_link", methods=["POST"])
def file_download():
    data = request.json
    file = download.get_file(data["url"], data["type"])
    return {"url": "https://url/serve_file/" + file}


@app.route("/serve_file/<file>")
def serve_file(file):
    path = os.getcwd()
    download_file = path + "/files/" + file
    return send_file(download_file, as_attachment=True)

Last endpoit is for serving data from db

@app.route("/history", methods=["GET"])
def history():
    db_query = History.query.order_by(History.id.desc()).all()
    result = []
    for row in db_query:
        result.append(
            {"id": row.id, 
             "title": row.title, 
             "image": row.image, 
             "link": row.link})
    return jsonify(result)

Next.js layout:

`<Search />`

After submitting the link, perform a basic link check to ensure that it is supported.

const supportedSites = [
    "youtu","tiktok","instagram","twitch","twitter","reddit",
  ];
function checkSupported(userInput: String) {
    return supportedSites.some((item) => userInput.includes(item));
  }

If site is supported fetch data with react-query and render <Result />

        {result.isFetching ? (
          <div className="flex justify-center items-center">
            <h1 className="truncate my-4 text-xl sm:text-3xl">
              LoAd1nG.. SeRvEr go Brrr..
            </h1>
            <Image
              src="/images/search/brr.svg"
              height={48}
              width={48}
              className="object-fit sm:pl-2"
              alt="Loading"
            />
          </div>
        ) : result.isFetched ? (
          <div>
            <Result data={resultData} />
          </div>
        ) : null}

`<Result />`

Check if data.error property exists. If it does not, return a nice representation of this data in divs, Link and Image elements.

At this point, we can also perform additional checks, such as if video is too long or if video is live streamed.

If everything is Gucci show user <Download /> component.

<Download url={data.original_url} type="audio" format="MP3" />
<Download url={data.original_url} type="video" format="MP4" />

`<Download />`

The download component is using react-query to fetch data after user clicks on it. The component will have three additional states: .isFetching, .isFetched, and none. The .isFetching state will be used to show a spinner wheel while the data is being fetched. The .isFetched state will be used to show a link to download the file. The none state will be used to show the download option.

{link.isFetching ? 
      (<button>
          <AiOutlineLoading className="animate-spin" />
        </button>) 
: link.isFetched ? 
     (<a href={linkData.url}> Download <Image/> </a>) 
: (
        <button
          onClick={() => {link.refetch();
            toast.success("Preparing it for uWu.. 🐱")}>
            {format}
        </button>
   )}

Next.js App Router `error.tsx` and `loading.tsx`

in app dir I created error handler error.tsx

must be 'use client'
you have optional props {error, reset} ( TS: { error: Error; reset: () => void } )

const Error = ({ error, reset }: { error: Error; reset: () => void }) => {
  return (
    <div>
      <h2>Something went wrong!</h2>
      <div>
        <Link href={"/"}>
          Go back home
        </Link>
      </div>
    </div>
  );
};

For the /history route, I use loader.tsx to create a skeleton if fetching data takes longer than expected. This skeleton will create a list of made-up items that look like the data after it has been fetched.

export default async function Loading() {
  return (
    <>
      <div className="mt-6 md:mt-8 flex flex-wrap">
        {Array.from({ length: 12 }, (movie, i) => (
          <div className="max-w-[16rem]animate-pulse" key={i}>
            <p className="truncate mb-2 invisible">Loading</p>
            <div className="animate-pulse"></div>
          </div>
        ))}
      </div>
    </>
  );
}

Thank you for reading ♥

Link: https://scrappy.tricksofthe.trade/
Github: BorisKlco/nextjs.videoDownloader