Forem: medmor

A day at the beach

medmor — Wed, 05 Jun 2024 18:23:57 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

To me, June marks the start of summer, bringing to mind just one thing: a perfect day at the beach.

Demo

My drawing using just HTML and CSS:

This is a link to the project on stackblitz.

Journey

In this project, I gained a deeper understanding of gradients and their impressive effects, as well as box shadows and basic animations.

Basic drag and drop implementation for nextjs (react)

medmor — Tue, 15 Aug 2023 20:00:02 +0000

There are some very good packages that implement drag and drop for react, but they are very complicated for me. They use state management libraries like redux, and always needed lot of setups to get things right.

If you just want to change a cursor style, you need to dive in the package codebase and try to understand how it works, and you may not succeed, like here.

Why all that? aren't drag and drop just html events like onclick or onchange...

Yes the are, and for simple use cases, the implementation is simpler than using a third-party solution.

In this article I will show a simple example for drag and drop functionalities.

Here is the example on StackBlitz.

Three events needed

To implement this simple example, we need to listen to dragstart event on the draggable element, and listen to dragover and drop events on the container or droppable element.
For that we can create two components:

Draggable component: Here we can use a div that has draggable attribute and listen to dragstart event. The implementation could be something like this:

import { DragEvent } from 'react';

interface DraggableProps {
  children?: React.ReactNode;
  className?: string;
  onDragStart?: (e: DragEvent<HTMLElement>) => void;
}
export default function Draggable(props: DraggableProps) {
  const onDragStart = (e: DragEvent<HTMLElement>) => {
    if (props.onDragStart) {
      props.onDragStart(e);
    }
  };
  return (
    <div className={props.className} onDragStart={onDragStart} draggable>
      {props.children}
    </div>
  );
}

Droppable component: Here also we can use a div and listen to dragover and drop events. The implementation could be something like this:

import { DragEvent } from 'react';

interface DroppableProps {
  children?: React.ReactNode;
  className?: string;
  onDrop?: (e: DragEvent<HTMLElement>) => void;
  onDragOver?: (e: DragEvent<HTMLElement>) => void;
}
export default function Droppable(props: DroppableProps) {
  const onDrop = (e: DragEvent<HTMLElement>) => {
    e.preventDefault();
    if (props.onDrop) {
      props.onDrop(e);
    }
  };
  const onDragOver = (e: DragEvent<HTMLElement>) => {
    e.preventDefault();
    if (props.onDragOver) {
      props.onDragOver(e);
    }
  };
  return (
    <div className={props.className} onDrop={onDrop} onDragOver={onDragOver}>
      {props.children}
    </div>
  );
}

Note that we can pass callbacks to those components. Those callback will be used by the parent components to manage their state based on those events.

Manage the state in the parent component

In this example, the parent component state consiste of:

Tho containers: one for the even numbers and the other for the odd ones.

 const [containers, setContainers] = useState<
    { name: string; numbers: number[] }[]
  >([
    { name: 'odd', numbers: [] },
    { name: 'even', numbers: [] },
  ]);

An array of items: just array of integers.
const [items, setItems] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9]);
The current dragged item:
const [currentItem, setCurrentItem] = useState<number>();

To manage the state we use an onDragStart callback to set the currentItem.

  const onDragStart = (item: number) => {
    setCurrentItem(item);
  };

And an onDrop callback to accepte the number or refuse it on each container.

  const onDrop = (index: number) => {
    if (containers[index].name == 'even') {
      if (currentItem % 2 == 0) {
        console.log('accept even number');
        setItems((items) => items.filter((item) => item != currentItem));
        containers[index].numbers.push(currentItem);
        setContainers((containers) => containers);
      } else {
        console.log('refuse odd number');
      }
    } else {
      if (currentItem % 2 != 0) {
        console.log('accept odd number');
        setItems((items) => items.filter((item) => item != currentItem));
        containers[index].numbers.push(currentItem);
        setContainers((containers) => containers);
      } else {
        console.log('refuse even number');
      }
    }
  };

The full example is here.

Support touch devices

Just add a polyfill that enables HTML5 drag drop support on mobile (touch) devices. like this one.

      {(navigator.maxTouchPoints ||
        'ontouchstart' in document.documentElement) && (
        <Script src="/DragDropTouch.js" />
      )}

Control rc car using raspberry pi (Part 5 : Wire up raspberry pi...)

medmor — Sun, 13 Aug 2023 12:37:52 +0000

The next image show how we can wire up the raspberry pi to the motor driver to control the two motors of the rc car.

I did my best, but I know it's a messy drawing.

Change the `server.py` to control the car

You can find the project at github here

In the server script, we will use a Car class to wrap all the needed functionalities to control the car.
For example: car.runForward(), car.setSpeed(), car.turnLeft() ...

The final server script look like this:

from bottle import post, route, static_file, run
from car import Motor, Car

car = Car(Motor(23, 24), Motor(18, 15, 14))

@route("/")
def index():
    return static_file("index.html", root="./")

@post("/right")
def right():
    car.turnRight()

@post("/left")
def left():
    car.turnLeft()

@post("/center")
def center():
    car.resetDir()

@post("/forward/<amount>")
def forwardWithSpeed(amount):
    car.setSpeed(int(amount))
    car.runForward()

@post("/backward/<amount>")
def backwardWithSpeed(amount):
    car.setSpeed(int(amount))
    car.runBackward()

@post("/speed/<amount>")
def speed(amount):
    car.setSpeed(int(amount))

@post("/stop")
def stop():
    car.stop()

@post("/siren")
def siren():
    car.siren()


run(host="0.0.0.0", port=8080, debug=True)

The car needs tow Motors instances passed as parameters.
The Motor class receive 2 or 3 numbers. These numbers are raspberry pi pins out used to control the motor. For more information about the pins, you can see here

I think if I try to explain how the GPIOs are set and used to control the motor and change the speed, the article will be too long. But I think also that by just reading the code and little search, you can understand how it works.

The Car and The Motor classes are defined like this:

import RPi.GPIO as GPIO
import pygame

GPIO.setmode(GPIO.BCM)

class Motor:
    def __init__(self, io1: int, io2: int, io3=-1) -> None:
        self.io1 = io1
        self.io2 = io2
        GPIO.setup(io1, GPIO.OUT)
        GPIO.setup(io2, GPIO.OUT)
        if io3 > 0:
            GPIO.setup(io3, GPIO.OUT)
            self.io3 = GPIO.PWM(io3, 1000)
            self.io3.start(60)

    def forward(self):
        GPIO.output(self.io1, GPIO.HIGH)
        GPIO.output(self.io2, GPIO.LOW)

    def backward(self):
        GPIO.output(self.io1, GPIO.LOW)
        GPIO.output(self.io2, GPIO.HIGH)

    def stop(self):
        GPIO.output(self.io1, GPIO.LOW)
        GPIO.output(self.io2, GPIO.LOW)

    def setSpedd(self, speed: int):
        self.io3.ChangeDutyCycle(speed)


class Car:

    def __init__(self, frontMotor: Motor, backMotor: Motor) -> None:
        self.frontMotor = frontMotor
        self.backMotor = backMotor
        pygame.mixer.init()
        pygame.mixer.music.load("siren.mp3")
        pygame.mixer.music.set_volume(1.0)

    def turnRight(self):
        self.frontMotor.forward()

    def turnLeft(self):
        self.frontMotor.backward()

    def resetDir(self):
        self.frontMotor.stop()

    def runForward(self):
        self.backMotor.forward()

    def runBackward(self):
        self.backMotor.backward()

    def stop(self):
        self.backMotor.stop()

    def setSpeed(self, speed: int):
        self.backMotor.setSpedd(speed)

    def siren(self):
        if(pygame.mixer.music.get_busy()==0):
            pygame.mixer.music.play()
        else:
            pygame.mixer.music.stop()

    #to do : call this method on server stop
    def cleanup():
        GPIO.cleanup()

Control rc car using raspberry pi (Part 4 : Build the controller)

medmor — Thu, 10 Aug 2023 14:13:46 +0000

The controller app UI

The UI for the app is very simple, just two buttons to run forward and backward, and a text to indicate the speed.
To turn the car, you need to turn the phone.

You can find the project on github here

The controller scripts

Learn to code using Unity is very simple, all you need is to crate a monobehavior script, attach it to a gameobject and you are good to go. Make things move!.

There are three important parts in our app.

The UnityWebRequest

We can send web requests by using the UnityWebRequest class from the namespace UnityEngine.Networking.
To achieve this I created a singleton script that can be called from all other scripts that needs to send web requests. The script is like this:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Networking;

public class RequestManager : MonoBehaviour
{
    [SerializeField] private string baseUrl;

    private static RequestManager instance;

    public static RequestManager Instance
    {
        get { return instance; }
        set
        {
            if (instance == null)
            {
                instance = value;
            }
        }
    }

    private void Awake()
    {
        instance = this;
    }

    public void SendRequest(string command)
    {
        StartCoroutine(Upload(command));
    }

    IEnumerator Upload(string command)
    {
        List<IMultipartFormSection> formData = new List<IMultipartFormSection>();

        UnityWebRequest request = UnityWebRequest.Post(baseUrl + command, formData);
        yield return request.SendWebRequest();

        if (request.result != UnityWebRequest.Result.Success)
        {
            Debug.Log(request.error);
        }
    }
}

Sendig Requests to run the car forward and backward

The buttons are set to listen to the PointerDown and PointerUp events.

    public void OnPointerDown()
    {
        isPressed = true;
    }
    public void OnPointerUp()
    {
        isPressed = false;
    }

While the pointer is down the speed will increase, and after a threshold in the difference of speed we send a Request for the server.

 void Update()
    {
        if (isPressed)
        {
            if (speed < minSpeed)
            {
                speed = minSpeed;
            }
            speed += speedIncrement * Time.deltaTime;
            if (speed > 100)
            {
                speed = 100;
            }
            if (Mathf.Abs(speed - lastSpeed) > speedDiffrenceThreshold || speed == 100)
            {
                UpdateSpeedIndicator();
                lastSpeed = speed;
                RequestManager.Instance.SendRequest(direction + "/" + (int)speed);
            }

        }
        else if (speed > 0)
        {
            speed = 0;
            lastSpeed = 0;
            UpdateSpeedIndicator();
            RequestManager.Instance.SendRequest("stop"); UpdateSpeedIndicator();
        }

    }

The RunController script is like this:

using UnityEngine;
using UnityEngine.UI;

using TMPro;
public class RunController : MonoBehaviour
{
    enum Directions { forward, backward }
    [SerializeField] Directions direction;
    [SerializeField] private Image speedIndicator = default;
    [SerializeField] private float speedDiffrenceThreshold = 10;
    [SerializeField] private float speedIncrement = 5;
    [SerializeField] private float minSpeed = 50;
    [SerializeField] private TextMeshProUGUI speedText;

    private float speed = 0;
    private float lastSpeed = 0;
    private bool isPressed = false;

    void Update()
    {
        if (isPressed)
        {
            if (speed < minSpeed)
            {
                speed = minSpeed;
            }
            speed += speedIncrement * Time.deltaTime;
            if (speed > 100)
            {
                speed = 100;
            }
            if (Mathf.Abs(speed - lastSpeed) > speedDiffrenceThreshold || speed == 100)
            {
                UpdateSpeedIndicator();
                lastSpeed = speed;
                RequestManager.Instance.SendRequest(direction + "/" + (int)speed);
            }

        }
        else if (speed > 0)
        {
            speed = 0;
            lastSpeed = 0;
            UpdateSpeedIndicator();
            RequestManager.Instance.SendRequest("stop"); UpdateSpeedIndicator();
        }

    }
    public void OnPointerDown()
    {
        isPressed = true;
    }
    public void OnPointerUp()
    {
        isPressed = false;
    }
    private void UpdateSpeedIndicator()
    {
        speedText.text = ((int)speed).ToString();
    }
}

Turning the car left and right

We use the smarthphne accelerometer to turn the car right and left. Unity makes this very simple, We just need to use the built in Input.acceleration.
The DirectionController script is like this:

using UnityEngine;


public class DirectionController : MonoBehaviour
{
    [SerializeField] private float directionChangeThreshold = 0.15f;
    enum Directions
    {
        center, left, right
    }
    Directions direction = Directions.center;
    Directions lastSentDirection = Directions.center;
    void FixedUpdate()
    {
        if(Input.acceleration.x > directionChangeThreshold)
        {
            direction = Directions.right;
        }
        else if(Input.acceleration.x < -directionChangeThreshold)
        {
            direction = Directions.left;
        }
        else
        {
            direction=Directions.center;
        }
        if(lastSentDirection != direction)
        {
            lastSentDirection = direction;
            RequestManager.Instance.SendRequest(direction.ToString());
        }
    }

}

Control rc car using raspberry pi (Part 3 : Run the server at startup)

medmor — Sun, 06 Aug 2023 20:55:44 +0000

Configure the server to run as a service at startup

To set up the server to run at startup using systemd, we need to create a unit file that we will name it carServer.service under /etc/systemd/system.

This file will contain the needed configuration informations to start our server at startup. We can configure our service like this:

[Unit]
Description=Rc Car Server Controller
Wants=network-online.target
After=network-online.target

[Service]
ExecStart=/usr/bin/python3 /usr/local/bin/carProjectServer/server.py
User=enakr
Restart=always
WorkingDirectory=/usr/local/bin/carProjectServer

[Install]
WantedBy=multi-user.target

Here you can see that the file contains multiple sections, and the content is self-explanatory. For example:

The ExecStart points to our python program that will be run when the service is started. You can change the path to match your workspace folder.
The After=network-online.target and Wants=network-online.target ensure that the service runs after the network is up.

Finally, we need to enable our service by running the command :
sudo systemctl enable rcCarServer.service.
Now, when you reboot the raspberry, the server should start.
You can check if the server is running with the command:
sudo systemctl status rcCarServer.service.

Control rc car using raspberry pi (Part 2 : The web server)

medmor — Sun, 30 Jul 2023 23:11:53 +0000

Building the web server

In this part, we will start building the web server that will run on raspberry pi and will receive commands to control the rc car.

The framework used

We will use Bottle a lightweight web framework for python.
This is the first time I use python to build a web server and it was a very positif experience.
With Bottle.py, all you need is:

Create a file, I named it server.py.
Create a route.
And run the server.
The minimal code needed to run a server is:

from bottle import route, run

@route('/')
def index():
    return "Hello world"

run(host='localhost', port=8080)

To let other devices on the same network connect to the server, we will change the last line to run(host='0.0.0.0', port=8080)

Thats it, the server is running and can be accessed from other devices in the same network.

Create the routes

The routes could be implemented differently, but for simplicity we will use six routes :

Tree routes to control the front wheels: /right, /left and center.
Tree routes to control the rear wheels: /forward/<speed>, backward/<speed> and /stop. We use, in the tow first routes, a wildcard <speed>, to make the routes dynamic and change the speed of the car. The speed is an int that can change from 0 to 100, I will explain how to use it in the next parts.
The code of the server.py is :

from bottle import post, route, run

@route("/")
def index():
    return "RC Car Server"


@route("/right")
def right():
    return "Car turning right"


@route("/left")
def left():
    return "Car turning left"


@route("/center")
def center():
    return "Car turning center"


@route("/forward/<speed>")
def forward(speed):
    return "Car running froward at speed : " + speed


@route("/backward/<speed>")
def backward(speed):
        return "Car running backward at speed : " + speed


@route("/stop")
def stop():
        return "Car stopped, the speed is : 0"

run(host="0.0.0.0", port=8080)

Thats it for the server, we will improve it in next parts

Control rc car using raspberry pi (Part 1 : Introduction)

medmor — Sun, 30 Jul 2023 14:39:21 +0000

This is my first post on Dev.to. I want to write about my last fun project for my kids.

This project was started as learning opportunity and to reuse some old staff, and both goals have been achieved.

The old staff reused in this project are:

A raspberry pi 4 that I was using as a kodi server.
A sheep non-working rc car.

What to learn from this project:

Build a minimal webserver using bottle.py, to receive commands from a smartphone.
Setup the python script as service that run at startup, using systemctl.
Build a minimal controller app for a smartphone, using Unity. (the app uses the smartphone accelerometer or gyroscope to control the car direction).
Wire up raspberry pi gpio to a motor driver to control the two motors of the car.

And let's go, this is the final result:

More details in the next parts.