Source: addons/hmd_conf.js

  1. import register from "../util/register.js";
  3. import m_cont_fact from "../extern/container.js";
  4. import m_ctl_fact from "../extern/controls.js";
  5. import m_input_fact from "../extern/input.js";
  6. import m_print_fact from "../intern/print.js";
  7. import m_storage_fact from "./storage.js";
  8. import m_util_fact from "../extern/util.js";
  10. /**
  11.  * HMD configurator add-on.
  12.  * @module hmd_conf
  13.  */
  14. function HMD_config(ns, exports) {
  16. var m_cont      = m_cont_fact(ns);
  17. var m_ctl       = m_ctl_fact(ns);
  18. var m_input     = m_input_fact(ns);
  19. var m_print     = m_print_fact(ns);
  20. var m_storage   = m_storage_fact(ns);
  21. var m_util      = m_util_fact(ns);
  23. var _is_shown = false;
  24. var _hmd_dialog = null;
  25. var _style = null;
  26. var _hmd_list = null;
  27. var _update = true;
  28. var _param_values = {
  29.     "profile": "custom",
  30.     "first_distortion": 0,
  31.     "second_distortion": 0,
  32.     "bevel_size": 0,
  33.     "screen_width": 0,
  34.     "screen_height": 0,
  35.     "screen_lense": 0,
  36.     "ipd": 0,
  37.     "baseline": 0
  38. };
  40. var DEFAULT_FIRST_DISTORTION = 0.34;
  41. var DEFAULT_SECOND_DISTORTION = 0.55;
  42. var DEFAULT_BEVEL_SIZE = 4;
  43. var DEFAULT_SCREEN_WIDTH = 110;
  44. var DEFAULT_SCREEN_HEIGHT = 65;
  45. var DEFAULT_SCREEN_LENSE_DIST = 50;
  46. var DEFAULT_EYE_DISTANCE = 64;
  47. var DEFAULT_BASELINE_DIST = 32;
  49. var INCH_TO_MM = 25.4;
  51. var IS_IOS = /iPad|iPhone|iPod/.test(navigator.platform);
  52. var UPDATE_DELAY = 1000;
  53. var MM_TO_M = 1 / 1000;
  55. var P_COMMON = 0;
  56. var P_MOBILE = 1;
  57. var P_WEBVR = 2;
  58. // use braces to prevent a obfuscation
  59. var _viewer_profiles = {
  60.     "oculus_dk2": {
  61.         name: "Oculus Rift DK2",
  62.         type: P_WEBVR,
  63.         "first_distortion": 0.22,
  64.         "second_distortion": 0.28
  65.         // don't forget to place comma if you uncomment the next line
  66.         // chromatic_aberration_coefs: [-0.015, 0.02, 0.025, 0.02]
  67.     },
  68.     "cardboard_1": {
  69.         name: "Cardboard (2014)",
  70.         type: P_MOBILE,
  71.         "ipd": 60,
  72.         "baseline": 35,
  73.         "screen_lense": 42,
  74.         "first_distortion": 0.441,
  75.         "second_distortion": 0.156
  76.         // don't forget to place comma if you uncomment the next line
  77.         // chromatic_aberration_coefs : [0.0, 0.0, 0.0, 0.0]
  78.     },
  79.     "cardboard_2": {
  80.         name: "Cardboard (2015)",
  81.         type: P_MOBILE,
  82.         "ipd": 64,
  83.         "baseline": 35,
  84.         "screen_lense": 39,
  85.         "first_distortion": 0.34,
  86.         "second_distortion": 0.55
  87.         // don't forget to place comma if you uncomment the next line
  88.         // chromatic_aberration_coefs : [0.0, 0.0, 0.0, 0.0]
  89.     },
  90.     "custom": {
  91.         name: "Custom",
  92.         type: P_COMMON,
  93.         "ipd": 64,
  94.         "baseline": 35,
  95.         "screen_lense": 39,
  96.         "first_distortion": 0.0,
  97.         "second_distortion": 0.0
  98.         // don't forget to place comma if you uncomment the next line
  99.         // chromatic_aberration_coefs: [0.0, 0.0, 0.0, 0.0]
  100.     }
  101. }
  103. var _param_list = [{
  104.         label: "Tray to lens-center distance.",
  105.         is_mobile: true,
  106.         inputs: [{
  107.                 id: "baseline",
  108.                 max: "50",
  109.                 step: "0.5"
  110.             }
  111.         ]
  112.     }, {
  113.         label: "Interpupillary distance.",
  114.         is_mobile: true,
  115.         inputs: [{
  116.                 id: "ipd",
  117.                 max: "100",
  118.                 step: "1"
  119.             }
  120.         ]
  121.     }, {
  122.         label: "Screen to lense distance.",
  123.         is_mobile: true,
  124.         inputs: [{
  125.                 id: "screen_lense",
  126.                 max: "100",
  127.                 step: "1"
  128.             }
  129.         ]
  130.     }, {
  131.         label: "Screen height.",
  132.         is_mobile: true,
  133.         inputs: [{
  134.                 id: "screen_height",
  135.                 max: "150",
  136.                 step: "1"
  137.             }
  138.         ]
  139.     }, {
  140.         label: "Screen width.",
  141.         is_mobile: true,
  142.         inputs: [{
  143.                 id: "screen_width",
  144.                 max: "200",
  145.                 step: "1"
  146.             }
  147.         ]
  148.     }, {
  149.         label: "Bevel width.",
  150.         is_mobile: true,
  151.         inputs: [{
  152.                 id: "bevel_size",
  153.                 max: "20",
  154.                 step: "1"
  155.             }
  156.         ]
  157.     }, {
  158.         label: "Distortion coefficients.",
  159.         inputs: [{
  160.                 id: "first_distortion",
  161.                 max: "1.0",
  162.                 step: "0.01"
  163.             }, {
  164.                 id: "second_distortion",
  165.                 max: "1.0",
  166.                 step: "0.01"
  167.             }
  168.         ]
  169.     }
  170. ]
  172. /**
  173.  * Check if HMD configurator can be shown.
  174.  * @method module:hmd_conf.check
  175.  * @returns {boolean} The result of the checking.
  176.  */
  177. exports.check = check;
  178. function check() {
  179.     if (!m_input.can_use_device(m_input.DEVICE_HMD))
  180.         return false;
  182.     var device = m_input.get_device_by_type_element(m_input.DEVICE_HMD);
  183.     var hmd_type = m_input.get_value_param(device, m_input.HMD_WEBVR_TYPE);
  184.     return (hmd_type & (m_input.HMD_NON_WEBVR | m_input.HMD_WEBVR_MOBILE |
  185.             m_input.HMD_WEBVR_DESKTOP)) &&
  186.             !(hmd_type & m_input.HMD_WEBVR1);
  187. }
  189. /**
  190.  * Show HMD configurator.
  191.  * @method module:hmd_conf.show
  192.  * @param {string} css_class CSS class of HMD configurator element
  193.  */
  194. exports.show = function(css_class) {
  195.     if (!check())
  196.         return;
  198.     var container = m_cont.get_container();
  200.     _style = document.createElement("style");
  201.     _style.innerHTML = "." + css_class + " input[type=range]::-webkit-slider-runnable-track {width: 100%; height: 8px;cursor: pointer;background-color: #fff;border: 2px solid rgba(98, 98, 98, .2);box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);}." + css_class + " input[type=range]::-webkit-slider-thumb {box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);height: 30px;width: 16px;border-radius: 2px;background-color: #323232;cursor: pointer;margin-top: -13px;-webkit-appearance: none;}";
  203.     document.head.appendChild(_style);
  205.     if (_is_shown)
  206.         return;
  207.     _is_shown = true;
  208.     restore_params();
  210.     var mdevice = m_input.get_device_by_type_element(m_input.DEVICE_MOUSE, container);
  211.     m_input.switch_prevent_default(mdevice, false);
  212.     var tdevice = m_input.get_device_by_type_element(m_input.DEVICE_TOUCH, container);
  213.     m_input.switch_prevent_default(tdevice, false);
  215.     _hmd_dialog = document.createElement("div");
  216.     _hmd_dialog.className = css_class;
  217.     container.appendChild(_hmd_dialog);
  218.     _hmd_list = document.createElement("div");
  219.     _hmd_dialog.appendChild(_hmd_list)
  221.     _hmd_list.style.cssText =
  222.           "background-color: #484848;" +
  223.           "border: 2px solid rgba(150, 150, 150, 0.7);" +
  224.           "box-shadow: 0px 0px 10px 0px rgba(150, 150, 150, 0.7);" +
  225.           "position: relative;" +
  226.           "width: 524px;" +
  227.           "padding: 16px;" +
  228.           "overflow: hidden;";
  230.     var select = create_profiles_select();
  231.     _hmd_list.appendChild(select);
  233.     var device = m_input.get_device_by_type_element(m_input.DEVICE_HMD);
  234.     for (var i = 0; i < _param_list.length; i++) {
  235.         if (m_input.get_value_param(device, m_input.HMD_WEBVR_TYPE) &
  236.                 (m_input.HMD_NON_WEBVR | m_input.HMD_WEBVR_MOBILE) ||
  237.                 !_param_list[i].is_mobile) {
  238.             var param_cont = create_param(_param_list[i], i);
  239.             _hmd_list.appendChild(param_cont);
  240.         }
  241.     }
  243.     var buttons = create_buttons();
  244.     _hmd_list.appendChild(buttons);
  246.     var time = m_ctl.create_timeline_sensor();
  247.     var last_update_time = 0;
  248.     function update_cb(obj, id, pulse) {
  249.         var time = m_ctl.get_sensor_value(obj, id, 0);
  250.         if (time - last_update_time > UPDATE_DELAY) {
  251.             last_update_time = time;
  252.             update_params();
  253.         }
  254.     }
  255.     m_ctl.create_sensor_manifold(null, "UPDATE_HMD_RENDERING",
  256.             m_ctl.CT_CONTINUOUS, [time], null, update_params);
  257. }
  259. function create_profiles_select() {
  260.     var hmd_conf_str = m_storage.get("hmd_conf", "b4w");
  261.     var hmd_conf_data = JSON.parse(hmd_conf_str? hmd_conf_str: "{}");
  262.     var cur_profile = hmd_conf_data["profile"] || "custom";
  264.     var select_cont = document.createElement("div");
  266.     var label = document.createElement("label");
  267.     label.innerHTML = "Profile: ";
  268.     label.className = "text_label";
  270.     label.style.cssText =
  271.         "background-color: #323232;" +
  272.         "border: 2px solid rgba(98, 98, 98, .2);" +
  273.         "border-radius: 2px;" +
  274.         "width: 120px;" +
  275.         "height: 30px;" +
  276.         "display: block;" +
  277.         "float: left;" +
  278.         "font-size: 16px;" +
  279.         "font-weight: normal;" +
  280.         "color: #fff;" +
  281.         "cursor: pointer;" +
  282.         "text-decoration: none;" +
  283.         "text-align: left;" +
  284.         "padding-left: 8px;" +
  285.         "line-height: 28px;" +
  286.         "margin-bottom: 4px;" +
  287.         "box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);";
  289.     select_cont.appendChild(label);
  291.     var select = document.createElement("select");
  292.     select_cont.appendChild(select);
  294.     select.style.cssText =
  295.         "background-color: #323232;" +
  296.         "border: 2px solid rgba(98, 98, 98, .2);" +
  297.         "border-radius: 2px;" +
  298.         "height: 30px;" +
  299.         "display: block;" +
  300.         "font-size: 16px;" +
  301.         "font-weight: normal;" +
  302.         "color: #fff;" +
  303.         "cursor: pointer;" +
  304.         "text-decoration: none;" +
  305.         "text-align: left;" +
  306.         "padding-left: 8px;" +
  307.         "line-height: 28px;" +
  308.         "margin-bottom: 4px;" +
  309.         "box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);";
  311.     var device = m_input.get_device_by_type_element(m_input.DEVICE_HMD);
  312.     if (device)
  313.         for (var i in _viewer_profiles) {
  314.             if (_viewer_profiles[i].type == P_COMMON ||
  315.                     (m_input.get_value_param(device, m_input.HMD_WEBVR_TYPE) &
  316.                     (m_input.HMD_NON_WEBVR | m_input.HMD_WEBVR_MOBILE) &&
  317.                     _viewer_profiles[i].type == P_MOBILE)) {
  318.                 var option = document.createElement("option");
  319.                 option.value = i;
  320.                 option.text = _viewer_profiles[i].name;
  321.                 select.appendChild(option);
  322.             }
  323.         }
  325.     select.value = cur_profile;
  326.     if (m_util.is_ie11())
  327.         select.onchange = change_select_cb;
  328.     else
  329.         select.oninput = change_select_cb;
  330.     return select_cont;
  331. }
  333. function change_select_cb(e){
  334.     var profile = e.target.value;
  335.     var profile_data = _viewer_profiles[profile];
  337.     for (var name in _param_values) {
  338.         if (name in profile_data) {
  339.             var slider = document.getElementById(name + "_slider");
  340.             if (slider) {
  341.                 slider.disabled = profile !== "custom";
  342.                 slider.value = profile_data[name];
  343.             }
  345.             var number = document.getElementById(name + "_number");
  346.             if (number) {
  347.                 number.disabled = profile !== "custom";
  348.                 number.value = profile_data[name];
  349.             }
  351.             _param_values[name] = profile_data[name];
  352.         }
  353.     }
  354. }
  357. /**
  358.  * Hide HMD configurator.
  359.  * @method module:hmd_conf.hide
  360.  */
  361. exports.hide = hide;
  362. function hide() {
  363.     m_ctl.remove_sensor_manifold(null, "UPDATE_HMD_RENDERING");
  364.     restore_params();
  365.     update_params();
  367.     if (!_is_shown)
  368.         return;
  369.     _is_shown = false;
  370.     remove_dom_tree();
  371. }
  373. /**
  374.  * Reset values of HMD config.
  375.  * @method module:hmd_conf.reset
  376.  */
  377. exports.reset = reset;
  378. function reset() {
  379.     restore_params(true);
  380.     update_params();
  381.     update_dom_tree();
  382. }
  384. /**
  385.  * Update HMD device config without showing HMD configurator
  386.  * @method module:hmd_conf.update
  387.  */
  388. exports.update = function() {
  389.     restore_params();
  390.     update_params();
  391. }
  393. function update_dom_tree() {
  394.     for (var i in _param_values) {
  395.         var slider = document.getElementById(i + "_slider");
  396.         if (slider)
  397.             slider.value = _param_values[i];
  398.         var number = document.getElementById(i + "_number");
  399.         if (number)
  400.             number.value = _param_values[i];
  401.     }
  402. }
  404. function remove_dom_tree() {
  405.     var container = m_cont.get_container();
  406.     container.removeChild(_hmd_dialog);
  407.     document.head.removeChild(_style);
  408.     _hmd_dialog = null;
  409.     _hmd_list = null;
  410.     _style = null;
  411. }
  413. function get_screen_width() {
  414.     return Math.max(window.screen.width, window.screen.height) *
  415.             window.devicePixelRatio;
  416. }
  418. function get_screen_height() {
  419.     return Math.min(window.screen.width, window.screen.height) *
  420.             window.devicePixelRatio;
  421. }
  423. function check_rule(rule, ua, screenWidth, screenHeight) {
  424.     return (rule["ua"] && ua.indexOf(rule["ua"]) >= 0) ||
  425.             !rule["ua"] && rule["res"] && rule["res"][0] && rule["res"][1] &&
  426.             Math.min(screenWidth, screenHeight) == Math.min(rule["res"][0], rule["res"][1]) &&
  427.             Math.max(screenWidth, screenHeight) == Math.max(rule["res"][0], rule["res"][1]);
  428. }
  430. function find_device_index(dpdb, user_agent, width, height) {
  431.     if (dpdb["format"] != 1 || !dpdb["devices"] || !dpdb["devices"].length) {
  432.         m_print.error("DPDB isn't correct.");
  433.         return -1;
  434.     }
  436.     for (var i = 0; i < dpdb["devices"].length; i++) {
  437.         var device = dpdb["devices"][i];
  438.         if (!device["rules"] ||
  439.                 (device["type"] != "ios" || !IS_IOS) && device["type"] != "android")
  440.             continue;
  442.         var found = false;
  443.         for (var j = 0; j < device["rules"].length; j++) {
  444.             var rule = device["rules"][j];
  445.             if (check_rule(rule, user_agent, width, height)) {
  446.                 found = true;
  447.                 break;
  448.             }
  449.         }
  450.         if (found)
  451.             return i;
  452.     }
  453.     return -1;
  454. }
  456. function restore_params(ignore_storage) {
  457.     var user_agent = navigator.userAgent || navigator.vendor || window.opera;
  458.     var width = get_screen_width();
  459.     var height = get_screen_height();
  460.     var width_dpmm = 0;
  461.     var height_dpmm = 0;
  462.     var bevel_mm = 0;
  463.     var device_index = find_device_index(DPDB, user_agent, width, height);
  464.     if (device_index != -1) {
  465.         var device = DPDB["devices"][device_index];
  466.         var xdpi = device["dpi"][0] || device["dpi"];
  467.         var ydpi = device["dpi"][1] || device["dpi"];
  469.         width_dpmm = Math.round(width * INCH_TO_MM / xdpi);
  470.         height_dpmm = Math.round(height * INCH_TO_MM / ydpi);
  471.         bevel_mm = Math.round(device["bw"]);
  472.     }
  474.     var hmd_conf_str = m_storage.get("hmd_conf", "b4w");
  475.     var hmd_conf_data = JSON.parse(hmd_conf_str? hmd_conf_str: "{}");
  477.     if (ignore_storage) {
  478.         _param_values["first_distortion"] = DEFAULT_FIRST_DISTORTION;
  479.         _param_values["second_distortion"] = DEFAULT_SECOND_DISTORTION;
  480.         _param_values["bevel_size"] = bevel_mm || DEFAULT_BEVEL_SIZE;
  481.         _param_values["screen_width"] = width_dpmm || DEFAULT_SCREEN_WIDTH;
  482.         _param_values["screen_height"] = height_dpmm || DEFAULT_SCREEN_HEIGHT;
  483.         _param_values["screen_lense"] = DEFAULT_SCREEN_LENSE_DIST;
  484.         _param_values["ipd"] = DEFAULT_EYE_DISTANCE;
  485.         _param_values["baseline"] = DEFAULT_BASELINE_DIST;
  486.     } else {
  487.         _param_values["first_distortion"] = "first_distortion" in hmd_conf_data?
  488.                 parseFloat(hmd_conf_data["first_distortion"]):
  489.                 DEFAULT_FIRST_DISTORTION;
  490.         _param_values["second_distortion"] = "second_distortion" in hmd_conf_data?
  491.                 parseFloat(hmd_conf_data["second_distortion"]):
  492.                 DEFAULT_SECOND_DISTORTION;
  493.         _param_values["bevel_size"] = "bevel_size" in hmd_conf_data?
  494.                 parseFloat(hmd_conf_data["bevel_size"]):
  495.                 bevel_mm || DEFAULT_BEVEL_SIZE;
  496.         _param_values["screen_width"] = "screen_width" in hmd_conf_data?
  497.                 parseFloat(hmd_conf_data["screen_width"]):
  498.                 width_dpmm || DEFAULT_SCREEN_WIDTH;
  499.         _param_values["screen_height"] = "screen_height" in hmd_conf_data?
  500.                 parseFloat(hmd_conf_data["screen_height"]):
  501.                 height_dpmm || DEFAULT_SCREEN_HEIGHT;
  502.         _param_values["screen_lense"] = "screen_lense" in hmd_conf_data?
  503.                 parseFloat(hmd_conf_data["screen_lense"]):
  504.                 DEFAULT_SCREEN_LENSE_DIST;
  505.         _param_values["ipd"] = "ipd" in hmd_conf_data?
  506.                 parseFloat(hmd_conf_data["ipd"]): DEFAULT_EYE_DISTANCE;
  507.         _param_values["baseline"] = "baseline" in hmd_conf_data?
  508.                 parseFloat(hmd_conf_data["baseline"]): DEFAULT_BASELINE_DIST;
  509.     }
  511.     _update = true;
  512. }
  514. function save_changes() {
  515.     m_storage.set("hmd_conf", JSON.stringify(_param_values), "b4w");
  516.     hide();
  517. }
  519. function update_params() {
  520.     if (_update) {
  521.         var device = m_input.get_device_by_type_element(m_input.DEVICE_HMD);
  522.         if (device) {
  523.             m_input.set_config(device, m_input.HMD_DISTORTION,
  524.                     [_param_values["first_distortion"], _param_values["second_distortion"]]);
  526.             if (m_input.get_value_param(device, m_input.HMD_WEBVR_TYPE) &
  527.                     (m_input.HMD_NON_WEBVR | m_input.HMD_WEBVR_MOBILE)) {
  528.                 m_input.set_config(device, m_input.HMD_BEVEL_SIZE,
  529.                         _param_values["bevel_size"] * MM_TO_M);
  530.                 m_input.set_config(device, m_input.HMD_SCREEN_WIDTH,
  531.                         _param_values["screen_width"] * MM_TO_M);
  532.                 m_input.set_config(device, m_input.HMD_SCREEN_HEIGHT,
  533.                         _param_values["screen_height"] * MM_TO_M);
  534.                 m_input.set_config(device, m_input.HMD_SCREEN_LENS_DIST,
  535.                         _param_values["screen_lense"] * MM_TO_M);
  536.                 m_input.set_config(device, m_input.HMD_EYE_DISTANCE,
  537.                         _param_values["ipd"] * MM_TO_M);
  538.                 m_input.set_config(device, m_input.HMD_BASELINE_DIST,
  539.                         _param_values["baseline"] * MM_TO_M);
  540.             }
  541.         }
  542.         _update = false;
  543.     }
  545. }
  547. function change_slider_cb(e) {
  548.     var id = e.target.id;
  549.     var id_list = id.split("_");
  550.     var value_id = id_list.splice(0, id_list.length - 1).join("_");
  551.     if (value_id in _param_values && _param_values[value_id] != e.target.value) {
  552.         _update = true;
  553.         _param_values[value_id] = e.target.value;
  555.         var slider = document.getElementById(value_id + "_slider");
  556.         slider.value = e.target.value;
  558.         var number = document.getElementById(value_id + "_number");
  559.         number.value = e.target.value;
  560.     }
  561. }
  563. function create_param(param, i) {
  564.     var param_cont = document.createElement("div");
  566.     var label_d = document.createElement("label");
  567.     label_d.className = "text_label";
  569.     var margin_right = "8px";
  571.     if (i%2)
  572.         margin_right = "0";
  574.     label_d.style.cssText =
  575.         "background-color: #323232;" +
  576.         "border: 2px solid rgba(98, 98, 98, .2);" +
  577.         "border-radius: 2px;" +
  578.         "width: 100%;" +
  579.         "height: 30px;" +
  580.         "display: block;" +
  581.         "font-size: 16px;" +
  582.         "font-weight: normal;" +
  583.         "color: #fff;" +
  584.         "cursor: pointer;" +
  585.         "text-decoration: none;" +
  586.         "text-align: left;" +
  587.         "padding-left: 8px;" +
  588.         "line-height: 28px;" +
  589.         "margin-bottom: 4px;" +
  590.         "box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);";
  592.     label_d.textContent = param.label;
  593.     param_cont.appendChild(label_d);
  595.     param_cont.style.cssText = 
  596.         "margin-top: 16px;" +
  597.         "float: left;" +
  598.         "width: 240px;" +
  599.         "margin-right: " + margin_right + ";" +
  600.         "border-top: 2px solid rgba(98, 98, 98, .4);" +
  601.         "box-sizing: border-box;" +
  602.         "-webkit-box-sizing: border-box;" +
  603.         "padding-top: 8px;";
  605.     for (var j = 0; j < param.inputs.length; j++) {
  606.         var input_data = param.inputs[j];
  607.         var slider = create_slider(input_data);
  608.         param_cont.appendChild(slider);
  609.     }
  611.     return param_cont;
  612. }
  614. function create_slider(input_data) {
  615.     var container = document.createElement("div");
  616.     container.className = "row";
  618.     var input_s = document.createElement("input");
  619.     input_s.className = "input_slider";
  621.     input_s.style.cssText =
  622.         "-webkit-appearance: none;" +
  623.         "width: 192px;" +
  624.         "display: block;" +
  625.         "float: left;" +
  626.         "height: 8px;" +
  627.         "margin-bottom: 16px;" +
  628.         "margin-top: 16px;" +
  629.         "box-sizing: border-box;" +
  630.         "margin-right: 8px;" +
  631.         "margin-left: 0;";
  633.     input_s.setAttribute("id", input_data.id + "_slider");
  634.     input_s.setAttribute("type", "range");
  635.     input_s.setAttribute("min", "0.00");
  636.     input_s.setAttribute("step", input_data.step);
  637.     input_s.setAttribute("value", _param_values[input_data.id]);
  638.     input_s.setAttribute("max", input_data.max);
  640.     container.appendChild(input_s);
  642.     var input_d = document.createElement("input");
  643.     input_d.className = "input_text";
  644.     input_d.setAttribute("id", input_data.id + "_number");
  645.     input_d.setAttribute("type", "number");
  646.     input_d.setAttribute("min", "0.00");
  647.     input_d.setAttribute("step", input_data.step);
  648.     input_d.setAttribute("value", _param_values[input_data.id]);
  649.     input_d.setAttribute("max", input_data.max);
  650.     container.appendChild(input_d);
  651.     input_d.style.cssText =
  652.         "background-color: #323232;" +
  653.         "border: 2px solid rgba(98, 98, 98, .2);" +
  654.         "border-radius: 2px;" +
  655.         "width: 40px;" +
  656.         "height: 30px;" +
  657.         "display: block;" +
  658.         "float: left;" +
  659.         "font-size: 16px;" +
  660.         "font-weight: normal;" +
  661.         "color: #fff;" +
  662.         "cursor: pointer;" +
  663.         "text-decoration: none;" +
  664.         "text-align: center;" +
  665.         "box-sizing: border-box;" +
  666.         "line-height: 28px;" +
  667.         "margin-top: 4px;" +
  668.         "margin-right: 0;" +
  669.         "margin-left: 0;" +
  670.         "box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);";
  672.     if (m_util.is_ie11()) {
  673.         input_s.onchange = change_slider_cb;
  674.         input_d.onchange = change_slider_cb;
  675.     } else {
  676.         input_s.oninput = change_slider_cb;
  677.         input_d.oninput = change_slider_cb;
  678.     }
  680.     return container;
  681. }
  683. function create_buttons() {
  684.     var buttons_container = document.createElement("div");
  685.     var hmd_submit_button = create_button(save_changes, "SAVE", "4px");
  686.     var hmd_cancel_button = create_button(hide, "CANCEL", "4px");
  687.     var hmd_reset_button = create_button(reset, "RESET", "0px");
  689.     buttons_container.className = "row";
  690.     buttons_container.style.cssText =
  691.         "padding-top: 32px;" +
  692.         "clear: both;" +
  693.         "box-sizing: border-box;" +
  694.         "-webkit-box-sizing: border-box;";
  696.     buttons_container.appendChild(hmd_submit_button);
  697.     buttons_container.appendChild(hmd_cancel_button);
  698.     buttons_container.appendChild(hmd_reset_button);
  700.     // var common_style = "margin: 20px 0;" +
  701.     //                    "border: 0;" +
  702.     //                    "background-color: #337ab7;" +
  703.     //                    "border-radius: 4px;" +
  704.     //                    "margin-right:10px;" +
  705.     //                    "color:#fff;" +
  706.     //                    "padding: 10px 15px;" +
  707.     //                    "margin-right: 5px;" +
  708.     //                    "cursor:pointer;";
  710.     // hmd_submit_button.style.cssText = common_style;
  711.     // hmd_cancel_button.style.cssText = common_style;
  712.     // hmd_reset_button.style.cssText = common_style;
  714.     return buttons_container;
  715. }
  717. function create_button(callback, text_content, margin_right) {
  718.     var button = document.createElement("button");
  719.     button.onclick = callback;
  720.     button.style.cssText =
  721.         "background-color: #323232;" +
  722.         "border: 2px solid rgba(98, 98, 98, .2);" +
  723.         "border-radius: 2px;" +
  724.         "width: 160px;" +
  725.         "height: 30px;" +
  726.         "display: block;" +
  727.         "float: left;" +
  728.         "font-size: 16px;" +
  729.         "font-weight: normal;" +
  730.         "color: #fff;" +
  731.         "cursor: pointer;" +
  732.         "text-decoration: none;" +
  733.         "text-align: center;" +
  734.         "padding-left: 8px;" +
  735.         "line-height: 28px;" +
  736.         "margin-right:" + margin_right + ";" +
  737.         "box-shadow: 0px 0px 4px 0px rgba(98, 98, 98, .8);";
  739.     button.innerHTML = text_content;
  740.     return button;
  741. }
  744. /*
  745.  * Copyright 2015 Google Inc. All Rights Reserved.
  746.  * Licensed under the Apache License, Version 2.0 (the "License");
  747.  * you may not use this file except in compliance with the License.
  748.  * You may obtain a copy of the License at
  749.  *
  750.  *     http://www.apache.org/licenses/LICENSE-2.0
  751.  *
  752.  * Unless required by applicable law or agreed to in writing, software
  753.  * distributed under the License is distributed on an "AS IS" BASIS,
  754.  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  755.  * See the License for the specific language governing permissions and
  756.  * limitations under the License.
  757.  */
  758. var DPDB = {"_comment":"AUTOMATICALLY GENERATED BY generate_dpdb.py. DO NOT EDIT.","format":1,"last_updated":"2016-01-26T23:11:18Z","devices":[{"type":"android","rules":[{"mdmh":"asus/*/Nexus 7/*"},{"ua":"Nexus 7"}],"dpi":[320.8,323],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"asus/*/ASUS_Z00AD/*"},{"ua":"ASUS_Z00AD"}],"dpi":[403,404.6],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"HTC/*/HTC6435LVW/*"},{"ua":"HTC6435LVW"}],"dpi":[449.7,443.3],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"HTC/*/HTC One XL/*"},{"ua":"HTC One XL"}],"dpi":[315.3,314.6],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"htc/*/Nexus 9/*"},{"ua":"Nexus 9"}],"dpi":289,"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"HTC/*/HTC One M9/*"},{"ua":"HTC One M9"}],"dpi":[442.5,443.3],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"HTC/*/HTC One_M8/*"},{"ua":"HTC One_M8"}],"dpi":[449.7,447.4],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"HTC/*/HTC One/*"},{"ua":"HTC One"}],"dpi":472.8,"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"Huawei/*/Nexus 6P/*"},{"ua":"Nexus 6P"}],"dpi":[515.1,518],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"LGE/*/Nexus 5X/*"},{"ua":"Nexus 5X"}],"dpi":[422,419.9],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"LGE/*/LGMS345/*"},{"ua":"LGMS345"}],"dpi":[221.7,219.1],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"LGE/*/LG-D800/*"},{"ua":"LG-D800"}],"dpi":[422,424.1],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"LGE/*/LG-D850/*"},{"ua":"LG-D850"}],"dpi":[537.9,541.9],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"LGE/*/VS985 4G/*"},{"ua":"VS985 4G"}],"dpi":[537.9,535.6],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"LGE/*/Nexus 5/*"},{"ua":"Nexus 5 B"}],"dpi":[442.4,444.8],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"LGE/*/Nexus 4/*"},{"ua":"Nexus 4"}],"dpi":[319.8,318.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"LGE/*/LG-P769/*"},{"ua":"LG-P769"}],"dpi":[240.6,247.5],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"LGE/*/LGMS323/*"},{"ua":"LGMS323"}],"dpi":[206.6,204.6],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"LGE/*/LGLS996/*"},{"ua":"LGLS996"}],"dpi":[403.4,401.5],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"Micromax/*/4560MMX/*"},{"ua":"4560MMX"}],"dpi":[240,219.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"Micromax/*/A250/*"},{"ua":"Micromax A250"}],"dpi":[480,446.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"Micromax/*/Micromax AQ4501/*"},{"ua":"Micromax AQ4501"}],"dpi":240,"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"motorola/*/DROID RAZR/*"},{"ua":"DROID RAZR"}],"dpi":[368.1,256.7],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"motorola/*/XT830C/*"},{"ua":"XT830C"}],"dpi":[254,255.9],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"motorola/*/XT1021/*"},{"ua":"XT1021"}],"dpi":[254,256.7],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"motorola/*/XT1023/*"},{"ua":"XT1023"}],"dpi":[254,256.7],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"motorola/*/XT1028/*"},{"ua":"XT1028"}],"dpi":[326.6,327.6],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"motorola/*/XT1034/*"},{"ua":"XT1034"}],"dpi":[326.6,328.4],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"motorola/*/XT1053/*"},{"ua":"XT1053"}],"dpi":[315.3,316.1],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"motorola/*/XT1562/*"},{"ua":"XT1562"}],"dpi":[403.4,402.7],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"motorola/*/Nexus 6/*"},{"ua":"Nexus 6 B"}],"dpi":[494.3,489.7],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"motorola/*/XT1063/*"},{"ua":"XT1063"}],"dpi":[295,296.6],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"motorola/*/XT1064/*"},{"ua":"XT1064"}],"dpi":[295,295.6],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"motorola/*/XT1092/*"},{"ua":"XT1092"}],"dpi":[422,424.1],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"motorola/*/XT1095/*"},{"ua":"XT1095"}],"dpi":[422,423.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"OnePlus/*/A0001/*"},{"ua":"A0001"}],"dpi":[403.4,401],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"OnePlus/*/ONE E1005/*"},{"ua":"ONE E1005"}],"dpi":[442.4,441.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"OnePlus/*/ONE A2005/*"},{"ua":"ONE A2005"}],"dpi":[391.9,405.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"OPPO/*/X909/*"},{"ua":"X909"}],"dpi":[442.4,444.1],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/GT-I9082/*"},{"ua":"GT-I9082"}],"dpi":[184.7,185.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G360P/*"},{"ua":"SM-G360P"}],"dpi":[196.7,205.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/Nexus S/*"},{"ua":"Nexus S"}],"dpi":[234.5,229.8],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/GT-I9300/*"},{"ua":"GT-I9300"}],"dpi":[304.8,303.9],"bw":5,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/SM-T230NU/*"},{"ua":"SM-T230NU"}],"dpi":216,"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/SGH-T399/*"},{"ua":"SGH-T399"}],"dpi":[217.7,231.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-N9005/*"},{"ua":"SM-N9005"}],"dpi":[386.4,387],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/SAMSUNG-SM-N900A/*"},{"ua":"SAMSUNG-SM-N900A"}],"dpi":[386.4,387.7],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/GT-I9500/*"},{"ua":"GT-I9500"}],"dpi":[442.5,443.3],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/GT-I9505/*"},{"ua":"GT-I9505"}],"dpi":439.4,"bw":4,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G900F/*"},{"ua":"SM-G900F"}],"dpi":[415.6,431.6],"bw":5,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G900M/*"},{"ua":"SM-G900M"}],"dpi":[415.6,431.6],"bw":5,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G800F/*"},{"ua":"SM-G800F"}],"dpi":326.8,"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G906S/*"},{"ua":"SM-G906S"}],"dpi":[562.7,572.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/GT-I9300/*"},{"ua":"GT-I9300"}],"dpi":[306.7,304.8],"bw":5,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-T535/*"},{"ua":"SM-T535"}],"dpi":[142.6,136.4],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/SM-N920C/*"},{"ua":"SM-N920C"}],"dpi":[515.1,518.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/GT-I9300I/*"},{"ua":"GT-I9300I"}],"dpi":[304.8,305.8],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/GT-I9195/*"},{"ua":"GT-I9195"}],"dpi":[249.4,256.7],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/SPH-L520/*"},{"ua":"SPH-L520"}],"dpi":[249.4,255.9],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SAMSUNG-SGH-I717/*"},{"ua":"SAMSUNG-SGH-I717"}],"dpi":285.8,"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SPH-D710/*"},{"ua":"SPH-D710"}],"dpi":[217.7,204.2],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/GT-N7100/*"},{"ua":"GT-N7100"}],"dpi":265.1,"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SCH-I605/*"},{"ua":"SCH-I605"}],"dpi":265.1,"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/Galaxy Nexus/*"},{"ua":"Galaxy Nexus"}],"dpi":[315.3,314.2],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-N910H/*"},{"ua":"SM-N910H"}],"dpi":[515.1,518],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-N910C/*"},{"ua":"SM-N910C"}],"dpi":[515.2,520.2],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G130M/*"},{"ua":"SM-G130M"}],"dpi":[165.9,164.8],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G928I/*"},{"ua":"SM-G928I"}],"dpi":[515.1,518.4],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G920F/*"},{"ua":"SM-G920F"}],"dpi":580.6,"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G920P/*"},{"ua":"SM-G920P"}],"dpi":[522.5,577],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G925F/*"},{"ua":"SM-G925F"}],"dpi":580.6,"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"samsung/*/SM-G925V/*"},{"ua":"SM-G925V"}],"dpi":[522.5,576.6],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"Sony/*/C6903/*"},{"ua":"C6903"}],"dpi":[442.5,443.3],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"Sony/*/D6653/*"},{"ua":"D6653"}],"dpi":[428.6,427.6],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"Sony/*/E6653/*"},{"ua":"E6653"}],"dpi":[428.6,425.7],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"Sony/*/E6853/*"},{"ua":"E6853"}],"dpi":[403.4,401.9],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"Sony/*/SGP321/*"},{"ua":"SGP321"}],"dpi":[224.7,224.1],"bw":3,"ac":500},{"type":"android","rules":[{"mdmh":"TCT/*/ALCATEL ONE TOUCH Fierce/*"},{"ua":"ALCATEL ONE TOUCH Fierce"}],"dpi":[240,247.5],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"THL/*/thl 5000/*"},{"ua":"thl 5000"}],"dpi":[480,443.3],"bw":3,"ac":1000},{"type":"android","rules":[{"mdmh":"ZTE/*/ZTE Blade L2/*"},{"ua":"ZTE Blade L2"}],"dpi":240,"bw":3,"ac":500},{"type":"ios","rules":[{"res":[640,960]}],"dpi":[325.1,328.4],"bw":4,"ac":1000},{"type":"ios","rules":[{"res":[640,1136]}],"dpi":[317.1,320.2],"bw":3,"ac":1000},{"type":"ios","rules":[{"res":[750,1334]}],"dpi":326.4,"bw":4,"ac":1000},{"type":"ios","rules":[{"res":[1242,2208]}],"dpi":[453.6,458.4],"bw":4,"ac":1000},{"type":"ios","rules":[{"res":[1125,2001]}],"dpi":[410.9,415.4],"bw":4,"ac":1000}]}
  760. };
  762. var hmd_conf_factory = register("hmd_conf", HMD_config);
  764. export default hmd_conf_factory;