Design Effects Demo

The Design Effects Demo example illustrates various use cases of the design effects in Qt Design Studio. Learn more about design effects here.

In this example, you see and interact with the implementation of the following design effect principles:

You can also try the Demo Project in the example. This project represents Neumorphism, Skeuomorphism, and Glassmorphism effects used in a digital calculator environment.

Watch this video tutorial to learn how to create these effects using Qt Design Studio design effects:

Using the Neumorphism example

In the Design Effects Demo Gallery, go to the Intro, Design Studies, or Animation to see the Neumorphism effects created using design effects in Qt Design Studio. To access these sections:

1. Select Neumorphism.
2. Select Intro, Design Studies, Design Studies 2, or Animation to see the corresponding section in display.

Using the Skeuomorphism example

In the Design Effects Demo Gallery, go to the Intro, Design Studies, or Interaction to see the Skeuomorphism effects created using design effects in Qt Design Studio. To access these sections:

1. Select Skeuomorphism.
2. Select Intro, Design Studies, or Interaction to see the corresponding section in display.
3. To try the Skeuomorphism effects further, go to Skeuomorphism > Interaction and select the Actual Qt Quick Buttons.

Using the Glassmorphism example

In the Design Effects Demo Gallery, go to the Intro, Design studies, or Interaction to see the Glassmorphism effects created using design effects in Qt Design Studio. To access these sections:

1. Select Glassmorphism.
2. Select Intro, Design Studies, Animation, or Interaction to see the corresponding section in the display area.
3. Try the Glassmorphism effects further in Interaction. Go to Glassmorphism > Interaction, and drag the window with the Glassmorphism effect where you want to move it. Due to the Glassmorphism effect, the part of the image hidden behind it would become blurred.

Using the Design Effect Demo project

The Demo Project combines design effects, including Neumorphism, Skeuomorphism, and Glassmorphism. It also includes sound effects using Qt Multimedia. In the Demo Project, you can interact with a Single Toggle Operation Integer Calculator.

To run the Single Toggle Operation Integer Calculator, go to Demo Project, and select Run Demo.

To remove the previous calculation data and make the calculator ready for a new arithmetic operation, select CLR.

To change the theme of the calculator between light and dark, select DARK.

Using shadow or blur effects

To change the direction of the shadows on the calculator, drag SHADOW DIR up or down.

To control how much the shadow can spread on the calculator, go to SPREAD, click and hold, and then move the mouse in a circular motion to the left or right.

To adjust the level of blur in the calculator control and display, go to BLUR, click and hold, and then move the mouse in a circular motion to the left or right.

To turn the design effects on or off in the calculator, select FX.

Using music or sound effects

To play sound or music in the calculator:

• To play music in a loop, select CHRD, TECH, or DUB.
• To play brief sounds, select KCK or WMP. You can also play these sounds while one of the CHRD, TECH, or DUB music is playing.
• To play laughter, select ":)".

  Note: You cannot play CHRD, TECH, and DUB music together. When you select one of them, the other stops immediately.

To change the volume of the sound effects in the calculator, go to VOLUME, and then move the mouse in a circular motion to the left or right.

To stop all the sounds and music, select MUTE. If the MUTE is inactive, each button you select for the arithmetic operation also plays a brief sound.