Hi!
I’m have two GIF pictures of two cylinders. In desktop view, they smooth run up and down if I press the “Stop” or “Start” button.
They gif pictures are replaced when I press the buttons. In mobile view, the GIF pictures does not reload at all, they just swapped and no dynamics appear.
This is how it looks like in desktop view. They GIF pictures does its animation and everything is fine. But in mobile view, they GIF pictures only swap. It’s ONE iterations GIF-pictures by the way. So why does the GIF pictures swap? It’s like my mobile cannot handle GIF-animations from Vaadin.
@Route
@PWA(name = "Vaadin Application",
shortName = "Vaadin App",
description = "This is an example Vaadin application.",
enableInstallPrompt = true)
@CssImport("./styles/shared-styles.css")
@CssImport(value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field")
public class MainView extends AppLayout {
private static final String START = "Start";
private static final String STOP = "Stop";
/**
*
*/
private static final long serialVersionUID = 1L;
@Autowired
private Top top;
private Image img_out = new Image("/img/Cylinder_OUT.gif", "Ut");
private Image img_in = new Image("/img/Cylinder_IN.gif", "In");
@PostConstruct
private void init() {
addToNavbar(top.getDrawerToge(), top.getBarImage());
addToDrawer(top.getTabs());
// Test
VerticalLayout content = new VerticalLayout();
//content.setClassName("stekpanna_png");
Button button = new Button(START);
button.setClassName("startStop");
button.addClickListener(e -> {
if(button.getText().equals(START)) {
//content.setClassName("stekpanna_gif");
// Begin to delete the pictures first
content.remove(img_in);
content.remove(img_out);
// Then add them again
img_out = new Image("/img/Cylinder_OUT.gif", "Ut");
img_in = new Image("/img/Cylinder_IN.gif", "In");
content.add(img_out);
content.add(img_in);
// Set CSS
img_out.setClassName("height_img");
img_in.setClassName("cylinder_ut_in");
// Change the button name
button.setText(STOP);
}else {
// Begin to delete the pictures first
content.remove(img_out);
content.remove(img_in);
// Then add them again
img_out = new Image("/img/Cylinder_OUT.gif", "Ut");
img_in = new Image("/img/Cylinder_IN.gif", "In");
content.add(img_in);
content.add(img_out);
// Set CSS
img_in.setClassName("height_img");
img_out.setClassName("cylinder_in_ut");
// Change the button name
button.setText(START);
}
});
content.add(button);
setContent(content);
}
private MainView() {}
}
CSS code:
.barImage{
height: 44px;
}
.cylinder_ut_in{
position: relative;
left: 150px;
top: -100px;
height: 100px;
}
.cylinder_in_ut{
position: relative;
left: 150px;
top: -100px;
height: 100px;
}
.height_img{
height: 100px;
}
.startStop{
}
