Who here uses Roll 20?

Dave

Staff member
And if you have, have you used custom character sheets? I'm really wanting to run my game there and want a custom sheet for my game, but can't code for shit.

Anyone able to help or at least give a direction?
 
As an additional detail, they appear to be in .json format, if anyone is interested AND has time.

--Patrick
 

GasBandit

Staff member
Apparently Roll20 has a built in suite of sheet editors, but you have to be a Pro subscriber to get access to them.
 
I only use it for a friend's Star Wars game, but I'm not a fan. It's clumsy and the coding seems overcomplicated
 

Dave

Staff member
Apparently Roll20 has a built in suite of sheet editors, but you have to be a Pro subscriber to get access to them.
I'd let you use my login to look if you could point me in the right direction.

This discussion is making me nostalgic for the days of making Champions character sheets in excel.
I have the thing in Excel format! I'm just trying to get it into the system to use on character tokens.
 

GasBandit

Staff member
I'd let you use my login to look if you could point me in the right direction.
Looking at the docs, it might not be as wysiwyg as I had hoped. And not only is it HTML/CSS, but it's an altered version of HTML/CSS that doesn't work right in normal browsers and has their own special custom shit in it. That's discouraging. Basically it'd have to be a labor of love for someone who lives and breathes this stuff and has the time to waste.
 

Dave

Staff member
I neither labor, nor love doing this. I do have shitloads of time right now, but: Time - Ability = Bad Sheets.
 

GasBandit

Staff member
Honestly I feel like it'd take me less time to dig out and reinstall Turbo Pascal and make an ascii character sheet program than it would to re-learn their mutant HTML to make a character sheet >_< And I don't even really have time to do that.
 
Is this a custom game type or one they don't have already there? I am running a Hunter: The Reckoning game on there and I did a Google search for a Roll20 character sheet and I found something I was able to use.
 
I originally tried building the entire sheet in html/css, but was unhappy with what I was ending up with. Sooo....

This is the hack job I came up with: I screenshotted his excel spreadsheet and am using it as a graphic template. Then I'm just sprinkling the input elements onto it using top/left/width CSS tags.

1612996488209.png


HTML:
HTML:
<div class="main">
    <!-- NAME SECTION -->
    <div>
        <input name="attr_character_name" type="text" style="width:150px;position: relative;top:45px;left:60px;">
        <input name="attr_race" type="text" style="width:87px;position: relative;top:45px;left:108px;"> 
        <input name="attr_vision" type="text" style="width:90px;position: relative;top:45px;left:180px;"> 
        <input name="attr_class" type="text"  style="width:150px;position: relative;top:45px;left:237px;"> 
        <input name="attr_level" type="text"  style="width:50px;position: relative;top:45px;left:295px;">
    </div>
    <div>
        <input name="attr_ht" type="text" style="width:40px;position: relative;top:42px;left:24px;">
        <input name="attr_wt" type="text" style="width:40px;position: relative;top:42px;left:55px;">
        <input name="attr_birth" type="text" style="width:65px;position: relative;top:42px;left:110px;">
        <input name="attr_age" type="text" style="width:40px;position: relative;top:42px;left:155px;">
        <input name="attr_aware" type="text" style="width:65px;position: relative;top:42px;left:250px;">
        <input name="attr_xp" type="text" style="width:220px;position: relative;top:42px;left:345px;">
    </div>
    <div>
        <input name="attr_diety" type="text" style="width:75px;position: relative;top:38px;left:38px;">
        <input name="attr_fate" type="text" style="width:40px;position: relative;top:38px;left:120px;">
        <input name="attr_insan" type="text" style="width:40px;position: relative;top:38px;left:190px;">
        <input name="attr_hr_pts" type="text" style="width:75px;position: relative;top:38px;left:270px;">
        <input name="attr_next_lvl" type="text" style="width:180px;position: relative;top:38px;left:415px;">
    </div>
</div>
CSS
CSS:
input[type="text"] {
  background-color: transparent;
  border-style: none none none none;
  border-color: black;
}

div.sheet-main {
  width:    1020px; /* Defines the width and height of the sheet */
  height:   1210px;
  background-image: url(http://tinwhistler.com/misc/sheet.png);
  background-size: 850px auto;
}
Some notes:
  • All attributes must start with "attr_" so that they'll be saved to the sheet.
  • Whenever you're adding a new 'row' to mess with, you'll need to put those elements in a <div> and then play with the top, left, and width elements.
  • I put a "border-style: solid solid solid solid;" style element in the box as I'm playing with it, so I can visually see exactly where it's getting placed in the crap editor.
  • You'll need to take the image at http://tinwhistler.com/misc/sheet.png and host it somewhere and change the CSS file to point to the new location.
 
Last edited:

Dave

Staff member
What Tin did is ALMOST exactly what I needed. One thing it doesn't do is allow me to fill in certain things like attributes. And I figured out why. The beginning part is the fill-in stuff but the rest is just a picture from a file you've downloaded. Sneaky bugger!
 

GasBandit

Staff member
What Tin did is ALMOST exactly what I needed. One thing it doesn't do is allow me to fill in certain things like attributes. And I figured out why. The beginning part is the fill-in stuff but the rest is just a picture from a file you've downloaded. Sneaky bugger!
Yeah, he did enough to do a proof of concept for you to follow though... all you need to do is add a "div" section for every row and follow his example on adding attribute fields. And like he said, you'll have to experiment with the parts of each input that say "width" and "top" and "left" to determine how many pixels and where each is.
 
What Tin did is ALMOST exactly what I needed. One thing it doesn't do is allow me to fill in certain things like attributes. And I figured out why. The beginning part is the fill-in stuff but the rest is just a picture from a file you've downloaded. Sneaky bugger!
I thought you'd get that I wasn't done and that I just wanted you to see the progress and decide if you could take it over from there ;)

I'll probably tinker with it some more when I'm in meetings tomorrow.
 

Dave

Staff member
Don’t worry about it, man. I’m doing it electronically through Excel and macros. I always had a workaround. You did amazing, though.
 
Top