added wheel and gear UI

diff --git a/assets/wheel.png b/assets/wheel.png
new file mode 100644 (file)
index 0000000..c0a9302
Binary files /dev/null and b/assets/wheel.png differ

diff --git a/business.js b/business.js
index f472397..af32175 100644 (file)
--- a/business.js
+++ b/business.js
@@ -50,7 +50,28 @@ function connected()
 
                                   calcAverageVelocity(adjvalue);
                               },
-                              function() { });
+                              function() { } );
+
+                    vehicle.get("running_status_engine_speed", function(data) {
+                                    var value = data[0].value;
+                                    if(value > 10000) value =10000;
+                                    var needleDegs = value / 10000 * 180;
+                                    $('#rpms').text(value);
+                                    $('#rpmNeedle').css("-webkit-transform","rotate("+needleDegs+"deg)");
+                                },
+                                function() { } );
+
+                    vehicle.get("running_status_transmission_gear_status", function(data) {
+                                    value = data[0].value;
+                                    $('#gear').text(value);
+                                },
+                                function() { } );
+
+                    vehicle.get("running_status_steering_wheel_angle", function(data) {
+                                    value = data[0].value;
+                                    $('#wheel').css("-webkit-transform","rotate("+value+"deg)");
+                                },
+                                function() { } );
               },1000);
 }
 

diff --git a/index.html b/index.html
index cc6ffa6..b7382ce 100644 (file)
--- a/index.html
+++ b/index.html
@@ -26,11 +26,16 @@
 
                <div class="vbox">
                        <div class="hbox">
-                               <div class="gauge" >
-                                       <img src="assets/dial-IAT-bg.png" >
-                                               <div id="iatNeedle" class="needle"></div>
-                                       </img>
-                               </div>
+                        <div id="gaugeRow">
+                        <div class="gauge" >
+                        <img src="assets/dial-IAT-bg.png" >
+                        <div id="iatNeedle" class="needle"></div>
+                        </img>
+                        </div>
+                        <div class="gauge" >
+                        <img id="wheel" src="assets/wheel.png" />
+                        </div>
+                        </div>
 
                                <div id="gaugeRow">
                                        <div class="gauge">
@@ -55,6 +60,10 @@
                                        <div class="rightAlignText middleText">AVG MPG</div>
                                        <div id="avgmpg" class="leftAlignText middleText">0</div>
                                </div>
+                                <div class="row underborder" >
+                                        <div class="rightAlignText middleText">Gear</div>
+                                        <div id="gear" class="leftAlignText middleText">0</div>
+                                </div>
                                <div class="row" >
                                        <div class="rightAlignText middleText">AVG SPEED</div>
                                        <div id="avgspeed" class="leftAlignText middleText">0</div>

diff --git a/style.css b/style.css
index b64f9d5..9ae5f7c 100644 (file)
--- a/style.css
+++ b/style.css
@@ -140,6 +140,12 @@
        position: relative;
 }
 
+#wheel {
+        -webkit-transform:rotate(0deg);
+        -webkit-transform-origin: 50% 50%;
+        -webkit-transition: all 1s cubic-bezier(0.25,0.1,0.25,1);
+}
+
 #iatNeedle {
        z-index: 110;
        background-color: red;