Is there an easy way to display values as pips on a character sheet ?

I would like to display values on my character sheet using pips to represent ammo. I thought an <input type="password"> would be ideal for this, but it turns out it is only possible to do this a modified input box in chrome like this <p>Hello<input style="color:blue;-webkit-text-security: square;" type="text"></p> but it only works in chrome and not in firefox. I also discovered that the <progress> tag and <meter> tags don't render on character sheets The only way I can think to do it is to use some character sheet scripting to update a disabled <input field> via a numeric input field changing

I would use a span to display the pips, updated via sheet worker fields from a numeric field. This doesn't work if you want the pips to be clickable, of course, but this seems like the easiest solution.

Thanks for the prompt reply. I just tried this very simple example to see if works by copying and pasting some code out of the wiki. I simply wanted to see if the event fired by changing the BurningMeter text to "BURNING" when the burning value changes.      <!CONDITION SECTION>      <div style="color : white; background-color:black">      <h6 style="color:white">CONDITIONS AND AFFLICTIONS</h6>      <input style="width:30%;" type="text" name="attr_BurningMeter" value="?"/><input style="width:7%" type="number" name="attr_Burning" value="0"/>BURNING      </div> This text doesn't fire!" I pasted this text at the bottom of my custom character sheet <!SHEET WORKER SCRIPTS> <script type="text/worker"> on("change:Burning", function() { setAttrs({ BurningMeter: "BURNING"; }); }); // ... etc </script>

Try lowercasing the event string:   change:burning .

As soon as posted the code I spotted the mistake. I put BurningMeter: "BURNING"; Instead of BurningMeter: "BURNING" I finished my line with a naughty semi colon. It works now I have corrected the code. Thanks for your help. I change the font and add the javascript to make the meter work.

Here's the working code for my burning condition meter.  Thank's for the help :)      <!CONDITION SECTION>      <div style="color : white; background-color:black">      <h6 style="color:white">CONDITIONS AND AFFLICTIONS</h6>      <input style="width:30%;font-family: 'Pictos Three';font-size:17px;color:red;background-color:black" readonly type="text" name="attr_BurningMeter" value=""/><input style="width:7%" type="number" name="attr_Burning" value="0"/>BURNING      </div> <!SHEET WORKER SCRIPTS> <script type="text/worker"> function nStr(n,s) {     var B="";     for(x=0;x<c;x++)    {        B = B + s;    }    return B; } on("change:Burning", function(eventInfo) {     //j in picto's 3 is a burning symbol    c = parseInt(eventInfo.newValue);    if(c>99){c=99;} // check not set to a silly number       setAttrs({           BurningMeter: nStr(c,'j')       }); }); // ... etc </script>