ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #313 from rkflx/pr/polish-and-fix-route-quality-visuals

Browse source 
Polish color coding + analysis tab visuals and fix a couple of related bugs
This commit is contained in:
Norbert Renner 2020-06-17 10:30:51 +02:00 • committed by GitHub
commit 4ef43652df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

26
css/style.css
View file

@ -249,22 +249,21 @@ input#trackname:focus:invalid {
margin: 0; margin: 0;
} }
.track-analysis-header-distance { table.dataTable.mini .track-analysis-header-distance {
text-align: right; text-align: right;
padding-right: 4px;
} }
.track-analysis-table td { .track-analysis-table {
font-size: small; font-size: small;
padding-bottom: 0.5em;
} }
table.dataTable.track-analysis-table tfoot td { table.dataTable.track-analysis-table tfoot td {
font-weight: bold; font-weight: bold;
text-align: right; text-align: right;
padding-right: 0; padding-right: 4px;
} padding-top: 4px;
table.track-analysis-table tr:hover {
background-color: rgba(255, 255, 0, 0.3);
} }
.track-analysis-title { .track-analysis-title {
@ -276,8 +275,8 @@ table.track-analysis-table tr:hover {
} }
.track-analysis-heading { .track-analysis-heading {
margin-top: 15px; margin-top: 0.7em;
font-weight: bold; margin-bottom: 0.1em;
font-size: 1.2em; font-size: 1.2em;
} }
@ -447,13 +446,10 @@ table.dataTable thead .sorting {
background-position: center right -3px; background-position: center right -3px;
} }
table.track-analysis-table tbody tr:hover,
table.dataTable.hover tbody tr:hover, table.dataTable.hover tbody tr:hover,
table.dataTable.hover tbody tr.odd:hover, table.dataTable.display tbody tr:hover {
table.dataTable.hover tbody tr.even:hover, background-color: rgba(255, 255, 0, 0.3);
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr.odd:hover,
table.dataTable.display tbody tr.even:hover {
background-color: rgba(255, 255, 0, 0.2);
} }
table.dataTable.hover tbody tr:hover.selected, table.dataTable.hover tbody tr:hover.selected,
table.dataTable.display tbody tr:hover.selected { table.dataTable.display tbody tr:hover.selected {

16
js/control/TrackAnalysis.js
View file

@ -18,7 +18,9 @@ BR.TrackAnalysis = L.Class.extend({
overlayStyle: { overlayStyle: {
color: 'yellow', color: 'yellow',
opacity: 0.8, opacity: 0.8,
weight: 8 weight: 8,
// show above quality coding (pane defined in RoutingPathQuality.js)
pane: 'routingQualityPane'
} }
}, },
@ -226,11 +228,17 @@ BR.TrackAnalysis = L.Class.extend({
var $content = $('#track_statistics'); var $content = $('#track_statistics');
$content.html(''); $content.html('');
$content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.highway') + '</h4>')); $content.append(
$('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.highway') + '</h4>')
);
$content.append(this.renderTable('highway', analysis.highway)); $content.append(this.renderTable('highway', analysis.highway));
$content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.surface') + '</h4>')); $content.append(
$('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.surface') + '</h4>')
);
$content.append(this.renderTable('surface', analysis.surface)); $content.append(this.renderTable('surface', analysis.surface));
$content.append($('<h4 class="analysis-heading">' + i18next.t('sidebar.analysis.header.smoothness') + '</h4>')); $content.append(
$('<h4 class="track-analysis-heading">' + i18next.t('sidebar.analysis.header.smoothness') + '</h4>')
);
$content.append(this.renderTable('smoothness', analysis.smoothness)); $content.append(this.renderTable('smoothness', analysis.smoothness));
}, },

15
js/plugin/RoutingPathQuality.js
View file

@ -18,13 +18,16 @@ BR.RoutingPathQuality = L.Control.extend({
icon: 'fa-line-chart', icon: 'fa-line-chart',
provider: new HotLineQualityProvider({ provider: new HotLineQualityProvider({
hotlineOptions: { hotlineOptions: {
min: -15, min: -8.5,
max: 15, max: 8.5, // angle in degree, == 15% incline
palette: { palette: {
0.0: '#ff0000', 0.0: '#0000ff', // blue
0.5: '#00ff00', 0.25: '#00ffff', // cyan
1.0: '#ff0000' 0.5: '#00ff00', // green
0.75: '#ffff00', // yellow
1.0: '#ff0000' // red
}, },
outlineColor: 'dimgray',
renderer: renderer renderer: renderer
}, },
valueFunction: function(latLng, prevLatLng) { valueFunction: function(latLng, prevLatLng) {
@ -42,6 +45,7 @@ BR.RoutingPathQuality = L.Control.extend({
icon: 'fa-area-chart', icon: 'fa-area-chart',
provider: new HotLineQualityProvider({ provider: new HotLineQualityProvider({
hotlineOptions: { hotlineOptions: {
outlineColor: 'dimgray',
renderer: renderer renderer: renderer
}, },
valueFunction: function(latLng) { valueFunction: function(latLng) {
@ -54,6 +58,7 @@ BR.RoutingPathQuality = L.Control.extend({
icon: 'fa-usd', icon: 'fa-usd',
provider: new HotLineQualityProvider({ provider: new HotLineQualityProvider({
hotlineOptions: { hotlineOptions: {
outlineColor: 'dimgray',
renderer: renderer renderer: renderer
}, },
valueFunction: function(latLng) { valueFunction: function(latLng) {