Magna Powertrain Kiosk

1 min read

A kiosk application for displaying interactive performance metrics and reporting (KPIs) in the production area of Magna Powertrain headquarters.

Created as Software Engineer at Intouch Interactive.

About this project

This project was requested by the customer to provide a dashboard for key performance indicators (KPIs). Input files were in the form of PDFs in a filesystem structure broken down by order, category, title, and color. Successful KPIs were colored green with failures in red. ImageMagick was utilized to generate full-screen images and thumbnails from the PDFs. Images allowed for a better integration experience than trying to work with PDFs directly. A JSON file is filled with the structure and files to allow pages to work against the JSON file over reading the directory structure.

With images and thumbnails created, the dashboard page reads the JSON file and builds the page DOM by category and name. The success or failure colors were applied as a highlight around each thumbnail. Large custom scroll buttons were introduced to allow touchscreen scrolling as sections grew too big to be displayed completely on screen. This allowed for muscle memory as more content didn't change where the buttons were placed. KPIs were a master-detail page structure that allowed for viewing the full images while also facilitating easy navigating to other KPIs in the same category.

Technical sheet

Technologies used on this project

  • General concepts

    • UI/UX Design
    • UI/UX Architecture
    • UI/UX Animations
    • HTML5 – semantic
    • CSS2
  • Application-specific

    • Developed for IE 9 using SiteKiosk v8.7
    • Single Page Application (SPA) with JavaScript routing
    • PHP Framework developed internally by Daniel Person and Tyler Dotson
    • jQuery v1.9
    • jQuery UI v1.10
    • Moment.js v2.0