GRUBBRR users have access to a web-based emulator for our Samsung Kiosk software. This versatile tool allows us to provide virtual demos, preview changes to a client's menu, and even perform some troubleshooting processes. In this article, we'll give you a brief tour of the emulator and walk you through the different ways you can use the system.
Best Practices
There are a few best practices to keep in mind when using the Samsung Kiosk emulator:
- This guide assumes that you're using Chrome as your internet browser
- Generally, GRUBBRR recommends running the Kiosk Emulator in incognito mode
- The emulator works best when set at 1080x1920 resolution; additional information is included later in the guide
Downloading Chrome Portable
Due to a recent update to Google Chrome version 119, you may experience an issue where attempting to sign in to the Samsung Kiosk Web Emulator results in an empty blank screen, and an "Uncaught TypeError" message in the developer tools console. To work around this, you'll need to do the following:
- Click on This Link to access a zipped archive containing Google Chrome Portable 64
- Click on the Arrow next to the Folder Name to open the dropdown menu
- Select Download
- Note: It may take Google Drive a few minutes to compress the folder to a Zipped Archive
- Using your file browser, open your Downloads folder
- Open the file named GoogleChromePortable64-
- Click Extract All in the file browser toolbar
- Select a location to extract the completed file- for ease of access, we recommend placing the folder on your Desktop
- Click Extract
Once the extract finishes, you should have a folder on your desktop labeled GoogleChromePortable64. Make sure that you do not remove anything from this folder! You'll need to use the GoogleChromePortable app to access the kiosk emulator.
Accessing the Web Emulator
Depending on the Kiosk you need to access, you'll use different links to access the emulator.
Setting the Emulator Resolution
Follow the steps below to configure the resolution of your kiosk emulator:
- Enter Chrome's Developer's tool Interface either by
- Pressing F12 on your keyboard, or
- Right-clicking on the browser page and selecting Inspect on the context menu
- Click on the Enable Device Toolbar option on the right side of the page
- Locate the Dimensions options at the top of the page
- Make sure that all of the following configurations are enabled:
- Dimensions should be set to Responsive
- The width (left) should be set to 1080
- Height (right) should be set to 1920
- Zoom should be set to Auto-adjust Zoom
-
(Optional) Chrome's Developer Tools interface also includes built-in application controls; you can access them by:
- Clicking the >> button at the right side of the screen
- Selecting Application from the dropdown menu
- Clicking the >> button at the right side of the screen
Once it's properly configured, your web emulator should look like this:
Troubleshooting: Emulator Showing a Blank/White Screen
If you encounter a blank white screen after clicking on one of the emulator links, you may be able to resolve the error by clearing site data through the Chrome Developer Tools Interface. This option is available in the Application Controls section of the interface, as outlined in the previous process. To clear site data:
- Click Storage in the left sidebar of the Application Controls menu
- Click the button labeled Clear Site Data, underneath the yellow Usage graphic
- Once the process has been completed, the yellow Usage graphic should change to gray
- Refresh the page to bring up your kiosk login screen
- If a refresh does not resolve the error, check the address bar and delete any text that appears after the .net in the URL ((i.e., /touchtostart))
Signing in to the Kiosk Emulator
You'll need to use the Username, Password, and access code that you use for your GRUBBRR kiosks to sign in to the emulator. This information is available through the GRUBBRR portal- for more information, click here.
Screensharing the Kiosk Emulator
The best ways to share your Kiosk Emulator screen vary, depending on what software you use for conferencing. We've summarized two practical methods below:
Using Google Meet in the Google Chrome Browser (Preferred):
- Click the Present Now button at the bottom of the page
- On the Choose What to Share window, make sure you're on the window submenu
- Select the window labeled Kiosk
Removing the Developer Console from your Screenshare
You can hide the Developer Console when sharing your Kiosk Screen by following the steps below:
- Press F12 to open the console
- Click the gray tricolon ( ⁝ ) in the top right corner of the console
- In the Dock Side field, select Undock into separate Window
- Minimize the new window that appears
If everything is configured correctly, Chrome will not show the developer tools interface in the meeting. Instead, this is what the other members of the conference should see:
Using Zoom
Because Zoom is a separate app, it can require some extra steps to screenshare. While Zoom does allow you to share a window, it will also show all of the developer tools, leading to a cluttered presentation. Instead, follow the steps below to show the kiosk screen to other Zoom participants.
Note: Because of the way this configuration works, we strongly recommend setting it up before starting the meeting and ensuring that no other tabs, notifications, or windows will overlap the viewing area.
- Click on the green Share Screen button at the bottom of the Zoom window
- Click Advanced in the Share Screen window
- On the Advanced Options tab, select Share a Portion of Screen
-
Resize the viewfinder box so that it aligns with the edges of the kiosk emulator screen
- Note: Remember to ensure that no other windows, tabs, or boxes will overlap with the viewing area- this works best with dual monitors
If properly configured, this is what other members of the conference should see: