I recently got stuck on a project, I would like to know if there's a way to get the same result on a RPPicoW as on a desktop. I'm trying to deploy a webpage on RPPicoW that allows me to show a simulation of a robot on matplotlib, everything works fine if I run it from my desktop, but when I run it from mi RPPicoW the code doesn't work, it always says function not defined on the web console, like this:Console Error on Firefox
I've noticed that the web browser needs to trust the web page, I faced the same problem on my first attempt on a desktop, but I got it by running the next command:
python -m http.serverThis is my code on the desktop
`<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Ploteo</title><link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css"><script defer src="https://pyscript.net/alpha/pyscript.js"></script><py-env> - matplotlib - paths: - directa.py - ploteo.py</py-env></head><body><h1 style="font-size:70px;"><b>Prueba ploteo con Python y Matplotlib</b></h1><div id="plot"><h1 style="font-size:50px;"><b>Robot 5Dof</b></h1></div><div><p style="font-size:30px;"><b>Q1</b></p><input type="number" name="Q1" value="0" id="th1" style="font-size:30px;" min="-90" max="90" ><p style="font-size:30px;"><b>Q2</b></p><input type="number" name="Q2" value="0" id="th2" style="font-size:30px;" min="-90" max="90" ><p style="font-size:30px;"><b>Q3</b></p><input type="number" name="Q3" value="0" id="th3" style="font-size:30px;" min="-90" max="90" ><p style="font-size:30px;"><b>Q4</b></p><input type="number" name="Q4" value="0" id="th4" style="font-size:30px;" min="-90" max="90" ><p style="font-size:30px;"><b>Q5</b></p><input type="number" name="Q5" value="0" id="th5" style="font-size:30px;" min="-90" max="90" ><p style="font-size:30px;"><b>Paso</b></p><button id="calcular" type="submit" pys-onClick="f1" style="font-size:20px;">Calcular</button></div><div id="Salida" style="font-size:30px;"><b></b></div><py-script ,output="plot"> import numpy as np #from directa import fk import matplotlib.pyplot as plt class fk: def __init__(self,th1,th2,th3,th4,th5): self.q1 = th1 self.q2 = th2 self.q3 = th3 self.q4 = th4 self.q5 = th5 self.A0 = np.array([[np.cos(self.q1), 0, np.sin(self.q1), 0], [np.sin(self.q1), 0, -np.cos(self.q1), 0], [0, 1, 0, 10], [0, 0, 0, 1]]) self.A1 = np.array([[-np.sin(self.q2), np.cos(self.q2), 0, -10*np.sin(self.q2)], [np.cos(self.q2), np.sin(self.q2), 0, 10*np.cos(self.q2)], [0, 0, -1, 0], [0, 0, 0, 1]]) self.A2 = np.array([[-np.sin(self.q3), np.cos(self.q3), 0, -10*np.sin(self.q3)], [np.cos(self.q3), np.sin(self.q3), 0, 10*np.cos(self.q3)], [0, 0, -1, 0], [0, 0, 0, 1]]) self.A3 = np.array([[-np.sin(self.q4), 0, np.cos(self.q4), 0], [np.cos(self.q4), 0, np.sin(self.q4), 0], [0, 1, 0, 0], [0, 0, 0, 1]]) self.A4 = np.array([[np.cos(self.q5), -np.sin(self.q5), 0, 0], [np.sin(self.q5), np.cos(self.q5), 0, 0], [0, 0, 1, 6], [0, 0, 0, 1]]) #coordenadas cartesianas para ploteo y robot #coordenadas base self.l1 = np.array([[self.A0[(0,3)]], [self.A0[(1,3)]], [self.A0[(2,3)]]]) #coordenadas hombro A01 = np.dot(self.A0,self.A1) self.l2 = np.array([[A01[(0,3)]], [A01[(1,3)]], [A01[(2,3)]]]) #coordenadas codo A02 = np.dot(A01,self.A2) self.l3 = np.array([[A02[(0,3)]], [A02[(1,3)]], [A02[(2,3)]]]) #coordenadas brazo A03 = np.dot(A02,self.A3) self.l4 = np.array([[A03[(0,3)]], [A03[(1,3)]], [A03[(2,3)]]]) #coordenadas muñeca A04 = np.dot(A03,self.A4) self.l5 = np.array([[A04[(0,3)]], [A04[(1,3)]], [A04[(2,3)]]]) return def plot(th1,th2,th3,th4,th5): #llamando a la cinematica directa coord = fk(th1,th2,th3,th4,th5) #llamando a los coordenadas cartesianas p0 = np.array([[0],[0],[0]]) p1 = coord.l1 p2 = coord.l2 p3 = coord.l3 p4 = coord.l4 p5 = coord.l5 x,y,z = p0 x1,y1,z1 = p1 x2,y2,z2 = p2 x3,y3,z3 = p3 x4,y4,z4 = p4 x5,y5,z5 = p5 #Creando las lineas link1 = np.concatenate((np.transpose(p0),np.transpose(p1)),axis=0) link2 = np.concatenate((np.transpose(p1),np.transpose(p2)),axis=0) link3 = np.concatenate((np.transpose(p2),np.transpose(p3)),axis=0) link4 = np.concatenate((np.transpose(p3),np.transpose(p4)),axis=0) link5 = np.concatenate((np.transpose(p4),np.transpose(p5)),axis=0) #Creando el plot fig,ax = plt.subplots(subplot_kw=dict(projection='3d')) ax.set_xlim(-25, 25) ax.set_ylim(-25, 25) ax.set_zlim(0, 30) ax.set_xlabel("X axis") ax.set_ylabel("Y axis") ax.set_zlabel("Z axis") #ax.set_autoscale_on(True) #ax.view_init(elev=30, azim=45, roll=0) #ploteando puntos ax.scatter(x,y,z, c='red',marker='o', label='Joint 0') ax.scatter(x1,y1,z1, c='black',marker='o', label='Joint 1') ax.scatter(x2,y2,z2, c='black',marker='o', label='Joint 2') ax.scatter(x3,y3,z3, c='black',marker='o', label='Joint 3') ax.scatter(x4,y4,z4, c='blue',marker='o', label='Joint 4') ax.scatter(x5,y5,z5, c='blue',marker='o', label='Joint 5') #ploteando lineas ax.plot(link1[:,0],link1[:,1],link1[:,2],c='yellow', label="Eslabon 1") ax.plot(link2[:,0],link2[:,1],link2[:,2],c='yellow', label="Eslabon 1") ax.plot(link3[:,0],link3[:,1],link3[:,2],c='yellow', label="Eslabon 1") ax.plot(link4[:,0],link4[:,1],link4[:,2],c='yellow', label="Eslabon 1") ax.plot(link5[:,0],link5[:,1],link5[:,2],c='yellow', label="Eslabon 1") # ax.set #ax.legend() #plt.show() fig final = "Px: "+str(p5[0])+" "+"Py: "+str(p5[1])+" "+"Pz: "+str(p5[2]) pyscript.write('Salida',final) return fig def f1(*args,**kwargs): th1 = Element('th1').element.value th2 = Element('th2').element.value th3 = Element('th3').element.value th4 = Element('th4').element.value th5 = Element('th5').element.value try: #convirtiendo texto a flotante qd1 = float(th1) qd2 = float(th2) qd3 = float(th3) qd4 = float(th4) qd5 = float(th5) #Pasando a Radianes q1 = np.deg2rad(qd1) q2 = np.deg2rad(qd2) q3 = np.deg2rad(qd3) q4 = np.deg2rad(qd4) q5 = np.deg2rad(qd5) s = plot(q1,q2,q3,q4,q5) pyscript.write('plot',s) except Exception as error: pyscript.write('Salida',error) #q1 = np.deg2rad(0) #plot(q1)</py-script> </body></html>I noticed the next on the console one is from the web page on the desktop, the other one is from the RPPicoW
Desktop:
RPPicoWenter image description here
In the first image, you would notice that the web browser trusts 2 py files, In the example above I don't use it, because it is an RPPicoW code, in desktop code, I can call them without trouble.
¿There is a way to force the web browser to trust on RPPicoW HTTP server, or I should work it as a https server?
Thanks in advance.
