Knob+OLED Arduino - FULL TUTORIAL (Potentiometer and OLED Display, 128x64px, SSD1306, FREE CODE)
HTML-код
- Опубликовано: 1 июл 2024
- FINAL CODE: wokwi.com/projects/3276428843...
OLED Display: s.click.aliexpress.com/e/_AWSVnt
Solid Metal Knob: s.click.aliexpress.com/e/_A1T2J1
Learn how to create graphics for the OLED 128x64 Display (SSD1309) with the Potentiometer connected to Arduino UNO Board, using the U8G library.
TIMESTAMPS:
00:00 Intro
00:34 Start the project
03:03 Arduino IDE
04:08 First time running on Arduino
09:35 Making the label pretty
13:31 Polar coordinate system
18:29 Small tickmarks
24:20 Tickmarks on Arduino
29:20 Showing text for tickmarks
31:28 Arduino demo
31:39 FPS measurement
36:01 FPS on Arduino
36:12 Performance optimizations¨
39:02 Final changes
39:50 Line drawing algorithm
42:46 That´s it!
Few links related to this video:
u8g fonts (fonts available for u8g library): nodemcu-build.com/u8g-fonts.php
u8g documentation: github.com/olikraus/u8glib/wi...
Transparent OLED 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
Wokwi starting project: wokwi.com/arduino/projects/30...
Photopea (online Photoshop-like tool): www.photopea.com/
image2cpp (convert images into C code): javl.github.io/image2cpp/
#arduino #knob #oled
Keywords related to this video:
Arduino UNO, Arduino, OLED, u8g, u8g2, SSD1306, SSD1309, Arduino Display, Arduino Free Code, Wokwi emulator, Gauge, Meter, Knob, Potentiometer, Arduino, esp32, arduino project, arduino OLED display, Arduino display, Arduino OLED, OLED Arduino, ssd1306 OLED display, ssd1309 OLED display, arduino ideas, new project ideas, Arduino 2022, arduino oled 128x64, arduino project 2022, arduino project ideas, Arduino tutorial, microcontroller, ssd1306 Arduino
I really admire the amount of effort you've put into creating this video regardless of how simple of a project Idea this is. To have done it perfectly and with proper aesthetics, gave the project much more value. Looking forward to more of your videos!
Thank you very much for such a nice comment! I plan to publish more videos soon.
If you are not a programing teacher you should become one. Excellent step-by-step explanation, I will try it in my next project.
Thank you Radku for such a nice comment! I hope to become a RUclips-teacher in this channel 🙂 stay tuned for more videos and good luck with your projects
@@upir_upir You could also consider making Udemy courses and such. I for one know that I would pay to learn the content that you teach
Thanks for sharing, very helpful!
I tried this on a teensy 3.2 using hardware SPI for the display and got around 125 FPS, very smooth!
Thank you for letting me know the performance with Teensy! I plan to try it with Arduino compatible board to know how faster it would be, but 125FPS is pretty damn fast.
Great content you have over here brother, keep it up.
Subed.
Greetings from Tanzania 🇹🇿
Thank you Raymond, I’m glad you like it, and thank you for the sub. Greetings to Tanzania 👍
im addicted to your channel and decided this is my first ever arduino project..! ordered a leonardo, as im hoping to make a midi controller. got the display, board and pots .. WISH ME LUCK SENSEI!!💫
I wish you luck!! A thank you for your nice comment.
Dang, you guys are so ahead of me! I guess we all really on our own journey 😎
Don’t worry, there are also a lot of people that are behind you
The most detail explaination, subscribed
Thank you!
Value rounded to integer, will make potentiometer as an input keyboard, suited for combination lock. Function turning to max value, then decreasing to first pair and pausing 3 seconds will enter first pair combination, going to min value and then to second pair stepping 3 sec will enter second combination, then going to max value and back at pause will enter the 3rd combination, then turning to max value will open the lock. Good presentation well documented thks.
Thank you for an interesting idea. If you make this work, please send a WOKWI link, I´m sure other viewers would like to see it as well. Thank you and good luck with your projects!
This works great. built it very quickly. comment#1, the wowki page is great, but it shows it as I2c connection i guess...was a bit confusing to me but i am not very smart. i hooked to a cheap .96" oled screen that only had I2c connections. Middle pot pin to A0, sda to sda, scl to scl. Works perfect. And the cool unintended effect, my cheap oled is the type with the yellow on the top portion and blue below....the code worked out perfect where the dial part is all blue and the top indicater and "percentage box" is all yellow. Very cool. Can't wait to see more of your stuff. SUBSCRIBED.
Thank you for your exhaustive comment, I´m glad you were able to eventually run it. I describe more about the connection in the latest video (3D cube). Also, good idea about using the two color yellow-blue display. I need to order that display and try it! Finally, thank you for subscribing and I hope you will enjoy my future videos as well.
Great video, I'm moving away from arduinio a bit but your video is brilliant, you gained a subscriber
Thank you for your comment and subcribing. Are you moving to a different microcontroler?
Done the same. Moved to Esp32 series (in combo with Ads1115 ADC) using vs code in combinatie with platformio. Offers soooo much more than Arduino.
This is awesome, I used the i2c connection on a Seeeduino Xiao. Took me all day but I got it eventually.
That´s great to hear, thank you for your comment. Out of curiosity, what was the reason for taking all day? Thanks!
@@upir_upir I had a hell of time with the constructor for my hiletgo OLED screen, it's a sh1106. And using the wrong one crashes the xaio and then I'd have to reboot it and try another until I got it to work. So mostly just my inexperience.
Good content. Subscribed!
Thank you, Alexei!
Merci pour vos vidéos. Et un abonné de plus!
That´s great, thank you! (although, obviously, I has to use google translate to understand the message)
thank for your project. it's so good idea and your cool.
Thank you, I appreciate it!
more 1-bit animation lessons! that thing with the line at the end blew my mind more than I care to admit.... :D
Thank you for your comment, John! I´m glad you like it, and I will certainly reveal more drawing algorithms and techniques in the future videos. If you have any particular effect in mind, please let me know.
Thanks for a great video and excellent explanation.
You are welcome, Osvaldo. Thank you for your comment!
Wonderfull project, thank so much
That’s great, thank you for your comment and good luck with your projects!
VERY VERY USEFULL VEDEO! Thank you!
Glad it was helpful!
Gracias. Excelente video. Thank you!!
Thank you for your comment, I´m glad you like it!
Very helpful just completed this project.
That’s great, thank you for your comment and good luck with your future projects!
@@upir_upir same to you Thank you.
Thank you so much. Very good tutorial.
Thank you for your comment, I´m glad you like it!
Great project. Thank you
You are welcome, I´m glad you like it!
@@upir_upir I’m learning to program specifically for uses like this. Micro controlled UI. Yours is really slick mate.
That´s great! Do you have any photos of your creations to share? I would love to see what others are working on, especially when the display is involved.
i like it..! impressive project...
Thank you, adisapta!
One thing I always try to eliminate is the oscillation between adjacent values when the encoder is stationary but treading the line (especially with non-detent encoders). A 'demilitarized zone' either side of the current value which requires a legal reading of +/-2 is then valid but the counter shifts so not to lose steps. Maybe have a 9 bit counter divided by 2 to give 256 res to make it even more robust (for example).
Good idea. I will try that next time. I agree that the oscillating values when you do not move the knob look strange.
Love it
Thank you, Johnny!
I really like your videos
Thank you, Spencer, I appreciate it!
We can cached sin(radians(angle)), -cos(radians(angle)) instead, then can reuse it for the line_x. line_y and text_x, text_y as well.
Yep, I´m sure it could be improved in many ways. There is a second video where I´m doing exactly this.
very good content !
Thank you, Groza! I´m glad you like it.
Nice tutorial! I have seen someone add a motor to a knob to create haptic resistance. Maybe that could be a mod for this project.
Thank you. I have seen that video as well. It´s so great project that it´s hard to imagine doing it any better :)
I love it! I would make it into a volume knob. You should make a video on that. Also how much is the total cost for the knob and display.
That´s a great idea! I will try that for sure. Thank you for your comment.
this is cool
Thank you!
Try a "precision potentiometer" "multi turn" or search 3590s potentiometer, would go very well with this display 👍🏻
Thank you for the suggestions, I will definitely check those out.
it's amazing, I would like to change the potentiometer for a rotaty encoder, do you have any tips on where I'm going to change the programming?
I also really want to do this with a rotary encoder (i just built a cnc machine pendant and use a rotary encoder). If you find anything out please post a reply to this comment so we can learn or help each other. I will do the same.
Thank you both for your comments. In order to use the encoder, it´s easier to use some rotary encoder library, take the example sketch and change the potentiometer value using the encoder instead of using the potentiometer. I also plan to do the same thing in the next video, so stay tuned!
Thank you very much, your projects are very good, congratulations. I will continue to follow.
👍👍👍👍MUITO BOM
Thank you! But I had to use the help of Google translator 🙂
I tried to do a similar but much simpler drawing on a Digispark but couldn't make the libraries work on Arduinos work on the Digispark I have. I have a bunch of Digisparks and want to use with little oled screens but no luck with drawing.
What Digispark. Is it Digispark attiny85?
@@upir_upir Yes, exactly
@ I plan to record a tutorial with ATTINY85 + OLED, but in the meantime, you can look at this - www.14core.com/wiring-digispark-attiny85-with-096-oled-screen-display/
The u8g library is most likely quite heavy for something like attiny, so you need to use some lightweight libraries
Let me know if that was helpful. Thank you.
@@upir_upir It is great to know that you are already planning to upload a similar tutorial!
My plan was to build a cat laser with 2 servo motors and a Digispark. You may already know the concept, 2 servos randomly moves with an attached laser pointer and cats go crazy about it. Since not every place is suitable every range 2 servos may point, it is required to limit the area. I wanted to use a potentiometer and a button to set the angle servos can move. I want to display it on the oled with pie slice like view and increase or decrease the angle between the lines.
I am bad at describing it but this requires to draw pixels or lines. And I couldn't do it. I hope this will change:)
Let's always do good and emcourage others to do the same 🙏
I agree, but how is it related to this video?
@@upir_upir spread message 🙏
Very impressive ! I have to build a menu with a an oled. Do you know some ressources or have yout bot some link to help me.
I’ve trier to simutated it With à variable Thatcher are coordinates of an array.
But i think there is more simple.
Thank you! Here is a very simple menu example (not done by me) - wokwi.com/projects/291572875238834696
I plan to record an oled menu tutorial with some nice animations soon. Stay tuned!
@@upir_upir thank's à lot
You are welcome, sir!
Hello. and if you need 2 displays and 2 potentiometers? I understand that more than 2 or 3 displays and a potentiometer can not be installed?
you can connect multiple displays and multiple potentiometers. For Arduino UNO, you can get up to 6 potentiometers, since it has 6 analog inputs. For displays, you will most likely be limited by the performance - it´s quite slow on one displays, and it will be 2x slower on two displays. Also, you need a buffer, so realistically, you can get probably up to 8 displays connected to Arduino. What is your project that you need this for?
@@upir_upir there is a thought. make one display and 4 potentiometers. deej project. but try it to make a potentiometer with push button. 4 buttons with push, but the one display is on.
Would a faster microcontroller, like an esp32, make the animation smoother?
That’s what I will try out next. I will surely let you know
there must be a way to lower the sampling rate of the data so it doesn't flicker with varying numbers
Yes, there are multiple ways how to achieve that. However, instead of lowering the sampling rate, it would probably make more sense to average few last readings.
@@upir_upir I love this channel, it's got me using these OLED finally, I made an amplified exhaust temp gauge for my ultralight
can you make some vids with the lcd display?
Greate. Can you record tutorial where value will between on 0 to 360 and display view circle?
Do you want to stop on 0 and 360, or simply continue as full circle instead? Have you tried just changing the value of 100 to 360 instead?
@@upir_upir Yes. I want to make a compass display with with values [0..359]. If I see a value of 359 then the circle should be repeated. I tried changing 100 to 360 and it doesn't work like an endless circle.
I can give an example of compass in PFD Boeing
Could you perhaps send a link to picture? That would be helpful
@@upir_upir forums.x-plane.org/uploads/monthly_2016_05/Selection_662.jpg.49dcd17dd481a60aadc60a3a493ada89.jpg
How can we make the same project but with the straight band instead of circular one ?
Sure you can. Let me think what would be the easiest solution and get back to you soon.
@Upir I am still awaiting for your response
@@mustafa97radhwan Sorry for taking so much time, I still plan to try this and I will let you know
Can anyone solve my problem??,
I am using sh1106 i2c, instead of ssd1306, I modified the code,like instead of ssd1306, I put sh1106, it shows no error, but when I upload, it works fine for 2sec and the screen suddenly freezes😢
Try putting pull-up resistors on the I2C lines- some display modules don’t have those and the communication is unstable. I.e. “some” resistor between SDA and 5V and one more between SCL and 5V.
Thanks brooo you're a life saver😅😅
@@akshays8331 I´m glad it worked! Good luck with your project.
I create a project just to implement this
That’s great to hear, thank you for your comment!
Why not use a rotary encoder instead of a potentiometer?
That’s surely possible, and I will try it soon, but I’m having hard times trying to find breadboard friendly encoder
@@upir_upir Checkout adafruit's "Adafruit I2C QT Rotary Encoder with NeoPixel - STEMMA QT / Qwiic". Looks like it has holes for 0.1" pin headers or you can make a JST to dupont cable.
@@Codeaholic1 That´s great, thank you for the suggestion!
como colocar graus em vez de numeros?
If you mean just displaying degrees instead of numbers, just change the percentage symbol to degrees. If you want to have “true” degrees, the numbers are x3 for degrees, so you would need to divide it back
@@upir_upir That's right. set as 0, 90, 180....360 degrees.
to be used in a compass. Thank you for the reply.
@@markpedretti3765 That´s interesting idea. I might record second part for this video, I will make sure to include this modification.
what is exactly name of know you use?
It’s this one - www.aliexpress.com/item/32753503255.html
But you can also search for “solid aluminum knob” for more similar results.
@@upir_upir thanks
Nice job, but could you take a breath now and then.
Thank you. Yep, I´m still trying to find a balance between "too fast" and "boring". In the meantime, please use a slower playback speed.
cool project - but your code gave me so many headaches. So much bad practice and useless code in this. Still though, cool design for the display.
Thank you for your comment. I try to make it as much understandable as possible, so the code might not always be the best. Is there anything particular that is a big no-no?