How to design custom UI component

Question

I need to make custom component like above picture. So how I can design it? is there any reference or example?

Answer 1

Hi,

to create new GUI components please follow the description in the sections:

1. Creating new components

2. Compositing component appearance

3. Implementing component interface

4. Managing component state

5. If your component should be resizable see also Configuring component layout

6. To add image and font data to your project see also Managing resources and assets

Precisely:

- In the first section you learn how to create a completely new GUI component from scratch.

- Then in the second section you learn how to fill it with contents. In your particular case you would add and arrange in the component two Text views to display the percent values.

- Use a graphic editor like GIMP, Photoshop, Affinity Designer, etc. to design the blue circle image. Store the file as PNG and add it as Bitmap resource to your Embedded Wizard project.

- To your component add and arrange an Image view to display the above describe Bitmap resource.

- Add two properties to your component to serve as interface to provide the component with values to display in the both Text views.

Once the component is finished you can create instances of it, as many as you need, and embed these within another components. In this manner you assemble the application. This is described in Add an instance of an existing GUI component.

Alternatively, you can create new GUI components from templates we provide with Embedded Wizard installation. These are found in the Gallery folder Components. How you do this is described in the section Creating components from templates. Your desired component, however, is so particular, that no of the provided templates would match it ideally. So in your case the above described approach with creating a new component from scratch would the better one, I think.

Hope it helps you

Best regards

Paul Banach

Comments

Hi Paul Banach,

Thanks for your reply. The liquid level of the above mentioned UI component has the sinusoidal wave animation and that hieght is changed according to the liquid level. if you want to see the working animation of that component please refer this website. So my problem is how to generate sinusoidal wave animation with this UI component?

---

Hi,

I will prepare you an example. This however takes some time.

Best regards

Paul Banach

---

See the second answer below with the prepared example of you LiquidChart component. Hope it helps you further.

Best regards

Paul Banach

Answer 2

Hi,

I have prepared an example demonstrating such kind of Liquid Chart component. The example project is found in the ZIP file:

 

https://ask.embedded-wizard.de/?qa=blob&qa_blobid=8991690050047055811

 

First at all, actually Embedded Wizard does not yet provide functionality to simply draw complex vector graphic. We have thus to use some tricks with several bitmaps overlayed one above the other. Following are the bitmaps I have quickly designed for this component with a graphic editor:

The bitmap Wave contains the form of the wave. To change the amplitude and the frequency of the wave, the bitmap will be simply stretched. To ensure, that only the circular part of the wave is visibly the bitmap is overlayed by a second bitmap Mask. Finally the bitmap Circle above the other both displays the ring around the wave form. All bitmaps are filled with white color only. This permits me later to use them as so-called ALPHA-ONLY bitmap. These can be colorized later at the runtime.

The example project contains the implementation of the GUI component LiquidChart. This component consists of 3 Image views to display the various bitmaps. Especially the Image view for the Wave bitmap is configured to stretch its content.

The component implements three properties Amplitude, Distance and Color. As the name indicates, the property Color determines the color to display the component (to colorize the bitmaps and text). The other properties determine the appearance of the wave form. Changing Amplitude affects the height of the wave.  Changing Distance affects the frequency of the waves. The both properties are valid in range 0 .. 100.

The essential part of the component is implemented in the method UpdateViewState(). This method calculates from the properties Amplitude and Distance the size of the Image view where the Wave bitmap is shown. In this manner the Wave bitmap is stretched or scaled down. Furthermore, the component contains an animation effect which triggers the UpdateViewState() method periodically. With the value of the animation effect the Image view where the Wave bitmap is shown is scrolled.

The other component Application found in the project demonstrates how several instances of the LiquidChart component are used. Every instance is configured with different values for the Amplitude and Distance as well as Color properties. When you start the Prototyper with the keys Ctrl+F5 the application appears with all the embedded LiquidChart component instances:

I hope, this example helps you to understand the trick how to develop such components and generally how to design components with Embedded Wizard.

Best regards

Paul Banach