Julio Caso asked 3 years ago
HI, I would like to know if somebody could help me with this:
I would like to make a project of a electronic dice. Using a MPU 6050 I would like to know the face of the dice wich is in the top of the dice, when you roll a dice, there is a face wich stay on top and the number that you can see is the number that you use in a game for example.
I have the book build web servers with esp32 and esp8266 and help me a lot to understand different things and I studing this project https://randomnerdtutorials.com/esp32-mpu-6050-web-server/ to know how to program esp8266, but i dont find the solution.
I would like to make the project, using images (jpg) of faces of a dice, those images would be uploaded into the esp8266 with a html and a css file, but I dont understand how can I show a different image of a dice when a move the mpu6050.
The final step would be show three dices in a web, conected each dice with one different esp8266 and when one esp8266 roll, its dice in the web changes its image.
For aclaration and resume, I would like to make three electronic dices, with three circuits compounded of mpu6050 and esp8266. When i roll each circuit I can see in a web de top face of each dice.
Could somebody help me to make this project please?
Sara Santos Staff answered 3 years ago
Hi Julio.
Due to time constraints, we don’t create custom projects.
We can give you some tips to help you create your project.
First, I don’t recommend using the ESP8266 for this project. The MPU6050 web server crashed with an ESP8266. So, I recommend switching to an ESP32. Unless, you don’t need a real-time visualization of the current position, only the final position.
To show different faces on the cube that shows on the web server, you need to take a look at the three.js documentation. I know it has methods to set each face of the cube to a different image. I don’t remember how that is done. But, here is the official website: https://threejs.org/
Regards,
Sara
Julio Caso answered 3 years ago
Thank you Sara for your answer. I dont mind to use esp32, there is no problem.
I thought using threejs.org to draw a 3d dice, but i dont understand very well how to draw points of each face. So i think that maybe would be easier to show different jpg image, when mpu6050 show me a determinate angle. For example mpu show me 90° in x axis, a image of 2 points of a dice appeard in the web and so on.
I was studing your projects of sending reading with your book of js but i dont know how to use reading of mpu6050 in a js file to make on image or another image of a dice appeard in a webpage, could you give me some tips please? make a small example of pressing a button in a GPIO of a esp32 and some image uploaded in esp32 change one from another. This would help me a lot, because I dont know how to change an image uploaded in a esp32 when an event occurs.
Julio Caso answered 3 years ago
Could you make a small example of pressing a button in a GPIO of a esp32 and one image uploaded in esp32 changes one from another. This would help me a lot, because I dont know how to change an image uploaded in a esp32 when an event occurs. I only need the sentence in js, thank you
Sara Santos Staff answered 3 years ago
Hi.
You can send different images depending on the URL path request. See this tutorial: https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/
There are many ways to change an image using Javascript, I think the easiest way is to use the src attribute.
https://stackoverflow.com/questions/3207950/dynamic-javascript-image-src-path-replacement
https://www.w3schools.com/jsref/prop_img_src.asp
Regards,
Sara
Julio Caso answered 3 years ago
Thank you Sara, thank you for your tips, now i think i understand it. I will try now with all that information.
Sara Santos Staff answered 3 years ago
Ok.
Then, let me know if you need further help.
Regards,.
Sara