JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

<script src="http://localhost:12175/javascript/GpsGate.js"></script>
<div id='compass'>
 </div>

CSS

body {
    background: #00acec;
}
#compass {
    background: url("http://static.nsel-clnsa.com.ni/Images/Icons/SHD/ICN_SPT_Mapa_01.png") no-repeat scroll 0 -95px;
    width: 32px;
    height: 32px;
    text-align: center;
    position: relative;
    bottom: -100px;
    left: 250px;
}

JavaScript

var heading = 0;

$(document).ready(function(){
    //Compass
    window.setInterval(function(){    
            heading = heading + 1;
            window.compass = new Compass();
            //console.log(heading);
    },100);
    
    /*if (typeof (GpsGate) != 'undefined' && typeof (GpsGate.Client) != 'undefined') {
            GpsGate.Client.getGpsInfo(asignar_latitud);
            alert("datos");
     }*/
    
});

function Compass() {
    
    $("#compass").css("-webkit-transform", "rotate(" + heading + "deg)")
    
    /*if(heading == 0) {
        $("#compass").css("-webkit-transform", "rotate(-220deg)")
    }
    if(heading == 90) {
        $("#compass").css("-webkit-transform", "rotate(-130deg)")
    }
    if(heading == 180) {
        $("#compass").css("-webkit-transform", "rotate(-40deg)")
    }
    if(heading == 270) {
        $("#compass").css("-webkit-transform", "rotate(-305deg)")
    }*/
    //this.layer = layer;
    //this.line = new Array(11);

    //this.layer.innerHTML = "";

    /*for (var i = 0; i < this.line.length; i++) {
        with ((this.line[i] = document.createElement("div")).style) {
            position = "absolute";
            overflow = "hidden";
            left = 0;
            top = 0;
            width = "2px";
            height = "2px";
            background = "#000";
        }
        //this.layer.appendChild(this.line[i]);
    }*/
    //var thiz = this;

    /*window.setInterval(function () {
        var rad = 34;
        var phi = (heading - 90) / 180 * 3.14159;

        for (var i = 0; i < thiz.line.length; i++) {
            var pixel = thiz.line[i];
            with (pixel.style) {
                left = (0 + 230 / 2 + (i * rad / (thiz.line.length)) * Math.cos(phi)) - 4 + "px";
                top = (0 + 149 / 2 + (i * rad / (thiz.line.length)) * Math.sin(phi)) + "px";
            }
        }
    }, 2000);*/
    
    
}