How to apply a colour change to the battery icon in M2 Designer?

Former Member

That's a nice example  I will try to list out the steps below:

First set up the battery percentages you want:

1. Select "Global Settings" (right)
2. Press up & down to get to "Battery High" and select that
3. Press up/down to change the percentage to 50% in your example
4. Press back button
5. Press down once to get to "Battery Low" and select that
6. Press up/down to change the percentage to 30% in your example
7. Press back button (twice)

You now need to add 3 battery icons like you say - these can all be in the same field. Only one will be visible at a time, and the other 2 will be invisible (so they take up no width in the field).

1. Go to the field you want the battery icon(s) in or create a new field.
2. Select "Elements" to edit the elements.
3. Press down until you get to "Add  Element"
4. Add the 1st icon
5. Then repeat to add 2 more icons.
6. Select the first icon
7. Press down to get to "Color" and select it
8. Choose the color you want (green) with up & down, then press back
9. Press down once to get to "Visibility" and select it
10. Press down/up until you get to "Battery High", then press back - this icon will now only be visible when the battery is in the high range (above 50%)
11. Press back again, then down to select the 2nd icon
12. Repeat to choose the color, and set the visibility to "Battery Medium"
13. Repeat for the 3rd icon, and set visibility to "Battery Low"

And you should be done 

You can either make the whole icon change like this - or I recently added a dynamic "Battery % Fill" icon which you can set up in the same way (3 icons with different visibility all in the same field). The "Battery % Fill" icons require one of the other battery icons earlier than them in the same field, and they just draw a dynamic rectangle on top of the previous visible battery icon. So you could add 3 outer icons and 3 fill icons, and make both the outer & inner ones change color ...

You can also try the "Quick Add" menu (underneath all the fields) and select "Battery (When Low)" - this adds a new field which has a battery % number, battery icon & battery fill % which are all only visible in the battery low state. But it gives an example if you want to check it out.

Hope that helps