Moving piston with Slider in App Designer

Hi friends,

My question is to create a moving piston with Slider by using app design in Matlab.

When I slide the slider button, the primitive pistion shape (simply a thin rectangle) must be change its position in Y direction.

Attached you can find the visual explanation. Besides, I will attach the codes. I have 2 different trials/approach, one of them (case 1) is using UIAxes function in order to generate piston shape and movement, and in this case the piston will appear at the lower position but does not move.

In the case 2, I am using the simple plot and separate figure window is opening. In this separate figure I can plot the different positions of piston with changing slider location. The problem here is code preserve the each position in the plot (it is obvious in the code) and this is not that I want to do.

I need help to solve this problem and I shared my 2 trials in order to clarify my current position and show the way to you.

Picture of Case 1

Picture of Case 2

Note: Edit edit Edit Field2 boxes are just for verification of piston position slider. Just showing the value of current position of it.

Below you can see the codes for Case 1 and Case 2

% Value changing function: PistonPositionSlider
function PistonPositionSliderValueChanging(app, event)
%%%%%%%%%%%%%%%%% Case 2 %%%%%%%%%%%%%%%%%%%
app.x = [0, 10, 10, 0];
app.y = [0, 0, 0.2, 0.2];
app.g = hgtransform;
patch('XData',app.x,'YData',app.y,'FaceColor','yellow','Parent',app.g)
axis equal
xlim([0, 10])
ylim([0, 20])
app.pt1 = [0 0 0];
app.pt2 = [0 19.8 0];
app.t = 0.005*app.PistonPositionSlider.Value;
app.g.Matrix=makehgtform('translate',app.pt1 + app.t*(app.pt2-app.pt1));
%%%%%%%%%%%%%%%%% Case 2 %%%%%%%%%%%%%%%%%%%

%%%%%%%%%%%%%%%%%%%% Case 1 %%%%%%%%%%%%%%%%%%%%%
app.ps = polyshape([0,1,1,0],[0,0,0.01,0.01]);
app.g = hgtransform;
axis equal
% xlim([0, 10])
% ylim([0, 20])
% app.pt1 = [0 0 0];
% app.pt2 = [0 19.8 0];
% app.t = 0.005*app.PistonPositionSlider.Value;
% app.g.Matrix=makehgtform('translate',app.pt1 + app.t*(app.pt2-app.pt1));
app.pg = plot(app.UIAxes7,app.ps);
%%%%%%%%%%%%%%%%%%%% Case 1 %%%%%%%%%%%%%%%%%%%%%

Answer 1

[Aravind]

Hi @MomentumFlux,

To create a moving piston effect in MATLAB App Designer, consider using the “rectangle” function within “UIAxes” instead of relying on “polyshape” and “hgtransform.” The “rectangle” function allows you to plot rectangles of varying shapes and sizes directly in the “UIAxes,” which is ideal when the “UIAxes” is part of the app interface.

The key is to update the rectangle's position based on the slider's value change event. As the slider value changes, you can adjust the rectangle's position in the “UIAxes” to simulate the piston's movement.

In the slider's callback function, incorporate the following code to adjust the piston's position:

% Value changing function: PistonPositionSlider
function PistonPositionSliderValueChanging(app, event)
    value = app.PistonPositionSlider.Value; % Update the Y position of the piston
    app.Piston.Position(2) = value; % Piston is the rectangle object
end

Create the “Piston” as a “rectangle” with this code:

app.Piston = rectangle(app.UIAxes, 'Position', [10, 10, 1, 1], 'FaceColor', 'blue');

For more details on the “rectangle” function, you can visit the documentation here: https://www.mathworks.com/help/releases/R2022a/matlab/ref/rectangle.html.

I've also attached a simplified example code and its result below for your reference.

I hope this answers your question.