Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-25 01:05:15 +03:00
Code Issues Wiki Activity

Style: Fix graph layout in Sensors tab (#4122)

Browse source 
* Lint: Fix pre-commit lint issue

* Style: Fix graph layout in Sensors tab

* Style: Add missed styles
This commit is contained in:
Vít Semrád 2024-08-04 09:55:45 +02:00 • committed by GitHub
parent 153ad0ef79
commit af94769b53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 345 additions and 329 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/css/main.less
View file

@ -1652,6 +1652,12 @@ each(range(12), {
gap: 1rem;
}
}
.graph-grid {
width: 100%;
display: grid;
gap: 1rem;
grid-template-columns: auto max-content;
}
@media not all and (max-width: 575px) {
.visible-on-phone-only {
display: none !important;

2
src/js/tabs/gps.js
View file

@ -347,7 +347,7 @@ gps.initialize = async function (callback) {
const positionalDop = FC.GPS_DATA.positionalDop / 100;
$('.GPS_info td.positionalDop').text(`${positionalDop.toFixed(2)}`);
}
updateSignalStrengths();
let gpsFoundPosition = false;

666
src/tabs/sensors.html
View file

@ -18,364 +18,374 @@
</div>
</div>
</div>
<div class="wrapper gyro">
<div class="gui_box grey">
<div class="plot_control">
<div class="title" i18n="sensorsGyroTitle"></div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="gyro_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50" selected="selected">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt i18n="sensorsScale"></dt>
<dd class="scale">
<select name="gyro_scale">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000" selected="selected">2000</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
<dt>Y:</dt>
<dd class="y">0</dd>
<dt>Z:</dt>
<dd class="z">0</dd>
</dl>
<div class="graph-grid">
<svg id="gyro">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control">
<div class="title" i18n="sensorsGyroTitle"></div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="gyro_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50" selected="selected">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt i18n="sensorsScale"></dt>
<dd class="scale">
<select name="gyro_scale">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000" selected="selected">2000</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
<dt>Y:</dt>
<dd class="y">0</dd>
<dt>Z:</dt>
<dd class="z">0</dd>
</dl>
</div>
</div>
<svg id="gyro">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div>
</div>
<div class="wrapper accel">
<div class="gui_box grey">
<div class="plot_control">
<div class="title" i18n="sensorsAccelTitle"></div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="accel_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50" selected="selected">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt i18n="sensorsScale"></dt>
<dd class="scale">
<select name="accel_scale">
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
<dt>Y:</dt>
<dd class="y">0</dd>
<dt>Z:</dt>
<dd class="z">0</dd>
</dl>
<div class="graph-grid">
<svg id="accel">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control">
<div class="title" i18n="sensorsAccelTitle"></div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="accel_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50" selected="selected">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt i18n="sensorsScale"></dt>
<dd class="scale">
<select name="accel_scale">
<option value="0.5">0.5</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
<dt>Y:</dt>
<dd class="y">0</dd>
<dt>Z:</dt>
<dd class="z">0</dd>
</dl>
</div>
</div>
<svg id="accel">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div>
</div>
<div class="wrapper mag">
<div class="gui_box grey">
<div class="plot_control">
<div class="title" i18n="sensorsMagTitle"></div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="mag_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50" selected="selected">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt i18n="sensorsScale"></dt>
<dd class="scale">
<select name="mag_scale">
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000" selected="selected">2000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
<dt>Y:</dt>
<dd class="y">0</dd>
<dt>Z:</dt>
<dd class="z">0</dd>
</dl>
<div class="graph-grid">
<svg id="mag">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control">
<div class="title" i18n="sensorsMagTitle"></div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="mag_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50" selected="selected">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt i18n="sensorsScale"></dt>
<dd class="scale">
<select name="mag_scale">
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="1000">1000</option>
<option value="2000" selected="selected">2000</option>
<option value="5000">5000</option>
<option value="10000">10000</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
<dt>Y:</dt>
<dd class="y">0</dd>
<dt>Z:</dt>
<dd class="z">0</dd>
</dl>
</div>
</div>
<svg id="mag">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div>
</div>
<div class="wrapper altitude">
<div class="gui_box grey">
<div class="plot_control">
<div class="title">
<span i18n="sensorsAltitudeTitle"></span>
<div id="sensorsAltitudeHint" class="helpicon cf_tip" i18n_title="sensorsAltitudeHint"></div>
</div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="altitude_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50">50 ms</option>
<option value="100" selected="selected">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
<div class="graph-grid">
<svg id="altitude">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control">
<div class="title">
<span i18n="sensorsAltitudeTitle"></span>
<div id="sensorsAltitudeHint" class="helpicon cf_tip" i18n_title="sensorsAltitudeHint"></div>
</div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="altitude_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50">50 ms</option>
<option value="100" selected="selected">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
</div>
<svg id="altitude">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div>
</div>
<div class="wrapper sonar">
<div class="gui_box grey">
<div class="plot_control">
<div class="title" i18n="sensorsSonarTitle"></div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="sonar_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50">50 ms</option>
<option value="100" selected="selected">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
<div class="graph-grid">
<svg id="sonar">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control">
<div class="title" i18n="sensorsSonarTitle"></div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="sonar_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50">50 ms</option>
<option value="100" selected="selected">100 ms</option>
<option value="250">250 ms</option>
<option value="500">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
</div>
<svg id="sonar">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
</div>
</div>
<div class="wrapper debug">
<div class="gui_box grey">
<div class="plot_control debug0">
<div class="title"><span i18n="sensorsDebugTitle"></span> 0</div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="debug_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500" selected="selected">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
<div class="graph-grid">
<svg id="debug0">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug0">
<div class="title"><span i18n="sensorsDebugTitle"></span> 0</div>
<dl>
<dt i18n="sensorsRefresh"></dt>
<dd class="rate">
<select name="debug_refresh_rate">
<option value="10">10 ms</option>
<option value="20">20 ms</option>
<option value="30">30 ms</option>
<option value="40">40 ms</option>
<option value="50">50 ms</option>
<option value="100">100 ms</option>
<option value="250">250 ms</option>
<option value="500" selected="selected">500 ms</option>
<option value="1000">1000 ms</option>
</select>
</dd>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug1">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug1">
<div class="title"><span i18n="sensorsDebugTitle"></span> 1</div>
<dl>
<dt>X:</dt>
<dd class="x">blue</dd>
</dl>
</div>
<svg id="debug2">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug2">
<div class="title"><span i18n="sensorsDebugTitle"></span> 2</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug3">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug3">
<div class="title"><span i18n="sensorsDebugTitle"></span> 3</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug4">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug4">
<div class="title"><span i18n="sensorsDebugTitle"></span> 4</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug5">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug5">
<div class="title"><span i18n="sensorsDebugTitle"></span> 5</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug6">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug6">
<div class="title"><span i18n="sensorsDebugTitle"></span> 6</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug7">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="plot_control debug7">
<div class="title"><span i18n="sensorsDebugTitle"></span> 7</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
</div>
<svg id="debug0">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug1">
<div class="title"><span i18n="sensorsDebugTitle"></span> 1</div>
<dl>
<dt>X:</dt>
<dd class="x">blue</dd>
</dl>
</div>
<svg id="debug1">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug2">
<div class="title"><span i18n="sensorsDebugTitle"></span> 2</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug2">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug3">
<div class="title"><span i18n="sensorsDebugTitle"></span> 3</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug3">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug4">
<div class="title"><span i18n="sensorsDebugTitle"></span> 4</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug4">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug5">
<div class="title"><span i18n="sensorsDebugTitle"></span> 5</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug5">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug6">
<div class="title"><span i18n="sensorsDebugTitle"></span> 6</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug6">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
<div class="clear-both"></div>
<div class="plot_control debug7">
<div class="title"><span i18n="sensorsDebugTitle"></span> 7</div>
<dl>
<dt>X:</dt>
<dd class="x">0</dd>
</dl>
</div>
<svg id="debug7">
<g class="grid x" transform="translate(40, 120)"></g>
<g class="grid y" transform="translate(40, 10)"></g>
<g class="data" transform="translate(41, 10)"></g>
<g class="axis x" transform="translate(40, 120)"></g>
<g class="axis y" transform="translate(40, 10)"></g>
</svg>
</div>
</div>
</div>