Learning journal Susant

Laser cutting

Learning question:

How can I use the laser cutters in the Makerslab so I can cut the redesigned frame for the cart.

This was my first time using a laser cutter, so when I wanted to cut the new frame for the cart I had no idea what to do. The teachers at the Makerslab where there and they explained to me how I can use the laser cutter.

After they explained to me how to use the laser cutter I tried to cut the first frame for the cart. The penholder hole was only a bit too small so I had to cut it again. To make the hole bigger I used the interface from the laser cutter

Rotate stepper motor

Learning question:

How can I convert the steps from the stepper motor into degrees.

We want to have the bot be able to rotate because that is kinda important if you want to draw shapes. To get the bot to drive forward we give it an amount of steps to rotate. But to get the bot to make a turn I wanted it to be a bit more specific by being able to give it degrees.

If I want to use degree I first need to calculate how much steps it takes to make a full 360 degree rotation. I did this by testing every possible amount of steps till I got around 360 degree. When testing I managed to get a 360 degree rotation with 6875 steps.

Last thing I needed to do was to convert the steps to degrees. I took the amount of steps it took to make a full rotaion and divided it with 360 to get the steps required for a rotation of 1 degree. With the steps required to make a rotation of 1 degree I wrote a function for rotating the cart.

void rightTurn(long dis){
  dis *= amount;
  stepper1.moveTo(-dis);
  stepper1.run();
  stepper2.moveTo(dis);
  stepper2.run();
}

Implementing json

Learning question:

How can I use a json file to change the parameters for the detection script

This was the first time I had to use json and I dind't really understand how it worked. I knew how you could store data or variables into a json file. But i didn't know how I could get that data out of there and use it. When looking up how to implement it I found a website that explained to me how i could store data, the website also explained how to import the data in a diffrent python file and print it to your console. It however didn't explain how I could get an individual variable from the json script into the python script. To figure that out I tried asking chatGTP to help me with extracting specific data from the json file.

For the json file I had to log seven variables they would be: the color values for lower and upper red, the color values for lower and upper white, last time the mqtt sent something, an message and the mqtt connection. When I was writing the values for the variables I didn't know you could write the integer. what I did before was having the nummers in string which results in the progam not being able to use the variables as parameters since they required a integer. I learned that you could just put the integers after a team member showed me the correct way.

{

    "colorValues": {
        "red": {
            "lowerValue": {
                "hue": 0,
                "saturation": 100,
                "lightness": 100
            },
            "upperValue": {
                "hue": 180,
                "saturation": 255,
                "lightness": 255
            }
        },
        "white": {
            "lowerValue": {
                "hue": 0,
                "saturation": 0,
                "lightness": 150
            },
            "upperValue": {
                "hue": 180,
                "saturation": 100,
                "lightness": 255
            }
        }
    },
    "lastSendTime" : 10,
    "Message" : "nietBelangrijkeNlBroker/led",
    "mqttConnection": {
        "broker": "broker.hivemq.com",
        "port": 1883,
        "keepAlive": 8000
    }
}

To be able to use the json script with my python script I learned that I had to import the json package and load the file I wanted. I learned to open and get the file for the json script with the help of a website and it showed me to do it this way.

with open('variables.json') as f:
    jsonData = json.load(f)
    print(jsonData);

After I made the json script to store the variables I stored them in this python script. Whith them stored here I could get the values from the json file and use them pretty easy. And since the data is from a json file I can also change the values pretty easy whenever I want. To read the values from the json to this python script was a bit confusing for me at the beginning but after analyzing the code a bit better I realized that it wasn't that hard to understand.

# color values for red and white
redLowerHue = jsonData["colorValues"]["red"]["lowerValue"]["hue"] # values for red lower hue
redLowerSaturation = jsonData["colorValues"]["red"]["lowerValue"]["saturation"] # values for red lower saturation
redLowerBrightness = jsonData["colorValues"]["red"]["lowerValue"]["lightness"] # values for red lower brightness

redUpperHue = jsonData["colorValues"]["red"]["upperValue"]["hue"] # values for red upper hue
redUpperSaturation = jsonData["colorValues"]["red"]["upperValue"]["saturation"] # values for red upper saturation
redUpperBrightness = jsonData["colorValues"]["red"]["upperValue"]["lightness"] # values for red upper brightness

whiteLowerHue = jsonData["colorValues"]["white"]["lowerValue"]["hue"] # values for white lower hue
whiteLowerSaturation = jsonData["colorValues"]["white"]["lowerValue"]["saturation"] # values for white lower saturation
whiteLowerBrightness = jsonData["colorValues"]["white"]["lowerValue"]["lightness"] # values for white lower brightness

whiteUpperHue = jsonData["colorValues"]["white"]["upperValue"]["hue"] # values for white upper hue
whiteUpperSaturation = jsonData["colorValues"]["white"]["upperValue"]["saturation"]# values for white upper saturation
whiteUpperBrightness = jsonData["colorValues"]["white"]["upperValue"]["lightness"]# values for white upper brightness

mqttSubjectName = jsonData["Message"]

mqttName = jsonData["mqttConnection"]["broker"]
mqttPort = jsonData["mqttConnection"]["port"]
mqttAlive = jsonData["mqttConnection"]["keepAlive"]
waitTime = jsonData["lastSendTime"]

Source:

https://www.tutorialspoint.com/how-to-read-json-file-in-python

Learning story Ajax

Learning question: How can I implement Ajax so I can have my javascript script call the python function that sends json messages.

When looking for ways to implement my userstory and send user data to an mqtt I had a problem with trying to connect with the mqtt. When looking up ways to connect with the mqtt I thought of maybe just calling the python function that sends messages to the mqtt. But since I was using javascirpt and html I coudn't just call the function, when looking up ways to call python functions using javascript I learned about Ajax.

AJAX, which stands for Asynchronous JavaScript and XML, is a web development technique that allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This asynchronous communication means that a web page can update parts of its content without requiring a full page reload. AJAX is not a specific technology but rather a combination of several existing technologies.

In essence, this loadData function exemplifies the typical flow of an AJAX request. It initializes an XMLHttpRequest, configures it, sets up a callback function to handle the response, and sends the request asynchronously. Once a successful response is received, it processes the data, often in JSON format, and updates the content on the web page dynamically. This ability to fetch and update data without requiring a full page reload contributes to a more seamless and interactive user experience in modern web applications.

function loadData() {
    // Create a new XMLHttpRequest object
    var xhr = new XMLHttpRequest();

    // Configure it: GET-request to a server endpoint
    xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);

    // Set up a callback function to handle the response
    xhr.onreadystatechange = function() {
        // Check if the request is complete
        if (xhr.readyState == 4 && xhr.status == 200) {
            // Parse the JSON response
            var data = JSON.parse(xhr.responseText);

            // Update the content on the page
            document.getElementById('result').innerHTML = 'Title: ' + data.title;
        }
    };

    // Send the request
    xhr.send();
}

Source

https://www.w3schools.com/js/js_ajax_intro.asp

Learning story Flask

Learning question:

How can I implement Flask so I can use the webpage to run python code.

This is my first time using Flask and I had no idea what it was or how it worked. I needed it because I was making a webpage that could send data to the cart to make the cart drive. But the function to send the data was made in python and the webpage was made in html and javascript.

How I learned about Flask was when I looked at the different ways to execute a python code and after trying the other options I finally decided to use Flask. The first setup I did was installing flask this was a quick pip install that I had to do and flask would be installed. After the install I had to make sure I was importing the package.

After installing Flask I looked up how Flask works, I learned that it uses routes to work and I learned to make my own route. to make a route you first start with @app.route(). In the parameters you can decide the name for the route, if you don't put anything but just a "/" that route will be the root and the program will start with that route. Note that there only can be one root. In the root I made the function to send data to the mqtt to move the cart. I also have other routes these are the other pages of the website where you can change the settings for the broker and camera. When you are done with writing the routes you wan't you also have to run everything or else you won't be able to see anything. You can run everything with a simple app.run.

@app.route('/', methods =["GET", "POST"])
def gfg():
    if request.method == "POST":
       # getting input with name = fname in HTML form
       cart = request.form.get("cartID")
       # getting input with name = lname in HTML form 
       distance = request.form.get("distanceID") 
       angle = request.form.get("angleID")

       cart_int = int(cart) 
       distance_int = int(distance)
       angle_int = int(angle)
       send_json_message(client= client, cart= cart_int, distance= distance_int, angle= angle_int )
    return render_template("index.html")

@app.route('/brokerSettings')
def broker_settings():
    return render_template('brokerSettings.html')

@app.route('/cameraSettings')
def camera_settings():
    return render_template('cameraSettings.html')


if __name__=='__main__':
   app.run()    

Something important for using flask is knowing that Flask is really sensetive in how you organize your files. If you want to make a html page or render that page, make sure that you always put the html files in a templates folder. For your css you also need to make a seprate folder. Everything that isn't your html you want to load should be in a file called static. it's important to do this in order to make sure everything works well, Flask won't be able to find those files if you put them somewhere else.

Source

https://www.geeksforgeeks.org/retrieving-html-from-data-using-flask/