830 views
in GUI Development by
Good Day to All.

It is me again :)

i have 3 questions regarding vertical list.

First

for example i have 3 items in a list and i need one of them to blink. is it possible to make it visible invisible with timer only on 1 item.

 

Second

i have 3 items in a list i need individual coloring for specific conditions can i assign colors per item.

 

Third

i need to add new item to my list at first item not on last position.

 

on a side note can i do all of these operations outside of onLoadItem.

Thank you All.
You are all great people.

1 Answer

0 votes
by

Hello,

for example i have 3 items in a list and i need one of them to blink. is it possible to make it visible invisible with timer only on 1 item.

Yes, you can implement the blink operation within the item.

i have 3 items in a list i need individual coloring for specific conditions can i assign colors per item.

Yes, this is also possible.

i need to add new item to my list at first item not on last position.

In such case, you have to:

1. increase the number of items existing in the list (e.g. VerticalList.NoOfItems = VerticalList.NoOfItems + 1).

2. Force the list to reload all items (e.g. VerticalList.InvalidateItems( 0, VerticalList.NoOfItems - 1 ))

3. In the Implementation of onLoadItem select the correct data for the requested item. Concrete, the index #0 refers the just added item now.

Please note, the list components are just "views". They don't store any data nor have an idea what the items do. Its up to you to implement the desired behaviour of an item (e.g. blinking) and to track the number and the order of items (within onLoadItem method). The configuration of an item (its colors, contents, etc.) is determined just in the moment when the item is loaded. You have to take care of it within the onLoadItem method.

Does it help you further?

Best regards

Paul Banach

by
Thank you for your answer.

Could you please share some kind of an example?
by
i have managed to do question 3 "the reverse list"

question 1 and 2 still remains a mystery :D
by

Hello,

Concerning the first question: What do you mean with "is it possible to make it visible invisible with timer only on 1 item."? 

Do you want some content (e.g. text or an icon) within the item to blink?

or

Do you want the complete item to appear/disappear periodically so that all following items have to move up and down with each animation? In other words, do you to add/remove the item with each blink phase?

Concerning the second question, when an item is loaded in the onLoadItem method, you can (or you even have to) determine its content. This can be some text, some images, etc. It depends on the design of your application. In the same way, when onLoadItem loads the contents of an item you can also determine the colors for the views existing within the item.

Please take a look at the default implementation provided when you add a new Vertical List:

The default implementation of the method OnLoadItem contains following code section. Please note there the line 32. It determines in this example the color for the just loaded item:

Similar, you can determine the colors for your items. For example, if you want the items to be displayed white and black alternately, you do following:

 

Please note, the above code examples assume the items are simple Text views. In your application, the items can be more complex GUI components. Each item can, for example, consist of several text, image, etc, views. In the OnLoadItem method you can address the views individually and specify the contents and the colors for each view. For example:

itemView.SomeCaptionText.Color         = ...;
itemView.SomeBackgroundRectangke.Color = ...;

Does it help you further?

Best regards

Paul Banach

by

Hello thanks for the response.
Thank you for your time. My questions are actually little more specific to my Project with some hardware. Sorry in advance if my questions are bothering you guys :)

for the first question yes, i want some content (e.g. text or an icon) within the item to blink until an acknowledgment is received but there is a tricky condition.

example:  assume i have a list with multiple alarm names but they are only added to list if the data is received from CAN line. this part is done with device integration. i can do this no problem.
when the list is first updated, lets say we received 4 alarms, it is shown on my list as item 0 to item 3 with my alarm names no problem so far.

All the items in the list needs to blink after first receive, then i will press a button simulating an acknowledgment and they will stop blinking.

then assume a new alarm is send from CAN Line making my alarm count total at 5.
the first 4 alarms were not fixed so they will continue to show on my list but since they were already acknowledged no blinking should happen to item 0 to 3 but the 5th alarm is just been received so the item 4 needs to blink.

i managed to update my list items by using a data storage array and Number of items control method and device integration works very well. now all i need is the blinking ability for  new alarms added to my array which is presented on the list until an acknowledgment. i can use a button to simulate it for the time being but cant make it work on individual items of the list.

Again this is too specific so any help is appreciated sorry for causing issues :D

For the second question i have another specific problem.

i have 4 different list that are updated by some conditions related to 7 arrays which are filled by some data received from device integration part. i managed to do this no problem with list content.
i will try to explain what i need with some pictures.

Arrays are updated by the slot method UpdateAllArrays which is connected to timer and i can see the updated 4 list as seen in picture 2.

What i need is, if the date and time on 3rd list item is present, the number 25 on the 4th list needs to be white colored.

the number 33 and 17 needs to be Yellow because they dont have any date and time related to them in list 3 but in List 2

and number 16 and 1 needs to be Red because they only have date and time at same line as themselves in List 1

 

they should look like this

 

Normally these all were different questions but since they were related to vertical list i asked them together sorry about that too.

i did look at the example with different colored items in a list but could not managed to bend it to my use with 4 different lists with different on load slots.

All help is appreciated. You guys are great.

 

by

Hello,

i managed to update my list items by using a data storage array and Number of items control method and device integration works very well. now all i need is the blinking ability for  new alarms added to my array which is presented on the list until an acknowledgment. i can use a button to simulate it for the time being but cant make it work on individual items of the list.

In this case I would do following:

Step 1: The blinking is in this case is an individual state associated to each item. Consequently, you have to manage this state in the the data storage. For example, new alarms within the data storage have the blinking state enabled.

Step 2: From your screenshot I see you have a timer in the GUI component containing the 4 lists. This is the timer used for blinking, right? In this case I would do following:

a.) Add a bool variable to track the blinking state. Name it e.g. BlinkPhase.

b.) Each time the timer expires (the Slot method is invoked), you toggle the value in the variable BlinkPhase.

c.) Each time the timer expires you also force the list containing the alarms to reload its items.

The implementation of the Slot method would look like this:

// Toggle the blink state
BlinkPhase = !BlinkPhase;

// Trigger the list to reload its content
AlarmList.InvalidateItems( 0, AlarmList.NoOfItems - 1 );

d.) In the OnLoadItem method corresponding to the alarm list, check in the data storage the blink state of the respective item. If the item should blink, determine the color of the item according to the BlinkPhase variable. If the item should not blink, you can select other color. For example:

if ( YourDataStorage.IsAlarmActiveForItem( itemNo ))
{
  if ( BlinkPhase )
    itemView.Color = SomeColorForTheBlinkPhaseOn;
  else
    itemView.Color = SomeColorForTheBlinkPhaseOff;
}
else
  itemView.Color = SomeColorIfTheItemIsNotBlinking;

ALTERNATIVE APPROACH:

In the above example, I assumed the list uses ordinary Text views as items. Another, more sophisticated approach would be to implement a dedicated GUI component for the single item. (Most of the examples in the chapter Vertical List implement such item classes). With this approach you can move the blinking into the item. In other words, instead of the 'global' blink timer each item will have its own timer to blink.

To control the blinking you should then add a bool property to the item class. Name the property e.g. BlinkState. In the onset method of the BlinkState property you enable/disable the locally used timer according to the value just assigned to the property. The timer, in turn, toggles some colors or visible states of views existing in the item.

The 'global' timer is not needed anymore. The OnLoadItem method limits to update the item's BlinkState property according to the corresponding data from data storage. When the user presses the button to clear the alarms, your implementation resets the alarms in the data storage and forces the list to reload its contents again. Accordingly, the BlinkState property of the affected items is updated and the items stop blinking.

What i need is, if the date and time on 3rd list item is present, the number 25 on the 4th list needs to be white colored.

the number 33 and 17 needs to be Yellow because they dont have any date and time related to them in list 3 but in List 2

and number 16 and 1 needs to be Red because they only have date and time at same line as themselves in List 1

The coloring of an item is not a problem. From my preceding answer and in the above code sample you can see how to set the color individually for an item. The problem you have to solve here is more related to the data storage. How should the 4th list deduce that item N is red, green or yellow? Possibly you have to enhance your data storage to manage this information. Or you can derive the color from the state found in other lists?

Once you found the way to estimate the color for each item in the 4th list, you adapt the OnLoadItem4 method and use this information. For example:

itemView.Color = YourDataStorage.GetColorForItem( itemNo );

Since the colors in the 4th list seem to depend on the contents from the other lists, you have to force the 4th list to reload its contents each time the items in other lists change. In such case you execute the code:

List4.InvalidateItems( 0, List4.NoOfItems - 1 );

I hope, the explanation helps you a little bit further.

Best regards

Paul Banach

 

by

Hello. Thank you for the response.

I have managed to do the coloring operation with my conditions but the blinking operation became a little complex with my current setup.
Can you show me one example, as simple as possible, where only item #2 blinks every 1 second. for the given picture.


Thank You.
 

by

Hello,

can you tell me more about the items used actually within the list? Are the items ordinary Text views or have you created a GUI component for the items and specified this class in the list's property ItemClass?

Another question: do you want the items to be triggered by a common timer, or should each item use its own timer?

Best regards

Paul Banach

by
Hello. Thank you.

They are ordinary text.

device is sending me an array of integers which i am using to update listarray with string. and also returns NoOfItems. every time list array is updated i am calling invalidateItems method to update the list.

then the onload item is doing

itemview.string = listarray(itemNo);

 

i am not sure about the timer part. what i need is for item number two to blink on its on while other list items are visible. in future if otherlist items are required to blink same timer could be used probably. so i am guessing single timer.

 

i can also make lines invisible using bool return function

itemview.Visible = myfunc(itemNo);

or blink entire list buy controling a variable value with a timer outside of onload item then calling the list again

itemview.Visible = variable;

 

but not able to blink individual lines.
by

Hello,

the following example project implements the approach explained in my preceding comment. Please note the steps 1, 2.a, 2.b, 2.c and step 2.d described there. The following example implements exact those steps:

Example Project

The exciting part of the example is the if condition in the onLoadItem method to decide whether the item has to be loaded or not. If the item should blink, it selects a color depending on the BlinkPhase variable. Otherwise it simply uses a static color:

In the example I limit to test for the item number 2 only. So this item will blink. In practice you have to manage data storage where you store the blink status of each item. It's up to you to manage this information. In such case you adapt the code to test whether the item should blink or not:

I hope it helps you further.

Best regards

Paul Banach

by

Good Morning and Hello

Now i understand what you meant by control the color by BlinkPhase. i was trying to control visible with it.

i already had a separate data storage for blink status and tested it works perfectly. timer was already updating my list array and now it updates my data storage and changes BlinkPhase=!BlinkPhase; as well.

All three questions are now answered great work yes

i will be back with more questions laugh
Have a nice day.

by
Hi Paul,

Is it possible to expand some space between two consecutive items of a list when we touch an item? I have a vertical list with 11 items and if I touch the second item then the gap between second and third item should be expanded to display some other related functions.

 

Regards,

Sazna.
by

Hello Sazna,

if you are working with Embedded Wizard 12 (or newer), then yes. Please see the section Specify the height of an item within the list. This section explains the possibility to implement an OnQueryItemHeight slot method. With this implementation the items can have different dimensions. This can be used for items which are expanded/collapsed dynamically at the runtime. For this purpose:

Step 1: At first track which items are actually expanded. If the user can expand only one item at the same time, then you can use a variable to store in it the number of the actually expanded item. If no item is expanded, store in the variable a not existing item number (e.g. -1). If you want multiple items to be expanded simultaneously, then you will need to store the 'expanded' state for all the items. For example in an array.

Step 2: In the implementation of OnQueryItemHeight slot method, verify the number of the queried item. If the item is actually expanded return the expanded size of the item. Otherwise return the regular size of the item.

Step 3: When the expanded state of an item changes (when its size changes), invalidate the item.

So far the theory. To test this approach I have created a simple project you can download here. Note, the project is created for EW 12 (or newer). In this project, when the user clicks on the + icon, the corresponding item is expanded. The project tracks only one expanded item at the same time. So expanding another item causes the previously expanded item to be collapsed again:

In case, you are working with an older versions (<= 11) the lists are restricted to have all items with equal size. The above approach will not work with older versions. In such case you have only two possibilities:

Option 1: Update to the newer version 12.

Option 2: If the size of an expanded item is a multiple of a collapsed item, you can split the expanded item in multiple items and arrange them one below the other. This approach, however, is more difficult so I hope, you decide for option 1.

I hope it helps you further.

Best regards

Paul Banach

by

Hi Paul,

Yes, I am using Embedded Wizard Studio Pro version 12. I implemented this functionality in my design which has three lists. I am unable to get the desired output. And I want to expand the item with different heights. Could You please check my design and assist me?.

Regards,

Sazna.

by

Hello Sazna,

your application case is very advanced. You have implemented the trick with three lists to fade-out the upper/lower list area. It is a good approach. Now, you added the function to expand/collapse the items. Such modification has to affect all three lists otherwise the contents at the edges of the lists will not correspond. Also, the component containing the expand/collapse button is not the item itself. It is embedded within the item. This also needs to be taken in account.

The first problem is how the OnExpandCollapse signal is sent. Please see the implementation of Application::ToExpandScreen component:

The component ToExpandScreen, however, is not the list item. It is embedded within an item. Therefore, when it sends a signal and the signal arrives at the slot method onExpandCollapse in Application component, the sender parameter identifies an instance of the ToExpandScreen component. Trying to cast the sender to an item class results in null and an exception, displayed in the Log window: 

To fix the issue, you can append to the postsignal operation an optional sender expression identifying the item. The item is the owner of the ToExpandScreen. Following modification would fix this issue:

Alternative approach: modify the onExpandCollapse slot method to correctly access the owner component of the sender:

The second problem is found in the OnLoadItem slot method. It is missing the initialization of the item's ItemNo property. Add following row to the method:

The OnLoadItem slot method also contains another problem. At the end of the method, the item receives its size. Your version, uses here the ItemHeight property, which is equal for all items:

As long as all items have equal height, the approach is fully correct. However, when items have dynamic height, you have to follow the instructions found in the section Implement the OnLoadItem slot method to load the items. Here use the variable ViewSize to initialize the size of the item. Following is the necessary modification of the OnLoadItem slot method:

A further problem is that the top and bottom vertical lists don't use the OnQueryItemHeight slot method. When you expand an item, the effect is only seen in the middle list. Therefore, you have to connect also the top and the bottom lists to the OnQueryItemHeight slot method.  In the top and bottom lists, assign the slot method to the property OnQueryItemHeight:

Doing this, however, will have the side effect of the slot method being invoked in context of any of the three lists. Thus, you need to access the list via sender parameter and not directly via its name. Modify the OnQueryItemHeight slot method as shown below:

Also, when an item is expanded/collapsed, you will need to invalidate all three lists, otherwise the effect of the expand/collapse operation is not seen in the top/bottom list. Add following rows to the onExpandCollapse slot method:

The modified project is found here.

I hope it helps you further.

One hint: In the list you plan to use items of different types. In your implementation you have created a common item component. It embeds then all item types and shows/hides them depending on the provided item content. This was the recommended approach in EW <= 11 since lists were able to deal with one item class only. With EW 12, you can implement a list with different item classes so the trick with embedded item contents is not needed anymore. See also Specify the class of the items within the list.

Best regards

Paul Banach

by

Hi Paul,

I tried your example and it is working fine. But I am also doing a R & D to create similar screen by using menu, menu item & open menu item without using vertical list in order to get advantage of ready to use templates.  Similar to above design I have created separate items using menu item template and open menu item. There are three functionalities need to be implemented. One is, if a menu item with combo box is touched , a drop down option need to be shown. second one is if a menu item to expand is touched then the screen should be expanded below the corresponding item. And the final one is an open menu item to go another screen. How this functionalities can be implemented similar to the above example you have created? and how the data providers can be connected. Please assist me to design this screen with required functionalities.

Regards,

Sazna.

by
Hello Sazna,

this question has no relation to the original thread with Vertical List. Would you please put this question as a new thread? Thanks!

Best regards

Paul Banach

Ask Embedded Wizard

Welcome to the question and answer site for Embedded Wizard users and UI developers.

Ask your question and receive answers from the Embedded Wizard support team or from other members of the community!

Embedded Wizard Website | Privacy Policy | Imprint

...