From cc46ff576cd42b770bbbe282f82b533562805c37 Mon Sep 17 00:00:00 2001 From: brianjjones Date: Thu, 3 Apr 2014 16:38:51 -0700 Subject: [PATCH 1/1] Initial commit of the Modello Dashboard app Change-Id: Ibf1b7b3de45a05703a9f7b669ddbefa99820ed52 Signed-off-by: brianjjones --- Makefile | 18 ++ components/statusBox/statusBox.css | 59 ++++ components/statusBox/statusBox.js | 50 ++++ config.xml | 20 ++ css/style.css | 549 +++++++++++++++++++++++++++++++++++ icon.png | Bin 0 -> 2288 bytes index.html | 167 +++++++++++ js/dashboardControler.js | 449 ++++++++++++++++++++++++++++ js/main.js | 173 +++++++++++ packaging/html5-ui-dashboard.changes | 0 packaging/html5-ui-dashboard.spec | 39 +++ 11 files changed, 1524 insertions(+) create mode 100644 Makefile create mode 100644 components/statusBox/statusBox.css create mode 100644 components/statusBox/statusBox.js create mode 100644 config.xml create mode 100644 css/style.css create mode 100644 icon.png create mode 100644 index.html create mode 100644 js/dashboardControler.js create mode 100644 js/main.js create mode 100644 packaging/html5-ui-dashboard.changes create mode 100644 packaging/html5-ui-dashboard.spec diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..001816a --- /dev/null +++ b/Makefile @@ -0,0 +1,18 @@ +PROJECT = html5UIDashboard + +VERSION := 0.0.1 +PACKAGE = $(PROJECT)-$(VERSION) + +INSTALL_FILES = $(PROJECT).wgt +INSTALL_DIR = ${DESTDIR}/opt/usr/apps/.preinstallWidgets + +wgtPkg: + zip -r $(PROJECT).wgt components config.xml css icon.png index.html js + +install: + @echo "Installing Dashboard, stand by..." + mkdir -p $(INSTALL_DIR)/ + cp $(PROJECT).wgt $(INSTALL_DIR)/ + +dist: + tar czf ../$(PACKAGE).tar.bz2 . diff --git a/components/statusBox/statusBox.css b/components/statusBox/statusBox.css new file mode 100644 index 0000000..312a3a1 --- /dev/null +++ b/components/statusBox/statusBox.css @@ -0,0 +1,59 @@ +.statusIndicatorClass{ + width:180px; + height:85px; +} +.statusIndicatorClass .boxIconText{ + position: absolute; + top: 8px; + left: 15px; +} +.statusBox .textIndicator{ + position: absolute; + left:15px; + top:30px +} +.statusBox .statusIndicator{ + position: absolute; + left:15px; + top:60px; +} +.corner{ + width:7px; + height:7px; +} +.leftTopCorner{ + position: absolute; + left:0; + top:0; +} +.leftBottomCorner{ + position: absolute; + left:0; + bottom:0; + -webkit-transform:rotate(270deg); + -moz-transform:rotate(270deg); + -ms-transform:rotate(270deg); + -o-transform:rotate(270deg); + transform:rotate(270deg); +} +.rightTopCorner{ + position: absolute; + right:0; + top:0; + -webkit-transform:rotate(90deg); + -moz-transform:rotate(90deg); + -ms-transform:rotate(90deg); + -o-transform:rotate(90deg); + transform:rotate(90deg); + +} +.rightBottomCorner{ + position: absolute; + right:0; + bottom:0; + -webkit-transform:rotate(180deg); + -moz-transform:rotate(180deg); + -ms-transform:rotate(180deg); + -o-transform:rotate(180deg); + transform:rotate(180deg); +} \ No newline at end of file diff --git a/components/statusBox/statusBox.js b/components/statusBox/statusBox.js new file mode 100644 index 0000000..903cea1 --- /dev/null +++ b/components/statusBox/statusBox.js @@ -0,0 +1,50 @@ +/** + * @module DashboardApplication + */ + +(function ($) { + "use strict"; + /** + * Class which provides methods to fill content of status box for JQuery plugin. + * @class statusBoxPluginObj + * @static + */ + var statusBoxPluginObj = { + /** + * Method is initializing bottom panel. + * @method init + * @param caption {String} Caption of status box. + * @param title {String} Title of status box. + * @param status {String} Status info of status box. + */ + init: function (caption, title, status) { + this.empty(); + var appendText = '
'; + appendText += '
'; + appendText += '
'; + appendText += '
'; + appendText += '
'; + appendText += '
' + title.toUpperCase() + '
'; + appendText += '
' + status.toUpperCase() + '
'; + this.append(appendText); + $("#captionIndicator" + this[0].id).boxCaptionPlugin('initSmall', caption); + } + }; + /** + * Class which provides acces to {{#crossLink "statusBoxPluginObj"}}{{/crossLink}} methods. + * @class statusBoxPlugin + * @constructor + * @param method {Object} Identificator (name) of method. + * @return Result of called method. + */ + $.fn.statusBoxPlugin = function (method) { + // Method calling logic + if (statusBoxPluginObj[method]) { + return statusBoxPluginObj[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method) { + return statusBoxPluginObj.init.apply(this, arguments); + } else { + $.error('Method ' + method + ' does not exist on jQuery.boxCaptionPlugin '); + } + }; +}(jQuery)); diff --git a/config.xml b/config.xml new file mode 100644 index 0000000..27f50a1 --- /dev/null +++ b/config.xml @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + Dashboard + + + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..5d37a02 --- /dev/null +++ b/css/style.css @@ -0,0 +1,549 @@ +.randomizer{ + position: absolute; + left: 396px; + top: 564px; + opacity: 0.0; + width: 110px; + height: 110px; + + -webkit-transition-timing-function: linear; + -webkit-transition: 1s; + + -moz-transition-timing-function: linear; + -moz-transition: 1s; + + -ms-transition-timing-function: linear; + -ms-transition: 1s; + + -o-transition-timing-function: linear; + -o-transition: 1s + +} +.dashboardBackGround { + position: absolute; + left: 0; + top: 0; + width: 720px; + height: 1280px; +} + +.dashboardCircleAll { + position: absolute; + left: 0; + top: 0; + width: 720px; + height: 1280px; +} +.whelImage{ + width: 65px; + height: 105px; + /*-webkit-transition: 0.1s;*/ + -webkit-transition-timing-function: linear; + + /*-moz-transition:0.1s; + -moz-transition-timing-function:linear; + + -ms-transition:0.1s; + -ms-transition-timing-function:linear; + + -o-transition:0.1s; + -o-transition-timing-function:linear;*/ + + +} +.leftWhell{ + position: absolute; + left: 225px; + top: 430px; +} +.rightWhell{ + position: absolute; + left: 430px; + top: 430px; +} + +.carImage { + position: absolute; + left: 0; + top: 0; + width: 720px; + height: 1280px; +} + +.batteryLevelCaption { + position: absolute; + left: 15px; + top: 200px; +} + +.weatherCaption { + position: absolute; + left: 545px; + top: 200px; +} + +.dashboardLineLong { + width: 120px; + height: 10px; +} + +.leftFrontPressure { + position: absolute; + left: 30px; + top: 370px; +} + +.leftFrontLine { + position: absolute; + left: 130px; + top: 462px; + -webkit-transform: rotate(20deg); + -ms-transform: rotate(20deg); + -moz-transform: rotate(20deg); + -o-transform: rotate(20deg); + transform: rotate(20deg); +} + +.rightFrontPressure { + position: absolute; + left: 500px; + top: 340px; +} + +.rightFrontLine { + position: absolute; + left: 470px; + top: 445px; + + -webkit-transform: rotate(150deg); + -moz-transform: rotate(150deg); + -ms-transform: rotate(150deg); + -o-transform: rotate(150deg); + transform: rotate(150deg); + +} + +.engineStatus { + position: absolute; + left: 520px; + top: 540px; +} + +.engineStatus .gearboxStatus { + position: absolute; + left: 110px; + top: 22px; +} + +.engineStatus .textIndicator { + position: absolute; + top: 32px; + right: 92px; + + white-space: nowrap; + text-align: right; +} + +.engineStatus .statusIndicator { + position: absolute; + top: 62px; + right: 92px; + white-space: nowrap; + text-align: right; +} + +.leftRearPressure { + position: absolute; + left: 20px; + top: 750px; +} + +.leftRearLine { + position: absolute; + left: 115px; + top: 842px; + + -webkit-transform: rotate(15deg); + -moz-transform: rotate(15deg); + -ms-transform: rotate(15deg); + -o-transform: rotate(15deg); + transform: rotate(15deg); +} + +.rightRearPressure { + position: absolute; + left: 510px; + top: 750px; +} + +.rightRearLine { + position: absolute; + left: 480px; + top: 842px; + + -webkit-transform: rotate(165deg); + -moz-transform: rotate(165deg); + -ms-transform: rotate(165deg); + -o-transform: rotate(165deg); + transform: rotate(165deg); +} + +.avgEConsumption { + position: absolute; + left: 15px; + top: 960px; +} + +.rearLDisplay { + position: absolute; + left: 280px; + top: 960px; +} +.rearRDisplay { + position: absolute; + left: 500px; + top: 960px; +} + +.batteryImage { + width: 37px; + height: 23px; +} +.batteryProgressBar{ + position: absolute; + left: -9px; + top: 205px; + width: 395px; + height: 50px; +} +.exteriorBrightnessElement{ + position: absolute; + right: 30px; + top: 150px; +} +.exteriorBrightnessProgressBar{ + position: absolute; + left: -25px; + top: 0; + width: 280px; + height: 50px; +} +.dayNightElement{ + position: absolute; + top: 150px; + left: 30px; + width: 65px; + height: 65px; +} +.batteryElement{ + position: absolute; + left: 15px; + top: 25px; + width: 300px; + height: 200px; +} +.batteryElement .batteryImage { + position: absolute; + left: 15px; + top: 260px; +} + +.batteryElement .batteryStatus { + position: absolute; + left: 65px; + top: 253px; +} + +.batteryElement .batteryRange { + position: absolute; + left: 150px; + top: 253px; +} + +.weatherElement .weatherStatus { + position: absolute; + right: 30px; + top: 227px; +} + +.weatherElement .weatherCity { + position: absolute; + right: 30px; + top: 275px; +} + +.avgConsumptionElement .batteryImage { + position: absolute; + left: 15px; + top: 990px; +} + +.avgConsumptionElement .avgConsumptionCaption { + position: absolute; + left: 65px; + top: 990px; +} + +.avgConsumptionElement .avgConsumptionStatus { + position: absolute; + left: 15px; + top: 1020px; +} + +.dashboardButton { + width: 90px; + height: 55px; +} + +.dashboardButtonOpacity { + opacity: 0.5; +} + +.dashboardButton .dashboardButtonText { + position: relative; + text-align: center; + top: -45px +} + +.rearLButton { + position: absolute; + left: 280px; + top: 990px; +} + +.rearRButton { + position: absolute; + left: 500px; + top: 990px; +} + +.padlocInactive { + width: 45px; + height: 45px; +} + +.padlocActive { + width: 45px; + height: 45px; +} + +.leftPadlock { + position: absolute; + left: 200px; + top: 700px; + -webkit-transition-timing-function: linear; + -webkit-transition: 2s; + + -moz-transition-timing-function: linear; + -moz-transition: 2s; + + -ms-transition-timing-function: linear; + -ms-transition: 2s; + + -o-transition-timing-function: linear; + -o-transition: 2s +} + +.rightPadlock { + position: absolute; + left: 480px; + top: 700px; + -webkit-transition-timing-function: linear; + -webkit-transition: 2s; + + -moz-transition-timing-function: linear; + -moz-transition: 2s; + + -ms-transition-timing-function: linear; + -ms-transition: 2s; + + -o-transition-timing-function: linear; + -o-transition: 2s; +} + +.childLock { + position: absolute; + left: 45px; + top: 625px; + width: 150px; + height: 70px; +} + +.childLockText { + position: absolute; + left: 0; + top: 10px; + width: 150px; + height: 80px; + text-align: center; + -webkit-transition-timing-function: linear; + -webkit-transition: 1s; + + -moz-transition-timing-function: linear; + -moz-transition: 1s; + + -ms-transition-timing-function: linear; + -ms-transition: 1s; + + -o-transition-timing-function: linear; + -o-transition: 1s; +} + +.dashboardLineShort { + width: 95px; + height: 11px; +} + +.childLockLine { + position: absolute; + left: 75px; + top: 80px; + + -webkit-transform: rotate(15deg); + -moz-transform: rotate(15deg); + -ms-transform: rotate(15deg); + -o-transform: rotate(15deg); + transform: rotate(15deg); +} + +.dashboardCircle { + width: 110px; + height: 110px; +} + +.frontLightsButton { + position: absolute; + left: 254px; + top: 313px; + opacity: 0.0; + width: 110px; + height: 110px; + -webkit-transition-timing-function: linear; + -webkit-transition: 1s; + + -moz-transition-timing-function: linear; + -moz-transition: 1s; + + -ms-transition-timing-function: linear; + -ms-transition: 1s; + + -o-transition-timing-function: linear; + -o-transition: 1s; +} + +.rearLightsButton { + position: absolute; + left: 230px; + top: 880px; + opacity: 0.0; + width: 110px; + height: 110px; + -webkit-transition-timing-function: linear; + -webkit-transition: 1s; + + -moz-transition-timing-function: linear; + -moz-transition: 1s; + + -ms-transition-timing-function: linear; + -ms-transition: 1s; + + -o-transition-timing-function: linear; + -o-transition: 1s; +} +.dashboardFrontLightsActive { + position: absolute; + left: 0; + top: 0; + width: 720px; + height: 1280px; + -webkit-transition-timing-function: linear; + -webkit-transition: 1s; + + -moz-transition-timing-function: linear; + -moz-transition: 1s; + + -ms-transition-timing-function: linear; + -ms-transition: 1s; + + -o-transition-timing-function: linear; + -o-transition: 1s; + +} +.dashboardRearLightsActive { + position: absolute; + left: 0; + top: 0; + width: 720px; + height: 1280px; + -webkit-transition-timing-function: linear; + -webkit-transition: 1s; + + -moz-transition-timing-function: linear; + -moz-transition: 1s; + + -ms-transition-timing-function: linear; + -ms-transition: 1s; + + -o-transition-timing-function: linear; + -o-transition: 1s; + + } +.dashboardBreakLightsActive { + position: absolute; + left: 0; + top: 0; + width: 720px; + height: 1280px; + -webkit-transition-timing-function: linear; + -webkit-transition: 1s; + + -moz-transition-timing-function: linear; + -moz-transition: 1s; + + -ms-transition-timing-function: linear; + -ms-transition: 1s; + + -o-transition-timing-function: linear; + -o-transition: 1s; + + } +.rearLightsImage { + opacity: 0; +} + +.frontLightsImage { + opacity: 0; +} +.dashBoardWeatherSun{ + width: 110px; + height: 110px; +} +.dashBoardWeatherCloudy{ + width: 110px; + height: 110px; +} +.dashBoardWeatherThunder{ + width: 110px; + height: 110px; +} +.dashBoardWeatherIcon{ + position: absolute; + left: 425px; + top: 165px; +} +.dayNight{ + width:100%; + height: 100%; + -webkit-transition-timing-function: linear; + -webkit-transition: 1s; + + -moz-transition-timing-function: linear; + -moz-transition: 1s; + + -ms-transition-timing-function: linear; + -ms-transition: 1s; + + -o-transition-timing-function: linear; + -o-transition: 1s +} + diff --git a/icon.png b/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..aab3366cb6f9c018539aa38a417377d7742ed5a6 GIT binary patch literal 2288 zcmbVOYgiL!7M>&!5M;eV5m*|7N~yxKtnEq5YPYuRgjPjkU}yc8B8Q-quc}+ z*2OAFsTV9zZ?)dIDK%oNML`tkB2_3DYN;$4MoIB-qC&+bkDtFtCMo1x zawJm>iq(8LNfD5)fy2^6!e!~nGM1d|=S$+~*%*NmMx`XZGDW3j>$&9DylhN1n`vay zYZo+`OMa77lz0t^k7!^LlL}H~pch2)Vo)Il$YQWONOTYaX%L+TdQ%{f&Gcr25b5nh z#-eHD32cc#^fnfzamh(2s%Fz@I-QQH^Q0o0L>k0mv1lNjMyFFS4~llP3YF?9Dy`cL zg8En3)nf5GVwLu7qp+6I^inkqqJlJ~(p=YTZ!Ic; z|C7dhy|v++)i6y0YmqdK47-m6w;3?jyFU+PcEqw_hiVkqrASi*h%8MBtI$9JmyCU( z$`x|9rwHN+1wsMVI!_@Tf_y|QI*Z}Mg8U&*AC@OL!|^^W#DExde-V$)^Y@1!A)N(^ z=q!Jpw--w!67mJS8El|Ri%L~8cqXm_i~APK`co{MuYsi~q6tTkl$i-wlZ2p%HVILa z_+d;cM2b|XPsrC|0Kk$I zDBy+be;Fx@39{!oUR~9`qi1dT+~FM-N1jQ%7i}x%2^Y>oyWIybKgQJ$9=%SrSzez{ zs{a^l!sl^Z#YK%aZuy*+OhZ!FfU+~Q#k2L*oO`#v>Xtrz@xpJqxp{08<4dt+#j%hK zOJFt*v@p#D_-};ws6T|pJeG|Y7><;+9;A*h!M#YIEO)eOuPe(y@thYa@y`hO&otB|%nqWwTnLt^JIFV zgKHGQ)$Vo`(Zmr>-pD09bq0FTZd)r)A}2P!>;l2KIj^Y7ZRw4ZMAHR^`4xgL&g@5>N&wNIxhFg!- zU%1(yn>ccpV0xIJaJcZ(p@cK7#74$O6Z$|@Q!yrfT4w}XKA0$hr*$zsM0`%BTSSeU zVOj0)w#A>`ZzNcm__)5hJtsPdG zEr^)i`t^bOjJAHGd+^2Mw`+EH`Nb`yU&wiMsq@PZI^&7KYk%}IoO4hYENw9Wk!fIq z?fs*&6xYnH!y4~_xndn}>{N%?Dr;j~QPuZDjh8Ea>ML4y?wCPF97*@+7sokI;?|ZQ z-}y0Pj%V$Ns=a?hvoU6;t#+HzBk|DDm^_ENm-xeXKl49d>vts?-17T0CGDi=Pm9Z6 z`hHUo=~6A@WcWJA_A`r@YER`?%AI3~hK-$Y=jTHms#V>?MM_FKP~+h0pA)`2TX{A= zZG9c`_|E)ivDUE`!KbF9vR)Nf^eLNU4zuGPeMaFhIGsZ)a)P?r9eekFHF(f{po%=| z-cb3<&?IxhP5-O$@fXi^Px4H@eHv)2IeQ>^dC$HRk@khrf2mD4Kc8~V@`h9OnN-9T z%pS;`H>Is^godyA(MB~B_LobF_ZTKSd#9tH9dK%z&)K~oaz%C5#3v~fPKMX)pL6QY zdsnA|aMQTmosFvUmTcped}-+hL)Uj7uAI8!b1StIOxf2hFhtBhVVeWdf~KxmmkjJW z@ZgWwh_Q1U53IuoEqver+_rT~>LQ)uI`uw*Q>!iR?z;a5YLSxu5hdDe zN&iTkWmt-*=KTJ3_X_)o@`Y2YEjJYZ7JJ0#ceG%=et&>Zbe>UB|ESPns)$|MQn|f1 r&f2&b$N?PjuLa`&P=8tea$X!@3K`{RXK@dj|APbyLj>RY$8G;Nn`N4O literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..ae7f5c5 --- /dev/null +++ b/index.html @@ -0,0 +1,167 @@ + + + + + +DASHBOARD + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
82%
+
~215MI
+
+
+
+
+
15.20°C
+
SAN + FRANCISCO
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+
ENGINE STATUS
+
+
D
+
65 mph
+
78.123 mi
+
+ +
+
+
+
+
+ +
+ +
+
+
+
+ +
CHILD + LOCK ACTIVATED
+
+
+
+
+ +
+
+
+
0.28 + KW-H / MI
+
~350 MI + / FULL CHARGE
+
+
+
+
+ +
+ +
OFF
+
+
+
+
+
+
+
OFF
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/js/dashboardControler.js b/js/dashboardControler.js new file mode 100644 index 0000000..6d58288 --- /dev/null +++ b/js/dashboardControler.js @@ -0,0 +1,449 @@ +/** + * @module DashboardApplication + */ + +/** + * Class which provides methods to fill content of dashboard's UI. + * @class dashBoardControler + * @static + */ + +var dashBoardControler = function() { + "use strict"; + this.initInfos(); +}; + +/** + * Method handles click event on rear left indicator. + * @method onRearLDisplayClick + */ +dashBoardControler.prototype.onRearLDisplayClick = function() { + "use strict"; + if (this.RearLDispaly) { + $('#rearLButtonText').removeClass("fontColorSelected"); + $('#rearLButtonText').addClass("fontColorNormal"); + $('#rearLButtonText').empty(); + $('#rearLButtonText').append("OFF"); + this.RearLDispaly = false; + } else { + $('#rearLButtonText').removeClass("fontColorNormal"); + $('#rearLButtonText').addClass("fontColorSelected"); + $('#rearLButtonText').empty(); + $('#rearLButtonText').append("ON"); + this.RearLDispaly = true; + } +}; + +/** + * Method handles click event on rear right indicator. + * @method onRearRDisplayClick + */ +dashBoardControler.prototype.onRearRDisplayClick = function() { + "use strict"; + if (this.RearRDispaly) { + $('#rearRButtonText').removeClass("fontColorSelected"); + $('#rearRButtonText').addClass("fontColorNormal"); + $('#rearRButtonText').empty(); + $('#rearRButtonText').append("OFF"); + this.RearRDispaly = false; + } else { + $('#rearRButtonText').removeClass("fontColorNormal"); + $('#rearRButtonText').addClass("fontColorSelected"); + $('#rearRButtonText').empty(); + $('#rearRButtonText').append("ON"); + this.RearRDispaly = true; + } +}; + +/** + * Method is setting status of child lock. + * @method onChildLockChanged + * @param newStatus {Boolean} New status of child lock of the car. + */ +dashBoardControler.prototype.onChildLockChanged = function(newStatus) { + "use strict"; + if (newStatus === false || newStatus === "false") { + $('#leftPadlock').removeClass("padlocActive"); + $('#leftPadlock').addClass("padlocInactive"); + $('#rightPadlock').removeClass("padlocActive"); + $('#rightPadlock').addClass("padlocInactive"); + $('#childLockText').removeClass("fontColorSelected"); + $('#childLockText').addClass("fontColorNormal"); + $('#childLockText').empty(); + $('#childLockText').append("CHILD LOCK DEACTIVATED"); + } else { + $('#leftPadlock').removeClass("padlocInactive"); + $('#leftPadlock').addClass("padlocActive"); + $('#rightPadlock').removeClass("padlocInactive"); + $('#rightPadlock').addClass("padlocActive"); + $('#childLockText').removeClass("fontColorNormal"); + $('#childLockText').addClass("fontColorSelected"); + $('#childLockText').empty(); + $('#childLockText').append("CHILD LOCK ACTIVATED"); + } +}; + +/** + * Method is setting status of front lights of the car. + * @method onFrontLightsChanged + * @param newStatus {Boolean} New status of front lights of car. + */ +dashBoardControler.prototype.onFrontLightsChanged = function(newStatus) { + "use strict"; + if (newStatus === false || newStatus === "false") { + $('#frontLightsButton').css("opacity", "0"); + $("#frontLightsImage").css("opacity", "0"); + } else { + $('#frontLightsButton').css("opacity", "1"); + $("#frontLightsImage").css("opacity", "1"); + } +}; + +/** + * Method is setting value of trasmission gear of the car. + * @method onGearChanged + * @param newStatus {String} New status value for trasmission gear. + */ +dashBoardControler.prototype.onGearChanged = function(newStatus) { + "use strict"; + $("#engineStatus #gearboxStatus").text(newStatus); +}; + +/** + * Method is setting value of speed of the car. + * @method onSpeedChanged + * @param newStatus {Number} New value for the speed. + */ +dashBoardControler.prototype.onSpeedChanged = function(newStatus) { + "use strict"; + $("#engineStatus #textIndicator").text(newStatus + " mph"); +}; + +/** + * Method is setting value of odometer of the car. + * @method onOdoMeterChanged + * @param newStatus {Number} New value for the odoMeter. + */ +dashBoardControler.prototype.onOdoMeterChanged = function(newStatus) { + "use strict"; + $("#engineStatus #statusIndicator").text(newStatus + " mi"); +}; + +/** + * Method is setting status of rear lights of the car. + * @method onRearLightsChanged + * @param newStatus {Boolean} New status of rear lights of car. + */ +dashBoardControler.prototype.onRearLightsChanged = function(newStatus) { + "use strict"; + if (newStatus === false || newStatus === "false") { + $('#rearLightsButton').css("opacity", "0"); + $("#rearLightsImage").css("opacity", "0"); + } else { + $('#rearLightsButton').css("opacity", "1"); + $("#rearLightsImage").css("opacity", "1"); + } +}; +/** + * Method is setting status of break lights of the car. + * @method onBreakLightsChanged + * @param newStatus {Boolean} New status of break lights of car. + */ +dashBoardControler.prototype.onBreakLightsChanged = function(newStatus) { + "use strict"; + if (newStatus === false || newStatus === "false") { + $("#breakLightsImage").css("opacity", "0"); + } else { + $("#breakLightsImage").css("opacity", "1"); + } +}; +/** + * Method is setting status of fan in the car. + * @method onFanChanged + * @param newStatus {Boolean} New status of fan in the car. + */ +dashBoardControler.prototype.onFanChanged = function(newStatus) { + "use strict"; + if (newStatus === false || newStatus === "false") { + $('#fanCircle').css("opacity", "0"); + $("#fanIcon").css("opacity", "0"); + $("#fanIcon").css("-webkit-transform", "rotate(0deg)"); + $("#fanIcon").css("-moz-transform", "rotate(0deg)"); + $("#fanIcon").css("-ms-transform", "rotate(0deg)"); + $("#fanIcon").css("-o-transform", "rotate(0deg)"); + $('#fanStatus').removeClass("fontColorSelected"); + $('#fanStatus').addClass("fontColorNormal"); + } else { + $('#fanCircle').css("opacity", "1"); + $("#fanIcon").css("opacity", "1"); + $("#fanIcon").css("-webkit-transform", "rotate(720deg)"); + $("#fanIcon").css("-moz-transform", "rotate(720deg)"); + $("#fanIcon").css("-ms-transform", "rotate(720deg)"); + $("#fanIcon").css("-o-transform", "rotate(720deg)"); + $('#fanStatus').removeClass("fontColorNormal"); + $('#fanStatus').addClass("fontColorSelected"); + } +}; + +/** + * Method is setting status of exterior brightness . + * @method onExteriorBrightnessChanged + * @param newStatus {Boolean} New exterior brightness value. + */ +dashBoardControler.prototype.onExteriorBrightnessChanged = function(newValue) { + "use strict"; + var newValueP = (Math.abs(newValue) / 5000) * 100; + if (newValueP > 100) { + newValueP = 100; + } + $("#exteriorBrightnessProgressBar").progressBarPlugin('setPosition', newValueP); +}; + +/** + * Method is setting new value of battery status. + * @method onBatteryStatusChanged + * @param newValue {Integer} New battery status value. + * @param status {bootstrap.carIndicator.status} Current status object. + */ +dashBoardControler.prototype.onBatteryStatusChanged = function(newValue, status) { + "use strict"; + $("#batteryProgressBar").progressBarPlugin('setPosition', newValue); + var newBatteryStatus = newValue.toString() + "%"; + $('#batteryStatus').empty(); + $('#batteryStatus').append(newBatteryStatus); + var newBatteryRange = "~" + Math.round(((newValue / 100) * status.fullBatteryRange)).toString() + " MI"; + $('#batteryRange').empty(); + $('#batteryRange').append(newBatteryRange); +}; + +/** + * Method is setting new value of full battery range. + * @method onBatteryRangeChanged + * @param newValue {Integer} New full battery range value. + * @param status {bootstrap.carIndicator.status} Current status object. + */ +dashBoardControler.prototype.onBatteryRangeChanged = function(newValue, status) { + "use strict"; + var self = this; + + $('#batteryStatus').empty(); + + $('#batteryStatus').append(newValue); + var newBatteryRange = "~" + Math.round(((status.batteryStatus / 100) * newValue)).toString() + " MI"; + $('#batteryRange').empty(); + $('#batteryRange').append(newBatteryRange); +}; + +/** + * Method is setting new value of outside temperature. + * @method onOutsiteTempChanged + * @param newValue {Number} New outside temperature status value. + */ +dashBoardControler.prototype.onOutsiteTempChanged = function(newValue) { + "use strict"; + var newOutsiteTemp = newValue + "°C"; + $("#weatherStatus").empty(); + $("#weatherStatus").append(newOutsiteTemp); +}; + +/** + * Method is setting new value of Avg KW. + * @method onAvgKWChanged + * @param newValue {Number} New Avg KW status value. + */ +dashBoardControler.prototype.onAvgKWChanged = function(newValue) { + "use strict"; + var newAvgKW = newValue + " KW-H / MI"; + $("#avgConsumptionCaption").empty(); + $("#avgConsumptionCaption").append(newAvgKW); +}; + +/** + * Method is setting new value of night mode indicator . + * @method onNightModeChanged + * @param newValue {Boolean} New value of day/night mode . + */ +dashBoardControler.prototype.onNightModeChanged = function(newValue) { + "use strict"; + if (newValue) { + $("#dayNight").removeClass("dashboardSunElement"); + $("#dayNight").addClass("dashboardMoonElement"); + } else { + $("#dayNight").removeClass("dashboardMoonElement"); + $("#dayNight").addClass("dashboardSunElement"); + } + +}; + +/** + * Method is setting new value of inside temperature. + * @method onInsideTempChanged + * @param newValue {Number} New inside temperature status value. + */ +dashBoardControler.prototype.onInsideTempChanged = function(newValue) { + "use strict"; + var newInsiteTemp = newValue + "°F"; + $("#fanStatus").empty(); + $("#fanStatus").append(newInsiteTemp); +}; + +/** + * Method is setting new value of weather. Weather is coded to following values: + * + * * 1 - Cloudy weather + * * 2 - Sunny weather + * * 3 - Stormy weather + * + * @method onWeatherChanged + * @param newWeater {Integer} New weather status value. + */ +dashBoardControler.prototype.onWeatherChanged = function(newValue) { + "use strict"; + if (newValue === 1) { + $("#dashBoardWeatherIcon").removeClass("dashBoardWeatherSun"); + $("#dashBoardWeatherIcon").removeClass("dashBoardWeatherCloudy"); + $("#dashBoardWeatherIcon").removeClass("dashBoardWeatherThunder"); + $("#dashBoardWeatherIcon").addClass("dashBoardWeatherCloudy"); + + } else if (newValue === 2) { + $("#dashBoardWeatherIcon").removeClass("dashBoardWeatherSun"); + $("#dashBoardWeatherIcon").removeClass("dashBoardWeatherCloudy"); + $("#dashBoardWeatherIcon").removeClass("dashBoardWeatherThunder"); + $("#dashBoardWeatherIcon").addClass("dashBoardWeatherSun"); + + } else { + $("#dashBoardWeatherIcon").removeClass("dashBoardWeatherSun"); + $("#dashBoardWeatherIcon").removeClass("dashBoardWeatherCloudy"); + $("#dashBoardWeatherIcon").removeClass("dashBoardWeatherThunder"); + $("#dashBoardWeatherIcon").addClass("dashBoardWeatherThunder"); + } +}; + +/** + * Method is setting new value of angle of front wheels. + * @method onWheelAngleChanged + * @param newAngle {Integer} New angle status value for wheels. + */ +dashBoardControler.prototype.onWheelAngleChanged = function(newAngle) { + "use strict"; + var maxAngle = 30; + if (newAngle > 30) { + newAngle = (-1 * (360 - newAngle)); + } + if (newAngle > maxAngle) { + newAngle = maxAngle; + } else if (newAngle < (-maxAngle)) { + newAngle = -maxAngle; + } else if (newAngle === "") { + newAngle = 0; + } + + var newDuration = Math.round(Math.abs(newAngle) / 10); + if (newDuration === 0) { + newDuration = 0.1; + } + newDuration = 0; + $("#leftWhell").css("-webkit-transition", newDuration + "s"); + $("#leftWhell").css("-webkit-transform", "rotate(" + newAngle + "deg)"); + $("#rightWhell").css("-webkit-transition", newDuration + "s"); + $("#rightWhell").css("-webkit-transform", "rotate(" + newAngle + "deg)"); + + $("#leftWhell").css("-moz-transition", newDuration + "s"); + $("#leftWhell").css("-moz-transform", "rotate(" + newAngle + "deg)"); + $("#rightWhell").css("-moz-transition", newDuration + "s"); + $("#rightWhell").css("-moz-transform", "rotate(" + newAngle + "deg)"); + + $("#leftWhell").css("-ms-transition", newDuration + "s"); + $("#leftWhell").css("-ms-transform", "rotate(" + newAngle + "deg)"); + $("#rightWhell").css("-ms-transition", newDuration + "s"); + $("#rightWhell").css("-ms-transform", "rotate(" + newAngle + "deg)"); + + $("#leftWhell").css("-o-transition", newDuration + "s"); + $("#leftWhell").css("-o-transform", "rotate(" + newAngle + "deg)"); + $("#rightWhell").css("-o-transition", newDuration + "s"); + $("#rightWhell").css("-o-transform", "rotate(" + newAngle + "deg)"); +}; + +/** + * Method is setting new value of randomizer. + * @method onRandomizerChanged + * @param newStatus {Boolean} New randomizer status. + */ +dashBoardControler.prototype.onRandomizerChanged = function(newStatus) { + "use strict"; + if (newStatus === false || newStatus === "false") { + $('#randomizer').css("opacity", "0"); + $("#randomizer").css("opacity", "0"); + } else { + $('#randomizer').css("opacity", "1"); + $("#randomizer").css("opacity", "1"); + } +}; + +/** + * Method initialize info status on HTML and jQuery plugins. + * @method initInfos + */ +dashBoardControler.prototype.initInfos = function() { + "use strict"; + $("#weatherCaption").boxCaptionPlugin('init', 'weather'); + + $("#exteriorBrightnessCaption").boxCaptionPlugin('init', 'Exterior Brightness'); + + $("#exteriorBrightnessProgressBar").progressBarPlugin('init', 'progressBar'); + $("#exteriorBrightnessProgressBar").progressBarPlugin('setPosition', 30); + + $("#batteryLevelCaption").boxCaptionPlugin('init', 'Battery level'); + + $("#batteryProgressBar").progressBarPlugin('init', 'progressBar'); + $("#batteryProgressBar").progressBarPlugin('setPosition', 82); + + $("#avgEConsumption").boxCaptionPlugin('init', 'avg e-consumtion'); + $("#rearLDisplay").boxCaptionPlugin('init', 'Rear l Display'); + $("#rearRDisplay").boxCaptionPlugin('init', 'Rear r Display'); + + $('#bottomPanel').bottomPanel('init'); + + $("#leftFrontPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'L FRONT TIRE', 'OK'); + $("#rightFrontPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'R FRONT TIRE', 'ok'); + + $("#leftRearPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'L Rear TIRE', 'OK'); + $("#rightRearPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'R Rear TIRE', 'ok'); + +}; +/** + * Method is setting new value of left front tire pressure. + * @method onTirePressureLeftFrontChanged + * @param newValue {FLoat} new tire pressure status. If is status between 1.8 and 2.2 new status value is string "OK". + */ +dashBoardControler.prototype.onTirePressureLeftFrontChanged = function(newValue) { + "use strict"; + $("#leftFrontPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'L FRONT TIRE', newValue); +}; +/** + * Method is setting new value of right front tire pressure. + * @method onTirePressureRightFrontChanged + * @param newValue {FLoat} new tire pressure status. If is status between 1.8 and 2.2 new status value is string "OK". + */ +dashBoardControler.prototype.onTirePressureRightFrontChanged = function(newValue) { + "use strict"; + $("#rightFrontPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'R FRONT TIRE', newValue); +}; +/** + * Method is setting new value of left rear tire pressure. + * @method onTirePressureLeftRearChanged + * @param newValue {FLoat} new tire pressure status. If is status between 1.8 and 2.2 new status value is string "OK". + */ +dashBoardControler.prototype.onTirePressureLeftRearChanged = function(newValue) { + "use strict"; + $("#leftRearPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'L Rear TIRE', newValue); +}; +/** + * Method is setting new value of right rear tire pressure. + * @method onTirePressureRightRearChanged + * @param newValue {FLoat} new tire pressure status. If is status between 1.8 and 2.2 new status value is string "OK". + */ +dashBoardControler.prototype.onTirePressureRightRearChanged = function(newValue) { + "use strict"; + $("#rightRearPressure").statusBoxPlugin('init', 'PRESSSURE LEVEL', 'R Rear TIRE', newValue); +}; \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..45dff1d --- /dev/null +++ b/js/main.js @@ -0,0 +1,173 @@ +/*global Bootstrap, dashBoardControler */ + +/** + * DashBoard application show information about vehicle from [tizen.vehicle API](https://raw.github.com/otcshare/automotive-message-broker/master/docs/amb.idl). + * Uses mainly {{#crossLink "CarIndicator"}}{{/crossLink}} module from {{#crossLink "Bootstrap/carIndicator:property"}}{{/crossLink}}. Dashboard application uses following + * AMB properties to show car data in display only mode: + * + * * SteeringWheelAngle + * * SteeringWheelAngle + * * WheelBrake + * * Engaged + * * TirePressure + * * leftFront + * * rightFront + * * leftRear + * * rightRear + * * DoorStatus + * * ChildLockStatus + * * LightStatus + * * Hazard + * * Head + * * Parking + * * BatteryStatus + * * FullBatteryRange + * * ExteriorTemperature + * * Exterior + * * InteriorTemperature + * * Interior + * * WheelInformation + * * FrontWheelRadius + * * AvgKW + * * AvgKW + * * VehicleSpeed + * * Odometer + * * Transmission + * * ShiftPosition + * * ExteriorBrightness + * * NightMode + * + * + * Hover and click on elements in images below to navigate to components of Home screen application. + * + * + * + * top bar icons + * clock + * bottom panel + * Settings + * Day/Night mode + * Exterior Brightness + * Weather + * Battery Level + * Wheel radius + * Front lights status + * Speed + * Transmission Gear + * Child lock status + * Average KW + * Battery range + * Odometer + * Rear lights + * Break lights + * Left front tire pressure + * Right front tire pressure + * Left rear tire pressure + * Right rear tire pressure + * + * @module DashboardApplication + * @main DashboardApplication + * @class Dashboard + */ + +/** + * Reference to instance of dashBoardIndicator this class manage graphics elements on dasboard + * @property dashBoardIndicator {dashBoardIndicator} + */ +var dashBoardIndicator; + +/** + * Reference to instance of bootstrap class this class help booting theme , config and carIndicator + * @property bootstrap {Bootstrap} + * @private + */ +var bootstrap; + +/** + * Method initializes user interface and create events listeners for status indicators. + * @method init + */ +var init = function () { + "use strict"; + dashBoardIndicator = new dashBoardControler(); + bootstrap = new Bootstrap(function (status) { + $('#clockElement').ClockPlugin('init', 60); + $('#clockElement').ClockPlugin('startTimer'); + + $('#bottomPanel').bottomPanel('init', 'withoutBack'); + $("#topBarIcons").topBarIconsPlugin('init'); + + bootstrap.carIndicator.addListener({ + /* this si for steeringWheel game controler */ + onSteeringWheelAngleChanged : function(newValue){ + dashBoardIndicator.onWheelAngleChanged(newValue,bootstrap.carIndicator.status); + }, + onWheelBrakeChanged : function(newValue){ + dashBoardIndicator.onBreakLightsChanged(newValue); + }, + /* end steeringWheel game controler*/ + onTirePressureLeftFrontChanged : function (newValue){ + dashBoardIndicator.onTirePressureLeftFrontChanged(newValue); + }, + onTirePressureRightFrontChanged : function (newValue){ + dashBoardIndicator.onTirePressureRightFrontChanged(newValue); + }, + onTirePressureLeftRearChanged : function (newValue){ + dashBoardIndicator.onTirePressureLeftRearChanged(newValue); + }, + onTirePressureRightRearChanged : function (newValue){ + dashBoardIndicator.onTirePressureRightRearChanged(newValue); + }, + onChildLockChanged : function(newValue){ + dashBoardIndicator.onChildLockChanged(newValue); + }, + onFrontLightsChanged : function(newValue){ + dashBoardIndicator.onFrontLightsChanged(newValue); + }, + onRearLightsChanged : function(newValue){ + dashBoardIndicator.onRearLightsChanged(newValue); + }, + onBatteryStatusChanged : function(newValue) { + dashBoardIndicator.onBatteryStatusChanged(newValue,bootstrap.carIndicator.status); + }, + onFullBatteryRange : function(newValue) { + dashBoardIndicator.onBatteryRangeChanged(newValue,bootstrap.carIndicator.status); + }, + onOutsideTempChanged : function(newValue) { + dashBoardIndicator.onOutsiteTempChanged(newValue); + }, + onInsideTempChanged : function(newValue) { + dashBoardIndicator.onInsideTempChanged(newValue); + }, + onWheelAngleChanged : function(newValue){ + dashBoardIndicator.onWheelAngleChanged(newValue,bootstrap.carIndicator.status); + }, + onWeatherChanged : function(newValue){ + dashBoardIndicator.onWeatherChanged(newValue); + }, + onSpeedChanged : function(newValue) { + dashBoardIndicator.onSpeedChanged(newValue); + }, + onOdoMeterChanged : function(newValue){ + dashBoardIndicator.onOdoMeterChanged(newValue); + }, + onGearChanged : function(newValue){ + dashBoardIndicator.onGearChanged(newValue); + }, + onRandomizeChanged : function(newValue) { + dashBoardIndicator.onRandomizerChanged(newValue); + }, + onNightModeChanged : function(newValue) { + dashBoardIndicator.onNightModeChanged(newValue); + }, + onExteriorBrightnessChanged : function(newValue) { + dashBoardIndicator.onExteriorBrightnessChanged(newValue); + }, + onAvgKWChanged : function(newValue) { + dashBoardIndicator.onAvgKWChanged(newValue); + } + }); + }); +}; + +$(document).ready(init); \ No newline at end of file diff --git a/packaging/html5-ui-dashboard.changes b/packaging/html5-ui-dashboard.changes new file mode 100644 index 0000000..e69de29 diff --git a/packaging/html5-ui-dashboard.spec b/packaging/html5-ui-dashboard.spec new file mode 100644 index 0000000..4c37aa1 --- /dev/null +++ b/packaging/html5-ui-dashboard.spec @@ -0,0 +1,39 @@ +Name: html5_UI_Dashboard +Summary: A proof of concept pure html5 UI +Version: 0.0.1 +Release: 1 +Group: Applications/System +License: Apache 2.0 +URL: http://www.tizen.org +Source0: %{name}-%{version}.tar.bz2 +BuildRequires: zip +Requires: html5_UI_Common +Requires: wrt-installer +Requires: wrt-plugins-ivi +Requires: wrt-plugins-tizen-bt + +%description +A proof of concept pure html5 UI + +%prep +%setup -q -n %{name}-%{version} + +%build + +make wgtPkg + +%install +rm -rf %{buildroot} +%make_install + +%post + wrt-installer -i /opt/usr/apps/.preinstallWidgets/html5UIDashboard.wgt; + cp -r /opt/usr/apps/_common/js/services /opt/usr/apps/html5POC04/res/wgt/js/ + cp -r /opt/usr/apps/_common/css/* /opt/usr/apps/html5POC04/res/wgt/css/ + +%postun + wrt-installer -un html5POC04.Dashboard + +%files +%defattr(-,root,root,-) +/opt/usr/apps/.preinstallWidgets/html5UIDashboard.wgt -- 2.7.4