Perspective Progress Bar greater than 100%

Ignition
1

When using the progress bar with the max limit set to 100, I want to be able to show over production formatted with the % sign. If the max is left at 100 and formatting of the value display is set to percent, it is capped at 100% no matter what.

If I change to integer formatting I can show the value, but the % sign doesn’t show. Is there a work around for this?

image
image1005×848 44.8 KB

Thanks,

Nick

2

I guess it’s time for some dirty css hacks ?

create a new style, and add this as one of its properties: } .psc-add_percent::after { content: " %"; } {

image
image878×634 34.6 KB

then apply this class to your bar’s valueDisplay.style.classes property.

image
image1174×360 21.5 KB

(yes, that’s a HUGE bar)

1 Like
3

Alternately create a coordinate view with the progress bar and a superimposed label.

  • The coordinate view should have a value parameter.
  • Bind the label to the view’s params.value.
  • Create an expression binding on the label’s text property, {view.params.value} + '%'.

Percbar 120

Bind the label’s and the progress bar’s width and height to the coordinate container’s width and height and everything should resize properly when you embed the view into your project. You can, of course, reuse your new component as often as you like.

4

@Transistor I should have qualified my question saying options other than creating new components.

My feeling in general is that I should be able to do what I need with the stock components IA provides, at least on things simple like a progress bar. And if not, it is an opportunity for them to improve them.

Thanks,

Nick

5

It works for you but when I try it it does nothing unfortunately.

Nick

6

Did you keep the } and { at the beginning and end of } .psc-add_percent::after { content: " %"; } { they are required.

7

Then my guess would be… that you did it wrong ;p

8

that is correct and here is why: we do not use underscores because Ignition’s libraries also do not.

So when I named the style “addPercent” it didn’t line up. When I changed the original text you kindly provided to the following it did work:

} .psc-addPercent::after { content: " %"; } {

Thank you kindly for the help…

NIck

9

I probably should have detailed how it works.
In case you’re wondering, this is a css injection. the opening } and closing { take care of that.
When adding a property like background-image, a css rule of that name is added and the property you add in the form field is enclosed in {}. Thus, starting our rule with } closes the rule and allows us to make a new one. The ending { is there to match the original } to avoid syntax errors.
Then it’s just a matter of writing a standard css rule, here we select the style class we’re creating, so it needs to match its name. With just a twist: we need to add psc- in front of it, because ignition adds it automatically to differentiate custom classes.
::after is a css rule that allows adding something after the selected object, so here we simply add " %" after whatever was selected.
In this case, we’re lucky that the component permits adding a style class directly to what we’re trying to modify (valueDisplay), which makes the selector very simple.

1 Like