/**
* Copyright (C) 2014-2016 Triumph LLC
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see .
*/
"use strict";
/**
* Gamepads configurator add-on.
* @module gp_conf
*/
b4w.module["gp_conf"] = function(exports, require) {
var m_cont = require("container");
var m_ctrl = require("controls");
var m_input = require("input");
var m_storage = require("storage");
var SVG_BASE64 = "url('data:image/svg+xml;base64,";
var BLUE_COLOR_REGEXP = new RegExp("#5276cf", "g");
var BLUE_COLOR = "#5276cf";
var RED_COLOR = "#ff0000";
var GREEN_COLOR = "#00ff00";
var GREY_COLOR = "#e6e6e6";
var SELECT_BTN_CAPTION = "Click on the buttons & arrows to setup your controller";
var PRESS_BTN_CAPTION = "Now press the button on the device";
var MOVE_AXIS_CAPTION = "Now move the axis on the device";
var MAIN_DEVICE_CAPTION = "Select a device";
var AXIS_STEP = 20;
var GMPD_DFLT_STNGS = {};
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_12] = m_input.GMPD_BUTTON_12;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_13] = m_input.GMPD_BUTTON_13;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_15] = m_input.GMPD_BUTTON_15;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_14] = m_input.GMPD_BUTTON_14;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_3] = m_input.GMPD_BUTTON_3;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_0] = m_input.GMPD_BUTTON_0;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_1] = m_input.GMPD_BUTTON_1;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_2] = m_input.GMPD_BUTTON_2;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_5] = m_input.GMPD_BUTTON_5;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_7] = m_input.GMPD_BUTTON_7;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_4] = m_input.GMPD_BUTTON_4;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_6] = m_input.GMPD_BUTTON_6;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_8] = m_input.GMPD_BUTTON_8;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_9] = m_input.GMPD_BUTTON_9;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_10] = m_input.GMPD_BUTTON_10;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_11] = m_input.GMPD_BUTTON_11;
GMPD_DFLT_STNGS[m_input.GMPD_BUTTON_16] = m_input.GMPD_BUTTON_16;
var VIEWER_MODE = 0;
var BTN_EDIT_MODE = 1;
var AXIS_EDIT_MODE = 2;
// pad
var gamepad_svg = '';
var dpad_svg = '';
var dpad_up_svg = '';
var dpad_right_svg = '';
var dpad_down_svg = '';
var dpad_left_svg = '';
var face_btn_svg = '';
var analog_btn_svg = '';
var start_btn_svg = '';
var trigger_btn_svg = '';
var bumper_left_svg = '';
var bumper_right_svg = '';
var main_svg = '';
var axis_setting_svg = '';
// wheel
var wheel_svg = '';
var wheel_btn = '';
var wheel_right_svg = '';
var wheel_left_svg = '';
var pedal_svg = '';
var wheel_settings_svg = '';
var gearbox_hor_svg = '';
var gearbox_vert_svg = '';
var _svg = [];
var _selected_gamepad_num = -1;
var _selected_btn = null;
var _mode = VIEWER_MODE;
var _main_element = null;
var _device_elem = null;
var _gamepad_elem = null;
var _type_wheel_elem = null;
var _type_pad_elem = null;
var _device_id_label = null;
var _tmp_gamepads = [];
var _prefix = "";
var _elems = [];
var _axis_elems = [];
var _axis_settings_elems = [];
var _is_pad_mode = true;
var _axes_prev_val = {};
_axes_prev_val[m_input.GMPD_AXIS_0] = -2;
_axes_prev_val[m_input.GMPD_AXIS_1] = -2;
_axes_prev_val[m_input.GMPD_AXIS_2] = -2;
_axes_prev_val[m_input.GMPD_AXIS_3] = -2;
_axes_prev_val[m_input.GMPD_AXIS_4] = -2;
_axes_prev_val[m_input.GMPD_AXIS_5] = -2;
_axes_prev_val[m_input.GMPD_AXIS_6] = -2;
_axes_prev_val[m_input.GMPD_AXIS_7] = -2;
_axes_prev_val[m_input.GMPD_AXIS_8] = -2;
_axes_prev_val[m_input.GMPD_AXIS_9] = -2;
_axes_prev_val[m_input.GMPD_AXIS_10] = -2;
_axes_prev_val[m_input.GMPD_AXIS_11] = -2;
/**
* Show a gamepad configurator.
* @method module:gp_conf.show
*/
exports.show = function() {
// creating interface elements
var main_div = document.createElement("div");
_main_element = main_div;
main_div.style.cssText =
"position: absolute;" +
"width: 720px;" +
"height: 750px;" +
"top: 50%;" +
"left: 50%;" +
"-moz-transform: translateY(-50%) translateX(-50%);" +
"-ms-transform: translateY(-50%) translateX(-50%);" +
"-webkit-transform: translateY(-50%) translateX(-50%);" +
"transform: translateY(-50%) translateX(-50%);" +
"background-color: black;" +
"border: 4px solid white;" +
"border-radius: 35px;" +
"box-shadow: 0px 0px 20px 0px rgba(50, 50, 50, 1);";
m_cont.insert_to_container(main_div, "LAST");
create_pad_interface(main_div);
//creating another interface elements
var gamepad_data_cnt = document.createElement("div");
gamepad_data_cnt.style.cssText =
"position: absolute;" +
"width: 637px;" +
"top: 0px;" +
"font-family: sans-serif;" +
"text-align: center;" +
"margin-top: 40px;" +
"-moz-transform: translateX(-50%);" +
"-ms-transform: translateX(-50%);" +
"-webkit-transform: translateX(-50%);" +
"transform: translateX(-50%);" +
"left: 50%;";
var main_label = document.createElement("div");
main_label.innerHTML = MAIN_DEVICE_CAPTION;
main_label.style.cssText =
"color: #fff;" +
"display: inline-block;";
gamepad_data_cnt.appendChild(main_label);
for (var j = 0; j < 4; j++) {
var sensors = create_sensors(j);
var logic_func = function() {
return true;
}
var sensor_cb = function(obj, id, pulse) {
if (id != _selected_gamepad_num)
return;
for (var i = 0; i < _elems.length; i++) {
var elem = _elems[i];
set_btn_state(elem, m_ctrl.get_sensor_value(obj, id, i), i);
}
}
m_ctrl.create_sensor_manifold(null, j, m_ctrl.CT_CONTINUOUS,
sensors, logic_func, sensor_cb);
}
var gamepads = get_gamepads();
if (gamepads.length > 0)
_selected_gamepad_num = 0;
var gamepads_data = [];
var gamepads_data_container = document.createElement("div");
gamepads_data_container.style.cssText =
"margin-top: 20px;";
for (var i = 0; i < 4; i++) {
var gamepad_data_elem = create_device_icon_elem(i);
if (i == _selected_gamepad_num) {
gamepad_data_elem.style.backgroundColor = "green";
_gamepad_elem = gamepad_data_elem;
}
set_gmpd_config(i);
gamepads_data_container.appendChild(gamepad_data_elem);
gamepad_data_elem.setAttribute("data-device_type", "PAD");
gamepads_data.push(gamepad_data_elem);
var click_cb = function(e) {
var gamepads = get_gamepads();
var elem = e.target;
for (var j = 0; j < gamepads.length; j++) {
if (gamepads_data[j] == elem) {
_selected_gamepad_num = j;
_gamepad_elem = elem;
set_gmpd_config(_selected_gamepad_num);
change_device(elem.dataset.device_type);
}
}
}
gamepad_data_elem.addEventListener("click", click_cb, false);
}
gamepad_data_cnt.appendChild(gamepads_data_container);
_device_id_label = document.createElement("label");
_device_id_label.style.cssText =
"position: relative;" +
"display: block;" +
"color: white;";
gamepad_data_cnt.appendChild(_device_id_label);
var type_and_action_container = document.createElement("div");
type_and_action_container.style.cssText =
"margin-top: 20px;";
var select_pad_elem = append_type_elem(type_and_action_container, "Pad");
var select_wheel_elem = append_type_elem(type_and_action_container, "Wheel");
select_pad_elem.setAttribute("checked", "true");
select_pad_elem.onchange = function() {
change_device("PAD");
if (_gamepad_elem)
_gamepad_elem.setAttribute("data-device_type", "PAD");
}
select_wheel_elem.onchange = function() {
change_device("WHEEL");
if (_gamepad_elem)
_gamepad_elem.setAttribute("data-device_type", "WHEEL");
}
select_pad_elem.setAttribute("id", "test")
_type_pad_elem = select_pad_elem;
_type_wheel_elem = select_wheel_elem;
var action_label = document.createElement("label");
action_label.style.cssText +=
"color: #fff;" +
"display: block;";
type_and_action_container.appendChild(action_label);
action_label.textContent = SELECT_BTN_CAPTION;
action_label.setAttribute("id", "action_label");
gamepad_data_cnt.appendChild(type_and_action_container);
main_div.appendChild(gamepad_data_cnt);
var e_s = m_ctrl.create_elapsed_sensor();
function e_sensor_cb(obj, id, pulse) {
var gamepads = get_gamepads();
var num = gamepads.length;
if (_selected_gamepad_num == -1 && gamepads.length) {
_selected_gamepad_num = gamepads[0].index;
_gamepad_elem = gamepads_data[_selected_gamepad_num];
}
for (var i = 0; i < gamepads_data.length; i++)
if (i < num) {
gamepads_data[i].textContent = gamepads[i].index;
if (gamepads_data[i] == _gamepad_elem) {
gamepads_data[i].style.backgroundColor = "green";
_device_id_label.textContent = "Selected device: "
+ gamepads[i].index + ". Data: " + gamepads[i].id;
} else
gamepads_data[i].style.backgroundColor = "blue";
} else {
gamepads_data[i].style.backgroundColor = "black";
}
if (!num) {
_selected_gamepad_num = -1;
_device_id_label.textContent = "";
}
}
m_ctrl.create_sensor_manifold(null, "UPDATE_GAMEPAD_DATA", m_ctrl.CT_CONTINUOUS,
[e_s], logic_func, e_sensor_cb);
for (var j = 0; j < 4; j++) {
var sensors = create_axis_sensors(j);
var logic_func = function() {
return true;
}
var sensor_cb = function(obj, id, pulse) {
if (id != "AXES" + _selected_gamepad_num)
return;
for (var i = 0; i < _axis_elems.length; i=i+2) {
var elem = _axis_elems[i];
set_axis_state(elem, obj, id, i);
}
if (_is_pad_mode)
for (var i = 0; i < 12; i=i+2)
change_dual_axis_setting_color(obj, id, i);
else
for (var i = 0; i < 12; i++)
change_single_axis_setting_color(obj, id, i);
}
m_ctrl.create_sensor_manifold(null, "AXES" + j, m_ctrl.CT_CONTINUOUS,
sensors, logic_func, sensor_cb);
}
zoom_main_div();
window.addEventListener("resize", zoom_main_div);
}
function set_axis_state(elem, obj, id, num) {
var x = m_ctrl.get_sensor_value(obj, id, num) * AXIS_STEP;
var y = m_ctrl.get_sensor_value(obj, id, num + 1) * AXIS_STEP;
elem.style.transform = "translate3d(" + x + "px, " + y + "px, 0px) rotate("
+ 0 + "rad)";
}
function change_dual_axis_setting_color(obj, id, num) {
if (num + 1 > _axis_settings_elems.length * 2)
return;
var x = m_ctrl.get_sensor_value(obj, id, num);
var y = m_ctrl.get_sensor_value(obj, id, num + 1);
if (_axes_prev_val[num] > -2) {
var delta_x = x - _axes_prev_val[num];
var delta_y = y - _axes_prev_val[num + 1];
var elem = _axis_settings_elems[Math.floor(num / 2)];
var svg_id = elem.dataset.svgid;
if (_mode == VIEWER_MODE) {
if (delta_x || delta_y)
elem.style.backgroundImage = SVG_BASE64 + btoa(_svg[svg_id].replace(GREY_COLOR,
GREEN_COLOR)) + "')";
else
elem.style.backgroundImage = SVG_BASE64 + btoa(_svg[svg_id]) + "')";
} else if (_mode == AXIS_EDIT_MODE) {
var moved_axis = m_input.get_moved_gmpd_axis(_selected_gamepad_num);
if (moved_axis >= 0) {
if (moved_axis % 2 != 0)
moved_axis--;
_mode = VIEWER_MODE;
elem.style.backgroundImage = SVG_BASE64 + btoa(_svg[svg_id]) + "')";
var sel_axis = parseFloat(_selected_btn.dataset.key);
m_input.set_gamepad_key(_selected_gamepad_num, sel_axis, moved_axis);
m_input.set_gamepad_key(_selected_gamepad_num, sel_axis + 1, moved_axis + 1);
_selected_btn = null;
document.getElementById("action_label").textContent =
SELECT_BTN_CAPTION;
}
}
}
_axes_prev_val[num] = x;
_axes_prev_val[num + 1] = y;
}
function change_single_axis_setting_color(obj, id, num) {
if (num >= _axis_settings_elems.length)
return;
var val = m_ctrl.get_sensor_value(obj, id, num);
if (_axes_prev_val[num] > -2) {
var delta_val = val - _axes_prev_val[num];
var elem = _axis_settings_elems[num];
var svg_id = elem.dataset.svgid;
if (_mode == VIEWER_MODE) {
if (delta_val)
elem.style.backgroundImage = SVG_BASE64 + btoa(_svg[svg_id].replace(GREY_COLOR,
GREEN_COLOR)) + "')";
else
elem.style.backgroundImage = SVG_BASE64 + btoa(_svg[svg_id]) + "')";
} else if (_mode == AXIS_EDIT_MODE) {
var moved_axis = m_input.get_moved_gmpd_axis(_selected_gamepad_num);
if (moved_axis >= 0) {
_mode = VIEWER_MODE;
elem.style.backgroundImage = SVG_BASE64 + btoa(_svg[svg_id]) + "')";
var sel_axis = parseFloat(_selected_btn.dataset.key);
m_input.set_gamepad_key(_selected_gamepad_num, sel_axis, moved_axis);
_selected_btn = null;
document.getElementById("action_label").textContent =
SELECT_BTN_CAPTION;
}
}
}
_axes_prev_val[num] = val;
}
function set_btn_state(elem, pressed, num) {
if (_mode == VIEWER_MODE) {
if (pressed && elem.dataset.colorstate == "B") {
var svg = _svg[num];
elem.style.backgroundImage = SVG_BASE64 + btoa(svg.replace(BLUE_COLOR_REGEXP,
GREEN_COLOR)) + "')";
elem.setAttribute("data-colorstate", "G");
}
if (!pressed && elem.dataset.colorstate != "B") {
var svg = _svg[num];
elem.style.backgroundImage = SVG_BASE64 + btoa(svg) + "')";
elem.setAttribute("data-colorstate", "B");
}
} else {
var pressed_btn_key = m_input.get_pressed_gmpd_btn(_selected_gamepad_num);
if (pressed_btn_key >= 0 && _selected_btn && _mode == BTN_EDIT_MODE) {
var red_btn_val = _selected_btn.dataset.key;
m_input.set_gamepad_key(_selected_gamepad_num, red_btn_val,
pressed_btn_key);
save_config_to_local_mem(red_btn_val, pressed_btn_key);
_selected_btn = null;
document.getElementById("action_label").textContent = SELECT_BTN_CAPTION;
_mode = VIEWER_MODE;
}
}
}
/**
* Hide a gamepad configurator.
* @method module:gp_conf.hide
*/
exports.hide = function() {
_mode = VIEWER_MODE;
_selected_gamepad_num = -1;
_gamepad_elem = null;
_selected_btn = null;
_type_wheel_elem = null;
_type_pad_elem = null;
_axis_elems.length = 0;
_elems.length = 0;
_axis_settings_elems.length = 0;
var main_container = m_cont.get_container();
main_container.removeChild(_main_element);
_main_element = null;
m_ctrl.remove_sensor_manifold(null, "UPDATE_GAMEPAD_DATA");
for (var i = 0; i < 4; i++) {
m_ctrl.remove_sensor_manifold(null, i);
m_ctrl.remove_sensor_manifold(null, "AXES" + i);
}
window.removeEventListener("resize", zoom_main_div);
}
function get_gamepads() {
_tmp_gamepads.length = 0;
var gamepads = navigator.getGamepads ? navigator.getGamepads() :
(navigator.webkitGetGamepads ? navigator.webkitGetGamepads : []);
for (var i = 0; i < gamepads.length; i++)
if (gamepads[i])
_tmp_gamepads.push(gamepads[i]);
return _tmp_gamepads;
}
function save_config_to_local_mem(red_btn_val, pressed_btn_key) {
var gmpd_stngs_str = m_storage.get(_selected_gamepad_num + "_gmpd_stngs", "b4w") || "{}";
var gmpd_stngs = JSON.parse(gmpd_stngs_str);
gmpd_stngs[red_btn_val] = pressed_btn_key;
m_storage.set(_selected_gamepad_num + "_gmpd_stngs", JSON.stringify(gmpd_stngs), "b4w");
}
function init_gmpd_stngs(gamepad_id) {
var settings = JSON.stringify(GMPD_DFLT_STNGS);
m_storage.set(gamepad_id + "_gmpd_stngs", settings, "b4w");
}
function apply_settings(settings, gamepad_id) {
for (var button in settings)
m_input.set_gamepad_key(gamepad_id, button,
settings[button]);
}
function set_gmpd_config(gamepad_id) {
var gmpd_stngs = m_storage.get(gamepad_id + "_gmpd_stngs", "b4w");
if (gmpd_stngs) {
apply_settings(JSON.parse(gmpd_stngs), gamepad_id);
} else {
init_gmpd_stngs(gamepad_id);
}
}
/**
* Update gamepad device config without showing configurator
* @method module:gp_conf.update
*/
exports.update = function() {
for(var i = 0; i < 4; i++)
set_gmpd_config(i);
}
function create_pad_interface(main_div) {
_is_pad_mode = true;
var gamepad_elem = document.createElement("div");
var dpad_group = document.createElement("div");
var dpad_up_elem = document.createElement("div");
var dpad_right_elem = document.createElement("div");
var dpad_down_elem = document.createElement("div");
var dpad_left_elem = document.createElement("div");
var face_group = document.createElement("div");
var face_up_elem = document.createElement("div");
var face_right_elem = document.createElement("div");
var face_down_elem = document.createElement("div");
var face_left_elem = document.createElement("div");
var analog_left = document.createElement("div");
var analog_right = document.createElement("div");
var select_btn = document.createElement("div");
var start_btn = document.createElement("div");
var left_bumper = document.createElement("div");
var right_bumper = document.createElement("div");
var right_trigger = document.createElement("div");
var left_trigger = document.createElement("div");
var main_btn = document.createElement("div");
var left_axis_sittings = document.createElement("div");
var right_axis_sittings = document.createElement("div");
_device_elem = gamepad_elem;
//setting styles
gamepad_elem.style.cssText =
"position: absolute;" +
"height: auto;" +
"background-image: " + SVG_BASE64 + btoa(gamepad_svg) + "');" +
"width: 637px;" +
"height: 455px;" +
"background-size: 100% 100%;" +
"left: 50%;" +
"margin-bottom: 40px;" +
"-moz-transform: translateX(-50%);" +
"-ms-transform: translateX(-50%);" +
"-webkit-transform: translateX(-50%);" +
"bottom: 0px;";
dpad_group.style.cssText =
"background-image: " + SVG_BASE64 + btoa(dpad_svg) + "');" +
"position: absolute;" +
"top: 47px;" +
"left: 65px;" +
"width: 135px;" +
"height: 135px;";
dpad_up_elem.style.cssText =
"background-image: " + SVG_BASE64 + btoa(dpad_up_svg) + "');" +
"width: 36px;" +
"height: 38px;" +
"left: 49px;" +
"top: 8px;" +
"position: absolute;";
dpad_right_elem.style.cssText =
"background-image: " + SVG_BASE64 + btoa(dpad_right_svg) + "');" +
"width: 38px;" +
"height: 36px;" +
"top: 47px;" +
"left: 84px;" +
"position: absolute;";
dpad_down_elem.style.cssText =
"background-image: " + SVG_BASE64 + btoa(dpad_down_svg) + "');" +
"width: 36px;" +
"height: 38px;" +
"bottom: 11px;" +
"left: 51px;" +
"position: absolute;";
dpad_left_elem.style.cssText =
"background-image: " + SVG_BASE64 + btoa(dpad_left_svg) + "');" +
"width: 38px;" +
"height: 36px;" +
"top: 47px;" +
"left: 13px;" +
"position: absolute;";
face_group.style.cssText =
"position: absolute;" +
"top: 55px;" +
"left: 434px;" +
"width: 150px;" +
"height: 150px;";
face_up_elem.style.cssText =
"background-image: " + SVG_BASE64 + btoa(face_btn_svg) + "');" +
"width: 50px;" +
"height: 50px;" +
"left: 53px;" +
"top: 0px;" +
"position: absolute;";
face_right_elem.style.cssText =
"background-image: " + SVG_BASE64 + btoa(face_btn_svg) + "');" +
"width: 50px;" +
"height: 50px;" +
"left: 107px;" +
"top: 51px;" +
"position: absolute;";
face_down_elem.style.cssText =
"background-image: " + SVG_BASE64 + btoa(face_btn_svg) + "');" +
"width: 50px;" +
"height: 50px;" +
"left: 53px;" +
"bottom: 0px;" +
"position: absolute;";
face_left_elem.style.cssText =
"background-image: " + SVG_BASE64 + btoa(face_btn_svg) + "');" +
"width: 50px;" +
"height: 50px;" +
"top: 51px;" +
"position: absolute;";
analog_left.style.cssText =
"background-image: " + SVG_BASE64 + btoa(analog_btn_svg) + "');" +
"position: absolute;" +
"top: 222px;" +
"left: 183px;" +
"width: 85px;" +
"height: 85px;";
analog_right.style.cssText =
"background-image: " + SVG_BASE64 + btoa(analog_btn_svg) + "');" +
"position: absolute;" +
"top: 223px;" +
"left: 376px;" +
"width: 85px;" +
"height: 85px;";
select_btn.style.cssText =
"background-image: " + SVG_BASE64 + btoa(start_btn_svg) + "');" +
"position: absolute;" +
"top: 76px;" +
"left: 227px;" +
"width: 34px;" +
"height: 34px;";
start_btn.style.cssText =
"background-image: " + SVG_BASE64 + btoa(start_btn_svg) + "');" +
"position: absolute;" +
"top: 76px;" +
"left: 376px;" +
"width: 34px;" +
"height: 34px;";
left_bumper.style.cssText =
"background-image: " + SVG_BASE64 + btoa(bumper_left_svg) + "');" +
"position: absolute;" +
"top: 4px;" +
"left: 78px;" +
"width: 79px;" +
"height: 33px;";
right_bumper.style.cssText =
"background-image: " + SVG_BASE64 + btoa(bumper_right_svg) + "');" +
"position: absolute;" +
"top: 4px;" +
"left: 477px;" +
"width: 79px;" +
"height: 33px;";
right_trigger.style.cssText =
"background-image: " + SVG_BASE64 + btoa(trigger_btn_svg) + "');" +
"position: absolute;" +
"top: -7px;" +
"left: 425px;" +
"width: 50px;" +
"height: 17px;";
left_trigger.style.cssText =
"background-image: " + SVG_BASE64 + btoa(trigger_btn_svg) + "');" +
"position: absolute;" +
"top: -7px;" +
"left: 164px;" +
"width: 50px;" +
"height: 17px;";
main_btn.style.cssText =
"background-image: " + SVG_BASE64 + btoa(main_svg) + "');" +
"position: absolute;" +
"top: 68px;" +
"left: 274px;" +
"width: 92px;" +
"height: 92px;";
left_axis_sittings.style.cssText =
"background-image: " + SVG_BASE64 + btoa(axis_setting_svg) + "');" +
"position: absolute;" +
"top: 186px;" +
"left: 148px;" +
"width: 157px;" +
"height: 157px;";
right_axis_sittings.style.cssText =
"background-image: " + SVG_BASE64 + btoa(axis_setting_svg) + "');" +
"position: absolute;" +
"top: 187px;" +
"left: 339px;" +
"width: 157px;" +
"height: 157px;";
//settings parents
gamepad_elem.appendChild(left_axis_sittings);
gamepad_elem.appendChild(right_axis_sittings);
dpad_group.appendChild(dpad_up_elem);
dpad_group.appendChild(dpad_right_elem);
dpad_group.appendChild(dpad_down_elem);
dpad_group.appendChild(dpad_left_elem);
gamepad_elem.appendChild(dpad_group);
face_group.appendChild(face_up_elem);
face_group.appendChild(face_right_elem);
face_group.appendChild(face_down_elem);
face_group.appendChild(face_left_elem);
gamepad_elem.appendChild(face_group);
gamepad_elem.appendChild(analog_left);
gamepad_elem.appendChild(analog_right);
gamepad_elem.appendChild(select_btn);
gamepad_elem.appendChild(start_btn);
gamepad_elem.appendChild(left_bumper);
gamepad_elem.appendChild(right_bumper);
gamepad_elem.appendChild(right_trigger);
main_div.appendChild(gamepad_elem);
gamepad_elem.appendChild(left_trigger);
gamepad_elem.appendChild(main_btn);
_elems.length = 0;
_svg.length = 0;
_axis_elems.length = 0;
_axis_settings_elems.length = 0;
_elems.push(face_down_elem, face_right_elem, face_left_elem, face_up_elem,
left_bumper, right_bumper, left_trigger, right_trigger,
select_btn, start_btn, analog_left, analog_right,
dpad_up_elem, dpad_down_elem, dpad_left_elem, dpad_right_elem,
main_btn);
_svg.push(face_btn_svg, face_btn_svg, face_btn_svg, face_btn_svg,
bumper_left_svg, bumper_right_svg, trigger_btn_svg, trigger_btn_svg,
start_btn_svg, start_btn_svg, analog_btn_svg, analog_btn_svg,
dpad_up_svg, dpad_down_svg, dpad_left_svg, dpad_right_svg, main_svg);
_axis_elems.push(analog_left, analog_left, analog_right, analog_right);
_axis_settings_elems.push(left_axis_sittings, right_axis_sittings);
//setting attributes
for (var i = 0; i < _elems.length; i++) {
_elems[i].setAttribute("id", "pad_btn_" + i);
_elems[i].setAttribute("data-colorstate", "B");
_elems[i].setAttribute("data-key", i);
_elems[i].setAttribute("data-svgid", i);
}
left_axis_sittings.setAttribute("id", "pad_left_axis");
left_axis_sittings.setAttribute("data-colorstate", "GR");
left_axis_sittings.setAttribute("data-key", m_input.GMPD_AXIS_0);
left_axis_sittings.setAttribute("data-svgid", _svg.length);
right_axis_sittings.setAttribute("id", "pad_right_axis");
right_axis_sittings.setAttribute("data-colorstate", "GR");
right_axis_sittings.setAttribute("data-key", m_input.GMPD_AXIS_2);
right_axis_sittings.setAttribute("data-svgid", _svg.length + 1);
_svg.push(axis_setting_svg, axis_setting_svg);
append_elems_click_cb(_elems, BLUE_COLOR_REGEXP);
append_elems_click_cb(_axis_settings_elems, GREY_COLOR);
}
function create_wheel_interface(main_div) {
_is_pad_mode = false;
var wheel_elem = document.createElement("div");
var wheel_btn_0 = document.createElement("div");
var wheel_btn_1 = document.createElement("div");
var wheel_btn_2 = document.createElement("div");
var wheel_btn_3 = document.createElement("div");
var wheel_btn_4 = document.createElement("div");
var wheel_btn_5 = document.createElement("div");
var wheel_btn_6 = document.createElement("div");
var wheel_btn_7 = document.createElement("div");
var wheel_btn_8 = document.createElement("div");
var wheel_btn_9 = document.createElement("div");
var wheel_btn_10 = document.createElement("div");
var wheel_btn_11 = document.createElement("div");
var wheel_btn_12 = document.createElement("div");
var wheel_btn_13 = document.createElement("div");
var wheel_btn_14 = document.createElement("div");
var wheel_btn_15 = document.createElement("div");
var wheel_btn_16 = document.createElement("div");
var wheel_btn_17 = document.createElement("div");
var wheel_btn_18 = document.createElement("div");
var wheel_btn_19 = document.createElement("div");
var wheel_btn_20 = document.createElement("div");
var wheel_btn_21 = document.createElement("div");
var wheel_btn_22 = document.createElement("div");
var wheel_btn_23 = document.createElement("div");
var wheel_btn_24 = document.createElement("div");
var left_pedal_settings_elem = document.createElement("div");
var midle_pedal_settings_elem = document.createElement("div");
var right_pedal_settings_elem = document.createElement("div");
var wheel_settings_elem = document.createElement("div");
var gearbox_settings_hor_elem = document.createElement("div");
var gearbox_settings_vert_elem = document.createElement("div");
_device_elem = wheel_elem;
var btn_def_style =
"position: absolute;" +
"height: auto;" +
"background-image: " + SVG_BASE64 + btoa(wheel_btn) + "');" +
"width: 19px;" +
"height: 19px;" +
"background-size: 100% 100%;";
wheel_elem.style.cssText =
"position: absolute;" +
"background-image: " + SVG_BASE64 + btoa(wheel_svg) + "');" +
"width: 397px;" +
"height: 455px;" +
"-moz-transform: translateX(-50%);" +
"-ms-transform: translateX(-50%);" +
"-webkit-transform: translateX(-50%);" +
"transform: translateX(-50%);" +
"background-size: 100% 100%;" +
"left: 50%;" +
"margin-left: 25px;" +
"margin-bottom: 40px;" +
"bottom: 0px;";
wheel_btn_0.style.cssText =
btn_def_style +
"top: 132px;" +
"left: 331px;";
wheel_btn_1.style.cssText =
btn_def_style +
"top: 122px;" +
"left: 315px;";
wheel_btn_2.style.cssText =
btn_def_style +
"top: 122px;" +
"left: 347px;";
wheel_btn_3.style.cssText =
btn_def_style +
"top: 113px;" +
"left: 331px;";
wheel_btn_4.style.cssText =
"position: absolute;" +
"height: auto;" +
"background-image: " + SVG_BASE64 + btoa(wheel_right_svg) + "');" +
"width: 54px;" +
"height: 37px;" +
"background-size: 100% 100%;" +
"top: 84px;" +
"left: 166px;";
wheel_btn_5.style.cssText =
"position: absolute;" +
"height: auto;" +
"background-image: " + SVG_BASE64 + btoa(wheel_left_svg) + "');" +
"width: 54px;" +
"height: 37px;" +
"background-size: 100% 100%;" +
"top: 84px;" +
"left: 36px;";
wheel_btn_6.style.cssText =
btn_def_style +
"top: 107px;" +
"left: 141px;";
wheel_btn_7.style.cssText =
btn_def_style +
"top: 107px;" +
"left: 90px;";
wheel_btn_8.style.cssText =
btn_def_style +
"top: 185px;" +
"left: 321px;";
wheel_btn_9.style.cssText =
btn_def_style +
"top: 185px;" +
"left: 340px;";
wheel_btn_10.style.cssText =
btn_def_style +
"top: 179px;" +
"left: 358px;";
wheel_btn_11.style.cssText =
btn_def_style +
"top: 178px;" +
"left: 303px;";
wheel_btn_12.style.cssText =
btn_def_style +
"top: 210px;" +
"left: 299px;";
wheel_btn_13.style.cssText =
btn_def_style +
"top: 279px;" +
"left: 299px;";
wheel_btn_14.style.cssText =
btn_def_style +
"top: 210px;" +
"left: 321px;";
wheel_btn_15.style.cssText =
btn_def_style +
"top: 279px;" +
"left: 321px;";
wheel_btn_16.style.cssText =
btn_def_style +
"top: 210px;" +
"left: 344px;";
wheel_btn_17.style.cssText =
btn_def_style +
"top: 278px;" +
"left: 344px;";
wheel_btn_18.style.cssText =
btn_def_style +
"top: 124px;" +
"left: 147px;";
wheel_btn_19.style.cssText =
btn_def_style +
"top: 138px;" +
"left: 133px;";
wheel_btn_20.style.cssText =
btn_def_style +
"top: 124px;" +
"left: 82px;";
wheel_btn_21.style.cssText =
btn_def_style +
"top: 138px;" +
"left: 96px;";
wheel_btn_22.style.cssText =
btn_def_style +
"top: 278px;" +
"left: 367px;";
var pedal_scc = "position: absolute;" +
"background-image: " + SVG_BASE64 + btoa(pedal_svg) + "');" +
"width: 19px;" +
"height: 46px;" +
"background-size: 100% 100%;";
left_pedal_settings_elem.style.cssText =
pedal_scc +
"top: 291px;" +
"left: 50px;";
midle_pedal_settings_elem.style.cssText =
pedal_scc +
"top: 291px;" +
"left: 111px;";
right_pedal_settings_elem.style.cssText =
pedal_scc +
"top: 291px;" +
"left: 171px;";
wheel_settings_elem.style.cssText =
"position: absolute;" +
"background-image: " + SVG_BASE64 + btoa(wheel_settings_svg) + "');" +
"width: 297px;" +
"height: 179px;" +
"background-size: 100% 100%;" +
"top: 43px;" +
"left: -25px;";
gearbox_settings_hor_elem.style.cssText =
"position: absolute;" +
"background-image: " + SVG_BASE64 + btoa(gearbox_hor_svg) + "');" +
"width: 33px;" +
"height: 10px;" +
"background-size: 100% 100%;" +
"top: 159px;" +
"left: 324px;";
gearbox_settings_vert_elem.style.cssText =
"position: absolute;" +
"background-image: " + SVG_BASE64 + btoa(gearbox_vert_svg) + "');" +
"width: 10px;" +
"height: 33px;" +
"background-size: 100% 100%;" +
"top: 148px;" +
"left: 335px;";
main_div.appendChild(wheel_elem);
wheel_elem.appendChild(left_pedal_settings_elem);
wheel_elem.appendChild(midle_pedal_settings_elem);
wheel_elem.appendChild(right_pedal_settings_elem);
wheel_elem.appendChild(wheel_settings_elem);
wheel_elem.appendChild(gearbox_settings_hor_elem);
wheel_elem.appendChild(gearbox_settings_vert_elem);
wheel_elem.appendChild(wheel_btn_0);
wheel_elem.appendChild(wheel_btn_1);
wheel_elem.appendChild(wheel_btn_2);
wheel_elem.appendChild(wheel_btn_3);
wheel_elem.appendChild(wheel_btn_4);
wheel_elem.appendChild(wheel_btn_5);
wheel_elem.appendChild(wheel_btn_6);
wheel_elem.appendChild(wheel_btn_7);
wheel_elem.appendChild(wheel_btn_8);
wheel_elem.appendChild(wheel_btn_9);
wheel_elem.appendChild(wheel_btn_10);
wheel_elem.appendChild(wheel_btn_11);
wheel_elem.appendChild(wheel_btn_12);
wheel_elem.appendChild(wheel_btn_13);
wheel_elem.appendChild(wheel_btn_14);
wheel_elem.appendChild(wheel_btn_15);
wheel_elem.appendChild(wheel_btn_16);
wheel_elem.appendChild(wheel_btn_17);
wheel_elem.appendChild(wheel_btn_18);
wheel_elem.appendChild(wheel_btn_19);
wheel_elem.appendChild(wheel_btn_20);
wheel_elem.appendChild(wheel_btn_21);
wheel_elem.appendChild(wheel_btn_22);
_elems.length = 0;
_svg.length = 0;
_axis_elems.length = 0;
_axis_settings_elems.length = 0;
_elems.push(wheel_btn_0, wheel_btn_1, wheel_btn_2, wheel_btn_3, wheel_btn_4,
wheel_btn_5, wheel_btn_6, wheel_btn_7, wheel_btn_8, wheel_btn_9,
wheel_btn_10, wheel_btn_11, wheel_btn_12, wheel_btn_13, wheel_btn_14,
wheel_btn_15, wheel_btn_16, wheel_btn_17, wheel_btn_18, wheel_btn_19,
wheel_btn_20, wheel_btn_21, wheel_btn_22);
_svg.push(wheel_btn, wheel_btn, wheel_btn, wheel_btn, wheel_right_svg, wheel_left_svg,
wheel_btn, wheel_btn, wheel_btn, wheel_btn, wheel_btn, wheel_btn,
wheel_btn, wheel_btn, wheel_btn, wheel_btn, wheel_btn, wheel_btn,
wheel_btn, wheel_btn, wheel_btn, wheel_btn, wheel_btn, wheel_btn);
_axis_settings_elems.push(wheel_settings_elem, left_pedal_settings_elem,
right_pedal_settings_elem, midle_pedal_settings_elem,
gearbox_settings_hor_elem, gearbox_settings_vert_elem);
//setting attributes
for (var i = 0; i < _elems.length; i++) {
_elems[i].setAttribute("id", "wheel_btn_" + i);
_elems[i].setAttribute("data-colorstate", "B");
_elems[i].setAttribute("data-key", i);
_elems[i].setAttribute("data-svgid", i);
}
for (var i = 0; i < _axis_settings_elems.length; i++) {
_elems[i].setAttribute("id", "wheel_axis_" + i);
_elems[i].setAttribute("data-colorstate", "GR");
}
wheel_settings_elem.setAttribute("data-key", m_input.GMPD_AXIS_0);
wheel_settings_elem.setAttribute("data-svgid", _svg.length);
left_pedal_settings_elem.setAttribute("data-key", m_input.GMPD_AXIS_1);
left_pedal_settings_elem.setAttribute("data-svgid", _svg.length + 1);
right_pedal_settings_elem.setAttribute("data-key", m_input.GMPD_AXIS_2);
right_pedal_settings_elem.setAttribute("data-svgid", _svg.length + 2);
midle_pedal_settings_elem.setAttribute("data-key", m_input.GMPD_AXIS_3);
midle_pedal_settings_elem.setAttribute("data-svgid", _svg.length + 3);
gearbox_settings_hor_elem.setAttribute("data-key", m_input.GMPD_AXIS_4);
gearbox_settings_hor_elem.setAttribute("data-svgid", _svg.length + 4);
gearbox_settings_vert_elem.setAttribute("data-key", m_input.GMPD_AXIS_5);
gearbox_settings_vert_elem.setAttribute("data-svgid", _svg.length + 5);
_svg.push(wheel_settings_svg, pedal_svg, pedal_svg, pedal_svg,
gearbox_hor_svg, gearbox_vert_svg);
append_elems_click_cb(_elems, BLUE_COLOR_REGEXP);
append_elems_click_cb(_axis_settings_elems, GREY_COLOR);
}
function create_sensors(gmpd_id) {
var sensors = [
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_0, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_1, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_2, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_3, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_4, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_5, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_6, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_7, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_8, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_9, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_10, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_11, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_12, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_13, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_14, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_15, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_16, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_17, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_18, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_19, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_20, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_21, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_22, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_23, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_24, gmpd_id),
m_ctrl.create_gamepad_btn_sensor(m_input.GMPD_BUTTON_25, gmpd_id)
];
return sensors;
}
function create_axis_sensors(gmpd_id) {
var sensors = [
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_0, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_1, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_2, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_3, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_4, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_5, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_6, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_7, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_8, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_9, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_10, gmpd_id),
m_ctrl.create_gamepad_axis_sensor(m_input.GMPD_AXIS_11, gmpd_id)
];
return sensors;
}
function append_type_elem(parent, text) {
var select_type_elem = document.createElement("input");
select_type_elem.style.cssText =
"display: inline-block;" +
"position = relative;"
select_type_elem.setAttribute('type', 'radio');
select_type_elem.setAttribute('name', 'choice');
var select_type_label = document.createElement("label");
select_type_label.textContent = text;
select_type_label.style.cssText =
"position = relative;" +
"display: inline-block;" +
"color: white;";
parent.appendChild(select_type_elem);
parent.appendChild(select_type_label);
return select_type_elem;
}
function reset_device_type() {
_main_element.removeChild(_device_elem);
_device_elem = null;
}
function change_device(type) {
reset_device_type();
switch(type) {
case "PAD":
_type_pad_elem.checked = true;
create_pad_interface(_main_element);
break;
case "WHEEL":
_type_wheel_elem.checked = true;
create_wheel_interface(_main_element);
break;
};
}
function append_elems_click_cb(elems, original_color) {
var click_cb = function(e) {
var elem = e.target;
if(_selected_gamepad_num < 0 || elem.dataset.colorstate == "G")
return;
if (_mode != VIEWER_MODE) {
if (elem.dataset.colorstate == "R") {
_selected_btn = null;
document.getElementById("action_label").textContent =
SELECT_BTN_CAPTION;
_mode = VIEWER_MODE;
}
if (elem.dataset.colorstate == "B" || elem.dataset.colorstate == "GR") {
var svg_num = parseFloat(_selected_btn.dataset.svgid);
_selected_btn.style.backgroundImage = SVG_BASE64 + btoa(_svg[svg_num]) + "')";
_selected_btn.setAttribute("data-colorstate", elem.dataset.colorstate);
_selected_btn = elem;
svg_num = parseFloat(elem.dataset.svgid);
elem.style.backgroundImage = SVG_BASE64 + btoa(_svg[svg_num].replace(original_color,
RED_COLOR)) + "')";
elem.setAttribute("data-colorstate", "R");
}
} else {
var svg_num = parseFloat(elem.dataset.svgid);
var mode = elem.dataset.colorstate == "B" ? BTN_EDIT_MODE : AXIS_EDIT_MODE;
_mode = mode;
elem.style.backgroundImage = SVG_BASE64 + btoa(_svg[svg_num].replace(original_color,
RED_COLOR)) + "')";
elem.setAttribute("data-colorstate", "R");
if (mode == BTN_EDIT_MODE)
document.getElementById("action_label").textContent =
PRESS_BTN_CAPTION;
else
document.getElementById("action_label").textContent =
MOVE_AXIS_CAPTION;
_selected_btn = elem;
}
}
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
elem.addEventListener("click", click_cb, false);
}
}
function create_device_icon_elem(number) {
var icon = document.createElement("label");
icon.style.cssText =
"position: relative;" +
"display: inline-block;" +
"width: 50px;" +
"color: white;" +
"margin: 0 10px;" +
"font-size: 36px;" +
"line-height: 50px;" +
"background-color: black;" +
"border: 3px solid white;" +
"border-radius: 5px;" +
"height: 50px;";
icon.textContent = number;
return icon;
}
function zoom_main_div() {
var width = window.innerWidth;
var height = window.innerHeight;
if ((height <= 750 && height > 400) || (width <= 750 && width > 400))
_main_element.style.zoom = "0.5";
else if (width <= 400 || height <= 400)
_main_element.style.zoom = "0.3";
else
_main_element.style.zoom = "1";
}
};