Forum Rule: Always post complete source code & details to reproduce any issue!
Page 2 of 2 FirstFirst 1 2
Results 26 to 46 of 46

Thread: Add sliders to your touch screen projects -- free library

  1. #26
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Was just gonna post about handle droppings and 1200 lines of code. Have created an array setup of 8 pages of 16 slider elements enabling ILI9431_t3_controls and 16 encoders to scroll thru the lot. The array covers every slider parameter and I found that altering per-slider colors triggered droppings when touch was used.

    Thought to check your Git first, found and had a play with the new release so here's an edited post.

    The compiler falls over with:-

    error: 'class SliderV' has no member named 'changed'

    From there, backed out and had a crack at the Multi-screen example and was greeted with:-

    error: 'ScreenX' was not declared in this scope.

    Runng on Win10, IDE 1.8.13 TD1.54B7. Pretty keen to get the new lib working so thanks in advance for guidance.

  2. #27
    Let me look into this. member Changed() will be easy to add back in, looking into ScreenX errror.

  3. #28
    @matrixrat, fixed up the library, let me know if something doesn't work.

    ScreenX issue was a typo SceenX was accidentially used
    changed() was removed as I found a better way to managed telling the user a control changed, added changed() back to support previous examples and implementations

  4. #29
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    @KrisKasprzak, just grabbed it thank you.

  5. #30
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Got the Multi-Screen example working, encoder trails gone.

    Have adjusted the foundations of my project to use the new library tho have the devil of finer detail namely getting the array system to present per (SliderElement.color ->colorData[stuff]) properly.

    Have indexed Handle shape and size working and observed that when a new handleshape is assigned to a slider that the previous handle image does not seem to be getting erased from a buffer before the new one gets plonked on to of it, so if it was Round and you change it to Triangle, you get to see a a triangle stuck into a Round then if you move it a little PacMan is left behind if you get the drift. Only happens when slider inits are changed on the fly.

    Otherwise, looking pretty darn good!

  6. #31
    @matrixRat -- I never intended to change the handle shape after init but depending on your use case this may be easy to address. What are you truing to do? Are you trying to dynamically change the handle as the user slides the handle or change the handle not when the user is interacting with the slider?

  7. #32
    @matrixRat -- I updated the setHandleSize() and setHandleShape() methods to redraw upon a change. The handle will only be redrawn after the draw method (that way we're not painting handles before the control is drawn.

    you only need to get the latest (v5.3) .h and .cpp files and recompile, no new or removed methods.

    example implementation using the graphic equalizer example

    Code:
          if (sBand1.value > 3) {
            sBand2.setHandleShape(HANDLE_TRIANGLE_1);
            sBand2.setHandleSize(10);
          }
          else if (sBand1.value < -3) {
            sBand2.setHandleShape(HANDLE_TRIANGLE_2);
            sBand2.setHandleSize(10);
          }
          else  {
            sBand2.setHandleShape(HANDLE_TRIANGLE_3);
            sBand2.setHandleSize(8);
          }

  8. #33
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Basically, playing around with MIDI stuff. Built a few controllers with pots, love 'em or otherwise, and then encoders, flying blind with no knob pointer... want something to remember and show where the knobs were set.

    What started out as a quest for some visual feedback for 16 encoders and yeah I suppose, rings of leds or whatever, and this library showed up and got my learning muscle inspired.

    The aim is to use this lib as a window into a larger matrix, say a set of arrays that hold the entire patch contents of a synth, pull in a patch and theoretically, the sliders dance, the encoders are all synced and then point at a block and use it, I guess you'd call it as a control surface - editor.

    Most of my synth parameters are 0-127, some are like 0-5, or 0-17 or whatever so that's why the big array covers all the details, and already have encoder and slider limits, tick, snap etc working. Figure using colors and shapes related to particular groups or functions offers extra user feedback.

    Um, yes the display is a little small, am eyeing off those 1280x400s. Geting the "first one working".

    Snagged the latest, many thanks.

  9. #34
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Got it working, not without a struggle. The latest lib tweak cleaned up loads of bits and pieces but did not evict the PacMan effect so played with Round of different sizes and discovered that if you assign say handle round size 10, ColorBack that a ring would remain after dropping a size 10 handle over a previous size 16 by assigning new SliderElement parameters to the same slider, so I figured the lib must be starting up with size 16 as a default so sniffed out line 56 in ILI9341_t3_Controls.h and changed it to #define SLIDER_HANDLE_SIZE 0

    For a double check, rolled back to the previous lib. Ragged bits returned as did different behavior in response to either touch or external input so the latest tweak gets a big thumbs-up.

    Am curious, will this lib run on a T4x as looking at the numbers it's inevitable that a stack collision will happen on the T3.2 when a per SliderElement MidiOutput class is added the way things are progressing.

    Here is a stripped version of the code in a zip as has a few tabs, might be useful as a dev tool.
    Uses a single encoder to scroll thru 10 Blocks and @Luni's EncoderTool to drive it.

    Thanks again.
    Attached Files Attached Files

  10. #35
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Playing around with a Horizontal slider and discovered that Snap doesn't seem to work and while setting up this example code found artefacts to do with handleShape(5) - only.


    Click image for larger version. 

Name:	HorizSliderIssues.jpg 
Views:	27 
Size:	95.8 KB 
ID:	24441

    And the code:-
    Code:
    #include <ILI9341_t3.h>           // fast display driver lib
    #include "UTouch.h"               // touchscreen lib
    #include <ILI9341_t3_Controls.h>  // custom control define file
    #include <font_Arial.h>
    #define FONT Arial_16
    //****************** Hardware details ****************************
    #define TFT_DC     9              // DC pin on LCD
    #define TFT_CS    10              // chip select pin on LCD
    #define LCD_PIN   32              // lcd pin to control brightness
    #define TOUCH_CLK 24
    #define TOUCH_CS  25
    #define TOUCH_DIN 26
    #define TOUCH_DO  27
    #define TOUCH_IRQ 28
    #define Rotation   3
    //#define USE_YELLOW_HEADERS
    #define USE_BLACK_HEADERS
    
    float VertVal = 2, HorizVal = 5;
    int BtnX, BtnY;
    
    char buf[22];
    ILI9341_t3 Display = ILI9341_t3(TFT_CS, TFT_DC);
    UTouch  Touch( TOUCH_CLK, TOUCH_CS, TOUCH_DIN, TOUCH_DO, TOUCH_IRQ);
    
    //SliderH Red(&Display, left, top, width, bar color, back color, ball color);
    SliderV Vert(&Display);
    SliderH Horiz(&Display);
    
    void setup() {
      Serial.begin(9600);
      pinMode(LCD_PIN, OUTPUT);
      Vert.init   (20,  20, 150, 0, 5, 1.0, 1.0, C_WHITE, C_BLACK, C_YELLOW);
      Horiz.init  (60, 200, 240, 0, 9, 1.0, 1.0, C_WHITE, C_BLACK, C_GREEN);
      Horiz.setHandleShape(5);
      Horiz.setHandleSize(16);
      Vert.setHandleShape(5);
      Vert.setHandleSize(16);
      Display.begin();
      Touch.InitTouch(PORTRAIT);
      Touch.setPrecision(PREC_EXTREME);
      Display.invertDisplay(false);
      Display.fillScreen(C_BLACK);
      analogWrite(LCD_PIN, 255);
      Display.setRotation(Rotation);
      Display.setTextSize(2);
      Display.setTextColor(C_WHITE, C_BLACK);
      Display.setFont(FONT);
      Horiz.draw(HorizVal);
      Vert.draw(VertVal);
      Display.setCursor(50, 20); Display.print((int)Vert.value);//
      Display.setCursor(200, 150); Display.print((int)Horiz.value); //
    }
    
    
    void loop() {
      if (Touch.dataAvailable()) {
        ProcessTouch();
        HorizVal =    Horiz.slide(BtnX, BtnY);
        VertVal =   Vert.slide(BtnX, BtnY);
        if (Vert.changed())
        {
          Display.fillRect (50, 20, 50, 50, C_BLACK);
          Display.setCursor(50, 20); Display.print((int)Vert.value);//
        }
        else if (Horiz.changed())
        {
          Display.fillRect (200, 150, 20, 20, C_BLACK);
          Display.setCursor(200, 150); Display.print((int)Horiz.value); //
        }
      }
    }
    //********************************************
    void ProcessTouch() {
      Touch.read();
      BtnX = Touch.getX();
      BtnY = Touch.getY();
    
    #if defined USE_YELLOW_HEADERS
      // tft with yellow headers
      BtnX  = map(BtnX, 240, 0, 320, 0);
      BtnY  = map(BtnY, 379, 0, 240, 0);
    #endif
    
    #if defined USE_BLACK_HEADERS
      // tft with black headers
      BtnX  = map(BtnX, 0, 240, 320, 0);
      BtnY  = map(BtnY, 0, 380, 240, 0);
    #endif
    }

  11. #36
    a couple of very silly mistakes on my part, but fixed either grab the new .h and .cpp files. or I can indicate the lines to edit in these files.

  12. #37
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Thank you again Kris. Here's the current action:

    Click image for larger version. 

Name:	MidiBlock2.jpg 
Views:	30 
Size:	137.0 KB 
ID:	24452

    Horiz slider indicates that we're looking at Block 2 of 10. Now that individual item color selection is working, next is to play with how colors are addressed..

  13. #38
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    As far as color seletion goes, have built a HSV-based approach which provides 16 colors and 16 levels each of Saturation and Value which works well with the display. Colors are chosen with eg. Ox0FF gives color 0 (Red), Sat15,Value15. R,G and B output values are restricted to 4-bit as AFAICT, the display does not respond to any more than that.
    Just back to it after some travels and am seeing a bag of compiler complaints wrt the new lib fix and I don't think my code is an issue as it works fine on the previous. So, looking at the Multi-screen example, here's the last few lines typical of what fills many screens of compiler output:

    Code:
    ^C:\Users\Pat\Documents\Arduino\libraries\ILI9341_t3_controls\ILI9341_t3_Controls.cpp:781:159: error: 'uint16_t' was not declared in this scope void SliderV::init(uint16_t SliderX, uint16_t SliderY, uint16_t SliderH, float ScaleLow, float ScaleHi, float ScaleSize, float SnapSize,uint16_t SliderColor, uint16_t BackgroundColor, uint16_t HandleColor ) {                                                                                                                                                               ^C:\Users\Pat\Documents\Arduino\libraries\ILI9341_t3_controls\ILI9341_t3_Controls.cpp:781:185: error: 'uint16_t' was not declared in this scope void SliderV::init(uint16_t SliderX, uint16_t SliderY, uint16_t SliderH, float ScaleLow, float ScaleHi, float ScaleSize, float SnapSize,uint16_t SliderColor, uint16_t BackgroundColor, uint16_t HandleColor ) {                                                                                                                                                                                         ^Using library SPI at version 1.0 in folder: C:\Program Files (x86)\Arduino\hardware\teensy\avr\libraries\SPI Using library ILI9341_t3 at version 1.0 in folder: C:\Program Files (x86)\Arduino\hardware\teensy\avr\libraries\ILI9341_t3 Using library UTouch in folder: C:\Users\Pat\Documents\Arduino\libraries\UTouch (legacy)Using library ILI9341_t3_controls in folder: C:\Users\Pat\Documents\Arduino\libraries\ILI9341_t3_controls (legacy)Error compiling for board Teensy 3.5.
    Thanks for your support, this Library is fun to play with.

  14. #39
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Need to add */ at line 34 of ILI9341_t3_Controls.h to shut the compiler complaints up.

    Been busy down the Touch rabbithole.

    Utouch although has excellent oversampling gives spurious touch output that can randomly trigger nearby touch elements and happens more so with higher CPU speeds.

    The Teensy XP-2046 touch lib lacks the oversampling of Utouch and although it works on T3.2 - T4.1, needs some love and digging through it's library noted a TODO by @Paul wrt oversampling. Hmmm, my project needs to use a T4x.

    Looking More closely at Utouch discovered that at 24 Mhz and lower, NO spurious touch data is present.

    Am using a Teensy LC @24 Mhz as a "Touch co-processor" configured to send via I2C EasyTransfer to the main board.

    There are probably more elegant ways of getting decent touch data but my coding skills are probably of Grade School standard. Ordering more LC's, am sure the spare pins on the LC will be put to good use.

  15. #40
    Thanks the issue was in the .cpp file.


    I actually use both touch drivers depending on my display. Some of my TFT's share the SPI nicely hence the XP-2046 is my first choice, other displays I need dedicated SPI lines. I generally try to use large buttons and such for touch objects and may mask the issues you are referring to. Good tips though.

  16. #41
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Oops, PEBCAK typo, sorry.

    Just climbed out of the ILI_t3_Controls lib rabbithole with a pic speaking of 2k+ lines of code.

    Click image for larger version. 

Name:	Msliders.jpg 
Views:	20 
Size:	108.1 KB 
ID:	24925
    The cursor colors were first separated from the handle color and then the transparent cursors were created as additional HandleShapes. Here's a take on using what's been added.

    Code:
      sRow1_BlockSel.setHandleShape(10); //Transparent double triangle
      sRow1_BlockSel.setTickColor(Get565Wheel(0x2FF)); // My way  of relating 
    // an onscreen number to a possible color without having to find it.
      sRow1_BlockSel.setCursorOutline(Get565Wheel(0x699));
      sRow1_BlockSel.setCursorFill   (Get565Wheel(0x699));
    Thinking of adding a few more Handles like say an uppercase Y rotated 90Deg and setCursorOffset for Triangular cursors as well, then dig into why the bottom Tick is not visible after a dynamic init. Note that the rightmost sliders have the bottom tick as are called in void setup().

    Not obvious here is a functional Midi output handler currently supporting CCs, NRPNs and several flavors of System Exclusive, yet to add output Port/ Cable handlers.

    Adding .setDisableColor(s) as well as you need to think about how to use them when you get esoteric with color schemes. Interestingly, when a Slider is disabled, it still responds to external input. Am not thinking this is a problem, instead a useful feature in that a disabled Slider can be used as a Midi input value monitor and be configured to convert say a CC or NRPN message to Sysex or whatever.

  17. #42
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Today's pic, everything works, no artefacts.

    Click image for larger version. 

Name:	LockdownIV.jpg 
Views:	23 
Size:	159.3 KB 
ID:	24952

    Never figured where the bottom ticks went, just how to put them there.

    Ditched the idea of a horizontal uppercase Y cursor for now at least and came up with the skinny triangle instead. Added setTriangleOffset which affects all triangle-based cursors. The rectangle just had to be created simply coz that's what many real hardware EQ's have.

    Have also separated the Touch pickup area from HANDLESIZE so you can have a big cursor and avoid any ambiguity as it can be easy to move two adjacent sliders. A positive side-effect would likely be that this will filter out at least some spurious touch data although have not actually tested this yet.

    As it stands, you can touch anywhere along the length of the slider and the cursor snaps to that location.
    Would be great if you could pick up the cursor and not have it move unless you drag it if you get my drift.

    Be delighted to hand up my efforts to be inserted into your library.

  18. #43
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    @KrisKasprzak -- Updating, >6k lines of working code now have full two-way Sysex comms with Roland JV-1080, mapped to two rows of 296 SliderElements. Time for some fresh dedicated hardware to free up the dev kit.

    Am thinking of another block of 16 encoders and a second screen. Hardware wise, it looks a simple matter to connect another display up but am venturing into unchartered code waters here.

    What needs to be done to get this lib working across two displays?

  19. #44
    You shouldn’t need to do anything Different to get sliders to work on a second displaying. Just create a second display object and a second touch object, then pass your display object to the slider objects that need to show up on that screen and that should be good. If you get stuck I’ll see if I can work up some sample code

  20. #45
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Ok, the penny dropped thank you Kris, now back to the breadboard..

  21. #46
    Senior Member
    Join Date
    Aug 2019
    Location
    Melbourne Australia
    Posts
    251
    Got it! playing around with the Multi example have sliders on two screens.
    Now for a general programming question wrt inits.
    In the Multi example we have this bit:-
    Code:
      // initialize sliders
      sBand1.init(BAND1, TOP, HEIGHT, MINDB, MAXDB, TickSetting, SnapSetting, SLIDECOLOR, BackColor, HANDLECOLOR);
      sBand2.init(BAND2, TOP, HEIGHT, MINDB, MAXDB, TickSetting, SnapSetting, SLIDECOLOR, BackColor, HANDLECOLOR);
      sBand3.init(BAND3, TOP, HEIGHT, MINDB, MAXDB, TickSetting, SnapSetting, SLIDECOLOR, BackColor, HANDLECOLOR);
      sBand4.init(BAND4, TOP, HEIGHT, MINDB, MAXDB, TickSetting, SnapSetting, SLIDECOLOR, BackColor, HANDLECOLOR);
      sBand5.init(BAND5, TOP, HEIGHT, MINDB, MAXDB, TickSetting, SnapSetting, SLIDECOLOR, BackColor, HANDLECOLOR);
      sBand6.init(BAND6, TOP, HEIGHT, MINDB, MAXDB, TickSetting, SnapSetting, SLIDECOLOR, BackColor, HANDLECOLOR);
      sBand7.init(BAND7, TOP, HEIGHT, MINDB, MAXDB, TickSetting, SnapSetting, SLIDECOLOR, BackColor, HANDLECOLOR);
      sBand8.init(BAND8, TOP, HEIGHT, MINDB, MAXDB, TickSetting, SnapSetting, SLIDECOLOR, BackColor, HANDLECOLOR);
    How would I call inits numerically rather than by name so we might end up with something like:-
    Code:
    initBand(bandNumber,BAND1, TOP, HEIGHT, MINDB, MAXDB, TickSetting, SnapSetting, SLIDECOLOR, BackColor, HANDLECOLOR);
    inside a loop instead of my amateurish repeated blocks of pretty much the same code/

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •