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

Can anybody help with this script?

1605395661

Edited 1605396174
Leothedino
Sheet Author
Been putting together a 'fake progress bar', using the CSS Wizardry articles. Along with my best attempt at coding a sheetworker, but i'm really inexperienced with Javascipt. The intention is to make a progress bar with a ' current ' and ' maximum ' input box, where the code can always work percentages out to serve as the ' value ' to change the bar itself. Really trying to work this out myself, but I just cannot make it function and I can't seem to send the value to the input, either. Any help would be greatly appreciated. Thank you. <div class="sheet-container"> <input type='number' name='attr_toxcur' placeholder='current toxicity'> <input type='number' name='attr_toxmax' placeholder='maximum toxicity'> <input type="hidden" value='@{toxicv}' name="attr_toxbar" class="sheet-hidden sheet-toxbar"> <div class="sheet-toxbar"></div> </div> <script type="text/worker"> on("sheet:opened change:toxcur change:toxmax", function() { getAttrs(["toxcur", "toxmax"], function(values) { var maximum = values.toxcur; var current = values.toxmax; var toxpercent10 = (maximum = 10) / 100; var toxpercent20 = (maximum = 20) / 100; var toxpercent30 = (maximum = 30) / 100; var toxpercent40 = (maximum = 40) / 100; var toxpercent50 = (maximum = 50) / 100; var toxpercent60 = (maximum = 60) / 100; var toxpercent70 = (maximum = 70) / 100; var toxpercent80 = (maximum = 80) / 100; var toxpercent90 = (maximum = 90) / 100; var toxpercent100 = (maximum = 100) / 100; if (current <= toxpercent10) { tvalue = "1"; } else if (current <= toxpercent20) { tvalue = "2"; } else if (current <= toxpercent30) { tvalue = "3"; } else if (current <= toxpercent40) { tvalue = "4"; } else if (current <= toxpercent50) { tvalue = "5"; } else if (current <= toxpercent60) { tvalue = "6"; } else if (current <= toxpercent70) { tvalue = "7"; } else if (current <= toxpercent80) { tvalue = "8"; } else if (current <= toxpercent90) { tvalue = "9"; } else if (current <= toxpercent100) { tvalue = "10"; } else { tvalue = "0"; } setAttrs({ "tvalue":toxicv }); }); }); </script> div.sheet-toxbar { width: 230px; height: 20px; border: 2px solid black; color: black; font-size: 12px; font-weight: bold; text-align: center; } input.sheet-toxbar[value="0"] ~ div.sheet-toxbar { background: white; } input.sheet-toxbar[value="0"] ~ div.sheet-toxbar:before { content: "NO TOXICITY"; } input.sheet-toxbar[value="1"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 90%, #255200 5%,#449600 95%, #adfc03 100%); } input.sheet-toxbar[value="2"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 80%, #255200 10%,#449600 90%, #adfc03 100%); } input.sheet-toxbar[value="3"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 70%, #255200 20%,#449600 80%, #adfc03 100%); } input.sheet-toxbar[value="4"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 60%, #255200 30%,#449600 70%, #adfc03 100%); } input.sheet-toxbar[value="5"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 50%, #255200 40%,#449600 60%, #adfc03 80%); } input.sheet-toxbar[value="5"] ~ div.sheet-toxbar:before { content:"HALF TOXICITY"; } input.sheet-toxbar[value="6"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 40%, #255200 40%,#449600 50%, #adfc03 70%); } input.sheet-toxbar[value="7"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 30%, #255200 30%,#449600 40%, #adfc03 60%); } input.sheet-toxbar[value="8"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 20%, #255200 20%,#449600 30%, #adfc03 50%); } input.sheet-toxbar[value="8"] ~ div.sheet-toxbar:before { content:"HIGH TOXICITY"; } input.sheet-toxbar[value="9"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 10%, #255200 10%,#449600 20%, #adfc03 40%); } input.sheet-toxbar[value="10"] ~ div.sheet-toxbar { background: linear-gradient(to left, #255200 1%,#449600 10%, #adfc03 30%); } input.sheet-toxbar[value="10"] ~ div.sheet-toxbar:before { content:"MAXIMUM TOXICITY - DANGER!"; }
1605441774

Edited 1605441921
Leothedino
Sheet Author
UPDATE: Still having troubles, if anybody can help? Managed to make the sheetworker process the sum (a friend and I used a loop to achieve it), but now I can't seem to send the value it creates to the hidden 'value' area to make the CSS react. Do hidden inputs not like numbers? If I manually put in a numerical value in the 'value' area of the hidden input, it's fine! But the moment I ask the Sheetworker to do it, it doesn't work. <div class="sheet-container"> <input type='number' name='attr_toxcur' placeholder='current toxicity'> <input type='number' name='attr_toxmax' placeholder='maximum toxicity'> <input type='number' name='attr_toxoutput' value='@{toxicv}' disabled='true'> <input type="hidden" value="@{toxicv}" name="attr_toxbar" class="sheet-hidden sheet-toxbar"> <div class="sheet-toxbar"></div> </div> <script type="text/worker"> on("sheet:opened change:toxcur change:toxmax", function() { getAttrs(["toxcur", "toxmax"], function(values) { var maximum = values.toxmax; var current = values.toxcur; var toxPercent = [10,20,30,40,50,60,70,80,90,100]; for(let i = 0; i < toxPercent.length; i++) { if(current <= (maximum * toxPercent[i]/ 100)){ tvalue = i+1; var toxvalue = tvalue.toString(); console.log("Toxic value is " + tvalue) break; } } setAttrs({ "toxicv":toxvalue }); }); }); </script> div.sheet-toxbar { width: 230px; height: 20px; border: 2px solid black; color: black; font-size: 12px; font-weight: bold; text-align: center; } input.sheet-toxbar[value="0"] ~ div.sheet-toxbar { background: white; } input.sheet-toxbar[value="0"] ~ div.sheet-toxbar::before { content: "NO TOXICITY"; } input.sheet-toxbar[value="1"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 90%, #255200 5%,#449600 95%, #adfc03 100%); } input.sheet-toxbar[value="2"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 80%, #255200 10%,#449600 90%, #adfc03 100%); } input.sheet-toxbar[value="3"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 70%, #255200 20%,#449600 80%, #adfc03 100%); } input.sheet-toxbar[value="4"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 60%, #255200 30%,#449600 70%, #adfc03 100%); } input.sheet-toxbar[value="5"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 50%, #255200 40%,#449600 60%, #adfc03 80%); } input.sheet-toxbar[value="5"] ~ div.sheet-toxbar::before { content:"HALF TOXICITY"; } input.sheet-toxbar[value="6"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 40%, #255200 40%,#449600 50%, #adfc03 70%); } input.sheet-toxbar[value="7"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 30%, #255200 30%,#449600 40%, #adfc03 60%); } input.sheet-toxbar[value="8"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 20%, #255200 20%,#449600 30%, #adfc03 50%); } input.sheet-toxbar[value="8"] ~ div.sheet-toxbar::before { content:"HIGH TOXICITY"; } input.sheet-toxbar[value="9"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 10%, #255200 10%,#449600 20%, #adfc03 40%); } input.sheet-toxbar[value="10"] ~ div.sheet-toxbar { background: linear-gradient(to left, #255200 1%,#449600 10%, #adfc03 30%); } input.sheet-toxbar[value="10"] ~ div.sheet-toxbar::before { content:"MAXIMUM TOXICITY - DANGER!"; }
1605449425

Edited 1605449591
Leothedino
Sheet Author
UPDATE:  The Custom Progress Bar example makes it sound easy to just 'change the value' using a sheetworker, but in testing the theory with a simple input box to send a numerical value (0 to 10) to the hidden bar's input value, it's proven that this doesn't work either.  Using the CSS above , this is the HTML I used to test this out: <div class="sheet-container"> <input type='number' name='attr_toxcur' placeholder='current toxicity'> <input type='number' name='attr_toxmax' placeholder='maximum toxicity'> <input type='number' name='attr_toxoutput' value='0'> <input type="hidden" value="@{toxoutput}" name="attr_toxbar" class="sheet-hidden sheet-toxbar"> <div class="sheet-toxbar"></div> </div>
1605454261
Andreas J.
Forum Champion
Sheet Author
Translator
Read &amp; comment on the thread mentioned in the section <a href="https://app.roll20.net/forum/post/9087213/creating-a-progress-bar-slash-health-bar-on-the-character-sheet" rel="nofollow">https://app.roll20.net/forum/post/9087213/creating-a-progress-bar-slash-health-bar-on-the-character-sheet</a> ᐰndreas J. said: Dave said: I'm looking at Method #3. So, it's not possible to have a "max" value determined by calculation or user input? I've tried live calculating fields and sheet workers, but the bar's "max" field doesn't seem to work unless I just use a raw number. Someone pointed out to me that this would probably be best achieved by having the range input just having a min/max range of 0/100, and then have a separate stat that tracks the current/max hp, which makes it possible for a sheetworker to set the value of the range input as a percentage of the max health. Please share your example if you manage to figure it out.
ᐰndreas J. said: Read &amp; comment on the thread mentioned in the section <a href="https://app.roll20.net/forum/post/9087213/creating-a-progress-bar-slash-health-bar-on-the-character-sheet" rel="nofollow">https://app.roll20.net/forum/post/9087213/creating-a-progress-bar-slash-health-bar-on-the-character-sheet</a> ᐰndreas J. said: Dave said: I'm looking at Method #3. So, it's not possible to have a "max" value determined by calculation or user input? I've tried live calculating fields and sheet workers, but the bar's "max" field doesn't seem to work unless I just use a raw number. Someone pointed out to me that this would probably be best achieved by having the range input just having a min/max range of 0/100, and then have a separate stat that tracks the current/max hp, which makes it possible for a sheetworker to set the value of the range input as a percentage of the max health. Please share your example if you manage to figure it out. I saw this too, I just do not understand what it means in 'laymen terms'. Does it apply to your custom progress bar? Unless I am mistaken, this person is referring to your other technique?
1605470192

Edited 1605472321
Leothedino
Sheet Author
ᐰndreas J. said: Please share your example if you manage to figure it out. SOLUTION:&nbsp; The following code will do the trick (including all parts for reference below), the key to fixing this was placing two 'types' in the hidden input. By adding a 'number' type in addition to 'hidden', it enabled the attribute to be correctly read and put to use. Hopefully this Sheetworker and knowledge below will save somebody else from spending as many days on this as I did :D&nbsp; HTML + SHEETWORKER &lt;div class="sheet-container"&gt; &lt;input type='number' name='attr_toxcur' value='0'&gt; &lt;input type='number' name='attr_toxmax' value='100'&gt; &lt;input type='hidden' type='number' value='@{toxicv}' name="attr_toxbar" class="sheet-hidden sheet-toxbar" disabled='true'&gt; &lt;div class="sheet-toxbar"&gt;&lt;/div&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; on("sheet:opened change:toxcur change:toxmax", function() { getAttrs(["toxcur", "toxmax"], function(values) { var maximum = values.toxmax; var current = values.toxcur; var toxPercent = [0,10,20,30,40,50,60,70,80,90,100,999]; for(let i = 0; i &lt; toxPercent.length; i++) { if(current &lt;= (maximum * toxPercent[i]/ 100)){ tvalue = i; console.log("Toxic value is " + tvalue) break; } } setAttrs({ "toxicv":tvalue }); }); }); &lt;/script&gt; CSS div.sheet-toxbar { width: 230px; height: 20px; border: 2px solid black; color: black; font-size: 12px; font-weight: bold; text-align: center; } input.sheet-toxbar[value="0"] ~ div.sheet-toxbar { background: white; } input.sheet-toxbar[value="0"] ~ div.sheet-toxbar::before { content: "NO TOXICITY"; } input.sheet-toxbar[value="1"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 90%, #255200 5%,#449600 95%, #adfc03 100%); } input.sheet-toxbar[value="2"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 80%, #255200 10%,#449600 90%, #adfc03 100%); } input.sheet-toxbar[value="3"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 70%, #255200 20%,#449600 80%, #adfc03 100%); } input.sheet-toxbar[value="4"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 60%, #255200 30%,#449600 70%, #adfc03 100%); } input.sheet-toxbar[value="5"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 50%, #255200 40%,#449600 60%, #adfc03 80%); } input.sheet-toxbar[value="5"] ~ div.sheet-toxbar::before { content:"HALF TOXICITY"; } input.sheet-toxbar[value="6"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 40%, #255200 40%,#449600 50%, #adfc03 70%); } input.sheet-toxbar[value="7"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 30%, #255200 30%,#449600 40%, #adfc03 60%); } input.sheet-toxbar[value="7"] ~ div.sheet-toxbar::before { content:"HIGH TOXICITY"; } input.sheet-toxbar[value="8"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 20%, #255200 20%,#449600 30%, #adfc03 50%); } input.sheet-toxbar[value="8"] ~ div.sheet-toxbar::before { content:"HIGH TOXICITY"; } input.sheet-toxbar[value="9"] ~ div.sheet-toxbar { background: linear-gradient(to left, white 10%, #255200 10%,#449600 20%, #adfc03 40%); } input.sheet-toxbar[value="9"] ~ div.sheet-toxbar::before { content:"HIGH TOXICITY"; } input.sheet-toxbar[value="10"] ~ div.sheet-toxbar { background: linear-gradient(to left, #255200 1%,#449600 10%, #adfc03 30%); } input.sheet-toxbar[value="10"] ~ div.sheet-toxbar::before { content:"MAXIMUM TOXICITY - DANGER!"; } input.sheet-toxbar[value="11"] ~ div.sheet-toxbar { background: linear-gradient(to left, #255200 1%,#449600 10%, #adfc03 30%); } input.sheet-toxbar[value="11"] ~ div.sheet-toxbar::before { content:"POISONED!"; }
1605472501
Andreas J.
Forum Champion
Sheet Author
Translator
Great, you made it work! For the sake of readability, I'd maybe change the font color, so it stays readable when the bar is overlapping with the text.
Good plan, properly styling it comes next I guess!&nbsp;
1605540891
GiGs
Pro
Sheet Author
API Scripter
Leothedino said: ᐰndreas J. said: Please share your example if you manage to figure it out. SOLUTION:&nbsp; The following code will do the trick (including all parts for reference below), the key to fixing this was placing two 'types' in the hidden input. By adding a 'number' type in addition to 'hidden', it enabled the attribute to be correctly read and put to use. Hopefully this Sheetworker and knowledge below will save somebody else from spending as many days on this as I did :D&nbsp; This is intriguing. I havent examined your code, but hidden inputs already work for situations where they need to be numbers, so I'm very curious why it would be necessary here to include types, and for that matter, why two types would actually work (one should overwrite the other). I'll try to find time to look at it.
1605545026

Edited 1605545486
GiGs
Pro
Sheet Author
API Scripter
I'm still curious why your solution was necessary, or even why it worked, but I noticed why you had touble. This line &lt;input type='hidden' type='number' value='@{toxicv}' name="attr_toxbar" class="sheet-hidden sheet-toxbar" disabled="true"&gt; has a value="@{toxicv}" When the CSS tries to interpret that, it sees the text @ followed by { followed by t and so on. It does not automatically evaluate it into a number (and its surprising that your approach made it work). Another solution would have been to change that section of code to this: &lt;div class="sheet-container"&gt; &lt;input type='number' name='attr_toxcur' value='0'&gt; &lt;input type='number' name='attr_toxmax' value='100'&gt; &lt;input type='hidden' value='' name="attr_toxbar" class="sheet-hidden sheet-toxbar" readonly&gt; &lt;div class="sheet-toxbar"&gt;&lt;/div&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; on('sheet:opened&nbsp;change:toxcur&nbsp;change:toxmax',&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;getAttrs(['toxcur',&nbsp;'toxmax'],&nbsp;function&nbsp;(values)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;maximum&nbsp;=&nbsp;values.toxmax; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;current&nbsp;=&nbsp;values.toxcur; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;toxPercent&nbsp;=&nbsp;[0,&nbsp;10,&nbsp;20,&nbsp;30,&nbsp;40,&nbsp;50,&nbsp;60,&nbsp;70,&nbsp;80,&nbsp;90,&nbsp;100,&nbsp;999]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;tvalue; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(let&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;&lt;&nbsp;toxPercent.length;&nbsp;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(current&nbsp;&lt;=&nbsp;(maximum&nbsp;*&nbsp;toxPercent[i]&nbsp;/&nbsp;100))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tvalue&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('Toxic&nbsp;value&nbsp;is&nbsp;'&nbsp;+&nbsp;tvalue); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setAttrs({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toxicv:&nbsp;tvalue, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toxbar:&nbsp;tvalue &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;}); }); &lt;/script&gt; In other words, have your sheet worker set the toxbar value, so it is&nbsp; &nbsp;a number, not an attribute call using @{} syntax.
1605545245

Edited 1605545268
Leothedino
Sheet Author
Ah, I didn't know that would work. This was really insightful, i'll try to keep that in mind. I genuinely thought if an attribute went in a certain way, it had to come out the same way, too. The more you know, ha. Thank you GiGs!&nbsp;
1605545470
GiGs
Pro
Sheet Author
API Scripter
You're welcome :) I just noticed an error in my code, and have fixed it. Disabled inputs (those with disabled="true") cannot be set through sheet workers. You have to change that to readonly. I've done that above.
Can HTML inputs have two types ('hidden' and 'number', in the problem line GiGs excerpted above)? I would think the HTML will just use the hidden type.
1605589710
GiGs
Pro
Sheet Author
API Scripter
Rabulias said: Can HTML inputs have two types ('hidden' and 'number', in the problem line GiGs excerpted above)? I would think the HTML will just use the hidden type. I've never heard of it before, and I would assume that one would override the other. But roll20 does some weird stuff behind the scenes with the html, so its possible they have one check that looks on the sheet (not in the backend database) for "type=hidden" and another check that looks for "type=number, text, whatever". If those checks are independent, I could see how this would happen, but if so, it's definitely not intended behaviour.