Add sliders to your touch screen projects -- free library

[KrisKasprzak]

If you use touch screens (ILI9341_t3), maybe this slider library will add some flare to your GUI.

Library at: https://github.com/KrisKasprzak/ILI9341_t3_controls

Short vid on usage: https://www.youtube.com/watch?v=HE2Y7moK56A


Hope this helps someone.

[mjs513]

Thanks Kris - just saw the post, very cool.

[MatrixRat]

Thank you Kris, having loads of fun with it.

[MatrixRat]

Hi Kris. Double thank you again. Playing around exploring limits and came up with this:-



Very useful for visual feedback, hooked up to 16 encoders. Slider heights are 80 and with the higher vertical Touch resolution, a steady hand and a small-tipped stylus, Touch is workable for the 0 - 127 range of values.

Took some library edits to reduce the Ball size, necessary to make it all fit.

Thinking on the Ball, got my hand up for exposing Ball parameters to the user, eg.

Size.

Shape, Round, square, maybe a triangle, rotated 45 Deg, and Offset left or right so the pointy bit points at the end of the Tick mark. Or perhaps two triangles so the result is like a bow-tie cursor?

For the Tick marks, top same height as the rest and add the bottom one. Centered on the vertical line.

Any thoughts?

[KrisKasprzak]

Your wish has been granted.

Get the latest lib here: https://github.com/KrisKasprzak/ILI9341_t3_controls


1. New methods on vertical and horizontal sliders

xxx.setHandleSize(int val); // 4 to 40 pixels
xxx.setHandleShape(byte val); // one of the following: HANDLE_NONE, HANDLE_CIRCLE, HANDLE_SQUARE, HANDLE_TRIANGLE_1, HANDLE_TRIANGLE_2, HANDLE_TRIANGLE_3
xxx.change(); // sets a flag to force the lib to redraw inside the draw method--this is really only for special cases when using code to update a different slider, see ColorPicker example


2. added checker to eliminate redraw from other changes inside the draw method
3. fixed bars so they are centered with changes to handle size

[MatrixRat]

Thank you Kris. All the best.

[jkoffman]

Hi Kris, just stumbled across your library and it's looking great! One question - Is there a reason you use the UTouch library instead of Paul's XPT2046_Touchscreen library?

Thanks for all your hard work!

[KrisKasprzak]

I use the XPT lib when I can but I have some displays that won't allow sharing of the SPI and the UTouch let's you have separate connections for the touch.

[jkoffman]

Ah, makes total sense.

I haven't dug far into the examples yet, but is there one that shows the use of "pages"? In my application I want to use some sliders on a setup page, but not display them (or read them) when I'm on the main status page.

Thank you!

[MatrixRat]

Perhaps a #define to use the UTouch lib, otherwise default to XPT as per PJRC's display.

Hands up for a "multi page" example here as well.

[KrisKasprzak]

All, granting more wishes this week...

https://github.com/KrisKasprzak/ILI9341_t3_controls

Included in this new lib
0. fixed bugs
1. Button class with methods like change text, change button color, resize, show/hide enable/disable
2. Checkbox class with methods like change text, change button color, resize, show/hide enable/disable
3. OptionButton class with methods like add option, change text, change button color, resize, show/hide enable/disable
4. Multi-screen example that leverages these new controls

I deeply apologize for reworking many of the existing controls--which will require you to update you code, but I wanted class constructors and init's to be similar. Added some new methods, but if you have a project built on previous lib, sorry but you will need to update object creation, init, and a few other methods.

Have fun...

[wrightflyer]

Am I the only one who read this thread and immediately thought of?:

[MatrixRat]

Thank you Kris, O display genie. Looks awesome.
@wrightflyer, no - just distracted by the mundane so is next cab off the rank to play with.

[jkoffman]

Hi Kris,

I took the weekend and started playing with your library. I'm having a lot of fun so far!

I'm having one small issue. I am using the vertical sliders in a bit of a non standard way. In addition to the touchscreen my project has encoders, so for now I'd like to be able to use both. If I repeatedly call slider.draw(level) with new levels the library doesn't erase the existing handle, so I end up with multiples. I thought this was a limitation of the library, so I started looking into creating a slider.update(level) that would sort of meld .draw and .slide, but when I dug into the code the notes say that I should be able to use .draw the way I'm trying to.

I'm happy to post snippets of code to help debug this if you like, I'd just need to know what you want to see. All I'm really doing is one init, a draw, then subsequent draws with different levels.

Thanks again!

[KrisKasprzak]

not sure when you downloaded the lib, but a few days ago i posted version 5 which fixed some bugs. have a look in the header and if you dont see a

5.0 11/2020 kasprzak modified sliders, option and check to return true...


Perhaps get the latest. I'm not a sophoisticated GitHub user, so i just overwrite the old ver with new.

If you have v5, post a snippet and I'll take a look

[jkoffman]

Aha, I believe I have v4. I will check this out in the morning. Thanks for the quick reply!

[jkoffman]

I just updated to V5 and I'm still seeing the same results. I will try to find some time to create an example program that demonstrates what's happening. In the meantime, here's a quick photo:

[KrisKasprzak]

@jkoffman, very cool display. I can probably test at my end but I'll need to know what your slider parameters are. Can you just send me you init() statement? And setScale() if you are making that call

I have a hunch what the issue may be...

[jkoffman]

Absolutely, that part is easy!

  SliderLeft.init(DETAIL_SLIDER_LEFT_XSTART, DETAIL_SLIDER_LEFT_YSTART, DETAIL_SLIDER_LEFT_YSIZE, 
                  DETAIL_SLIDER_SCALE_LOW, DETAIL_SLIDER_SCALE_HIGH, DETAIL_SLIDER_SCALE, DETAIL_SLIDER_SNAP, 
                  DETAIL_SLIDER_SLIDER_COLOUR, DETAIL_SLIDER_BG_COLOUR, DETAIL_SLIDER_HANDLE_COLOUR);  
  SliderLeft.draw(LevelLeft);

I suppose you'll need something a bit more useful though, right?

  SliderLeft.init(125, 101, 100, 0 2, 0.4, 0.2, ILI9341_DARKGREY, ILI9341_BLACK, ILI9341_GREEN);
  SliderLeft.draw(LevelLeft);

I don't use setScale() outside of the init.

I am debating moving to the bar graph option instead of the slider. I initially wanted to be able to grab the handle and move it but now I'm reconsidering. I do love the look of the slider...so we'll see!

Thanks!

[KrisKasprzak]

@jkoffman, our exchanges crossed paths, i created some test code and can easily duplicate the problem. I have it fixed but need to test, and will re-post tonight. Problem is draw() is not automatically erasing previous point--simple fix.

Stay tuned.

[KrisKasprzak]

@jkoffman, The ghosting effect should be fixed and v5.1 is now posted. I added code in draw methods for the SliderH and SliderV to automatically blank out the old slider handle. The code is smart enough to no blank on first draw (as there is no old handle).

Tested
Graphicequalizer and colorpicker were one slider updates all others by calling something like slider2.draw(slider1.value);


https://github.com/KrisKasprzak/ILI9341_t3_controls

PS after looking at your display, I've been inspired to create better graphic displays for my projects!

[jkoffman]

Hi Kris! I downloaded and tried, and it works great! Thank you for fixing this!

I am glad you are inspired by my work. I honestly don't think it's that great, but I am happy it's something that will hopefully lead you to even greater things!

I was actually going to make a suggestion for a potential future release - segmented meters. In my case I'm measuring sound level so for the moment I'm showing it using discrete "LEDs" on screen. I have created some functions to draw them and fill them. Someday I'd like to add to these to allow different colours at certain levels, or potentially changing the colour of all segments once the level goes above a certain set point. The tricky part for me is trying to figure out how to do this generically without requiring an init that has a zillion arguments. For me stuff like this is easy enough to code once, but I would like to make it easily usable for the future. Someday...

[KrisKasprzak]

@jkoffman I built this mic processor for my DSLR and has meters for frequency levels. Maybe it will help.

https://youtu.be/tCUUaf6nYE8

[jkoffman]

Kris, that's an awesome project! Those meters look great. You've definitely inspired me to add colour to mine. I'll take a peek at how you handled it for further inspiration. I know how I want to do it, but you've likely got a smarter way!

Thank you for sharing!

[jkoffman]

Kris - One thing I just noticed. I believe lines 869 and 870 in ILI9341_t3_Controls.cpp might want to be commented out. There are a couple of println statements in there that I'm guessing were to aid in debugging.

Thanks again!