Changeset 5f05e83 in OpenWorkouts-current


Ignore:
Timestamp:
Feb 5, 2019, 5:15:13 PM (5 years ago)
Author:
Borja Lopez <borja@…>
Branches:
current, feature/docs, master
Children:
3169fe4
Parents:
d52ba50
git-author:
Borja Lopez <borja@…> (02/05/19 16:50:41)
git-committer:
Borja Lopez <borja@…> (02/05/19 17:15:13)
Message:

Replaced Leaflet.Elevation with a newer, improved version (fork of the original)

Done some clean-up of the map javascript code, removed old tests and WIP code
that is not needed anymore.

IMPORTANT: After pulling this patch, run js_deps to install the new version of
leaflet elevation:

./bin/js_deps

Files:
1 added
3 edited

Legend:

Unmodified
Added
Removed

  • bin/js_deps

    rd52ba50 r5f05e83  
    179179
    180180leaflet_elevation() {
    181     NAME="Leaflet.Elevation"
    182     VERSION="master"
    183     URL=https://github.com/MrMufflon/${NAME}/archive/${VERSION}.tar.gz
     181    NAME="leaflet-elevation"
     182    VERSION="0.0.8"
     183    URL=https://github.com/Raruto/${NAME}/archive/${VERSION}.tar.gz
    184184    check_cache ${NAME} ${VERSION}
    185185    in_cache=$?

  • ow/static/js/ow.js

    rd52ba50 r5f05e83  
    3535    var gpx;
    3636    var elevation;
    37     var ow_charts;
    3837
    3938    var create_map = function create_map(latitude, longitude, zoom) {
    … …  
    5251           This has to be called *after* create_map and *before* load_gpx.
    5352        */
     53
    5454        elevation = L.control.elevation({
    5555            position: "bottomright",
    56             theme: "steelblue-theme", //default: lime-theme
    57             width: 600,
    58             height: 125,
    59             margins: {
    60                 top: 10,
    61                 right: 20,
    62                 bottom: 30,
    63                 left: 50
    64             },
     56            theme: "openworkouts-theme",
    6557            useHeightIndicator: true, //if false a marker is drawn at map position
    66             interpolation: "linear", //see https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-area_interpolate
    67             hoverNumber: {
    68                 decimalsX: 3, //decimals on distance (always in km)
    69                 decimalsY: 0, //deciamls on height (always in m)
    70                 formatter: undefined //custom formatter function may be injected
    71             },
    72             xTicks: undefined, //number of ticks in x axis, calculated by default according to width
    73             yTicks: undefined, //number of ticks on y axis, calculated by default according to height
    74             collapsed: false    //collapsed mode, show chart on click or mouseover
    75         });
    76 
    77         var ele_container = elevation.addTo(map);
    78         /* document.getElementById('ow-analysis').appendChild(
    79             ele_container._container); */
     58            interpolation: d3.curveLinear,
     59            elevationDiv: "#elevation",
     60            detachedView: true,
     61            responsiveView: true,
     62            gpxOptions: {
     63                async: true,
     64                marker_options: {
     65                    startIconUrl: null,
     66                    endIconUrl: null,
     67                    shadowUrl: null,
     68                },
     69                polyline_options: {
     70                    color: '#EE4056',
     71                    opacity: 0.75,
     72                    weight: 5,
     73                    lineCap: 'round'
     74                },
     75            },
     76        });
     77        elevation.loadGPX(map, gpx_url);
     78        // var ele_container = elevation.addTo(map);
    8079    };
    8180
    … …  
    101100            gpx.on("addline",function(e){
    102101                elevation.addData(e.line);
    103                 // ow_charts.addData(e.line);
    104102            });
    105103        };
    … …  
    114112            add_elevation_chart();
    115113        }
    116         // add_ow_charts();
    117         load_gpx(gpx_url);
     114        // load_gpx(gpx_url);
    118115    };
    119116

  • ow/templates/workout.pt

    rd52ba50 r5f05e83  
    1717          href="${request.static_url('ow:static/components/Leaflet/leaflet.css')}" />
    1818    <link rel="stylesheet" tal:condition="context.has_gpx"
    19           href="${request.static_url('ow:static/components/Leaflet.Elevation/dist/leaflet.elevation-0.0.4.css')}" />
     19          href="${request.static_url('ow:static/components/leaflet-elevation/leaflet-elevation.css')}" />
     20    <link rel="stylesheet"
     21          href="${request.static_url('ow:static/css/leaflet-elevation.css')}" />
    2022  </metal:css>
    2123
    … …  
    3638          <li>
    3739            <a href="" i18n:translate=""
    38              tal:attributes="href request.resource_url(context, 'edit')">
    39             edit workout
     40               tal:attributes="href request.resource_url(context, 'edit')">
     41              edit workout
    4042            </a>
    4143          </li>
    4244          <li>
    4345            <a href="" i18n:translate=""
    44              tal:attributes="href request.resource_url(context, 'update-from-file')">
    45             update with tracking file
     46               tal:attributes="href request.resource_url(context, 'update-from-file')">
     47              update with tracking file
    4648            </a>
    4749          </li>
    4850          <li class="owo-del"><a href="" i18n:translate=""
    49              tal:attributes="href request.resource_url(context, 'delete')">
     51                                 tal:attributes="href request.resource_url(context, 'delete')">
    5052            delete
    51             </a>
     53          </a>
    5254          </li>
    5355        </ul>
    … …  
    7274            <span><tal:t i18n:translate="">Speed</tal:t></span>
    7375            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
    74             <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c>km/h</span>
     76              <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c>km/h</span>
    7577            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
    76             <tal:c tal:content="round(context.speed['max'], 1)"></tal:c>km/h</span>
     78              <tal:c tal:content="round(context.speed['max'], 1)"></tal:c>km/h</span>
    7779          </li>
    7880          <li tal:condition="hr">
    7981            <span><tal:t i18n:translate="">Heart Rate</tal:t></span>
    8082            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
    81             <tal:c tal:content="hr['avg']"></tal:c>bpm</span>
     83              <tal:c tal:content="hr['avg']"></tal:c>bpm</span>
    8284            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
    83             <tal:c tal:content="hr['max']"></tal:c> bpm</span>
     85              <tal:c tal:content="hr['max']"></tal:c> bpm</span>
    8486          </li>
    8587          <li tal:condition="cad">
    8688            <span><tal:t i18n:translate="">Cadence</tal:t></span>
    8789            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
    88             <tal:c tal:content="cad['avg']"></tal:c></span>
     90              <tal:c tal:content="cad['avg']"></tal:c></span>
    8991            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
    90             <tal:c tal:content="cad['max']"></tal:c></span>
     92              <tal:c tal:content="cad['max']"></tal:c></span>
    9193          </li>
    9294          <li tal:condition="atemp">
    9395            <span><tal:t i18n:translate="">Temperature</tal:t></span>
    9496            <span class="min"><tal:t i18n:translate="">Min.</tal:t>
    95             <tal:c tal:content="atemp['min']"></tal:c>℃</span>
     97              <tal:c tal:content="atemp['min']"></tal:c>℃</span>
    9698            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
    97             <tal:c tal:content="atemp['avg']"></tal:c>℃</span>
     99              <tal:c tal:content="atemp['avg']"></tal:c>℃</span>
    98100            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
    99             <tal:c tal:content="atemp['max']"></tal:c>℃</span>
     101              <tal:c tal:content="atemp['max']"></tal:c>℃</span>
    100102          </li>
    101103        </ul>
     104        <div id="elevation"></div>
    102105      </div>
    103106    </div>
     107
    104108    <!--! Track map -->
    105109    <div id="map" tal:condition="context.has_gpx"></div>
    106 
    107     <!--! Additional map controls -->
    108 
    109     <div id="ow-analysis">
    110 
    111       <!--!
    112           FIXME: the list of available charts should come from the workout
    113           details, based on which data this workout has
    114         -->
    115       <!--! All those ids are needed for the leaflet openworkouts plugin -->
    116       <tal:r tal:repeat="chart ['elevation', 'heartrate', 'cadence', 'temperature']">
    117         <div id="ow-" tal:attributes="id 'ow-' + chart">
    118           <div class="ow-average" id=""
    119                tal:attributes="id 'ow-' + chart + '-average'"></div>
    120           <div class="ow-chart" id=""
    121                tal:attributes="id 'ow-' + chart + '-chart'"></div>
    122           <div class="ow-current" id=""
    123                tal:attributes="id 'ow-' + chart + '-current'"></div>
    124         </div>
    125       </tal:r>
    126 
    127     </div>
    128110  </metal:content>
    129111
    130112  <metal:body-js metal:fill-slot="body-js">
    131113
    132 
    133     <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    134     <!--
    135     <script src="${request.static_url('ow:static/d3/d3.min.js')}"
     114    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"
    136115            tal:condition="context.has_gpx"></script>
    137     -->
    138116
    139117    <script src="${request.static_url('ow:static/components/Leaflet/leaflet.js')}"
    … …  
    143121            tal:condition="context.has_gpx"></script>
    144122
    145     <script src="${request.static_url('ow:static/components/Leaflet.Elevation/dist/leaflet.elevation-0.0.4.min.js')}"
     123    <script src="${request.static_url('ow:static/components/leaflet-elevation/leaflet-elevation.js')}"
    146124            tal:condition="context.has_gpx"></script>
    147125
Note: See TracChangeset for help on using the changeset viewer.