I try to make a connected light with a raspberry pi 0 W and a Pimoroni mood light.
the goal is to control the light (color and brightness) from a website on a web server who is not my raspberry pi.
To make this, I use :
a flask web server to receive all the requests to change the color,
the unicorn package for the LEDs
a web server with a web page who you can control the color (just a html page)
a javascript script who fetch the raspberry pi
a raspberry pi tunnel to access securely my raspberry pi from the internet
and when i use my website, the website says :
Access to fetch at 'https://link.to.my.raspberry.com/color' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
this is my flask web server :
from flask import Flask, jsonify, render_template, request, url_for, redirect
import unicornhat as unicorn
unicorn.set_layout(unicorn.AUTO)
unicorn.rotation(0)
unicorn.brightness(0.4)
width,height=unicorn.get_shape()
app = Flask(__name__) # Flask constructor
@app.route('/')
def home():
return render_template("home.html");
@app.route("/color", methods = ["POST"])
def setColors():
print(request.form)
red = request.form["red"]
green = request.form["green"]
blue = request.form["blue"]
brightness = request.form["brightness"]
print(red)
print(green)
print(blue)
unicorn.set_all(int(red), int(green), int(blue))
unicorn.brightness(float(brightness))
unicorn.show()
return ('', 204)
if __name__=='__main__':
app.debug = True
app.run()
app.run(debug = True)
this is my local website (home.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello !</h1>
<form action = "/color" method = "POST">
<p><h3>Enter LEDs color</h3></p>
<p><input type="range" id="red" name="red" min="0" max="255" step="1" style="width: 200px;"></p>
<p><input type="range" id="green" name="green" min="0" max="255" step="1" style="width: 200px;"></p>
<p><input type="range" id="blue" name="blue" min="0" max="255" step="1" style="width: 200px;"></p>
<p><input type="range" id="brightness" name="brightness" min="0" max="1" step="0.1"></p>
</form>
</body>
<script src="./index.js"></script>
</html>
and here is the javascript file :
let pitunnel = "https://my.link.to.my.raspberry.com"
document.addEventListener("mouseup", async function apiFetch(params) {
let red = await document.getElementById("red").value;
let green = await document.getElementById("green").value;
let blue = await document.getElementById("blue").value;
let brightness = await document.getElementById("brightness").value;
const response = await fetch(pitunnel + "/color", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({red : red, green : green, blue : blue, brightness : brightness})
});
})
It should be noted that I've tried to use this file home.html and it worked, bit i want a instant update, not a button to click :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Bonjour !</h1>
<form action = "https://my.link.to.my.raspberry/color" method = "POST">
<p><h3>Enter LEDs color</h3></p>
<p><input type="range" name="red" min="0" max="255" step="1" style="width: 200px;"></p>
<p><input type="range" name="green" min="0" max="255" step="1" style="width: 200px;"></p>
<p><input type="range" name="blue" min="0" max="255" step="1" style="width: 200px;"></p>
<p><input type="range" name="brightness" min="0" max="1" step="0.1"></p>
<p><input type = 'submit' value = 'mettre'/></p>
</form>
</body>
</html>