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?
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/
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.
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
You can send different images depending on the URL path request. See this tutorial: https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/
Thank you Sara, thank you for your tips, now i think i understand it. I will try now with all that information.