Tools for Visualizing CSS and HTML combined.

Hello,

My assumption is that there are some commonly used tools that the Devs here use for editing the HTML and CSS for Character Sheets.

I don't mean a simple text editor. I am talking about tools where you load both the HTML and the CSS into some editor and the editor shows you in real time the result, while also allowing you to edit the separate html and css.

Which ones are the best for editing pre-existing Character Sheets to customize them?

For example would Aptana Studio be something useful or is there another favorite?

Thanks.

Most actually just view them in the custom character sheet editor or in the game itself, as some of the sheet functionalities can't be reliably replicated and tested outside Roll20 itself.

Ok. But are you saying you are just using a text editor to view the HTML and CSS separately, and reload the ROll20 each time you make changes?

There's got to be some better way, more steam lined method, right?

Mataka Tek said:

Ok. But are you saying you are just using a text editor to view the HTML and CSS separately, and reload each time you make changes in Roll20?

There's got to be some better way, more steam lined method, right?

Not really.  You just grab your favorite text editor(I like notepad++, and I also use VSC which has more bells/whistles), edit locally, copy/paste to the roll20 editor(html, css, translation, preview), save and view in a test game.  Rinse and repeat.  I've tried using other tools like Dreamweaver.  Even when you "wrap" your code with html/css to match roll20's vtt, it still lacks some of what you need to properly preview such as no repeating fieldsets handling/view and lack of the pictos fonts.  I often use the browser's inspector to test changes on the fly if I want to see how something effects a sheet in real-time, then I make the changes in my editor. 

Mataka Tek said:

Ok. But are you saying you are just using a text editor to view the HTML and CSS separately, and reload the ROll20 each time you make changes?

Yeah, essentially, and that's what people more competent than me does. I would note that hopefully you're not checking changes after every change you do, but rather periodicly while writing the sheets. Only in critical and final stages would you check the result after every change.

Thanks. Obviously, this is a really big downside for me.

Not really sure, if being a sheet author means that you are employed by roll20? But if not ... then:

@roll20 folks... surely you guys don't do this as well? There's got to be a better way to save time and see live preview edits?

No, the "sheet author"-tag just means I've made or contributed majorly to a character sheet here, in no way does that indicate enployment or similar. Only those with tags that mention "Roll20" are with them.

Major part of the character sheets are community contriuted.

Edit: Roll20 dev mentioning their workflow in another thread

You might direct this question to Natha, Scott, Steve K, other's, etc.  They handle some of the Official sheets.  99% of the existing sheet's on roll20 are just us poor saps that do it for fun.  ;-P

Thanks Andreas,

I did see that earlier as well. I am gonna try a few things and if I discover some workflow improvements I will post back.

Vince said:

99% of the existing sheet's on roll20 are just us poor saps that do it for fun.  ;-P

Fun? I'm doing this for the xp! My HTML/CSS level is 12!

I am trying a new program called Brackets which looks pretty cool: http://brackets.io/

Currently it seems to support live preview of HTML and CSS with google chrome. However, since I haven't worked much with HTML and CSS I am not quite sure how to get the separate roll20 character sheets .css and .html files to recognize each other in an editor easily.

As Vince mentioned, there's some tricks he has done to visualize it properly. I am just trying to get even a basic view to function first.

Here's a "roll20 wrapper" and some instructions I used longgggg ago...  Maybe they will help you get something manageable off-site.

https://www.dropbox.com/sh/0d82d967kj50459/AADGzZ306RhhMKKOkXqoj4OIa?dl=0

Wow! Nice... trying it out.

Ok. So, Vince, it works pretty decently on simple character sheets like AD&D_2E and barely on 5th Edition OGL by Roll20.

I wanted to show you a screen shot, BUT, I guess my account is too new, because it just hangs when I try to submit an image. (Tried 3 different browsers).

Just out of curiosity... is there a "Wanted: Sheet Programmer" section in this forum... perhaps I could get you or someone who might be interested in customizing? I guess I could mess with this for days and not get very far. So I think it would be better if I reached out to someone with a lot more experience.

Mataka Tek said:

Just out of curiosity... is there a "Wanted: Sheet Programmer" section in this forum... perhaps I could get you or someone who might be interested in customizing? 

Do you mean something like a sheet request thread?  It's the dedicated thread for people to post in to request character sheets for systems that still lacks sheets on Roll20. It's mentioned in one of the stickied thread on this subforums.

mm... I was actually looking to find someone who could customize an existing character sheet. (depending on cost).

Um, the fact that you say "depending on the cost" makes me think you might not like what rates have been suggested. 

The exists no dedicated thread for that, but this recent thread describes some stuff and links to previous threads about the topic. Read it thorugh, together with some of the links in the thread to get a grounded view on the what price range it would be realisticly, and then make a new thread with your request/offer.

So I took a look at the recent thread you linked, "A skilled sheet author is probably going to charge $20 - $30/hr. If you want just a better laid out version of the attributes/abilities tab with virtually no automation, no styling other than layout, and no guaranteed support; that's probably on the order of 40 hours. It goes up from there."

I will admit, that does seem pretty steep. Although I would guess that editing an existing sheet might be much less time in terms of total hours. So, how does one go about requesting a quote... just post in the that same Character Sheets & Compendium forum ?

That's why I said to also read the linked thread it had, that paints a more nuanced picture. IMO the 40h lower limit might be representative of an sheet of average compexity, where a simpler request could be much less workhours.

Yeah just post a new thread here and give a good summary of features youd want o  the sheet and some may answer. 

Thanks again. I think moving forward, I really need to sit down and specify exactly what kinds of modifications I want so that anyone responding would have a very clear idea of what I want to have done.

Well, I think I finally found where you guys were "previewing" using the "Custom" method. I guess it was just not obvious to a new user that there is a preview tab. I had initially assumed the edits had to be uploaded and then the game would have to be loaded afterward but this allows you to sort of skip that test. I highlighted in the pic below for new users asking the same question.

I do think it would be nice if Roll20 system allowed live access in the preview to things like the compendiums and what not that give char sheets the ability to populate their data... that would be really awesome.

Yeah, the review tab is a good halfwaypoint in comparison to actually loading the game, but it's not always useful and doesn't work quite as well as looking at the sheet ingame.

I'm usually writing chunks of code at a time before reviewing changes, and when I do, I actually go the exstra step to look at it ingame almost every single time. Don't remeber when I hade use of the preview exept when working on a very incomplete sheet to see the visual changes.

Have you looked at how sheets that a similar to your idwa looks like or have you started from scratch?

Hello Andreas,

I am looking at 5th Edition OGL by Roll20.html and trying to figure out how to make some changes to how it works.

My favorite "looking" sheet is definitely the Astonishing Sorcerer's and Swordsman of Hyperborea as far as layout and function, however, given that I plan to mostly use a slightly modified set of D&D rules, I was looking at the 5th Edition OGL by Roll20 since it is very compatible with D&D.

I have been going over a few tweaks for how I would plan to DM the games:

In my games, I plan to add a "Skill Level" for different weapons. under the "Attacks and Spellcasting" list. (It would be similar to something like the player's generic level for say fighter or paladin, but specific to the weapon they are using. (You can think of it as a Proficiency Level? but the actual Proficiency check box would be ignored)

Fortunately, there already appears to be an empty field ( attr_atkmod ) for what looks like any numeric value I want in that location, so I just need to reformat the rows to display the word "Level" between the NAME and ATK columns. and display the attr_atkmod in the Level Column.

Here's what I am planning:

ANYWAY: I have isolated this: attr_atkmod from the .html and it appears to be an empty field as shown in the above pic. on the char sheet.

However, that exact name "attr_atkmod" is only in the entire doc 1 time. So, my assumption is the attr_ prefix is somehow stripped off.

BUT.. I don't understand where all the ATK modifier stuff gets added in and shown as 1 number in the column under ATK. (when not in edit ode).

So I am trying to hunt down where that might be in the html... so I can try to change the output slightly.

ataka Tek said:

Well, I think I finally found where you guys were "previewing" using the "Custom" method. I guess it was just not obvious to a new user that there is a preview tab. I had initially assumed the edits had to be uploaded and then the game would have to be loaded afterward but this allows you to sort of skip that test. I highlighted in the pic below for new users asking the same question.

I do think it would be nice if Roll20 system allowed live access in the preview to things like the compendiums and what not that give char sheets the ability to populate their data... that would be really awesome.

If you use Stylish, I've cobbled this theme together that will allow you to see the code and the Preview at the same time.

.campaign_settings {
    margin-top: -1025px;
}
a.btn.btn-primary {
    color: white;
    margin-top: -1700px;
    margin-left: 500px;
    z-index: 10001;
}
.col-md-12 h1 {
    position: absolute;
    top: 900px;
    z-index: 10001;
    left: 250px;
}
#customsheet-editor .tab-content {
    display: grid;
    grid-template-columns: 738px 20px 853px;
    grid-template-rows: 775px;
    grid-template-areas: "html-css . preview";
    justify-content: start;
}
#customsheet-layout, #customsheet-css, #customsheet-translation {
    width: 738px;
    grid: html-css;
}
#customsheet-preview
  {
   width: 853px;
    grid: preview-trans;
    display: block;
  }

If you access the Translation tab, things get a little wonky, but still usable and not much of an inconvenience.  It will also hide all the top stuff, so it looks something like this

_{Edit: The side-by-side view I stole from someone else, don't know who...found it on a web search}

Wow, that is some great stuff! (The Roll20 folks might want to do this as a feature).

I went ahead and added it and it works quite well.

(Just a side note, there's a pretty bad Rep for "Stylish" sending ALL of your browsing info back to its own servers.

(I don't browse with Chrome tho... so, I hope it won't be a prob): https://arstechnica.com/information-technology/2018/07/stylish-extension-with-2m-downloads-banished-for-tracking-every-site-visit/

I am guessing the new Stylish that I am using does not do this, because it did not appear to be banned... but its just fyi, in case u hadn't seen that info before.

Yeah, I can never remember which one gets the bad rap, but I had one that was banned and I'm using one now that isn't. I'll eventually get unlazy and use one of the other restylers. :)

Stylish is the old, shady one. Stylus is the newer, safe one.

Cool.  I wasn't using Stylish, but reStyle, but given this conversation, I just switched everything over to Stylus. :)

When your searching code such as attr_atkmod be aware that only the html portion of the sheet requires inputs use "attr_..." when naming your attributes. Try searching for just "atkmod" since it may be handled within sheetworker js.  If you find it in sheetworkers, congratulations, you have fallen down the rabbit hole. ;-)

@Vince,

Thank you. I suspected as much but did not realize it might be handled in a different file.

hmm... so, in my set for 5th Edition OGL by Roll20, there is a file called "sheet.json"

It looks like this:

    "html": "5th Edition OGL by Roll20.html",
    "css": "5th Edition OGL by Roll20.css",
    "authors": "Steve K. and Phil B.",
    "roll20userid": "5047,141325",
    "preview": "5th Edition OGL by Roll20.png",
    "compendium": "dnd5e",
    "instructions": ...

Is that the same as a sheetworker.js ?

Also, I don't see a "sheet.js" tab or sheetwork tab in the Custom viewer / editor:

There's: HTML Layout | CSS Styling | Translation | and Preview.

How do I go about editing and uploading it?

the sheet.json isnt needez working on custom shedts, only for identifying sherts and stuff for the publicly available sheets when they are uploaded.

Sheetworkers can be found on the html sheet, search for "script" in the file. 

As Andreas mentioned, sheetworker javascript will be found on the html page and must be contained within script tags

<script type="text/worker">

//javascript goes here

</script>

@Finderski,

I am using that theme you posted. However, my screen is 2K wide, and I have a lot of extra space on the left hand side of the screen...

(For 2K size Screen) ( can be tweaked a bit more I am sure since it only affects the html | preview areas and not the whole page)

.campaign_settings {
    margin-top: -1025px;
}
a.btn.btn-primary {
    color: white;
    margin-top: -1700px;
    margin-left: 500px;
    z-index: 10001;
}
.col-md-12 h1 {
    position: absolute;
    top: 900px;
    z-index: 10001;
    left: 250px;
}
#customsheet-editor .tab-content {
    margin-left: -400px; 
    display: grid;
    grid-template-columns: 738px 20px 853px;
    grid-template-rows: 775px;
    grid-template-areas: "html-css . preview";
    justify-content: start;
}
#customsheet-layout, #customsheet-css {
    width: 1138px;
    grid: html-css;
}
#customsheet-translation {
    margin-left: -400px; 
    width: 1138px;
    grid: html-css;
} 
#customsheet-preview
  {
   margin-left: 400px;
    width: 1138px;
    grid: preview-trans;
    display: block;
  }

(just a beginner with modding HTML/CSS)

Thanks again!

Mataka Tek said:

ANYWAY: I have isolated this: attr_atkmod from the .html and it appears to be an empty field as shown in the above pic. on the char sheet.

However, that exact name "attr_atkmod" is only in the entire doc 1 time. So, my assumption is the attr_ prefix is somehow stripped off.

BUT.. I don't understand where all the ATK modifier stuff gets added in and shown as 1 number in the column under ATK. (when not in edit ode).

So I am trying to hunt down where that might be in the html... so I can try to change the output slightly.

I suspect its sheet workers.  

"attr_foo", I think, is short for attribute.  This tells the sheet that that input has a name of foo.  

I believe The "ATK" shown in the picture is an attribute back spanned.