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

HTML5 progess bar in chat?

1463868763

Edited 1463869151
DXWarlock
Sheet Author
API Scripter
Has anyone been able to get the progress bar to work in chat? I've been trying to send it in chat via API in html/div messages for players to represent visual bars for ammo/health/armor/ect like the tokens have using: &lt;progress value="22" max="100"&gt;&lt;/progress&gt; like this: <a href="http://www.w3schools.com/tags/tryit.asp?filename=t" rel="nofollow">http://www.w3schools.com/tags/tryit.asp?filename=t</a>... But it seems to strip it no matter what I do. Also though of using gradients in a div, which sort of works using: background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(201,201,201,1) 50%,rgba(229,229,229,1) 100%); But that is overly complicated to try to generate on the fly each time.
1463877927

Edited 1463877984
Lithl
Pro
Sheet Author
API Scripter
Have you considered simply setting the width? Something like: var ammo = ..., ammoMax = ...; shendChat('', `/direct &lt;div style="display:inline-block;\ width:100%;background-color:white;border:1px solid black;height:20px"&gt; &lt;div style="display:inline-block;\ width:${ammo/ammoMax*100}%;background-color:blue;border-right:1px solid black;height:20px"&gt; &lt;/div&gt; &lt;/div&gt;`);
shendChat? Is that a new function that translates all your text into hot shcottish? :D
1463988154

Edited 1463988518
DXWarlock
Sheet Author
API Scripter
Brian said: Have you considered simply setting the width? Something like: var ammo = ..., ammoMax = ...; shendChat('', `/direct &lt;div style="display:inline-block;\ width:100%;background-color:white;border:1px solid black;height:20px"&gt; &lt;div style="display:inline-block;\ width:${ammo/ammoMax*100}%;background-color:blue;border-right:1px solid black;height:20px"&gt; &lt;/div&gt; &lt;/div&gt;`); No, no I did not. Because that is easy, and makes sense so I didn't think of that...LOL thanks! @SkyCaptain: It's a hidden feature that makes the chat use text to speech in a&nbsp;sean connery accent. "Theef does a shneak attack against a shingle target!"
1464007161

Edited 1464008211
DXWarlock
Sheet Author
API Scripter
After much scowling, cursing, and praying to the HTML gods I got it working with your suggestion! Getting a roll template to take an entire set of div's as an argument sent via the API {{Stats=&lt;div....}} that didn't break the template itself kicked me in the face more times than I'd like to admit. (Opening and closing embedded div statements correctly, are my 2nd worse enemy next to open and close { and } in coding). But the results! Time to start overloading my players with bar charts all over the chat! Thanks again!
1464009284

Edited 1464009354
The Aaron
Pro
API Scripter
Ooooh! &nbsp;Very pretty! (Ace Rimmer! &nbsp;" Smoke me a kipper, skipper, I'll be back for breakfast! " &nbsp;BWHAHAHAHAHAHA!)
1464009926

Edited 1464010013
DXWarlock
Sheet Author
API Scripter
Yep the same ace! He plays him up like the red dwarf persona too. Now if only I could get roll templates to take html color codes sent to set the &lt;th&gt; color with background-color: {{#color}}{{color}}{{/color}}; I could get rid of 99% of my 'fake' roll templates in my scripts.