Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

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
1536658129
Jakob
Sheet Author
API Scripter
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.
1536660464

Edited 1536660970
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>
1536660745
Jakob
Sheet Author
API Scripter
Try lowercasing the event string:   change:burning .
1536660977

Edited 1536661046
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.
1536663908

Edited 1536665332
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>