Skip to content

A lightweight, browser-based telemetry log viewer designed for automotive diagnostics collected by MyGiulia Android application. This tool allows users to visualize JSON logs, scan for performance anomalies, and sync files directly from Google Drive.

Notifications You must be signed in to change notification settings

tzebrowski/ObdGraphsLogViewer

Repository files navigation

MyGiulia LOG Viewer

A lightweight, browser-based telemetry log viewer designed for automotive diagnostics generated by the MyGiulia Android application. This tool allows users to visualize JSON logs, scan for performance anomalies, and sync files directly from Google Drive.

Giulia LOG Viewer


☁️ Hosting

The application is automatically built and deployed via GitHub Actions to GitHub Pages: MyGiuliaLogViewer


🚀 Modern Architecture (Vite & ESM)

This project has been migrated from a legacy global-script structure to a modern Vite architecture. This transition ensures a high-performance "Single Package" build and a clean developer experience.

  • Bundler: Vite for ultra-fast development and optimized production builds.
  • Architecture: Fully modular ES Modules (ESM) structure, eliminating global variable pollution.
  • Charts: Chart.js integrated via NPM, utilizing the date-fns adapter and zoom plugin.
  • Linting: Automated code quality enforcement via ESLint (JS) and Stylelint (CSS).

✨ Features

  • Vite-Optimized: Assets are bundled and minified, preventing MIME type errors and ensuring fast load times.
  • Interactive Visualization: High-performance line charts with smooth zooming and panning (supported by Hammer.js).
  • Dual Data Sources:
    • Local: Drag-and-drop JSON file upload for instant analysis.
    • Cloud: Integrated Google Drive sync via the modern Google Identity Services (GSI) and GAPI.
  • Anomaly Detection: Built-in scanner using customizable JSON templates to identify dangerous engine conditions (e.g., "High Load / Spark Retard").
  • Event Highlighting: Automatically identifies and highlights detected anomaly ranges on the chart timeline.
  • Smart Signal Mapping: Uses a strict alias system to map raw telemetry headers to standardized fields.

🛠️ Development & Build

This project requires Node.js to manage dependencies and the build pipeline.

1. Install Dependencies

npm install

About

A lightweight, browser-based telemetry log viewer designed for automotive diagnostics collected by MyGiulia Android application. This tool allows users to visualize JSON logs, scan for performance anomalies, and sync files directly from Google Drive.

Resources

Stars

Watchers

Forks

Packages

No packages published