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

WYSIWYG Character Sheet Editor

1418223225

Edited 1418223262
Lithl
Pro
Sheet Author
API Scripter
Not everyone understands how to write CSS and HTML, and so they have issues creating character sheets for themselves. I've seen someone make the suggestion to have a sort of drag-and-drop interface for creating character sheets, and I've taken a crack at it. Create Your Character Sheet Here This does not include support for repeating sections. You can add <input type="text">, <input type="number">, <input type="checkbox">, <input type="radio">, <textarea>, <select>, and plain text to the layout. Each element can be dragged around as you please using the movement handle in the top-left. Each element can be removed from the layout using the delete handle in the bottom-left. Elements can be customized from a popup dialog by clicking the properties handle in the top-right. The <select> element will let you add and remove <option> items with two handles in the bottom-right. (Removing an item will remove the currently selected item.) If you do not give a name to the element, it will not save its values when you make a character sheet. Radio buttons and select dropdowns need to have values specified as well, or the values won't load properly in the character sheet. If you give the same name to multiple radio buttons, they'll be in the same button group. If you give the same name to multiples of other kinds of elements, their values will be copied and synchronized by Roll20. In addition to the basic layout, you can specify an image to use as the background. You can leave the image at its original size, make it cover the character sheet area, or give specific dimensions. You can make the image repeat horizontally, vertically, or both, but it will be anchored to the top-left corner of the window. Once you're done making your sheet, click the "Get Character Sheet Code" button in the menu. A dialog will open with HTML code which you can copy into Roll20 to create your sheet. This tool does not generate a CSS file, although it permits you to specify CSS classes on the elements if you have an existing CSS file to use. If you're familiar enough with CSS, you can also customize the elements further than my basic provisions by writing inline CSS. You cannot save your work with this tool. I've put it up on JSFiddle, which does not have any persistence capabilities. Once you start making your sheet, you have to finish it, leave the browser tab open, or lose your work. The HTML generated by this tool is EXCEPTIONALLY ugly. Everything is absolute-positioned all over the sheet. There's inline CSS on every element. It all ends up in a single line. I strongly recommend AGAINST using this tool to create a submission to the official Roll20 repository.
1418237416
Gold
Forum Champion
Nice of you to make a demonstration of concept for this. I hope that it moves forward to something that non-coder types can use to make custom character sheets (the internal unpublished ones used just for your own campaign), or Community-created character sheets (the publicly available ones for known game systems).
1418322358
vÍnce
Pro
Sheet Author
I think this would make a great tool for roll20. There seems to be lot's of character sheet requests as well as people that just want to modify a sheet to better suit their style of play/homebrew but lack the "coder" experience/expertise. Just having some basic templates would be a big help. Thanks for doing this Brian. Hopefully something like this might make it's way onto Roll20. It would be yet another bullet point to an already feature-rich product and service.
1418437264
Riley D.
Roll20 Team
Definitely an interesting proof of concept, nice work!