VESC Log Interpreter plugin for Craft CMS 3.x

Process log data from VESC Monitor to generate JS data

Requirements

This plugin requires Craft CMS 3.0.0 or later.

Installation

To install the plugin, follow these instructions.

1. Open your terminal and go to your Craft project:

    cd /path/to/project
   

2. Then tell Composer to load the plugin:

    composer require louwii/vesc-log-interpreter
   

3. In the Control Panel, go to Settings → Plugins and click the “Install” button for VESC Log Interpreter.

VESC Log Interpreter Overview

This plugin is quick specific. It parses data from the CSV files generated by the VESC Monitor Android app and generates nice structured data formatted in javascript to be used with any javascript chart library.

Using VESC Log Interpreter

1. Create a form to submit the VESC Monitor log file

Change the redirect field value to the page you'll be displaying the chart on.

<form action="{{ craft.vescLogInterpreter.formActionUrl }}" class="form form-vesc-log" method="post" accept-charset="UTF-8" enctype="multipart/form-data">
    <input type="hidden" name="{{ craft.app.config.general.csrfTokenName }}" value="{{ craft.app.request.csrfToken }}" />
    <input type="hidden" name="redirect" value="/vesc-log-chart" />
    <div class="form-group">
      <input type="file" class="form-control-file" id="vescLogFile" name="vescLogFile">
    </div>
    <div class="form-group form-check">
      <input class="form-check-input" type="checkbox" value="yes" name="noGeoloc" id="no-geoloc-check">
      <label class="form-check-label" for="no-geoloc-check">
        Don't process geolocation data
      </label>
    </div>
    <div class="form-group form-check">
      <input class="form-check-input" type="checkbox" value="yes" name="noCache" id="no-cache-check">
      <label class="form-check-label" for="no-cache-check">
        Don't store my data
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Send file</button>
</form>

2. On the chart page, use the processed data the way you want. Here's a quick example:

{% for error in craft.vescLogInterpreter.vescLogDataErrors %}
<div class="alert alert-danger" role="alert">
  {{error}}
</div>
{% endfor %}

{% if craft.vescLogInterpreter.vescLogDataDatasets|length > 30 %}
<script type="text/javascript">
    // Array containing the list of x axis labels (time in our case)
    window.labels = {{ craft.vescLogInterpreter.vescLogDataAxisLabels|raw }};
    // Array of datasets, formatted for ChartJS
    window.datasets = {{ craft.vescLogInterpreter.vescLogDataDatasets|raw }};
    // Array containing all labels with english name, unit (if any) and its color on the chart
    window.labelTranslations = {{ craft.vescLogInterpreter.vescLogCsvLabelJsonTranslations|raw }};
</script>
{% endif %}

For geolocation data, you can use it like this:

<script type="text/javascript">

// Array of objects with coordinates for each second
// (the time is formatted just like the x axis labels)
var geoloc = {{ geoLoc|json_encode()|raw }};

</script>

VESC Log Interpreter Roadmap

Some things to do, and ideas for potential features:

• Make it work
• Make an icon
• Release it
• Add more Vesc log file formats from other apps ?

Brought to you by Louwii