mirror of
https://github.com/flyandi/mazda-custom-application-sdk
synced 2024-12-23 19:52:51 -06:00
304 lines
7.4 KiB
JavaScript
304 lines
7.4 KiB
JavaScript
/**
|
|
* Custom Applications SDK for Mazda Connect Infotainment System
|
|
*
|
|
* A mini framework that allows to write custom applications for the Mazda Connect Infotainment System
|
|
* that includes an easy to use abstraction layer to the JCI system.
|
|
*
|
|
* Written by Andreas Schwarz (http://github.com/flyandi/mazda-custom-applications-sdk)
|
|
* Copyright (c) 2016. All rights reserved.
|
|
*
|
|
* WARNING: The installation of this application requires modifications to your Mazda Connect system.
|
|
* If you don't feel comfortable performing these changes, please do not attempt to install this. You might
|
|
* be ending up with an unusuable system that requires reset by your Dealer. You were warned!
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify it under the terms of the
|
|
* GNU General Public License as published by the Free Software Foundation, either version 3 of the
|
|
* License, or (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even
|
|
* the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public
|
|
* License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License along with this program.
|
|
* If not, see http://www.gnu.org/licenses/
|
|
*
|
|
*/
|
|
|
|
|
|
/**
|
|
* HelloWorld Application
|
|
*
|
|
* This is the main file of the application and contains the required information
|
|
* to run the application on the mini framework.
|
|
*
|
|
* The filename needs to be app.js in order to be recognized by the loader.
|
|
*/
|
|
|
|
CustomApplicationsHandler.register("app.helloworld", new CustomApplication({
|
|
|
|
/**
|
|
* (require)
|
|
*
|
|
* An object array that defines resources to be loaded such as javascript's, css's, images, etc
|
|
*
|
|
* All resources are relative to the applications root path
|
|
*/
|
|
|
|
require: {
|
|
|
|
/**
|
|
* (js) defines javascript includes
|
|
*/
|
|
|
|
js: [],
|
|
|
|
/**
|
|
* (css) defines css includes
|
|
*/
|
|
|
|
css: ['app.css'],
|
|
|
|
/**
|
|
* (images) defines images that are being preloaded
|
|
*
|
|
* Images are assigned to an id
|
|
*/
|
|
|
|
images: {
|
|
|
|
world: 'images/world.png'
|
|
|
|
},
|
|
},
|
|
|
|
/**
|
|
* (settings)
|
|
*
|
|
* An object that defines application settings
|
|
*/
|
|
|
|
settings: {
|
|
|
|
/**
|
|
* (terminateOnLost)
|
|
*
|
|
* If set to 'true' this will remove the stateless life cycle and always
|
|
* recreate the application once the focus is lost. Otherwise by default
|
|
* the inital created state will stay alive across the systems runtime.
|
|
*
|
|
* Default is false or not set
|
|
* /
|
|
|
|
// terminateOnLost: false,
|
|
|
|
/**
|
|
* (title) The title of the application in the Application menu
|
|
*/
|
|
|
|
title: 'Hello World',
|
|
|
|
/**
|
|
* (statusbar) Defines if the statusbar should be shown
|
|
*/
|
|
|
|
statusbar: true,
|
|
|
|
/**
|
|
* (statusbarIcon) defines the status bar icon
|
|
*
|
|
* Set to true to display the default icon app.png or set a string to display
|
|
* a fully custom icon.
|
|
*
|
|
* Icons need to be 37x37
|
|
*/
|
|
|
|
statusbarIcon: true,
|
|
|
|
/**
|
|
* (statusbarTitle) overrides the statusbar title, otherwise title is used
|
|
*/
|
|
|
|
statusbarTitle: false,
|
|
|
|
/**
|
|
* (statusbarHideHomeButton) hides the home button in the statusbar
|
|
*/
|
|
|
|
// statusbarHideHomeButton: false,
|
|
|
|
/**
|
|
* (hasLeftButton) indicates if the UI left button / return button should be shown
|
|
*/
|
|
|
|
hasLeftButton: false,
|
|
|
|
/**
|
|
* (hasMenuCaret) indicates if the menu item should be displayed with an caret
|
|
*/
|
|
|
|
hasMenuCaret: false,
|
|
|
|
/**
|
|
* (hasRightArc) indicates if the standard right car should be displayed
|
|
*/
|
|
|
|
hasRightArc: false,
|
|
|
|
},
|
|
|
|
|
|
/***
|
|
*** User Interface Life Cycles
|
|
***/
|
|
|
|
/**
|
|
* (created)
|
|
*
|
|
* Executed when the application gets initialized
|
|
*
|
|
* Add any content that will be static here
|
|
*/
|
|
|
|
created: function() {
|
|
|
|
/**
|
|
* HelloWorld Showcase
|
|
*/
|
|
|
|
/* The use of 'element'.
|
|
*
|
|
* By default the app framework includes the jQuery library.
|
|
*
|
|
* The application exposes the 'element' helper which basically creates a simple
|
|
* jQuery object for you and attaches it to the canvas.
|
|
*
|
|
* var newElement = this.element(<tag>, <attr:id>, <classNames>, <styles>, <content>, <preventAutoAppend>)
|
|
*
|
|
* See the examples below:
|
|
*/
|
|
|
|
// Yeah I gotta do this!
|
|
this.element("div", false, false, false, "Hello World!");
|
|
|
|
// This will add a class to the element
|
|
this.element("div", false, "smallerText", false, "This is a showcase of the Custom Application SDK for the Mazda Infotainment System");
|
|
|
|
// This item will never appear on the screen because we prevent auto append to the canvas
|
|
this.element("div", false, false, false, "This will never appear", true);
|
|
|
|
// Let's try an image with an absolute position on the top/right corner
|
|
this.element("div", false, false, {
|
|
position: 'absolute',
|
|
top: 10,
|
|
right: 10,
|
|
}, this.images.world);
|
|
|
|
// Now you can do the same thing with just pure jQuery
|
|
|
|
this.canvas.append($("<div/>").append("Generated through pure jQuery"));
|
|
|
|
// .. or for the hard core people, pure DOM
|
|
|
|
var div = document.createElement("div");
|
|
div.innerHTML = "OMG - This is 1995 all over again";
|
|
|
|
this.canvas.get(0).appendChild(div); // yeah canvas is a jQuery object
|
|
|
|
|
|
/* A word about this.canvas
|
|
*
|
|
* this.canvas is the main application screen and the DOM root for the application.
|
|
*
|
|
* this.canvas is a jQuery object! Just FYI.
|
|
*
|
|
* Any content you want to display needs to be attached to the canvas or any children
|
|
* below it. Please don't attach it to the 'body' or you will loose all the automatic
|
|
* context handling of the JCI system which will end up in a bad user experience.
|
|
*/
|
|
|
|
|
|
/*
|
|
* Let's move to some more advanced stuff.
|
|
*/
|
|
|
|
// Let's create a simple label with an value
|
|
|
|
this.label = this.element("span", false, false, false, "No event", true);
|
|
|
|
this.element("div", false, "simpleLabel", false, ['Controller Event:', this.label]);
|
|
|
|
// Look at the controller event below to see how we use .label
|
|
|
|
|
|
/**
|
|
* Now let's do someting really cool.
|
|
*
|
|
* It wouldn't be a framework if it wouldn't allow you easy access to the internal
|
|
* data bus of the car. Yeah, let's get some info directly from the car :-)
|
|
*/
|
|
|
|
// Lets create a label
|
|
this.speedLabel = this.element("span", false, false, false, "0", true);
|
|
|
|
// lets add it to the canvas
|
|
this.element("div", false, "simpleLabel", false, ['Current Speed', this.speedLabel]);
|
|
|
|
// lets get the speed assigned to it
|
|
/*
|
|
this.subscribe(VehicleData.vehicleSpeed, function(speed) {
|
|
|
|
// another cool thing is that we can convert our speed from km/h to mp/h very easy
|
|
|
|
this.speedLabel = VehicleData.transform(speed, VehicleData.KMHMPH) + " mph/h";
|
|
}.bind(this));*/
|
|
|
|
},
|
|
|
|
/**
|
|
* (focused)
|
|
*
|
|
* Executes when the application gets the focus. You can either use this event to
|
|
* build the application or use the created() method to predefine the canvas and use
|
|
* this method to run your logic.
|
|
*/
|
|
|
|
focused: function() {
|
|
|
|
|
|
},
|
|
|
|
|
|
/**
|
|
* (lost)
|
|
*
|
|
* Lost is executed when the application looses it's context. You can specify any
|
|
* logic that you want to run before the application gets removed from the DOM.
|
|
*
|
|
* If you enabled terminateOnLost you may want to save the state of your app here.
|
|
*/
|
|
|
|
lost: function() {
|
|
|
|
},
|
|
|
|
/***
|
|
*** Events
|
|
***/
|
|
|
|
/**
|
|
* (event) onControllerEvent
|
|
*
|
|
* Called when a new (multi)controller event is available
|
|
*/
|
|
|
|
onControllerEvent: function(eventId) {
|
|
|
|
// Look above where we create this.label
|
|
// Here is where we assign the value!
|
|
|
|
this.label.html(eventId);
|
|
|
|
},
|
|
|
|
|
|
})); /** EOF **/
|