Character Vault
Any Concept / Any System
Compendium
Your System Come To Life
Roll20 for Android
Streamlined for your Tablet
Roll20 for iPad
Streamlined for your Tablet

Personal tools

Difference between revisions of "Character Sheet Development/Mobile"

From Roll20 Wiki

Jump to: navigation, search
m
m
 
(7 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{revdate}}{{stub}}
+
{{Revdate}}{{BCS}}{{stub}}
{{main|Building Character Sheets}}
+
 
 
Page on building [[CS|character sheets]] to work with the [[Mobile]] app. This relies your  sheet being adapted to [[CSE]].
 
Page on building [[CS|character sheets]] to work with the [[Mobile]] app. This relies your  sheet being adapted to [[CSE]].
 
{{NavSheetDoc}}
 
{{NavSheetDoc}}
Line 9: Line 9:
 
</pre>
 
</pre>
 
* {{forum|post/9912751/mobile-app-beta-now-available-for-pro-users Mobile App Beta now available for Pro users!}}(Pro Forum thread)
 
* {{forum|post/9912751/mobile-app-beta-now-available-for-pro-users Mobile App Beta now available for Pro users!}}(Pro Forum thread)
* {{forum|permalink/9883156/ Character Sheet Enhancements!}}
+
* [https://app.roll20.net/forum/post/10780601/help-for-reproducing-roll20-companion-view-in-browser Help for reproducing Roll20 Companion view in browser] March 2022
 
__TOC__
 
__TOC__
 
=Character Sheets for Mobile=
 
=Character Sheets for Mobile=
Line 148: Line 148:
  
 
==Avatar on Sheet==
 
==Avatar on Sheet==
* (experimental) You can show the character's avatar on the mobile sheet with <code><nowiki><img name="attr_character_avatar"></nowiki></code> {{source| https://app.roll20.net/forum/permalink/10077312/}}  
+
* You can show the character's avatar on the mobile sheet with <code><nowiki><img name="attr_character_avatar"></nowiki></code> {{source|https://app.roll20.net/forum/permalink/10077312/ source}}
  
 
==Orientation==
 
==Orientation==
Line 158: Line 158:
 
List of [[Sheet Index|Character Sheets]] that have at least partially been adapted to the mobile app
 
List of [[Sheet Index|Character Sheets]] that have at least partially been adapted to the mobile app
 
* [[D&D 5E by Roll20]] - Roll20 re-did the mobile sheet from scratch, slowly adding back features on the main sheet
 
* [[D&D 5E by Roll20]] - Roll20 re-did the mobile sheet from scratch, slowly adding back features on the main sheet
* {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads}} & {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Tales-of-Xadia-Playtest CortexPrime-Tales-of-Xadia-Playtest}} - sheet contains adaptations for mobile layout, and have made the rolls work.
+
* {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Tales-of-Xadia-Playtest CortexPrime-Tales-of-Xadia-Playtest}} - sheet contains adaptations for mobile layout, and have managed to make the rolls results display on mobile.
* {{repo|Nevar530/Roll20-CyberpunkRed-Character-Sheet CyberpunkRed}} standalone roll20 sheet by '''Adam S.''', looks solid on phone, has working google fonts on mobile,
+
** {{repo|Roll20/roll20-character-sheets/tree/master/CortexPrime-Hammerheads CortexPrime-Hammerheads}} very similar to other CortexPrime sheet, but rolls aren't shown on mobile
* [[MythicD6]] The Attributes & Skill sections have been adjusted to be less wide to avoid sideways scrolling, but the mobile implementation still has lot to adjust.
+
* [https://github.com/Roll20/roll20-character-sheets/tree/master/PokemonTabletopAdventures_v3 PokemonTabletopAdventures_v3] Some issues with saving and displaying data, but mostly works properly. Rolls display on the phone, potentially as a consequence of the roll templates being used. March 2022
 +
* https://github.com/Roll20/roll20-character-sheets/pull/10427 Harnmaster3 - April 2022
 +
* {{repo|Nevar530/Roll20-CyberpunkRed-Character-Sheet CyberpunkRed}} standalone roll20 sheet by '''Adam S.''', looks solid on phone, has working google fonts on mobile, (2021)
 +
* [[MythicD6]] The Attributes & Skill sections have been adjusted to be less wide to avoid sideways scrolling, but the mobile implementation still has lot to adjust. (2021)
 +
 
 
=iOS=
 
=iOS=
 
As the iOS Roll20 mobile app is based on Safari(like all iOS web/browser-based are), it means some character sheets will look different on iOS vs. android phones.
 
As the iOS Roll20 mobile app is based on Safari(like all iOS web/browser-based are), it means some character sheets will look different on iOS vs. android phones.
Line 170: Line 174:
 
* [[BCS/Bugs]] - known bugs & issues with char sheet development
 
* [[BCS/Bugs]] - known bugs & issues with char sheet development
 
* [[Mobile]] - the app will eventually fully support mobile versions for any sheets, currently it's reliable only for the [[D&D 5E by Roll20]] sheet.   
 
* [[Mobile]] - the app will eventually fully support mobile versions for any sheets, currently it's reliable only for the [[D&D 5E by Roll20]] sheet.   
<br>
+
=Discussions=
<br>
+
* https://app.roll20.net/forum/post/10789586/harnmaster3-more-user-feedback-requested-mobile-view
 +
 
 
[[Category:Character Sheet Creation]]
 
[[Category:Character Sheet Creation]]
 
[[Category:Mobile]]
 
[[Category:Mobile]]
 
[[Category:New features in 2021]]
 
[[Category:New features in 2021]]

Latest revision as of 15:01, 6 April 2022


Page on building character sheets to work with the Mobile app. This relies your sheet being adapted to CSE.

@media only screen and (max-width: 480px) {
// css that only affects sheet on mobile. Play around with "max-width" vaule, might differ between phones
}

Contents

[edit] Character Sheets for Mobile

[edit] General Tips

  • Make Roll Buttons & input fields larger
  • Using CSS Grid or Flexbox for the normal sheet layout will make it easier to create a resposive/phone-adapted version of the layout.
    • Example: If some stat sections on the normal sheet is arranged in a 2x3 grid, on mobile it could be easy show them in a 1x6 grid, a single column. Can also be a easier first step to adjust
  • reduce number of features that requires you to "hover" your mouse over some section. (tooltips are less accessible on mobile)
  • On mobile, when you click on a <input type="number"> attribute, it will show you a number keyboard, instead of the normal keyboard, making it quicker to fill in numbers.
  • Hiding some advanced sheet features/settings could make the sheet easier to adapt/use on mobile.
    • Add a checkbox somewhere to hide/show the advanced stuff

[edit] Example

link: Detects sheet is viewed on small screen.

@media only screen and (max-width: 480px) {
    .sheet-wrapper {
        min-width: 320px;
    }
        
    .sheet-traits4 {
        display: grid;
        grid-template-columns: repeat(2, 1fr );
        align-items: start;
    }

    .sheet-traits3 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

    .sheet-traits2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

    .sheet-traits2 .sheet-traits2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr );
        align-items: start;
    }

    .sheet-traits1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr );
        align-items: start;
    }

/* halo layout */

    .sheet-editPane {
         width: 80%;
     }
    
    input[name="attr_Portrait"][value="PC0"]  {
        border: 1px solid #cccc00;
        text-align: center;
        background-color: rgba(255, 128, 0, 0.05);
    }

    h1.sheet-hide {
        visibility: visible !important;
        display: block;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-physical {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-mental {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }

    input[name="attr_Portrait"]:not([value="PC0"]) ~ .sheet-social {
        position: static;
        border: 1px dashed #ffcb2b;
        border-top: 6px solid #ffcb2b;
        padding: 5px;
    }
    
    input[name="attr_Portrait"]:not([value="PC0"]) + .sheet-action {
        display: block;
        visibility: visible;
    }
    
    .charsheet button[type="roll"].sheet-blank-roll-button + span {
        display: block !important;
        visibility: visible !important;
    }
}

[edit] Features

Some roll20 sheet related features need to done slightly differently on mobile, not just adjust visually.

[edit] Custom Fonts

Google Fonts importing using @font-face by Adam .S

Using google fonts on the Mobile app takes a few extra steps. @import doesn't seem to work to add fonts for mobile (yet?). Below is what I found works.

I started with the typical in css tab.

@import url('https://fonts.googleapis.com/css?family=Oswald%7COrbitron%7C&display=swap');

I then pasted the URL from the import into my browser.

https://fonts.googleapis.com/css?family=Oswald%7COrbitron%7C&display=swap

I copied the code on the browser page. I removed the Unicode range part.

@font-face {
    font-family: 'Orbitron';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/orbitron/v17/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2') format('woff2');
}

Then paste that into the top of the CSS tab on the custom sheet. If your page has multiple fonts the process will have to be repeated for each one.

[edit] Roll Templates

You can make rolls appear on the mobile app, but many normal roll templates don't seem to work as-is, giving a "Error formatting roll"-message, and the roll is only visible in the q Text Chat, not mobile.

CortexPrime-Hammerheads & CortexPrime-Tales-of-Xadia-Playtest have managed to make roll results appear on mobile.

[edit] Avatar on Sheet

  • You can show the character's avatar on the mobile sheet with <img name="attr_character_avatar">

[edit] Orientation

You can use @media (orientation: landscape)/ @media (orientation: landscape) to detect phone orientation, so mobile sheet can be adapted to look good in both orientations.

[edit] Existing Mobile-adapted Sheets

List of Character Sheets that have at least partially been adapted to the mobile app

  • D&D 5E by Roll20 - Roll20 re-did the mobile sheet from scratch, slowly adding back features on the main sheet
  • CortexPrime-Tales-of-Xadia-Playtest - sheet contains adaptations for mobile layout, and have managed to make the rolls results display on mobile.
  • PokemonTabletopAdventures_v3 Some issues with saving and displaying data, but mostly works properly. Rolls display on the phone, potentially as a consequence of the roll templates being used. March 2022
  • https://github.com/Roll20/roll20-character-sheets/pull/10427 Harnmaster3 - April 2022
  • CyberpunkRed standalone roll20 sheet by Adam S., looks solid on phone, has working google fonts on mobile, (2021)
  • MythicD6 The Attributes & Skill sections have been adjusted to be less wide to avoid sideways scrolling, but the mobile implementation still has lot to adjust. (2021)

[edit] iOS

As the iOS Roll20 mobile app is based on Safari(like all iOS web/browser-based are), it means some character sheets will look different on iOS vs. android phones.

Examples & fixes:

[edit] Related Pages

  • CSE
  • BCS/Bugs - known bugs & issues with char sheet development
  • Mobile - the app will eventually fully support mobile versions for any sheets, currently it's reliable only for the D&D 5E by Roll20 sheet.

[edit] Discussions