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

How do I set/change a CSS style using a sheet worker function.

Using a sheet worker, how do I change the style (say, font color) of an input field? <input type="text" name="attr_myinputfield"/> For example, a character's max encumbrance is exceeded, so I want to set a visual indicator on the character sheet whenever the sheet worker function determines this is the case (and to clear the style change if/when the condition is rectified.) I looked through many examples, but don't see anything like this. If I can't change the style in this way, is there an alternative approach to providing this functional on the character sheet?
1587668979
GiGs
Pro
Sheet Author
API Scripter
You need to set classes for things that will be influenced by css, like <input type="text" class="myclass" name="attr_myinputfield"/> There are a bunch of examples on how to do this on the CSS wizardry page. You use the [value="something"] property in CSS. If you want to change the color of something when encumbrance is above a certain level, you'll need to use a sheet worker, create a hidden attribute "max_enc_exceeded", and set its value to 1 when exceed and 0 if not. You need to give it a class then put this right next to the attribute that is going to be colored red. And then in CSS you can do something like input.sheet-enccheck[value="1"] ~ input.sheet-redtext {     color: red; } CSS is every bit as fiddly as sheet workers, if not more so, so giving the actual code (your input name and details) would make it easier to give help - but this is the principle.  
So, something like this, correct? <div>     <span>Encumbrance:</span> <input type="number" value="0" name="attr_encumbrance"/> <input type="hidden" class="enccheck" name="max_enc_exceeded"/> </div> CSS: input.sheet-enccheck[value="1"] ~ input.sheet-redtext { color: red; } input.sheet-enccheck[value="0"] ~ input.sheet-redtext { color: black; } In my sheet worker, I use: // When a hidden ENCUMBRANCE field's value changes, update the character's overall encumbrance... on('change:encarmor change:encweapons change:encequipment', function(eventInfo) { getAttrs (['encumbrance', 'encarmor', 'encweapons', 'encequipment', 'max_enc_exceeded'], function(values) { // do stuff setAttrs({max_enc_exceeded : 1}); // test to force color change based on value }); }) However, this isn't working, so I'm missing something...
1587675860
GiGs
Pro
Sheet Author
API Scripter
for the sheet worker first, you dont need to get the max_enc_exceeded - you'll be calculating and overwriting it so no need to get its old score. is 'encumbrance' the total load? I'm operating under that assumption. Since you are calculating it here, you dont need to get it. I've added an imaginary 'load_capacity' stat - this is the characters enc_limit. You'll need to replace that with however its calculated in your sheet. // When a hidden ENCUMBRANCE field's value changes, update the character's overall encumbrance... on('change:load_capacity change:encarmor change:encweapons change:encequipment', function(eventInfo) { getAttrs (['load_capacity', 'encarmor', 'encweapons', 'encequipment'], function(values) {         const output = {};         const enc_limit = parseInt(values.load_capacity) || 0;         cont enc = (parseInt(values.encarmor) || 0) + (parseInt(values.encweapons) || 0) + (parseInt(values.encequipment) || 0);         output['encumbrance'] = enc;         output['max_enc_exceeded'] = (enc > enc_limit) ? 1 : 0; setAttrs(output); }); }); since load_capacity doesnt exist unless you create it, load_capacity will be treated as 0, so max_enc_exceeded will always be 1, which is what we want for the test. Back the html and css. You need a class on the input whose color is to change. I moved the hidden input up so its easier to see. html ignores line breaks and white space generally, so you dont need to put them on the same line. <div>     <input type="hidden" class="enccheck" name="max_enc_exceeded" value="0"/>     <span>Encumbrance:</span> <input type="number" class="redtext" value="0" name="attr_encumbrance"/> </div> I also give the hidden input a default value. This is generally a good idea. With the css, set a default value, then change it when the rule is true, like so: input.sheet-redtext { color: black; } input.sheet-enccheck[value="1"] ~ input.sheet-redtext { color: red; } Try that. Also you can create a load_capacity stat, and give it various val;ues, to test the colour is changing.
Hmm. This is being a tricky one. I've implemented your examples above and no joy. Here's what I've got: First, the HTML. FYI, this HTML is part of a 2-column CSS grid style (no row formatting), thus the intermediary <div>: <span>Encumbrance:</span> <div> <input type="number" class="redtext" readonly="true" value="0" name="attr_encumbrance"/> <input type="hidden" class="enccheck" value="0" name="attr_max_enc_exceeded"/> <input type="hidden" value="20" name="attr_load_capacity"/> </div> Here's the CSS: .charsheet input.sheet-redtext { color: black; } .charsheet input.sheet-enccheck[value="1"] ~ input.sheet-redtext { color: red; } And here's the sheet worker: // When a hidden ENCUMBRANCE field's value changes, update the character's overall encumbrance... on('change:load_capacity change:enc_all_armor change:enc_all_weapons change:enc_all_equipment', function(eventInfo) { getAttrs (['load_capacity', 'enc_all_armor', 'enc_all_weapons', 'enc_all_equipment'], function(values) { const output = {}; const enc_limit = parseInt(values.load_capacity) || 0; const enc = (parseInt(values.enc_all_armor) || 0) + (parseInt(values.enc_all_weapons) || 0) + (parseInt(values.enc_all_equipment) || 0); output['encumbrance'] = enc; output['max_enc_exceeded'] = (enc > enc_limit) ? 1 : 0; setAttrs(output); }); }); The load_capacity value is being correctly set by a separate event handler.  If I set type="text" instead of type="hidden" on the input fields above, I can see their values being updated correctly. The load_capacity is being set to the correct number and when the encumbrance attribute exceeds this value, the value of max_enc_exceeded is being changed to 1 (and back to 0 when the encumbrance drops below load_capacity) - its the style that's not being applied .
1587682740
GiGs
Pro
Sheet Author
API Scripter
Good testing! Okay, so something's up with the CSS (this is the bit that always gives me trouble, btw). Troubleshooting CSS is a very hands-on and tedious process. I'll plug the code into a blank sheet later and see what's up. In the meantime try adding some specificity: .charsheet input[type="number"].sheet-redtext { color: black; } .charsheet input.sheet-enccheck[value="1"] ~ input[type="number"].sheet-redtext { color: red; } The intermediate div isnt an issue, btw. the fact that both input s are inside the same div block is perfect. 
Tried the new CSS and still nada.
1587691299
GiGs
Pro
Sheet Author
API Scripter
This is working for me CSS .charsheet input.sheet-redtext {     color: black; } input.sheet-enccheck[value="1"] ~ input.sheet-redtext {     color: red; }      HTML <span>Encumbrance:</span>  <div>     <input type="hidden" class="enccheck" value="0" name="attr_max_enc_exceeded"/>     <input type="number" class="redtext" value="0" name="attr_encumbrance" readonly="true"/>  </div> You have to have the attribute you're checking before the input to be altered.
Shazam! Thank you.
1587757717
GiGs
Pro
Sheet Author
API Scripter
You're welcome. I didnt know the order mattered either, so i learned something too.