Why touch coordinates are not proper when I rotate the keyboard by -900 in Squareline stdio 1.5.0

What do you want to achieve?

What have you tried so far?

Screenshot or video

Others

  • **SquareLine Studio version:- 1.5.0
  • **Operating system:- Windows
  • **Target hardware:- STM32

You need to rotate the touch pad read.
For my situation this is how I use it

/*Read the touchpad*/
void my_touchpad_read(lv_indev_drv_t * drv, lv_indev_data_t * data)
{
    //debug( "in my touch pad read" );
    if(ts.touched()) {
      data->state = LV_INDEV_STATE_PRESSED;
      TS_Point p = ts.getPoint();

      //rotated the touch screen so it alings with the screen orientation
      //normally it would be data->point.x = p.x and data->point.y = p.y
      data->point.x = tft.width() - p.x;
      data->point.y = tft.height() - p.y;
    } 
    else {
      data->state = LV_INDEV_STATE_RELEASED;
    }
}
1 Like

Thanx @sprad001 for response.
This is useful when changing the screen orientation and rotating the whole screen by 90°.

I am referring to the keyboard rotation in Squareline Studio 1.5.0. The touch functionality works for other component rotations when set to -900 using STYLE → TRANSFORM → TRANSFORM ROTATION → -900. However, it does not work for the keyboard, even in simulation.

Hi,

After analyzing the problem, here are three potential solutions:

1. Container Approach

Instead of rotating the keyboard directly, place it in a container object and rotate the container instead. This often works better because:

  • The container handles the rotation transformation
  • The keyboard remains in its original orientation within the container
  • Touch coordinates are transformed correctly at the container level

2. Input Device Transform Function

This is the most direct approach. You’ll need to implement a custom input transformation function to correct the touch coordinates for your rotated keyboard:

// Add this function to your code to transform touch coordinates for rotated keyboard
void keyboard_touch_transform(lv_obj_t * keyboard, lv_point_t * p)
{
    // Get the coordinates relative to the keyboard's position
    lv_area_t kb_coords;
    lv_obj_get_coords(keyboard, &kb_coords);
    
    // Calculate relative coordinates
    lv_coord_t rel_x = p->x - kb_coords.x1;
    lv_coord_t rel_y = p->y - kb_coords.y1;
    
    // Get the keyboard dimensions
    lv_coord_t kb_width = lv_obj_get_width(keyboard);
    lv_coord_t kb_height = lv_obj_get_height(keyboard);
    
    // Check the rotation value (-900 = -90 degrees)
    int32_t rotation = 0;
    lv_style_value_t v;
    if(lv_obj_get_local_style_prop(keyboard, LV_STYLE_TRANSFORM_ROTATION, &v) == LV_RESULT_OK) {
        rotation = v.num;
    }
    
    // Transform based on rotation angle
    if(rotation == -900) { // -90 degrees rotation
        // For -90 degrees, swap x and y, then invert new y
        lv_coord_t new_x = rel_y;
        lv_coord_t new_y = kb_width - rel_x;
        
        // Convert back to absolute coordinates
        p->x = new_x + kb_coords.x1;
        p->y = new_y + kb_coords.y1;
    }
}

// Register this function to be called before keyboard processes touch events
void setup_keyboard_touch_transform(lv_obj_t * keyboard)
{
    lv_obj_add_event_cb(keyboard, kb_touch_event_cb, LV_EVENT_PRESSING, NULL);
}

static void kb_touch_event_cb(lv_event_t * e)
{
    lv_obj_t * kb = lv_event_get_target(e);
    lv_indev_t * indev = lv_indev_get_act();
    
    if(indev != NULL) {
        lv_point_t p;
        lv_indev_get_point(indev, &p);
        
        // Apply the transformation
        keyboard_touch_transform(kb, &p);
        
        // Update the touch point
        lv_indev_set_cursor_point(indev, &p);
    }
}

Add this code to your project and call setup_keyboard_touch_transform(your_keyboard) after creating your keyboard. This will intercept touch events and transform the coordinates before they’re processed by the keyboard.

3. Custom Keyboard Component

If neither of the above solutions works, you could create a custom keyboard component that extends the standard LVGL keyboard but includes proper handling for rotated touch coordinates.

Let me know if this helps or if you need any clarification!