using image change and Vertical List / Gauge

Question

hi nice to meet you.

I have questions.

[First]

I want to create project that if i select veritical list and then change image 

i want to not use touch just using uart community.

i just compose vertical list and change image.

 

 
 

 

[Second]

I want to create customer gauge.

How to create that?

 

Answer 1

Hello,

Regarding your first question, I do not really understand what you intend to achieve. Can you describe an example? Regarding your second question, you have three options how to create a Gauge:

Option 1: Use the Gauge widget. This widget can be adapted by creating a Gauge Config object. In this object you specify all the bitmaps, colors, offsets, etc. you want the Gauge to appear on the screen. With this approach you don't need to write any code. On the other hand you are limited by the implementation of the widget. It is not 100% flexible.

Option2: Create your own Gauge widget based on the provided Gauge component template. With this approach you can modify and adapt the widget to your particular needs. You are flexible. On the other hand you have to implement code and understand better the concepts of how to create a GUI component. Please see the section Working with Embedded Wizard.

Option 3: If your Gauge is very-very-very individual and has nothing in commun with the both Gauges mentioned in the options above, you can even create a new empty GUI component and fill it with views and functionality particular to your desired Gauge. In fact, you create then a new GUI component.

Best regards

Paul Banach

 

Comments

 

I want to create it like the image above.

I don't use touch .

I will be use the value(device calss-device driver)

example.

if value == 1

apple image and vertical list - apple( change color )

if value == 2

banana image and vertical list - banana( change color )

Are you understand??

 

---

Hello,

now it's more clear for me. In such case the image and the vertical list can be considered independently.

Part A: Controlling the list:

Depending on the value you will need to scroll the list and focus the corresponding item. For this purpose please see the sections Scroll the list items and Select an item within the list. Assuming the value corresponds to the number of the item you intend to highlight in the list, then following could be the code to control the list:

var int32 itemNo = Your_Value;

Your_List.SelectedItem = itemNo;
Your_List.EnsureVisible( itemNo, true, null, null );

Part B: Controlling the displayed image:

The simplest would be to put all images within a single multi-frame bitmap resource. (see also Configure a multi-frame bitmap resource). Then you can display the desired image by simply specifying its frame number within the bitmap. Ideally the order of the frames in the bitmap corresponds to the item numbers. In this manner if you have selected item #3, you also have to select the bitmap frame number 3. To select which frame number is displayed, use the property FrameNumber of the Image view. The corresponding code could look like this:

var int32 itemNo = Your_Value;

Your_Image_View.FrameNumber = itemNo;

If you don't want to use the multi-frame bitmaps, you will need to store every image as an individual bitmap resource and then depending on the selected list item select the right resource. For example:

var int32 itemNo = Your_Value;

switch ( itemNo )
{
  case 0 : Your_Image_View.Bitmap = Your_Unit::BitmapApple;
  case 1 : Your_Image_View.Bitmap = Your_Unit::BitmapBanana;
  [...]
}

I hope it helps you further.

Best regards

Paul Banach