Skip to main content
LBend.1
LBend.1
Associate III
March 11, 2021
Question

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?

  • March 11, 2021
  • 1 reply
  • 839 views

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();
}
 

0693W000008wauhQAA.pngMaybe I'm missing something? Thanks!

This topic has been closed for replies.

1 reply

Romain DIELEMAN
Romain DIELEMAN
ST Employee
March 11, 2021

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
LBend.1Author
Associate III
March 11, 2021

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!

Terms & ConditionsAccessibility statement