Hello, I'm trying to add multiple sliders within a vertical slide menu, but values of the respective sliders on the right always include the subsequent values of the slider below it. Is this possible?

[LBend.1]

A singular slider works fine in the page. I've tried many callback/handler methods (individual for each slider, combined with cases), but can't seem to be able to fix the issue.

See my attached pageSetupView.cpp and pageSetupView.hpp functions pertaining to the sliders.

void ZoneSetupView::setupScreen()
{
	//Zone 1 Slider Definition
 
	zone1Temp.setXY(120, 60);
	zone1Temp.setBitmaps(touchgfx::Bitmap(BITMAP_SLIDER_BACKGROUND_ID), touchgfx::Bitmap(BITMAP_SLIDER_BACKGROUND_FILLED_ID), touchgfx::Bitmap(BITMAP_SLIDER_KNOB_CIRCLE_ID));
	zone1Temp.setupHorizontalSlider(14, 14, 0, 0, 200);
	zone1Temp.setValueRange(50, 250);
	zone1Temp.setValue(100);
	zone1Temp.setVisible(false);
	add(zone1Temp);
	zone1Temp.setStartValueCallback(zonetempsliderValueStartedChangeCallback);
	zone1Temp.setNewValueCallback(zonetempsliderValueChangedCallback);
	zone1Temp.setStopValueCallback(zonetempsliderValueConfirmedCallback);
 
	textZone1Temp.setPosition(360, 65, 115, 46);
	textZone1Temp.setColor(Color::getColorFrom24BitRGB(255, 255, 255));
	textZone1Temp.setLinespacing(0);
	textZone1TempBuffer[0] = 0;
	textZone1Temp.setWildcard(textZone1TempBuffer);
	textZone1Temp.setTypedText(TypedText(T_ZONETEMP));
	textZone1Temp.setVisible(false);
	add(textZone1Temp);
 
	//Zone 2 Slider Definition
 
	zone2Temp.setXY(120, 100);
	zone2Temp.setBitmaps(touchgfx::Bitmap(BITMAP_SLIDER_BACKGROUND_ID), touchgfx::Bitmap(BITMAP_SLIDER_BACKGROUND_FILLED_ID), touchgfx::Bitmap(BITMAP_SLIDER_KNOB_CIRCLE_ID));
	zone2Temp.setupHorizontalSlider(14, 14, 0, 0, 200);
	zone2Temp.setValueRange(50, 250);
	zone2Temp.setValue(100);
	zone2Temp.setVisible(false);
	add(zone2Temp);
	zone2Temp.setStartValueCallback(zonetempsliderValueStartedChangeCallback);
	zone2Temp.setNewValueCallback(zonetempsliderValueChangedCallback);
	zone2Temp.setStopValueCallback(zonetempsliderValueConfirmedCallback);
 
	textZone2Temp.setPosition(360, 105, 115, 46);
	textZone2Temp.setColor(Color::getColorFrom24BitRGB(255, 255, 255));
	textZone2Temp.setLinespacing(0);
	textZone2TempBuffer[0] = 0;
	textZone2Temp.setWildcard(textZone2TempBuffer);
	textZone2Temp.setTypedText(TypedText(T_ZONETEMP));
	textZone2Temp.setVisible(false);
	add(textZone2Temp);
 
	//Zone 3 Slider Definition
 
	zone3Temp.setXY(120, 140);
	zone3Temp.setBitmaps(touchgfx::Bitmap(BITMAP_SLIDER_BACKGROUND_ID), touchgfx::Bitmap(BITMAP_SLIDER_BACKGROUND_FILLED_ID), touchgfx::Bitmap(BITMAP_SLIDER_KNOB_CIRCLE_ID));
	zone3Temp.setupHorizontalSlider(14, 14, 0, 0, 200);
	zone3Temp.setValueRange(50, 250);
	zone3Temp.setValue(100);
	zone3Temp.setVisible(false);
	add(zone3Temp);
	zone3Temp.setStartValueCallback(zonetempsliderValueStartedChangeCallback);
	zone3Temp.setNewValueCallback(zonetempsliderValueChangedCallback);
	zone3Temp.setStopValueCallback(zonetempsliderValueConfirmedCallback);
 
	textZone3Temp.setPosition(360, 145, 115, 46);
	textZone3Temp.setColor(Color::getColorFrom24BitRGB(255, 255, 255));
	textZone3Temp.setLinespacing(0);
	textZone3TempBuffer[0] = 0;
	textZone3Temp.setWildcard(textZone3TempBuffer);
	textZone3Temp.setTypedText(TypedText(T_ZONETEMP));
	textZone3Temp.setVisible(false);
	add(textZone3Temp);
 
	//Zone 4 Slider Definition
 
	zone4Temp.setXY(120, 180);
	zone4Temp.setBitmaps(touchgfx::Bitmap(BITMAP_SLIDER_BACKGROUND_ID), touchgfx::Bitmap(BITMAP_SLIDER_BACKGROUND_FILLED_ID), touchgfx::Bitmap(BITMAP_SLIDER_KNOB_CIRCLE_ID));
	zone4Temp.setupHorizontalSlider(14, 14, 0, 0, 200);
	zone4Temp.setValueRange(50, 250);
	zone4Temp.setValue(100);
	zone4Temp.setVisible(false);
	add(zone4Temp);
	zone4Temp.setStartValueCallback(zonetempsliderValueStartedChangeCallback);
	zone4Temp.setNewValueCallback(zonetempsliderValueChangedCallback);
	zone4Temp.setStopValueCallback(zonetempsliderValueConfirmedCallback);
 
	textZone4Temp.setPosition(360, 185, 115, 46);
	textZone4Temp.setColor(Color::getColorFrom24BitRGB(255, 255, 255));
	textZone4Temp.setLinespacing(0);
	textZone4TempBuffer[0] = 0;
	textZone4Temp.setWildcard(textZone4TempBuffer);
	textZone4Temp.setTypedText(TypedText(T_ZONETEMP));
	textZone4Temp.setVisible(false);
	add(textZone4Temp);
 
	slideMenuElementSelectedHandler(slideMenu);
	zonetempsliderValueConfirmedCallbackHandler(zone1Temp, zone1Temp.getValue());
	zonetempsliderValueConfirmedCallbackHandler(zone2Temp, zone2Temp.getValue());
	zonetempsliderValueConfirmedCallbackHandler(zone3Temp, zone3Temp.getValue());
	zonetempsliderValueConfirmedCallbackHandler(zone4Temp, zone4Temp.getValue());
 
	ZoneSetupViewBase::setupScreen();
}
 
void ZoneSetupView::slideMenuElementSelectedHandler(const VerticalSlideMenu& menu)
{
 
	int selectedElement = slideMenu.getSelectedElementIndex();
 
    // Setup menu up/down button. First set default then handle special cases
    menuUp.setBitmaps(Bitmap(BITMAP_CONTROL_MENU_ARROW_UP_ID), Bitmap(BITMAP_CONTROL_MENU_ARROW_UP_PRESSED_ID));
    menuDown.setBitmaps(Bitmap(BITMAP_CONTROL_MENU_ARROW_DOWN_ID), Bitmap(BITMAP_CONTROL_MENU_ARROW_DOWN_PRESSED_ID));
    menuUp.setTouchable(true);
    menuDown.setTouchable(true);
 
    if (selectedElement == 0)
    {
        menuUp.setBitmaps(Bitmap(BITMAP_CONTROL_MENU_ARROW_UP_INACTIVE_ID), Bitmap(BITMAP_CONTROL_MENU_ARROW_UP_INACTIVE_ID));
        menuUp.setTouchable(false);
    }
    else if (selectedElement == slideMenu.getSize() - 1)
    {
        menuDown.setBitmaps(Bitmap(BITMAP_CONTROL_MENU_ARROW_DOWN_INACTIVE_ID), Bitmap(BITMAP_CONTROL_MENU_ARROW_DOWN_INACTIVE_ID));
        menuDown.setTouchable(false);
    }
    // Expand the active area of the buttons to make them easier to activate
    menuUp.setWidth(menuUp.getWidth() + 30);
    menuDown.setWidth(menuDown.getWidth() + 30);
    menuUp.invalidate();
    menuDown.invalidate();
 
    // Set the chosen control visible
 
    zone1Temp.setVisible(selectedElement == 0);
    zone2Temp.setVisible(selectedElement == 0);
    zone3Temp.setVisible(selectedElement == 0);
    zone4Temp.setVisible(selectedElement == 0);
    textZone1Temp.setVisible(selectedElement == 0);
    textZone2Temp.setVisible(selectedElement == 0);
    textZone3Temp.setVisible(selectedElement == 0);
    textZone4Temp.setVisible(selectedElement == 0);
 
 
    textZone1Temp.invalidate();
    textZone2Temp.invalidate();
    textZone3Temp.invalidate();
    textZone4Temp.invalidate();
    zone1Temp.invalidate();
    zone2Temp.invalidate();
    zone3Temp.invalidate();
    zone4Temp.invalidate();
}
 
void ZoneSetupView::zonetempsliderValueConfirmedCallbackHandler(const Slider& src, int value)
{
    if (&src == &zone1Temp)
    {
        //execute code whenever the slider stops the changing value.
    	//update slider and temperature text
		zone1Temp.setValue(value);
		Unicode::snprintf(textZone1TempBuffer, 4, "%d", value);
		//textZone1Temp.invalidate();
    }
    else if(&src == &zone2Temp)
	{
    	//execute code whenever the slider stops the changing value.
		//update slider and temperature text
		zone2Temp.setValue(value);
		Unicode::snprintf(textZone2TempBuffer, 4, "%d", value);
		//textZone2Temp.invalidate();
	}
	else if(&src == &zone3Temp)
	{
		//execute code whenever the slider stops the changing value.
		//update slider and temperature text
		zone3Temp.setValue(value);
		Unicode::snprintf(textZone3TempBuffer, 4, "%d", value);
		//textZone3Temp.invalidate();
	}
	else if(&src == &zone4Temp)
	{
		//execute code whenever the slider stops the changing value.
		//update slider and temperature text
		zone4Temp.setValue(value);
		Unicode::snprintf(textZone4TempBuffer, 4, "%d", value);
		//textZone4Temp.invalidate();
	}
 
    textZone1Temp.invalidate();
    textZone2Temp.invalidate();
    textZone3Temp.invalidate();
    textZone4Temp.invalidate();
}
 

Maybe I'm missing something? Thanks!

[Romain DIELEMAN]

Hi,

The code is quite long so I didn't go though it entirely :grinning_face_with_sweat:, but this is definitely possible. The UI Template "Slider Example" available in TouchGFX Designer uses two sliders.

/Romain

[LBend.1]

Hi Romain,

I used the "Slider Example" as the building blocks for this. However when adding additional similar like (all horizontal sliders) my example fails. Could it have anything to do with the same generic 'Slider' callbacks (setStartValueCallback, setNewValueCallback, setStopValueCallback) each referenced 4 times (for four sliders) like the following? If that's the case is there another way to notify when a slider has changed? I tried independently named callbacks for each zone too (i.e. zone1sliderValueStartedChangeCallback, zone1silderValueChangedCallback, zone1sliderValueConfirmedCallback).

zone1Temp.setStartValueCallback(zonetempsliderValueStartedChangeCallback);
zone1Temp.setNewValueCallback(zonetempsliderValueChangedCallback);
zone1Temp.setStopValueCallback(zonetempsliderValueConfirmedCallback);
 
zone2Temp.setStartValueCallback(zonetempsliderValueStartedChangeCallback);
zone2Temp.setNewValueCallback(zonetempsliderValueChangedCallback);
zone2Temp.setStopValueCallback(zonetempsliderValueConfirmedCallback);
 
//...etc.

Thanks!