CardsJoystick

Joystick Card

This feature is only available in ESP-DASH Pro
Preview

A dashboard component that provides a joystick to control some stuff and provides you with easy to interpret directional data via callback.

Initializer

/* 
  Joystick Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* directionLock (optional) )
*/
Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1");

Direction Lock

By default joystick works on both axis but you can lock joystick to either X or Y Axis, to make it easier to control.

You can supply it with lockX as 4th argument and it will lock to X axis.

Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1", "lockX");

Or

You can supply it with lockY as 4th argument and it will lock to Y axis.

Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1", "lockY");

Callback

Joystick Card requires a callback function which will be called when we receive a input from our dashboard. In setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument.

Joystick card has 2 callbacks, directional and coordinates:


Directional Callback

This callback will return the active direction of your joystick when it’s moved. It will be one of the following:

  • up
  • down
  • left
  • right
  • idle
/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the direction of joystick 'up', 'down', 'left', 'right' or 'idle'
*/
joystick.attachCallback([&](const char* direction){
  Serial.println("[Joystick] Current Direction: "+String(direction));
});

Coordinates Callback

This callback will return the active coordinates of the thumb of your joystick when it’s moved. It will provide x and y coordinates which ranges from -60 to 60 on each axis.

In case of X axis: -60 is left, 60 is right. For Y axis: -60 is up, and 60 is bottom.

/*
  We provide our attachCallback with a lambda function to handle incomming data.
  In this case, we will be getting x and y axis coordinates in range of -60 to 60
*/
joystick.attachCallback([&](int8_t x, int8_t y){
  Serial.printf("[Joystick] X Axis: %d, Y Axis: %d\n", x, y);
});

Updater

💡

Joystick card doesn’t require any updater as value is not passed back to dashboard.


Reference

This is a reference sketch showing positions for intializer and callback.

 
...
 
/* Joystick card initializer */
Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1");
 
 
void setup() {
  ...
 
  /* Joystick card directional callback */
  joystick.attachCallback([&](const char* direction){
    Serial.println("[Joystick] Current Direction: "+String(direction));
  });
 
  /* Joystick card coordinates callback */
  joystick.attachCallback([&](int8_t x, int8_t y){
    Serial.printf("[Joystick] X Axis: %d, Y Axis: %d\n", x, y);
  });
}
 
void loop() {
  ...
}
 
Copyright © 2024 Softt. All rights reserved.