Route Playback

by darcon77

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<select data-bind="options:playbackSpeedCollection, value:playbackSpeed"></select>
<div data-bind="foreach:vehicleRoutes">
    <!-- ko with:currentFrame -->
    <div id="output" data-bind="text:Id"></div>
    <!-- /ko -->
</div>
<div>
    <button type="button" data-bind="click:play">Play</button>
</div>

JavaScript

var data = {
    minDateTime:0,
    maxDateTime:100,
    vehicleRoutes:[
        [
            {Id:0},
            {Id:1},
            {Id:2},
            {Id:3},
            {Id:4},
            {Id:5},
            {Id:6},
            {Id:7},
            {Id:8},
            {Id:9},
            {Id:10},
            {Id:11},
            {Id:12}
        ],
        [
            {Id:0},
            {Id:1},
            {Id:2},
            {Id:3},
            {Id:4},
            {Id:5},
            {Id:6},
            {Id:7},
            {Id:8},
            {Id:9},
            {Id:10},
            {Id:11},
            {Id:12}
        ],
        [
            {Id:0},
            {Id:1},
            {Id:2},
            {Id:3},
            {Id:4},
            {Id:5},
            {Id:6},
            {Id:7},
            {Id:8},
            {Id:9},
            {Id:10},
            {Id:11},
            {Id:12}
        ]
    ]
};

function VehicleRoute(datapoints){
    var base = this, frames = datapoints;
    
    base.currentIndex=ko.observable(0);
    base.currentFrame=ko.computed(function(){
        return frames[Math.min(base.currentIndex(), frames.length-1)];
    });
    base.advanceTo=function(index){
        base.currentIndex(index);
    };
}

var viewModel = (function(data){
    var base = this, playbackTimer = null;
    
    var tempArray = [];
    for(var i=0; i< data.vehicleRoutes.length; i++){
        tempArray.push(new VehicleRoute(data.vehicleRoutes[i]));
    }
    
    base.playbackSpeedCollection = [1,2,3,4,5];
    base.playbackSpeed = ko.observable(3);
    base.currentIndex = ko.observable(0);
    base.vehicleRoutes = ko.observableArray(tempArray);
    
    base.play = function() {
        if(playbackTimer!=null) clearInterval(playbackTimer);
        
        playbackTimer = setInterval(function(){
            if(base.currentIndex() == data.maxDateTime)
                base.currentIndex(0);
            else
               ...