Creating Custom Touchscreens
As you may know, with the built-right-in editor in post-v3.0 CueServer Studio software, designing an Insite touchscreen layout is a breeze! What you may not know is that you can use the very same tools to create a completely fresh design for any device of your choosing, say for instance your iPhone, just as easily!
The layout on your chosen device can include all the same features you’re already familiar with, such as Cascading PIN numbers to secure your station or multiple pages to space out your controls. This tip and trick will cover doing just that.
You've designed your custom Insite panels, which you have strategically placed throughout your facility. What you're missing is the ability to quickly access the controls on-the-go from your iPhone. You can access the existing stations, but the layout is difficult to navigate on your phone's screen and the controls are spread between multiple stations, so you have to switch between them. You want a separate station for your phone that better fits the screen and has all the controls you need.
Just as you would create and design a layout with your Insite panel, the process is mostly the same for your custom station. We'll create a new station, with its own station number, and assign it the type: Custom Touchscreen.
Once we've set our type, we simply input the dimensions of the device we want to use it on (in this case, iPhone 8). If you're unsure of the dimensions of the device you're using, a list of common screen dimensions and devices to match are hidden behind the Choose button for easy access.
Once this is set, we hit Apply to finalize the station and simply drag-and-drop to create our new layout. Simple as that!
We'll take it step-by-step below. Feel free to follow along or use the table of contents below to jump ahead.
Create a new Station
In the CueServer Studio Editor window, select the Stations panel () on the left-hand side.
Select the Add button () to create a new station
Configure the Station for the Device
In the resulting station settings panel, select the station type and change it to Custom Touchscreen.
You can set the station dimensions manually, or via the Choose... panel. In this example, we'll use the Choose panel for convenience.
Open the panel by clicking on
Inside the resulting panel (above), I've found my target device (iPhone 8) and selected that line.
Next, I selected Portrait (rather than landscape) in the bottom left, as that's the layout I'm designing for.
Finally, once the selections have been made, click Choose in the bottom right to finalize the settings.
That's all we need for configuration. Click on in the bottom-right to finish creating the station.
Create a Layout
Now that our station is configured, we just need to build our custom layout in the layout editor.
Open the layout panel and you'll notice the screen size will match that of the chosen device, making the optimal placement of objects simple and clear.
Drag out items to build your layout, then hit apply.
Once you've got your layout, all that's left to do is hit Apply in the bottom right to save it.
Your station is now ready to view on your curtom device! Simply visit the IP of your CueServer followed by /station/[the station number] on the browser of your choice from your device.
Pro Tip: Add the page to your home screen on iOS
Now you have a custom station, designed to fit and look great on your device. I know you must be thinking, there's no way it could get better, right? Think again! We have a quick pro-tip that will make access easier and the experience even smoother.
Super simple! On iOS, open the page in your Safari browser and tap the "share" icon.
Next, tap Add to Home Screen
Finally, give it a custom name if you'd like and tap on Add
Now you have an icon on your home screen that opens your new layout just like an App! This makes it extra convenient but also opens the page without the address and options bars, allowing you to enjoy your layout in full-screen.