title: Animate a car using jquery and css using live acceleration data
body: <p>I have a basic car model that is animated using CSS.</p>
  <p>On the other hand, I have a live data stream consists of acceleration on the x and z-axis The data are retrieved from a remote server using server-sent-event (sse). I want to be able to use the acceleration data to animate the car accordingly. The goal is to move the car forward up/down using accelerationZ and right/left using accelerationX.</p>
  <p>This is how the car look like in 2D:</p>
  <p><a href="https://i.stack.imgur.com/BjWGC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BjWGC.png" alt="truckSimDemo" /></a></p>
  <p>I am just not sure how to include continuously changing live data in css and make the animation changes according to the input data so the car can accelerate and decelerate.</p>
  <p><a href="https://github.com/samiarja/vehicle-sim-demo" rel="nofollow noreferrer">This is the current code</a> of the car simulation model based on html/css/JS. Currently I am using constant value for track velocity and wheel rotation speed like shown below:</p>
  <pre><code>.track{
      height:60vh;
      width:800vw;
      background-image: url(./img/track.png);
      position:absolute;
      top:70vh;
      background-repeat: repeat-x; 
      animation: carMove linear 13s infinite;
  }
  .car{
      height: 500px;
      width: 500px;
      background-image: url(./img/miningtruck.png);
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      left: 500px;
      bottom:15vh;
      animation: shake linear .5s infinite;
  }
  .wheel1 img{
      width: 210px;
      position: relative;
      top:215px;
      left:42px;
      animation: wheelRotation linear .5s infinite;
  }
  
  .wheel2 img{
      width: 210px;
      position: relative;
      top: -0px;
      left: 275px;
      animation: wheelRotation linear .5s infinite;
  </code></pre>
  <p>My concern is how to replace the 13s or .5s by a dynamically changing value accX and accZ</p>
  <p>This is how I get the live feed using sse to get accx and accz:</p>
  <pre><code>    // globally initial the sensorAddr, accX and accZ to be able to use in other function
      // these values comes from the onMsg function 
      let sensorAddr = 0;
      let accX = 0;
      let accZ = 0;
  
  
      // how to include the jquery code here to send 
      // the acceleration to the css to dynamically animate
      // the vehicle
  
  
      StartRetrieveLiveData();
  
      function onMsg(event) {
      
              var received_msg = event.data;
              var obj = JSON.parse(JSON.parse(received_msg));
      
              if (obj !== null) {
      
                  if (
                      obj.hasOwnProperty(&quot;DataMapChangedObjectsAddressValue&quot;) &amp;&amp;
                      obj[&quot;DataMapChangedObjectsAddressValue&quot;][0][&quot;DataMapAddress&quot;] !==
                      undefined
                  ) {
                      sensorAddr =
                          obj[&quot;DataMapChangedObjectsAddressValue&quot;][0][&quot;DataMapAddress&quot;];
      
                      if (sensorAddr == 1) {
                          accX =
                              obj[&quot;DataMapChangedObjectsAddressValue&quot;][0][&quot;Value&quot;];
                              console.log(&quot;AccX&quot;, accX);
                      }
                      if (sensorAddr == 3) {
                          accZ =
                              obj[&quot;DataMapChangedObjectsAddressValue&quot;][0][&quot;Value&quot;];
                              console.log(&quot;AccZ&quot;, accZ);
                      }
                      if (sensorAddr == 204) {
                          timeStamp =
                              obj[&quot;DataMapChangedObjectsAddressValue&quot;][0][&quot;Value&quot;];
                      }
                  }
              }
      
          }
      
          function onOpen(e) {
              console.log(&quot;SSE connected&quot;);
          }
      
          function onError(e) {
              // console.log(`[error] ${error.message}`);
              if (e.eventPhase == EventSource.CLOSED) this.source.close();
              if (e.target.readyState == EventSource.CLOSED) {
                  console.log(&quot;SSE Disconnected&quot;);
              } else if (e.target.readyState == EventSource.CONNECTING) {
                  console.log(&quot;SSE Connecting ...&quot;);
              }
          }
      
          function StartRetrieveLiveData() {
              if (!!window.EventSource) {
                  this.source = new EventSource(&quot;/sse&quot;);
              } else {
                  console.log(&quot;Your browser doesn't support SSE&quot;);
              }
      
              this.source.addEventListener(&quot;message&quot;, e =&gt; this.onMsg(e));
      
              this.source.addEventListener(&quot;open&quot;, e =&gt; this.onOpen(e), false);
      
              this.source.addEventListener(&quot;error&quot;, e =&gt; this.onError(e), false);
      
          }
  </code></pre>
  <p>I would appreciate any feedback. Any hint or a better approach would be great. I just want a head starter making any significant to the code.</p>