How can I have an image in the UI bar change depending on a variable?

Question

Using twine 2 and sugarcube 2. I have hp as a variable. Now I want to display a simple picture I drew of a healthy looking person at $hp gte 75, with a slight injured person at 50-75, bleeding person at 25-50 etc. I am a total novice so a ELI5 style explanation would be great.

EDIT: I couldn't get the replace part of the widget in best answer to work even with debugging methods so I disbabled the replace part of the widget by putting  /* before the first if and */ at the last if.

Then I put this is StoryCaption. Which worked.

<<if $hp gte 90 and $hp lte 150>>
    <img src="img/self/str.jpg" width="100%">
<<elseif $hp gte 70 and $hp lte 89>>
    <img src="img/self/tough.jpg" width="100%">
<<elseif $hp gte 51 and $hp lte 69>>
    <img src="img/self/good.jpg" width="100%">
<<elseif $hp is 50>>
    <img src="img/self/average.jpg" width="100%">
<<elseif $hp gte 35 and $hp lte 49>>
    <img src="img/self/sore.jpg" width="100%">
<<elseif $hp gte 11 and $hp lte 34>>
    <img src="img/self/weak.jpg" width="100%">
<<elseif $hp gte -50 and $hp lte 10>>
    <img src="img/self/skeleton.jpg" width="100%">
<<else>>
    <img src="img/self/base.jpg" width="100%">
<</if>>

Answer 1

First you add your picture to the sidebar using the StoryCaption special passage, meaning a passage titled "StoryCaption":

<span id="health"><img src="yourimagehere" width="100%"></span>

Now, whenever the players life changes call this code:

<<if $hp gte 75>>
	<<replace "#health">><img src="yourimagehere" width="100%"><</replace>>
<<elseif $hp gte 50>>
	<<replace "#health">><img src="yourotherimage" width="100%"><</replace>>
<<elseif $hp gte 25>>
	<<replace "#health">><img src="yourthirdimage" width="100%"><</replace>>
<<else>>
	<<replace "#health">><img src="yourlastimage" width="100%"><</replace>>
<</if>>

To safe time and keep things more readable create a widget to do this for you. Make a passage, give it the tag "widget", then say something like:

<<widget hp>><<nobr>>

<<set $hp += $args[0]>>

<<if $hp gte 75>>
	<<replace "#health">><img src="yourimagehere" width="100%"><</replace>>
<<elseif $hp gte 50>>
	<<replace "#health">><img src="yourotherimage" width="100%"><</replace>>
<<elseif $hp gte 25>>
	<<replace "#health">><img src="yourthirdimage" width="100%"><</replace>>
<<else>>
	<<replace "#health">><img src="yourlastimage" width="100%"><</replace>>
<</if>>


<</nobr>><</widget>>

If you now want to lower hp by for example 10, you can just say:

<<hp -10>>

To add hp similarly:

<<hp 10>> or <<hp +10>>

 

Comments

Wow. I wasn't expecting such a great response. Cheers

---

Sorry to bother you again when I tried adding hp by typing <<hp +15>> I had the following error message.

Error: <<hp>>: error within widget contents (Error: <<replace>>: no elements matched the selector "#health")

The stat changes and the first image is there. However it doesn't change the picture with more/less hp.

---

You need to wrap your picture into a <span> or <div> with the id in question like I did above:

<span id="health"><img src="yourimagehere" width="100%"></span>