blindmotion / dashboard

A tool for displaying both video and charts with data

To better understand what's going on we need a convenient tool to view both videos and telemetry data. It contains video view and line charts with data.

At first you need to select a csv data file in the format specified in the wiki page. We create this csv file with the Sensor Recording program for android.

The data is loaded and will be kept in memory until you upload other csv file.

The chart will show data as soon as you upload srt (Subtitles file) for the video. It will only display the data for the period of video. To show video itself, upload video file that corresponds to the srt file uploaded.

Once everything is set up you can now view video and data for it. Double clicking on chart will play video at the very same moment, where the chart was clicked. You can zoom and scroll chart as you wish.

Additionaly you are able to create a preprocessor for the data if you wish to display say moving average of the gyroscope sensor. You cannot modify the number of axes displayes: x,y,z for accelerometer and gyroscope and one axis for speed, but you can change the values of those axis. The preprocessor will get only data for the interval selected. It is programmed in CoffeeScript.

A preprocessor example (multiplies all accelerometer values by 1.5 and gyro by 1.2):

window.dataPreprocessor = (data) =>
    for el in data

        switch el[0]
            when 1 #accelerometer
                el[3] = el[3] * 1.5 #x
                el[4] = el[4] * 1.5 #y
                el[5] = el[5] * 1.5 #z
            when 4 #gyroscope
                el[3] = el[3] * 1.2 #x
                el[4] = el[4] * 1.2 #y
                el[5] = el[5] * 1.2 #z
            when 'geo' #geodata
                el[9] = el[9] / 2 #speed
                    
    return data

Dashboard should work in any modern browser, however we recommend to use browser on the base of Chromium because it works faster.

dashboard's Issues

Create video player component

Create video player that is able to play our video files on web pages. It should be able to play local files. The video player must be a "subject" in obsever pattern and provide interface for observers to listen to the following events:

• onPlaybackTimeChanged: called when video is being played and notifies observers that the time of playback has been changed. This event is required for charts #2 to update their position.

The video player playback must support play/pause, forward/backward rewind and change of playback speed.

Description on the wiki page:

Add ability to create prefilters to data

It will be useful to add prefilters to data. It's very likely that moving average or some other filter will be applied to it.

This issue must add ability to create javascript prefilters to the data for charts.

Create chart display component

We need a component is able to load data in our format and display it. Most likely it will be some open source js library that can draw line charts. The component will be an observer of our video player #1 and display data for the time that equals to current video playback time.

The data will be loaded from local file with our csv format link.

The following features must be supported:

• show one or several charts simultaneously
• zooming
• displaying data at the position of video playback

Description on the wiki page: