The goal of this project is to create a custom interface for a workstation connected to 6 displays, plus a touch panel from where the user can control what is displayed on the other screens.
We will see how to:
- Make the app cover all the screens
- Display 20 twitter feeds
- Display Google map
- Support other form factors acting as a remote control
Getting started
If you are new with EXO UI and Apps Factory, we recommend the following posts:
You can create a new app with Apps Factory using the standard template.
The application will manage two main areas: one four the touch panel, displaying action buttons, and one for the content (nothing, Twitter, or Google Map).
Making the app cover all the screens
EXO UI container, by default, will cover the area of the main screen.
A JavaScript method allow you to move the container on any specific area of any screen.
exo.workspace.onResize = function() {
if(remote == 0) {
exo.container.setPosition(-3840, -2160, 1920 * 5, 1080 * 3);
}
exo.app.setPosition(0, 0, exo.container.width, exo.container.height);
}
exo.workspace.onResize();
exo.container.setPosition will change the position of EXO UI over your screens.
The code is declared in the event exo.workspace.onResize, called when something in the screen configuration changed. To set the size at startup, we call the event with exo.workspace.onResize().
Then you can set the position of the display area and of the control area using DOM.
Displaying 20 twitter feeds
The twitter widgets was created using a standard twitter account, from the Widget section in the settings.
Nothing challenging. You can add as many feeds as you need, just add additional DOM elements.
For more info: Twitter Widgets
Displaying a Google Map
Displaying Google map is also very standard. We are using the same embedded version than the one recommended for websites.
Embed a Google map
Support other form factors acting as a remote control
This is the fun part of the project, easy to implement with EXO UI.
When the app starts on a device that don't have all the expected monitors, the app will only display the control area.
When the user tap a control button, the app will do the action if the device is the workstation, or will send the action to the workstation via the exo.remoteDevice.createProcess feature: when the app is not running on the remote device, it will be started. Otherwise, the exo.args.onChanged event is raised when the app receive the command.
More information
No comments:
Post a Comment