AirConsole-View-Manager
Build to make it easier to switch between views on controller and screen.
How it works
Each device has a property named custom, which can be used to manage device
specific states and properties.
The View-Manager sets two properties ctrl_view and screen_view which hold the current
visible id of the html container, either on the screen or on the controllers.
If one those properties change (by onDeviceStateChange()), then the View-Manager shows
the view and hides all others.
How to use
You can use it on both, the screen and the controller.html.
Include the airconsole javascript API file and the airconsole-view-manager.js file
For example in controller.html:
HTML:
<!-- Define buttons to change views -->
<button id="set_ctrl_start_view">Set start view</button>
<!-- Define your views -->
<div id="start" class="view default-view">
START CONTROLLER VIEW
</div>
<div id="wait_view" class="view">
A wait view
</div>
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-latest.js"></script>
<script type="text/javascript" src="airconsole-view-manager.js"></script>Javascript:
var airconsole = new AirConsole();
var vm = null;
airconsole.onReady = function() {
// Init the ViewManager
vm = new AirConsoleViewManager(airconsole);
};
// Listen for view changes
airconsole.onCustomDeviceStateChange = function(device_id, data) {
vm.onViewChange(data, function(view_id) {
// view has changed
});
};
// For example: change view on all controllers:
// (We use jQuery to bind the click handler :)
$("#set_ctrl_start_view").on('click', function () {
// 'start' is the Id of the div container
vm.controllersShow('start');
});
// Change view on all controllers, but not on this controller:
$("#set_ctrl_wait_view").on('click', function () {
// Pass 'true' as second argument to only change other controller's views,
// except this one
vm.controllersShow('wait_view', true);
});
// Change view on screen:
$("#set_ctrl_game_end_view").on('click', function () {
vm.screenShow('game_end');
});
// Only change view on this device:
$("#self_show_view").on('click', function () {
vm.show('custom_menu');
});
// Change view on both screen and all controllers:
$("#set_all_game_end_view").on('click', function () {
vm.allShow('game_end');
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent