From 900f9252761bb817c573110b933a2e946054f38e Mon Sep 17 00:00:00 2001 From: Henrik Fehlauer Date: Fri, 22 May 2020 18:00:00 +0000 Subject: [PATCH 1/4] Improve incline coding visuals and use different colors for going uphill Currently it is a bit difficult to guess the slope of the route for planning purposes, since even for routes in very hilly terrain the colors hardly change. Only extremely steep hills are indicated, and there is no visual difference between going uphill or downhill. By cutting off earlier, more of the route will show meaningful differences in color. Note that BRouter's gradients are already averaged compared to the maximum gradients shown on road signs, so 15% should be a good compromise (anything steeper is difficult to ride on for longer periods anyway, and rightly deserves to be colored with an alarming red). By using different colors for the min and max parameters, uphill and downhill sections should now be easy to distinguish. By introducing two more color stops, the gradient becomes much smoother, with flat sections featuring a distinctive green, where they were drawn in a muddy dark green before. Note that this approach had been implemented like this in QLandkarte GT for several years now, with great success. --- js/plugin/RoutingPathQuality.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/js/plugin/RoutingPathQuality.js b/js/plugin/RoutingPathQuality.js index 936f481..d1b7944 100644 --- a/js/plugin/RoutingPathQuality.js +++ b/js/plugin/RoutingPathQuality.js @@ -18,12 +18,14 @@ BR.RoutingPathQuality = L.Control.extend({ icon: 'fa-line-chart', provider: new HotLineQualityProvider({ hotlineOptions: { - min: -15, - max: 15, + min: -8.5, + max: 8.5, // angle in degree, == 15% incline palette: { - 0.0: '#ff0000', - 0.5: '#00ff00', - 1.0: '#ff0000' + 0.0: '#0000ff', // blue + 0.25: '#00ffff', // cyan + 0.5: '#00ff00', // green + 0.75: '#ffff00', // yellow + 1.0: '#ff0000' // red }, renderer: renderer }, From 9d648fc1d7202bf47f93d8f65f1c14f247962d49 Mon Sep 17 00:00:00 2001 From: Henrik Fehlauer Date: Sat, 23 May 2020 18:00:00 +0000 Subject: [PATCH 2/4] Make hotline contrast more pleasant Colorful routes can conflict visually with colourful maps, therefore having an outline to make the route stand out more makes sense. However, using black results in very high contrast levels, which can become distracting in itself. By using a dark gray, this should look much more balanced, while still fulfilling the original purpose. --- js/plugin/RoutingPathQuality.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/js/plugin/RoutingPathQuality.js b/js/plugin/RoutingPathQuality.js index d1b7944..64b4872 100644 --- a/js/plugin/RoutingPathQuality.js +++ b/js/plugin/RoutingPathQuality.js @@ -27,6 +27,7 @@ BR.RoutingPathQuality = L.Control.extend({ 0.75: '#ffff00', // yellow 1.0: '#ff0000' // red }, + outlineColor: 'dimgray', renderer: renderer }, valueFunction: function(latLng, prevLatLng) { @@ -44,6 +45,7 @@ BR.RoutingPathQuality = L.Control.extend({ icon: 'fa-area-chart', provider: new HotLineQualityProvider({ hotlineOptions: { + outlineColor: 'dimgray', renderer: renderer }, valueFunction: function(latLng) { @@ -56,6 +58,7 @@ BR.RoutingPathQuality = L.Control.extend({ icon: 'fa-usd', provider: new HotLineQualityProvider({ hotlineOptions: { + outlineColor: 'dimgray', renderer: renderer }, valueFunction: function(latLng) { From 8ca92e260dfd81962cbc55eb30c6087f2e9de889 Mon Sep 17 00:00:00 2001 From: Henrik Fehlauer Date: Sun, 24 May 2020 18:00:00 +0000 Subject: [PATCH 3/4] Improve analysis tab CSS There are some ways the look of the analysis tab can be polished: - Properly right-align the length header (it had extra margins required for the sorting arrows in the data tab) - Use the same font size for table header and body (like in the data tab) - Improve padding of the totals row (to align with the rows above) - Add missing style for headings, so they look more balanced (the CSS was already there, but the wrong class was used in the HTML) - Fine-tune vertical spacing (to help visual grouping) - Remove unused and redundant CSS - Do not show yellow hover effect over table header --- css/style.css | 26 +++++++++++--------------- js/control/TrackAnalysis.js | 12 +++++++++--- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 83e193e..275a51f 100644 --- a/css/style.css +++ b/css/style.css @@ -249,22 +249,21 @@ input#trackname:focus:invalid { margin: 0; } -.track-analysis-header-distance { +table.dataTable.mini .track-analysis-header-distance { text-align: right; + padding-right: 4px; } -.track-analysis-table td { +.track-analysis-table { font-size: small; + padding-bottom: 0.5em; } table.dataTable.track-analysis-table tfoot td { font-weight: bold; text-align: right; - padding-right: 0; -} - -table.track-analysis-table tr:hover { - background-color: rgba(255, 255, 0, 0.3); + padding-right: 4px; + padding-top: 4px; } .track-analysis-title { @@ -276,8 +275,8 @@ table.track-analysis-table tr:hover { } .track-analysis-heading { - margin-top: 15px; - font-weight: bold; + margin-top: 0.7em; + margin-bottom: 0.1em; font-size: 1.2em; } @@ -447,13 +446,10 @@ table.dataTable thead .sorting { background-position: center right -3px; } +table.track-analysis-table tbody tr:hover, table.dataTable.hover tbody tr:hover, -table.dataTable.hover tbody tr.odd:hover, -table.dataTable.hover tbody tr.even:hover, -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.display tbody tr:hover { + background-color: rgba(255, 255, 0, 0.3); } table.dataTable.hover tbody tr:hover.selected, table.dataTable.display tbody tr:hover.selected { diff --git a/js/control/TrackAnalysis.js b/js/control/TrackAnalysis.js index ac6739a..e1e92d7 100644 --- a/js/control/TrackAnalysis.js +++ b/js/control/TrackAnalysis.js @@ -226,11 +226,17 @@ BR.TrackAnalysis = L.Class.extend({ var $content = $('#track_statistics'); $content.html(''); - $content.append($('

' + i18next.t('sidebar.analysis.header.highway') + '

')); + $content.append( + $('

' + i18next.t('sidebar.analysis.header.highway') + '

') + ); $content.append(this.renderTable('highway', analysis.highway)); - $content.append($('

' + i18next.t('sidebar.analysis.header.surface') + '

')); + $content.append( + $('

' + i18next.t('sidebar.analysis.header.surface') + '

') + ); $content.append(this.renderTable('surface', analysis.surface)); - $content.append($('

' + i18next.t('sidebar.analysis.header.smoothness') + '

')); + $content.append( + $('

' + i18next.t('sidebar.analysis.header.smoothness') + '

') + ); $content.append(this.renderTable('smoothness', analysis.smoothness)); }, From 8e65d6a3dd0d20301106c194a04ddcfabb315e4a Mon Sep 17 00:00:00 2001 From: Henrik Fehlauer Date: Mon, 25 May 2020 18:00:00 +0000 Subject: [PATCH 4/4] Show analysis table highlight above quality coding layer (#304) When hovering over rows in the analysis tab, highlighted sections for the route could only be seen on the regular route, but not when any of the color-coded route visualisations were selected. Patch based on a similar fix for data table in d33c795200. --- js/control/TrackAnalysis.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/control/TrackAnalysis.js b/js/control/TrackAnalysis.js index e1e92d7..7c35445 100644 --- a/js/control/TrackAnalysis.js +++ b/js/control/TrackAnalysis.js @@ -18,7 +18,9 @@ BR.TrackAnalysis = L.Class.extend({ overlayStyle: { color: 'yellow', opacity: 0.8, - weight: 8 + weight: 8, + // show above quality coding (pane defined in RoutingPathQuality.js) + pane: 'routingQualityPane' } },