Progression Bar

[Steel1790]

Hello, I am trying to get a progression bar to display as it counts the 30 spins toward mode completion. I already have the counter working, but would love to have this visual aid. I am posting the code below. I tried replicating the text for the counted spins but that just has a blank bar displaying still. any suggestions? greatly appreciate it.
It's at the section below mid-page. the rest of the script works as intended.
" - type: rectangle
width: 400
height: 50
x: 490
y: 75%
corner_radius: 10
corner_segments: 10
color: 00FF00
animations:
razorwire_spinner_counter:
- property: width
value: (player|razorwire_spinner_counter) "

---

#config_version=5
mode:
start_events: selection_mode_razorwire_selected
stop_events: stop_mode_razorwire, ball_ended, stop_mode_cellar, stop_mode_selection_mode

timers:
60s_timer:
start_value: 69
end_value: 0
direction: down
control_events:
- action: start
event: mode_razorwire_started

counters:
razorwire_spinner_counter:
starting_count: 0
count_complete_value: 30
enable_events: enable_qualify
disable_events: disable_qualify
start_enabled: true
reset_on_complete: false
events_when_complete: mode_razorwire_complete, stop_mode_razorwire
count_events: spinner_hit

variable_player:
spinner_hit:
score: 2000000
counter_razorwire_spinner_counter_hit:
razorwire_spinner_counter:
action: set
int: (count)

timer_your_timer_tick:
60s_timer:
int: device.timers.your_timer.ticks_remaining
action: set

slides:
razorwirevideo:
widgets:
- type: video
video: razorwirevideo

Spinner1:
widgets:
- type: Text
text: Shoot The Spinners!
font_name: TrajanProRegular
font_size: 75
color: 65fe08
- type: image
image: hacksawUI
opacity: 0.5
y: 1
x: 1
anchor_x: left
anchor_y: bottom
- type: text
text: (score)
number_grouping: true
y: 16
x: 25
font_size: 36
anchor_x: left
anchor_y: bottom
font_name: TrajanProRegular
color: 65fe08
- type: Text
text: 00:(player|razorwire_60s_timer_tick)
font_size: 50
font_name: digitalclockfont
color: red
x: 490
y: 84.9%

- type: rectangle
  width: 400
  height: 50
  x: 490
  y: 75%
  corner_radius: 10
  corner_segments: 10
  color: 00FF00
  animations:
   razorwire_spinner_counter:
    - property: width
      value: (player|razorwire_spinner_counter)
  
- type: rectangle
  width: 210
  height: 65
  x: 490
  y: 85%
  corner_radius: 10
  corner_segments: 10
  color: black
- type: Text
  text: Seconds Left
  font_size: 50
  font_name: TrajanProRegular
  color: 65fe08
  x: 825
  y: 85%
- type: Text
  text: (player|razorwire_spinner_counter) / 30 Spins
  font_size: 50
  font_name: TrajanProRegular
  color: 65fe08
  y: 65%
- type: Text
  text: You Have 60 Seconds To Hit 30 Spins
  color: yellow
  font_name: TrajanProRegular
  font_size: 35
  y: 90
  animations:
   pre_show_slide:
    - property: opacity
      value: 0
      duration: 1s
    - property: opacity
      value: 1
      duration: 1s
      repeat: true
- type: image
  image: razorwireimg
  opacity: 0.65
transition:
 type: fade
 duration: 0.2s

slide_player:
mode_razorwire_started:
razorwirevideo:
priority: 500
expire: 8.7s
slide_razorwirevideo_removed:
Spinner1:
priority: 400
expire: 66.5s

[Steel1790]

also to note: i've tried under animations: as player_progress: in the event that's pre-defined and still no luck

[atummons]

This one is always confusing, and I don't have my code in front of me, but can tomorrow if needed. This is very much a keep it simple thing.

Read this (I'm sure you already have): https://docs.missionpinball.org/en/stable/displays/widgets/animation.html?highlight=Status%20bar#animating-a-progress-bar

Two important things. It needs to be an event that is triggered on event change, specifically one that has the value as an argument. So your even needs to be spinner_hit or something that is fired when that count increases, otherwise it has no idea what is going on.

Second, for value it is always (value) Never more, never less (if there is an exception here someone correct me). But this ties back to the first point, it needs to be an event that carries a value as at argument, and then passes that value via (value).

[atummons]

That's what I figured. Depends on resolution and such of the display how big 30 is. Not in front of code, but thinking I was able to do (value) * 5 to make it bigger. But could have been something far more complex.

If that doesn't work, next logical would be set a player variable within that mode. Then set that to 5x that value. So add 5 every hit. Then use that variable update event for your animation event.

[Steel1790]

I may need to do that on setting a multiplier to the value. which is fine. is there a way to make the shape only move the bar from 1 side? as of right now it defaults to filling out a full rectangle as opposed to trying to get the bar to just move one direction?

[atummons]

The answer is yes, that's what I have. Probably need to set anchor_x so it grows from one side.

[Steel1790]

this is perfect! thank you so much for your help . I overlooked that part

[borgdog]

As another option for more control, I did a health meter with a series of images as widgets that display or are removed as variable player_health changes. probably not the most efficient way but it does work. some snippets as example:

widget_player:
....
  player_health{value <= 60 and value > 40}:
    health60:
      slide: cockpit_slide
    health80:
      action: remove
    health40:
      action: remove
....

widgets:
....
  health60:
    type: image
    image: dmd_health60
    style: health_meter_style
.....
widget_styles:
  health_meter_style:
    anchor_x: left
    anchor_y: bottom
    x: 0
    y: 0
    z: 30