I use Roll20 to project down onto my table-top for in-person games. My laptop uses one browser for GM and Chrome running full-screen on the projector screen for the player view. It works well with some hacks to remove the tools and all UI junk and keep the background solid black (no projection of anything but the map). On the player screen, all I need is mouse control and to easily set the zoom level precisely. A large zoom control pops out only when needed (mousing to left edge of screen). We use real miniatures on the projected map with the table set up so that 5' units are exactly 1 inch at 40% zoom level. I only use Roll20 tokens for dynamic lighting and line of sight. Here's what I've done: CSS overrides (using Chrome Stylish plugin): ::-webkit-scrollbar {
display: none !important
}
#sidebarcontrol,
#zoomslider,
#radial-menu,
.player {
display: none !important
}
body {
background-color: #000;
background-image: none;
}
#floatingtoolbar {
left:0;
right:auto;
top:auto;
height:100%;
bottom:auto;
width:10px;
background-color:transparent;
border:none;
box-shadow: none;
}
#floatingtoolbar ul {
height:100%;
width: 100%;
display: table;
position: absolute;
}
#floatingtoolbar li {
border:none;
color:#888;
display:none;
height:100%;
padding:0;
}
#floatingtoolbar div.submenu {
left: auto;
top:auto;
position:relative;
}
.pictos {display:none}
#select {
display:none !important;
}
#zoompanel {
display: table-cell !important;
vertical-align: middle;
position:relative !important;
}
#zoompanel:hover {
background-color: rgba(128,128,128,.4) !important;
}
#zoompanel:hover .pictos {display:block; color:#FFF;}
#zoompanel select {
width: 130px;
}
#initiativewindow ul li.gmlayer {opacity: 1;}
I rebuild the zoom menu to have just the sizes I use, with useful titles for 1-inch scale for miniatures with this Javascript: function sE(v,n) {var o=document.createElement('option');o.text=n;o.value=v;return o;}
var s=document.getElementById('zoompanel').getElementsByTagName('select')[0];
s.options.length = 0;
var m = {'10%':10, '20%':20, '30%':30, '40% (5\\' units)':40, '50%':50, '60%':60, '70%':70, '80% (10\\' units)':80,
'90%':90, '100%':100, '160% (20\\' units)':160, '200% (25\\' units)':200, '250% (Roll20 Max)':250};
for(var i in m) {s.appendChild(sE(m[i],i));}
s.setAttribute('size','13');
It can be difficult to run javascript without being blocked by security -- On my Mac laptop, I run it from the AppleScript menu: on run
tell application "Google Chrome"
set windowList to every tab of every window whose URL starts with "<a href="https://app.roll20.net/editor" rel="nofollow">https://app.roll20.net/editor</a>"
repeat with tabList in windowList
set tabList to tabList as any
repeat with tabItr in tabList
set tabItr to tabItr as any
tell tabItr
execute javascript "function sE(v,n) {var o=document.createElement('option');o.text=n;o.value=v;return o;}
var s=document.getElementById('zoompanel').getElementsByTagName('select')[0];
s.options.length = 0;
var m = {'10%':10, '20%':20, '30%':30, '40% (5\\' units)':40, '50%':50, '60%':60, '70%':70, '80% (10\\' units)':80,
'90%':90, '100%':100, '160% (20\\' units)':160, '200% (25\\' units)':200, '250% (Roll20 Max)':250};
for(var i in m) {s.appendChild(sE(m[i],i));}
s.setAttribute('size','13');"
end tell
end repeat
end repeat
end tell
end run
Other handy tips: This one javascript line makes the standard zoom drop-down 1 less click (just hover and click size). It should also fix the Roll20 Firefox bug with this menu -- if you can get Firefox to let you execute the javascript! javascript:document.getElementById('zoompanel').getElementsByTagName('select')[0].setAttribute('size','20')
I hide the thumb-button that opens the side menu on the projector player view, so to open or close it I use the advanced shortcut key 'w', or javascript document.getElementById('sidebarcontrol').click()
