Hide UI?

Is there any way to just hide all UI? Here's my usage case: I've been running campaign using my TV laid out on a table and Photoshop mirrored onto it. Roll20 is the has some perfectly made tools to replace this setup, but I want to be able to show a player view without ANY UI visible. I know this software was built with the intention of allowing players to play across the web, but it's seriously like 1 step away from being usable in a local way! Either that, or it already is and I can't see the options. Regardless, it's usable for my purposes, and I'm going to subscribe right now. But if there were some way to just hide the UI, I'd be chrome-casting this to my TV "game board" tomorrow! Great job on the product so far! Thanks so much!

I don't think you can hide all of the UI, but you can hide the chat panel (there's a grey button to the top left of the chat pane), and making the browser fullscreen may help as well.

Yeah, I got that far. Thanks for the help though! I really want to just hide everything so there's nothing left but a pure player map.

You can probably hide the rest of the UI with a custom bookmarklet. PM me as a reminder and I'll try and write you one in the morning. :)

I take it you already know how to hide all of your Browser UI... but for those who don't know, try this, cuz it's awesome even if you are playing on your laptop screen.. Google Chrome > "View" Menu > ENTER PRESENTATION MODE It hides all your browser tabs and borders. Doesn't solve Tom's question of hiding the Toolbar on the top left and the Zoom slider on the top right, though.

I have been doing something similar, and would love a API to remove the user interface. I would think you would need to run two instances of Roll20 one with you logged in as a player and GM. Display the player instance to the display on the table and the GM instance running on your computer screen. Side note: what are you doing to keep your monitor on the table from getting scratched?

Good tip, Gold. And yeah, James, that's exactly what I'm doing. I'm logged in as both the DM and a player and I'm using Chromecast to send the player tab of my browser to the TV. Also, I have 3 little kids, so the TV is already scratched to hell, so I'm not doing anything to prevent further damage. :D It's got some sort of coating on it and the minis don't scratch it anyway.

Now if only that TV was a touch screen, then your players could touch their tokens on screen to bring up macros and move around the map.

Ok. Here's a Javascript Bookmarklet that will hide all the UI for you. Just make a bookmark in Chrome (should work in FF too, but didn't try it there) with a title like " Roll20: Clear UI " and the URL like this: javascript:(function(){$("#zoomslider").css("display","none");$("#floatingtoolbar").css("display","none");$("#sidebarcontrol").css("display","none").click();$("#playerzone").css("display","none");$("#initiativewindow").parent().css("left","-10000px")})(); Then once the Roll20 page is loaded, go to your bookmarks and click the " Roll20: Clear UI " bookmark: If you want it to go back to normal, just reload the tab. If something shows up again, just re-run the bookmarklet. Let me know if there's any UI still showing up after you play for a while. Cheers!

Aaron, awesome! Works perfectly so far. This is really great and I'll be using this for sure tomorrow! Thanks!

No worries! =D

Hey guys, I just wanted to let you know I used this the other night for our Cragmaw Castle run and it went great! The players all loved it. It was neat to have them move their physical character mini on the TV screen and then I moved their token in the map to match and the dynamic light/LOS updated in the scene. It was really fun. So thanks again! Will be using this from now on for sure. It also sped up our game considerably from the Photoshop method I've been using.

Awesome! Glad to hear it!

Aaron said: Ok. Here's a Javascript Bookmarklet that will hide all the UI for you. Just make a bookmark in Chrome (should work in FF too, but didn't try it there) with a title like " Roll20: Clear UI " and the URL like this: javascript:(function(){$("#zoomslider").css("display","none");$("#floatingtoolbar").css("display","none");$("#sidebarcontrol").css("display","none").click();$("#playerzone").css("display","none");$("#initiativewindow").parent().css("left","-10000px")})(); Then once the Roll20 page is loaded, go to your bookmarks and click the " Roll20: Clear UI " bookmark: If you want it to go back to normal, just reload the tab. If something shows up again, just re-run the bookmarklet. Let me know if there's any UI still showing up after you play for a while. Cheers! This works in Opera as well. Thanks for the tip, Aaron!

This is great, but I can't get it to work in Firefox, is there some setting that needs to be enabled to do this? Cheers

What I posted is for Chrome (and Opera, since it is now just a wrapper for Chrome's engine (much tears...) ). I don't know specifically how to do it in Firefox, but it should be a pretty easy translation... Looks like it has to be in a link that you drag to your toolbar... I tried inserting a link here for it, but it didn't work. (the editor stripped out and broke all the JS) Might have to put it in a link somewhere that you can drag.

Just wanted to say thank you The Aaron, I posted a suggestion for something similar ( <a href="https://app.roll20.net/forum/post/1366231/alternate-roll20-layouts-or-even-bespoke-layouts" rel="nofollow">https://app.roll20.net/forum/post/1366231/alternate-roll20-layouts-or-even-bespoke-layouts</a> ) and Gold very kindly linked me to here. Off the top of your head (since I assume you're more familiar with the UI/CSS structure of Roll20 than I am) is it even remotely feasible to hide individual webcams or are they treated as a single element?

Well a few tweaks and I'm getting there. It looks like hiding individual webcams would require IDs which makes it a bit more difficult to do it on anything but a case by case basis - have got them relocated to suit a widescreen display though. (Set up a dummy account to test it with multiple 'avatars'). Only issue at the moment is that if I resize the window (or full screen it) the height/width and right positioning on the webcams gets messed up. Rerunning the bookmarklet fixes that but it's be nice to fix properly, I'll have a look when I get home.

Cool! Glad you're getting some use out of it! :) You could probably write a bookmarklet to prompt you for which webcams to turn off with the names of the players, if you're industrious enough. :)

This is going to sound silly, but how do you create a bookmark like you described above? I only see the option to "bookmark this page." It looks like you're doing something different there, but I don't see how you did it.

@The Aaron Using a bookmarklet to modify the CSS hadn't even occurred to me so many thanks. I stopped doing any serious web development about 6 years ago so I really need to refamiliarise myself with JS before I do anything too clever. Implementing layouts properly into Roll20 would be a god send but this is great for the time being. @Gozer Assuming you use Chrome, you right click on the bookmark bar and choose "Add Page" then paste the code snippet that The Aaron provided in as the URL. These types of bookmarks are generally called bookmarklets, essentially a little bit of JavaScript is being run when you click the bookmarklet and that javascript is modifying the style sheet (which defines the layout and stuff) of the page.

I tried it, and it worked, but I'm still seeing the little blue map tab. I'm assuming that would go away on a player's view. Great stuff!

@Ben H -- The idea hadn't occurred to me either until I saw one that Brian posted. =D @Gozer -- Hiding the blue tab could also be done, if desired, I probably just didn't think of it because I was trying it from a player view.

All credit still to The Aaron (this change is tiny), but if you want to use this on a GM view and hide the blue tab then use: javascript:(function(){$("#zoomslider").css("display","none");$("#floatingtoolbar").css("display","none");$("#sidebarcontrol").css("display","none").click();$("#playerzone").css("display","none");$("#initiativewindow").parent().css("left","-10000px");$("#page-toolbar").css("display","none")})();

Meh, I'm building on top of previous unsung heroes, so nice work Ben! =D

Pringle said: All credit still to The Aaron (this change is tiny), but if you want to use this on a GM view and hide the blue tab then use: This remains, such a useful secret hint. Just sent this to someone else who plans to play with a Chromecast to a TV. Figured I'd reply in this thread to keep it open & current. By the way Roll20 has said that the next major Update will have some new features optimized for playing in-person. But I haven't heard if those features would invalidate the javascript tip that's in this thread. I think the new features will help but the java tip will still be useful alongside it.

I didn't realise you'd replied Gold. We have a similar setup (albeit a spare laptop hooked up to a TV rather than a Chromecast), the bookmarklet is very helpful but having some built in UI stuff would be awesome. If they don't add suitable UI stuff and break the bookmarklet in the update then I'm sure it won't take long for someone to fix it.

Yeah, won't take too long at all.. =D