From 79505e42eda71fe93c266015a45f200b39a79a91 Mon Sep 17 00:00:00 2001 From: Dominic Clifton Date: Thu, 4 Sep 2014 02:59:31 +0100 Subject: [PATCH] Show model diagram on motors tab. When testing motors it's more useful to have it present on the motors tab so you don't have to keep cross-referencing the initial setup tab. --- js/model.js | 84 +++++++++++++++++++++++++++++++++++++++++ main.css | 32 ++++++++++++++++ main.html | 1 + tabs/initial_setup.css | 26 +------------ tabs/initial_setup.html | 6 ++- tabs/initial_setup.js | 82 +--------------------------------------- tabs/motor_outputs.css | 5 +++ tabs/motor_outputs.html | 6 +++ tabs/motor_outputs.js | 2 + 9 files changed, 138 insertions(+), 106 deletions(-) create mode 100644 js/model.js diff --git a/js/model.js b/js/model.js new file mode 100644 index 0000000000..b852a41d82 --- /dev/null +++ b/js/model.js @@ -0,0 +1,84 @@ +'use strict'; + +function update_model(multiType) { + + // Display multiType and motor diagram (if such exist) + var str = ''; + switch (multiType) { + case 1: // TRI + str = 'TRI'; + $('.modelMixDiagram').attr('src', './images/motor_order/tri.svg').addClass('modelMixTri'); + break; + case 2: // QUAD + + str = 'Quad +'; + $('.modelMixDiagram').attr('src', './images/motor_order/quadp.svg').addClass('modelMixQuadP'); + break; + case 3: // QUAD X + str = 'Quad X'; + $('.modelMixDiagram').attr('src', './images/motor_order/quadx.svg').addClass('modelMixQuadX'); + break; + case 4: // BI + str = 'BI'; + break; + case 5: // GIMBAL + str = 'Gimbal'; + break; + case 6: // Y6 + str = 'Y6'; + $('.modelMixDiagram').attr('src', './images/motor_order/y6.svg').addClass('modelMixY6'); + break; + case 7: // HEX 6 + str = 'HEX 6'; + $('.modelMixDiagram').attr('src', './images/motor_order/hex6p.svg').addClass('modelMixHex6P'); + break; + case 8: // FLYING_WING + str = 'Flying Wing'; + break; + case 9: // Y4 + str = 'Y4'; + $('.modelMixDiagram').attr('src', './images/motor_order/y4.svg').addClass('modelMixY4'); + break; + case 10: // HEX6 X + str = 'HEX6 X'; + $('.modelMixDiagram').attr('src', './images/motor_order/hex6x.svg').addClass('modelMixHex6X'); + break; + case 11: // OCTO X8 + case 12: + case 13: + str = 'OCTO X8'; + $('.modelMixDiagram').attr('src', './images/motor_order/octox.svg').addClass('modelMixOctoX'); + break; + case 14: // AIRPLANE + str = 'Airplane'; + $('.modelMixDiagram').attr('src', './images/motor_order/airplane.svg').addClass('modelMixAirplane'); + break; + case 15: // Heli 120 + str = 'Heli 120'; + break; + case 16: // Heli 90 + str = 'Heli 90'; + break; + case 17: // Vtail + str = 'Vtail'; + $('.modelMixDiagram').attr('src', './images/motor_order/vtail.svg').addClass('modelMixVtail'); + break; + case 18: // HEX6 H + str = 'HEX6 H'; + $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom'); + break; + case 19: // PPM to SERVO + str = 'PPM to SERVO'; + $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom'); + break; + case 20: // Dualcopter + str = 'Dualcopter'; + $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom'); + break; + case 21: // Singlecopter + str = 'Singlecopter'; + $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom'); + break; + } + + $('span.model').text(chrome.i18n.getMessage('initialSetupModel', [str])); +}; diff --git a/main.css b/main.css index 7fd7d07170..c16f82a35a 100644 --- a/main.css +++ b/main.css @@ -116,6 +116,38 @@ input[type="number"]::-webkit-inner-spin-button { margin: 3px 0 0 5px; } + .modelPanel .model { + float: left; + height: 15px; + margin: 10px 0 0 10px; + + font-weight: bold; + } + +.modelPanel { + position: relative; + width:110px; + height: 150px; + float: left; +} + +.modelPanel .modelMixDiagram { + position: absolute; + + top: 32px; + left: 10px; +} + +.modelPanel .modelMixAirplane { /* Position airplane correctly */ + height: 35%; + padding-left: 0px; +} + +.modelPanel .modelMixCustom { /* Position question mark correctly */ + height: 20%; /* resize question mark */ + padding-left: 25px; +} + #sensor-status { float: right; diff --git a/main.html b/main.html index 9f208cfa81..9d691c71cd 100644 --- a/main.html +++ b/main.html @@ -27,6 +27,7 @@ + diff --git a/tabs/initial_setup.css b/tabs/initial_setup.css index 767e98d902..93b6e49e82 100644 --- a/tabs/initial_setup.css +++ b/tabs/initial_setup.css @@ -53,33 +53,11 @@ border: 1px solid silver; background-color: white; } - #interactive_block .model { - float: left; - height: 15px; - margin: 10px 0 0 10px; - font-weight: bold; - } - - #interactive_block .modelMixDiagram { + #interactive_block .modelPanel { position: absolute; - - top: 32px; - left: 10px; - - height: 30%; /* interactive_block height set to inherit */ } - - #interactive_block .modelMixAirplane { /* Position airplane correctly */ - height: 35%; - padding-left: 0px; - } - - #interactive_block .modelMixCustom { /* Position question mark correctly */ - height: 20%; /* resize question mark */ - padding-left: 25px; - } - + #interactive_block .heading { float: right; height: 15px; diff --git a/tabs/initial_setup.html b/tabs/initial_setup.html index fe226ee27c..0718b7c6f6 100644 --- a/tabs/initial_setup.html +++ b/tabs/initial_setup.html @@ -21,8 +21,10 @@

- - +
+ + +
diff --git a/tabs/initial_setup.js b/tabs/initial_setup.js index 8ebfb0e805..9016d320aa 100644 --- a/tabs/initial_setup.js +++ b/tabs/initial_setup.js @@ -44,86 +44,8 @@ TABS.initial_setup.initialize = function (callback) { $('input[name="pitch"]').val(CONFIG.accelerometerTrims[0]); $('input[name="roll"]').val(CONFIG.accelerometerTrims[1]); - // Display multiType and motor diagram (if such exist) - var str = ''; - switch (CONFIG.multiType) { - case 1: // TRI - str = 'TRI'; - $('.modelMixDiagram').attr('src', './images/motor_order/tri.svg').addClass('modelMixTri'); - break; - case 2: // QUAD + - str = 'Quad +'; - $('.modelMixDiagram').attr('src', './images/motor_order/quadp.svg').addClass('modelMixQuadP'); - break; - case 3: // QUAD X - str = 'Quad X'; - $('.modelMixDiagram').attr('src', './images/motor_order/quadx.svg').addClass('modelMixQuadX'); - break; - case 4: // BI - str = 'BI'; - break; - case 5: // GIMBAL - str = 'Gimbal'; - break; - case 6: // Y6 - str = 'Y6'; - $('.modelMixDiagram').attr('src', './images/motor_order/y6.svg').addClass('modelMixY6'); - break; - case 7: // HEX 6 - str = 'HEX 6'; - $('.modelMixDiagram').attr('src', './images/motor_order/hex6p.svg').addClass('modelMixHex6P'); - break; - case 8: // FLYING_WING - str = 'Flying Wing'; - break; - case 9: // Y4 - str = 'Y4'; - $('.modelMixDiagram').attr('src', './images/motor_order/y4.svg').addClass('modelMixY4'); - break; - case 10: // HEX6 X - str = 'HEX6 X'; - $('.modelMixDiagram').attr('src', './images/motor_order/hex6x.svg').addClass('modelMixHex6X'); - break; - case 11: // OCTO X8 - case 12: - case 13: - str = 'OCTO X8'; - $('.modelMixDiagram').attr('src', './images/motor_order/octox.svg').addClass('modelMixOctoX'); - break; - case 14: // AIRPLANE - str = 'Airplane'; - $('.modelMixDiagram').attr('src', './images/motor_order/airplane.svg').addClass('modelMixAirplane'); - break; - case 15: // Heli 120 - str = 'Heli 120'; - break; - case 16: // Heli 90 - str = 'Heli 90'; - break; - case 17: // Vtail - str = 'Vtail'; - $('.modelMixDiagram').attr('src', './images/motor_order/vtail.svg').addClass('modelMixVtail'); - break; - case 18: // HEX6 H - str = 'HEX6 H'; - $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom'); - break; - case 19: // PPM to SERVO - str = 'PPM to SERVO'; - $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom'); - break; - case 20: // Dualcopter - str = 'Dualcopter'; - $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom'); - break; - case 21: // Singlecopter - str = 'Singlecopter'; - $('.modelMixDiagram').attr("src", './images/motor_order/custom.svg').addClass('modelMixCustom'); - break; - } - - $('span.model').text(chrome.i18n.getMessage('initialSetupModel', [str])); - + update_model(CONFIG.multiType); + // Heading $('span.heading').text(chrome.i18n.getMessage('initialSetupheading', [0])); diff --git a/tabs/motor_outputs.css b/tabs/motor_outputs.css index 88815da7b5..3419cb9a03 100644 --- a/tabs/motor_outputs.css +++ b/tabs/motor_outputs.css @@ -1,3 +1,8 @@ +.wrapper.accelAndModel .wrapper.accel { + float: left; + width: calc(100% - 110px); +} + .tab-motor_outputs .plot_control { float: right; diff --git a/tabs/motor_outputs.html b/tabs/motor_outputs.html index 280f407695..12e505efce 100644 --- a/tabs/motor_outputs.html +++ b/tabs/motor_outputs.html @@ -1,4 +1,9 @@
+
+
+ + +
Accelerometer - [Reset]
@@ -44,6 +49,7 @@
+
Motors
    diff --git a/tabs/motor_outputs.js b/tabs/motor_outputs.js index a4b4df1b7f..e40f52d569 100644 --- a/tabs/motor_outputs.js +++ b/tabs/motor_outputs.js @@ -138,6 +138,8 @@ TABS.motor_outputs.initialize = function (callback) { // translate to user-selected language localize(); + update_model(CONFIG.multiType); + // Always start with default/empty sensor data array, clean slate all initSensorData();