Turbo pressure gauge with Arduino and OLED display --- tutorial for beginners, u8g, Arduino UNO
ฝัง
- เผยแพร่เมื่อ 1 มิ.ย. 2024
- Do you like the video? Please consider buying me a coffee ☕, thank you! www.buymeacoffee.com/upir
OLED Display: s.click.aliexpress.com/e/_AWSVnt
Learn how to create a turbo pressure gauge using Arduino UNO, OLED display, and a simple potentiometer.
Final project: wokwi.com/arduino/projects/31...
Photoshop file source (Photopea): github.com/upiir/simplest_tur...
Parts:
Arduino UNO: store.arduino.cc/products/ard...
OLED Display: www.aliexpress.com/item/10050...
OLED Display is 128x64px OLED with SSD1306 driver chip, 1.54" size
10K potentiometer
Chapters:
00:00 Intro
02:19 WOWKI Arduino Emulator
05:13 Photopea online Graphics Editor
05:55 Create mockup image
21:20 Convert image to C code using Image2CPP
25:08 Display fullscreen image on Arduino
29:40 Add animated gauge
33:37 Animated gauge on Arduino
33:47 Add potentiometer
35:54 Potentiometer on Arduino
38:05 Split the background
42:02 upir logo
42:42 Animated turbo gauge icon
49:12 The end
Links:
WOWKI emulator: wokwi.com/
Start project from urish: wokwi.com/arduino/projects/30...
Photopea (online graphics editor): www.photopea.com/
Gamer font: www.dafont.com/gamer-2.font?t...
Image2CPP tool: javl.github.io/image2cpp/
Pressure sensor with Arduino: • Build DIY turbo gauge ...
Transparent display: s.click.aliexpress.com/e/_ABpnu7
Big OLED Display: s.click.aliexpress.com/e/_ADL0T9
Arduino breadboard prototyping shield: s.click.aliexpress.com/e/_ApbCwx
Arduino UNO: s.click.aliexpress.com/e/_AXDw1h
Normal OLED Display: s.click.aliexpress.com/e/_AWSVnt
#arduino #oled #ssd1306
Some keywords related to this video:
Arduino, gauge, car cluster, OLED display, Arduino Leonardo. Arduino UNO, SSD1306, 128x64, digital dashboard, speedometer, rpm meter, tachometer, odometer, fuel indicator, water temperature indicator, telltales, animation, OBDII, potentiometer, DYI project, electronics project, u8g, arduino library, WOWKI, online arduino emulator, Photopea, Adobe Photoshop, graphics design, UI design, monochrome, pixel, Arduino IDE, simple project, tutorial for beginners, simple easy to follow
![เกิดใหม่ทั้งทีก็เป็นสไลม์ไปซะแล้ว ซีซั่น 3 - ตอนที่ 57 [ซับไทย]](http://i.ytimg.com/vi/pNhft3YZFRE/mqdefault.jpg)
Do you like the video? Please consider buying me a coffee ☕, thank you! www.buymeacoffee.com/upir
I hope to see more of these, you do an excellent job breaking everything down while at same time not being boring!
Thank you for such a nice comment, that´s great to hear!
Thank you for making the videos you do, I've found your videos make these projects seem far less daunting!
Thank you for your nice comment, it’s great to hear because that’s exactly my intention. If you find the project simple enough that it inspires you to do your own, my work is done.
This was an excellent video. I’ve been looking for a way to design a pixelated image just for this reason and got a bonus virtual test for the arduino and screen out of it. I’m very much a visual learner so this changes things for me. To be able to make small changes to the code and then simulate the results without any physical changes to the hardware will save time and make retaining the information much more efficient for me. Thank you for this, and please keep these videos coming 🍻
Thank you for your very nice comment and good luck with your projects!
So cool, I’m a complete rookie but just ordered an Arduino board for an e85 percentage gauge but all this stuff has me wanting to do more!!!
That´s great to hear, thank you for your comment. Please feel free to post link to your creation, I would love to see it!
Awesome tutorial! Lots of details, tips and tricks and interesting tools. Thank you!!
Glad you liked it! Good luck with your projects.
Your knowledge on this is amazing, subscribed, want to see more.
That´s great to hear, thank you for sub!
Wow, thank you for these videos. It really inspires me on projects I could do.
That was exactly the intention, so I´m glad it´s working. Thank you, Spencer!
I don't understand English, but your video helped me learn a lot. New subscriber, thanks.
Thank you for subscribing! Hopefully the youtube automatically translated subtitles were at least a little bit helpful?
Your work is 'solid gold' !....cheers.
Thank you! I´m glad you like it
Thanks, this will help me a lot. I will try a voltage display with this progress bar.
That’s great to hear, good luck with your project!
Looks Great! Thanks for the tutorial.
That’s great, thank you for your comment Jonny!
Hadn't clicked the subscribe button for anyone for a while, happy to do it for you :)
That´s great, thank you!
What à great, intéressant and clever project. Thank’s à lot for the tutorial, explanations and links.
Thanks a lot for such a nice comment! I really appreciate it
Nice. I’m getting into arduino and want to set it up to turn on a fan turn on leds and display what is on with an LCD so this is a big help to see how to set up one aspect
Thank you, I’m glad it was helpful!
Whao..so detailed..this motivated me to learn coding. Its going to be basic knowledge in the future...thank you! Keep it up..
That´s great to hear, thank you for your nice comment and good luck with your coding adventure!
great video you are generous with the ressources.
Thank you, you are welcome, sir!
Thanks so much, great in depth explication!
Thank you! Please let me know what other topics might be interesting to you
You can normally setup your main frame (not moving pix) in the setup function so you don't need to draw the for each frame and everything go way faster
That’s a good idea. Could you please tell me how to do that? I haven’t found that in the documentation, but perhaps I’m just missing the right name of the function? Thank you for your help
Hi! Thank you VERY MUCH! Best ever Arduino code programming explanation for beginners I saw so far! Thanks for your time!
Thank you for your comment, that’s great to hear! I’m glad it was useful
Ahh yes, finally someone who can clearly explain how to do graphics and animation on displays such as these, not like the indian guys who expect you to know almost everything :)
Díky moc, upíre! :D
You are welcome, sir! :)
wow...!!! excellent video.. Hello from PERU :D
Thank you, krizz!
I MADE ONE OF THESE LAST YEAR!
I wish I'd seen this video! I had to do pretty much all of it on my own, would have been nice to have this guidance.
Thank you for your comment, hopefully next time I will be faster :) Could you perhaps share your creation? I would love to see what you have come up with. Thanks!
@@upir_upir I just moved, so it's all packed up right now, sorry! The hardest part was calibrating the MAF sensor that I was using!
nice tutorial, thanks!
Thank you, I´m glad you like it!
Thank you so much man, we’re playing digital jazz here baby
You are welcome, sir!
You need some sort of low pass filter on your numbers to stop the gauge bar values flickering up and down a little.
Thank you for the suggestion. I might try that later.
@@upir_upir Besides putting the potentiometer read values through some sort of low pass filter . . . you could also try a timer of some sort, if the potentiometer read has not changed after XX/ms, stop updating the display ?
@davelordy the potentiometer is a simple and Easy way to give user input to quickly change values .I'm sure it will be replaced by a real sensor
Esto es realmente increíble...
Gracias!
Wow amazing tutorial!
now i only have an tft 3.5 inch lcd display, is possible to use an tft lcd instead the oled display? The tft is bigger so i can add another informations like oil and fuel pressure, engine RPM or this is only possible using oled display because flicckering problem?
Thank you. Yes, it should be possible. The only downside might be the speed of updating the display with "slow" arduino.
How does it read the car though? It’s one thing to code and hook up and potentiometer. It’s another thing mounting and getting it to read an actual car accurately.
Thank you for your comment, but this video only described the graphics part. If you need real readings, you need to read either the data from CAN BUS or you can directly connect a pressure sensor to Arduino. I might record another video describing this step.. stay tuned :)
Very nice! Can thee arduino handle more than 1 sensor and display? Thank you
It can handle many sensors without any problem. You can also use more screens, but you might be limited with the Arduino UNO performance and it might update slowly. For more sensors, I have a dedicated video with 3 ultrasonic distance sensors to create a parking sensor.
@@upir_upir thank you so much!
Nice gauge my man.
I'm working on something similar currently.
(Si slovak ? :) )
Thank you! Feel free to post a link to your creation, I’m always curious to see what others are doing. Not quite Slovak, but very close 🙂
Hello, Thanks for your tutorials.
I tried this with "U8g2" library, and the impeller animation removes the inner ring of blower housing.
Do you know how to display transparent image with U8g2?
Sure, just add this line and it should fix it: u8g2.setBitmapMode(1);
For more details, please watch this video: th-cam.com/video/K5e0lFRvZ2E/w-d-xo.html
@@upir_upir Thanks a lot! This solved my problem :)
@@hanul7232That´s great to hear; good luck with your projects!
as said before, the best tutor and documentation reference; But I'm having a difficult flipping the fill, I've created a battery, I'm animating a charge level bar (filled) using potentiometer, works fine; but the level animate from top , how can I make it start at the bottom, just like a normal battery indicator in phones (vertically).
Looks like I'm missing something,
🤣🤣🤣, I guess I needed to post a comment before I can figure it out; I managed to make it works per design.
Thanks
Nice! I´m glad you did figure this out.
hello , does someone knows is this display would be bright enough for daylight sun usage ?
Yes, this is exactly the kind of display you want to use for daylight usage.
Nice video, if you could make the same but with oil pressure this would be awesome
Thank you! What do you mean with the oil pressure? Just a different icon, or would you think something else Should be different as well?
@@upir_upir Yes icon and sensor ofcourse. Im using a 0-5V oil pressure sensor and know how to use the code but making a more or less good looking interface is hard for me. This video was very helpful. It would be cool if you could upload a similar code but with oil can symbol and different scaling for us europeans 😅👍🏽.
Also a small rectangle showing the actual sensor readout (forexample 17.3psi)
Those are both great ideas, thank you for your feedback. I’m currently waiting for the pressure sensor and I will record another tutorial with switchable units, current value readout and few icons to choose from. Stay tuned!
@@upir_upir WOW! Thats perfect!
If I would use the middle of the bar as the zero point (so 2,5V from the potentiometer) and would like to fill the bar to the right when voltage goes above 2,5V and fill it to the left when voltage is below 2,5V how would I do it? Use if analogRead < 511 ug8.drawbox (and numbers to get it from the left side to the center) and map it to 511,0,62,0 to get it inverted and if analogRead>511 u8g.drawbox (from the center to the right side) and map it 511,1023,62,124? No idea, just guessing as I can't test it right now 😁
Yes, that´s one of the ways how to do it. I have done someting similar for one of the version of this project where also the zero was not all the way one the left side. For simplicity of the tutorial (it was already quite long), I have decided to not go into negative values for now. Good luck with your project!
Is it possible to change the code to show 0-0.5-1.0-1.5 and for example to add “bar” in the top right or bottom right corner. Can you explain in which row and what i must change?
Yes, all of this should be possible and hopefully not that hard. I would suggest to watch my other tutorials about Arduino and OLED displays, a lot of those topics are covered there and you will hopefully get a better understanding on how to create exactly what you would like to get.
@@upir_upir ok, i will watch your another tutorials. I will try to understand how exactly to change the code,just my knowledge about arduino codes are very basic. If i don’t understand will you help me?
Hey Upir! Thank you for the video!
I have a problem, Im using an arduino nano clone, my code works perfectly in wokwi, but when I upload it to my board if the a0 has no input the oled displays a value equal to 5V, I tried researching the problem, tried enabling the pullup resistor on a0 but the problem remains... If there is input from the sensor to a0 then its working properly
Thank you for your comment. Could you try a different analog input pin, perhaps? The pullup resistor should be disabled, otherwise, you will see the behaviour that you are seeing - i.e. reporting 5V when nothing is connected.
@@upir_upir thank you for answering! It was probably some noise or other interference when I was prototyping on a breadboard, I've put it in my car and it works as it should! I'm only learning arduino but your videos helped me a lot! Looking forward seeing new videos!
The gauge appears to fill the pixels vertically as it expands to the right. Is this also visible with the naked eye or a vide artifact?
Could you describe it little bit more? I´m not quite sure what you are talking about. Thank you.
Cool idea but , how to do calibration with pressure sensor and did you get it?
Thank you, Mide! I did get the sensor and I´m playing with it right now, but I need to find some reliable way how to find out that I´m getting the right values. I probably need to borrow some pressure equipment somewhere.. Anyway, the second part of the tutorial is in progress.
@@upir_upir I'm using a "cheap" chinese oil pressure sensor (0..150 psi ~ 10.3bar for 0.5 to 4.5V)
// read the analog in value:
sensorValue = analogRead(analogInPin);
// map it to the range of the analog out:
outputValue = map(sensorValue, 0, 1023, 0, 500); // ADC to V (0-5.00V)
outputValue = map(outputValue, 50, 450, 0, 103); // V to bar
// outputValue = map(sensorValue, 102, 921, 0, 103); // Or short way
The correct method to designing embedded UI, I know this too late!
What is the incorrect method?
I stupidly try every position for the graphic, text, and icon... I'm doubt why GUI is so hard, but it actually is easy👍
@@HabonRoofPlayground Yep, that might not be the worst way, but it´s surely very time consuming. It´s always much faster to start in some graphics editor before moving to coding.
followed along till 29:40, no matter what I did I cant get the "copy merged" to work. Any tips @upir?
Before "copy merged", you need to have something selected (for example Ctrl - A to select all). Or use the rectangular selection tool. Hope this helps.
Have you looked at u8glib 2? Version1 is deprecated
That’s right, I’m using it because it’s supported on the WOKWI emulator. I believe there wouldn’t be much difference in this case, the version 2 supports full frame buffer rendering, but 128x64 wouldn’t fit on the Arduino UNO. I will surely use u8g2 in future projects for displays not supported by the U8g library.
Sir how to arduino control in bt201 Bluetooth module
Thank you for your comment, but unfortunatelly I haven´t used this module yet. I´m sure you should be able to find some tutorials? Good luck with your project!
Nice project to combine your tutorial with turbo controller by gas pedal maybe?
Could you please be a little bit more specific? I don’t fully understand your comment. Thank you!
@@upir_upir In my mind sound better :)). I am thinking, if could be a "mini ecu"? Made in arduino. Some older engine with electronics and just put some buttons for direct tunning power
Hello upir, i have a question how am add that bosch sensor becouse this code use potentiometer and am stupid in programing am try my best and John Rides can´t post that code.
Hello and thank you for your comment. I’m currently experimenting with a real sensor, and it has three wires-5v, ground and signal. Based on the pressure, the signal goes from 0-5v, so it’s actually very similar to using potentiometer. You just need to correctly assign the values. If you have some similar sensor, you can just replace the potentiometer with the sensor and it should be fine. Please let me know if this was helpful. I plan to record another tutorial with the sensor soon.
@@upir_upir Hi its work but you need adjust it becouse my sensor have on atmospheric pressure 2.234v and in maximum presure 2 bar have 3.92v how i adjust it cant you help me pls i have it in my car and its not working
@@upir_upir cant you help me with that code for calibrating that sensor ?
I’m currently recording a second part with the sensor, hopefully that will answer some of your questions. Please check back later
@@upir_upir Hi upir when will you finish part 2
Can you make it work with a pressure sensor
Sure, you can do it. I plan to record a dedicated tutorial soon. Many pressure sensors work in the similar way as the potentiometer- depending on the pressure, it sets the voltage level. The code change is minimal, you just need to remap the values accordingly.
How to understand the connection of the display with arduino? why are two analogue inputs are connected to display why not one? what is their significance.
There is no analog input connected to the display. All the pins to between Arduino and Display are digital. Search for the "Arduino Pinout" to find out which pins are used for SPI or IIC communications. You can use other pins as well, but in that case, the SPI and IIC will be done via software and thus much slower. Hope that makes sense!
@@upir_upir thanks alot for instant the reply
You are welcome sir!
Want to see this project used in a menu? 𝐖𝐚𝐭𝐜𝐡 𝐭𝐡𝐢𝐬 𝐯𝐢𝐝𝐞𝐨> th-cam.com/video/HVHVkKt-ldc/w-d-xo.html
@29:00 your explaination of the display chip and its internal memory, also explains why the code refers to u8g.firstpage() and u8g.nextpage(). It would be useful to know how many pages there are on the chip and if this needs to be reserved with the initialisation. This way you could set up multiple pages and just switch between them when required. Very useful vid, thank you for sharing!!
Thank you for your comment, unfortunately I don’t know much more than shared in the video, perhaps someone else could clarify this more? All I know is that this chip has just enough ram to store content for 129x64 screen so something like page switching or double buffering might not be possible..
@@upir_upir u8glib, for lower Arduino memory usage, uses "window" like method to access to LCD RAM. It's 8pix (1 byte) high and LCD width # of bytes. If LCD is 64pix height then library need to access 8 * "8 pix page" - 1st page is initialised by u8g.firstpage(). This is why all drawings, pics need to be inside u8g.nextpage() loop.
@@jankomuzykant1844 Thank you for your comment, this type of information is exactly what I was looking for! I mean, I still don´t 100% understand all the details and why it´s done this way, but I feel like I´m at least moving in some direction. It also probably explains why in my latest video with the fast I2C connection, I was only seeing the first 8 lines of pixels, i.e. first "page".
@@upir_upir For some LCD it's impossible to read, modify & write internal RAM, then you need to make framebuffer inside Arduino or it's impossible to fit for example 24b colour 320x240 full frame. Library can write to LCD RAM in chunks but need draw pics & text also in chunks.
If 1st page is Y=0..7 then library generates data only if your program draws in this area. For 2nd page Y=8..15 and so on.
After complete of drawing one page, framebuffer is sent to appropriate "page" of LCD RAM, number of page is incremented (Y range also) and for this new conditions library needs another drawings - loop until u8g.nextpage
Don't know if it helps and is clear, sorry for my rusty english 🙁
@@jankomuzykant1844 I agree, and I think that you can draw static bitmap in the setup section and in the while loop only dynamic part of the screen, for example only the progress bar, and use update only for two pages (12pixels high is more than 8pix), that would rapidly increase framerate
Can you make ui for M5stack Core2? Thanks.
I will take a look, thank you for your comment!
Do you sell these gauges? or is this just for education video?
Thank you for your comment, it’s just for the education.
Potentiometers on a ADC is a bad method for user input because the value is unstable and will bound back and forth. Use rotary encoders instead.
Agreed. I have used potentiometer for simplicity, and also because it´s assumed that it will be replaced with a real sensor for the real application.
Great project, but upir, slow down a little bit, because for a beginner, it's a real ordeal... too fast. Maybe an experienced arduino architect is able to master it, but a common novice dies in this after 5 minutes
Thank you for your comment, I will keep that in mind, but hopefully beginners could use the playback speed options to slow it down. I usually watch all the other youtube videos at higher speed...
Sir can i use Arduino UNO R3 SMD ????
Sure, the only difference is the Arduino chip package, otherwise it’s the very same board.
@@upir_upir how can we add a buzzer when it goes up to 15?
wow i just loaded it on my .96 display while sitting in my truck, lol. it loaded no problem
That´s great to hear, thank you for your comment! What are you using this for?
@@upir_upir I have turbo Ford Escort project but 15 psi is a bit low for the low compresión build. Haha
I spent a little trying to reverse engineer your graphics to shift the numbers to start at 10 psi but I really don’t know what I’m doing. LOL
I believe you can upload the code back to image2cpp to generate the image and adjust it in photopea.. or just write me an email and I can help you
@@upir_upir Thank you and I will take you up on that. I just have to find more time to tinker with it.
Sounds like a plan!
Are you planning on connecting a display to your car's computer to read live data? That would be so awesome.
Yep, that´s exactly the plan that I´m moving slowly towards. Stay tuned! :)
@@upir_upir Hope the process is fun! Very cool
@@virtuous_pixel It is! Thank you
Can you show a number instead of a gauge, like 0 to 100 %?
Sure. Please watch my other OLED videos, and you might get an idea how to do that. If you have any specific question, please feel free to ask! Thanks.
Will it work as well with an LCD display?
It should be possible, but you would want to use a different library, not u8g. Actually, the easiest path would be to use intelligent display, for example Nextion of DWIN. See some examples here - th-cam.com/video/NpZMQjdKxBI/w-d-xo.html th-cam.com/video/t21-wF5F41Y/w-d-xo.html
If i use an smaller OLED display but with the same resolution 128x64 i will have to modify the photo?
Also, i live in Europe and we use BAR as a measurement if i change the numbers in the .psd will it work?
Yes, you can use any display size, as long s as the resolution is the same, you don’t need to change any code. I have a lot of 128x64 OLED displays varying from very small to quite big and they all work as expected. Changing the numbers in photoshop file will surely work, but you can also directly render text to screen. Please see my other videos for more details.
@@upir_upir if you don't mind one last question. I've got an electronic boost sensor and how can i find out if it works well with the potentiometer that u used?
The boost sensor should be used instead of the potentiometer. In many cases, the boost sensor will act like a potentiometer (voltage divider), you just need to assign the correct value to a particular voltage.
Hello! Would you sell one of these to me? with turbo boost and egt readings?
Thank you, but I´m not selling those. You are free to use the design and components and do it on your own, perhap even better :) What is egt?
@@upir_upir Aah ok, egt is exhaust gas temperature
@upir how to make curved gauge?
Do you mean something like this? th-cam.com/video/El5SJelwV_0/w-d-xo.html
@@upir_upir yes, but in this video there is not source code
@@RiccardoKing That´s correct. Please send me an e-mail and I will send you the code.
@@upir_upir mail sended, thanks
There are source code ?
Yes, it´s in the description of the video.
Are you making a Arduino toy or a pressure indicator
This particular project is a pressure indicator, but I have some newer videos with Arduino games - please feel free to watch them.
Ok, a turbo boost gauge without a pressure sensor.. or do have have to turn the knob myself while accellerating? 😂
Well, that’s one way how to do it, but probably not very convenient one. You can get a pressure sensor that reports the pressure using different voltage, and replace the potentiometer. I plan to record another video how to do that.
@@upir_upir Nice, I was wondering which sensor you're planning to use?
@@winandd8649 I´m currently playing with this cheap sensor, it should be specifically for turbo - s.click.aliexpress.com/e/_De912F3
@@upir_upir Nice find, thanks! (I haven't seen this one myself yet)
Where is CAN Bus chip and codes?
The idea is to connect it directly to the sensor, but you can surely try CANBUS. I don´t have such tutorial yet, but I plan to record it in the future.
@@upir_upir CANBUS communication will be quite slow, compared to tapping in existing sensors. I'm currently running similar setup im my car. I read the sensor every 100ms, cause i think it's unreadable if the analog read is flickering like crazy. Also for precise measurements i use external 5v reference, which is filtered.
@@user-lz1vh5pc5c Thank you for the info. Do you perhaps have more details about your projects somewhere else that you can share? Perhaps just photos? I´m interested to see what others are working on, and your project sounds cool.
@@upir_upir I'll send some material on your email 😀
@@upir_upir which i cannot find 😀
i thought this really connects to a car
Sure, you can do it. I actually record the video how to do that, it will be out soon.
This video is great! Exactly what I have been looking for 🙏🏽 do you have a email as I have a few questions
That’s great to hear, thank you for your comment! Please find my email in the about section of this channel..
Awesome project! I used this as the base setup for a project im working on, If its okay is there a way to contact you? Need a little help if are up for it!
Thank you for your comment, I´m glad you like it. Sure, please send me an e-mail, the contact is in the about page for this channel.
I just looked for your email and it's not listed unfortunately 😔