We use Cookies to help personalize and improve Roll20. For more information on our use of non-essential Cookies, visit our Privacy Policy here.
Accept
Advertisement Create a free account

HTML5 progess bar in chat?

1463868763

Edited 1463869151
DXWarlock
Pro
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
Brian
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;`);
1463879633
shendChat? Is that a new function that translates all your text into hot shcottish? :D
1463988154

Edited 1463988518
DXWarlock
Pro
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
Pro
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
Forum Champion
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
Pro
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.