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

Conditional Formatting

1610156434
Jiboux
Pro
Sheet Author
Compendium Curator
Hello all, I am working on a redesign of an existing custom sheet. I'd like to mark buffs in green and debuffs in red, and I know that in  non-roll20 world, it can't be done just by HTML and CSS... But in roll20 we have 2 interesting functions that could help: 1- You can actually test values with the checkbox value (here if the attr_Test is set as a number in a different input type number, the below checkbox would actually check itself if the value is 1, which is great for conditional formatting) <input name="attr_Test" type="checkbox" value="1"> 2- You can autocalculate Values (below it would display the result of Test2+Test3) <input name="attr_Test" type="number" disabled  value="(@{Test2}+@{Test3})"> Nevertheless you can't seem to be doing the 2 together. I was trying to calculate the sign of an attribute in order then to get a checkbox testing if it is negative, but it doesn't seem to work <input name="attr_T_ModsSign" disabled type="number" value="(abs(@{T_Mods})/@{T_Mods})"> <input name="attr_T_ModsSign" type="checkbox"  value="-1" > Did anyone find a way to do this, or some other implementation of conditional formatting based on sign ?
1610159263

Edited 1610159297
GiGs
Pro
Sheet Author
API Scripter
Jiboux said: I'd like to mark buffs in green and debuffs in red, and I know that in  non-roll20 world, it can't be done just by HTML and CSS... But in roll20 we have 2 interesting functions that could help: We're actually more limited on roll20 when it comes to formatting, than the rest of the web. There are good reasons for this, but we have often to use clunky workarounds on roll20 to produce visual effects that are easy outside of roll20. You dont want to use autocalc values for this, because autocalc values dont have the value you might hing they do. With an autocalc value of value="(@{Test2}+@{Test3})", and test 2 and test 2 both equalling 1, you might think the value there is 2. But it's not: the actual value is the text "(@{Test2}+@{Test3})". Roll20 just treats that in a special way to resolve it into a number under some (but not all) circumstances. If you want to use a calculated number to help sort out CSS, the only good way is to use a sheet worker to do the calculation. Then your input would look like <input name="attr_Test" type="number" readonly value="0"> and the calculation would be done in a sheet worker, which owuld look like thid (inside your sheet's script block): on('change:test2 change:test3' , function() {     getAttrs(['Test2', 'Test3'], function(values) {         let test2 = +values.Test2 || 0;         let test3 = +values.Test3 || 0;         let sum = test2 + test3;         setAttrs({             Test: sum         });     }); }); There's a lot going here, and its way more complicated than a simple autocalc. But it also opens up much more powerful things than you can do with autocalcs. If you want to calculate the sign, you cant divide like you have there, because you run the risk of dividing by 0. You also have the same attribute name for a checkbox and a number input - this will not work properly in roll20. Likely using a value of -1 in the checkbox is probably a mistake; you are better off using a positive value="1", and then using that to affect things as if it was negative. If you want a sheet worker to just give a +1 or -1  value, you dont need to use a checkbox, just use a number, and set it with a sheet worker like this: The HTML: <input name="attr_T_ModsSign" type="number" value="1" readonly> and the sheet worker: on('change:t_mods ' , function() {     getAttrs(['T_Mods'], function(values) {         let t_mods = +values.T_Mods || 0;         let sign = t_Mods < 0 ? -1 : 1;         setAttrs({             T_ModsSign: sign         });     }); }); This will heck the value of T_Mods, and if it is below 0, will set T_Mods to -1, and otherwise to 1. This allows you to use it as a sign, you can multiply something by T_ModsSign, to get the effects of a positive or negative sign. I'm not sure why you need a sign like this, there are probably easier or better ways to do this. Note: read up on the wiki on sheet workers, but in case you don't know, you need to put them inside two lines like this: <script type="text/worker"> /* put your sheet workers here */ </script> If your sheet doesnt have a script block like this, add this one. If it does, add the sheet workers to that block, don't create a new one.
1610216654
Jiboux
Pro
Sheet Author
Compendium Curator
Hi GiGs, Thanks a lot for the informations. As said, I am starting from an existing sheet, and was looking how I could do some basic conditional formatting (i.e. Buffs are green, debuffs are red), without having to rewrite the whole sheet. Currently these are in auto-calc, this is why I was looking for a way to do this keeping them in autocalc, to not have to transfer all to the sheet worker script (which exists, but on these attributes, and as these are a repeating section attribute, there is a bit of work to my understanding to make the script). Then, regarding using the value="-1" for a checkbox and having the same name, this is indeed a very clever trick used by the developper with whom I am working now... Yes, the value you set in your value="x" for the checkbox is the value it will put if the checkbox is checked... But it also works on the opposite and the checkbox will become checked if the attribute becomes equal to the declared value. So in the following code, whenever the user would set the numerical input to -1, the check box would check itself automatically (and could be used for conditional formatting). He used it a lot to have sections appear or disappear depending on a certain value (for example the result of a select)...  <input name="attr_T_ModsSign" type="number" value="0"> <input name="attr_T_ModsSign" type="checkbox"  value="-1" readonly> This is my reason for trying to do the same to detect the sign with an autocalculate value that emulates the sign (and where I can get rid of the division by zero if necessary)
1610245162
GiGs
Pro
Sheet Author
API Scripter
I guess that would work, it seems like a convoluted way to do it, but I can see why someone who isnt familiar with sheet workers would do it that way - it does avoid the need for them. Remember earlier when i said: We're actually more limited on roll20 when it comes to formatting, than the rest of the web. There are good reasons for this, but we have often to use clunky workarounds on roll20 to produce visual effects that are easy outside of roll20. This is an example of the clunky workarounds that people come up with to get things done on roll20 that would be easier on other sites. Bear in mind the sheet worker approach can be used to set an attribute to any value, including setting a checkbox.