basti1012.bplaced.net

Es geht um eine kleine Webapp, mit der man mittels der Google Maps API Wegpunkte setzen kann und diese werden in einer Datenbank abgespeichert, um sie nachher auf einem Kompass darzustellen. Ich habe gestern mittels dieser <a href="https://github.com/lamplightdev/compass">Vorlage</a> einen groben Prototypen erstellt, der Koordinaten miteinander vergleicht, wobei einer der Ausgangspunkt ist und dazu in Relation die Richtung zum anderen auf dem Kompass anzeigt. Klar so weit? Das funktioniert prinzipiell ganz gut und ich bin von der technischen Seite zufrieden, nur die Darstellung ist nicht so das wahre. Mir wäre dafür ein horizontaler Kompass lieber, da man auch Namen der Wegpunkte besser darstellen könnte. Meine Idee war zunächst einen Container zu schaffen mit all meinen Infos und ein hübsches Kompassbild im Hintergrund. Mit style.transform und der Option Translate, hätte ich das dann verschoben. Ich müsste dann eine 1:1 Kopie neben den Container setzen, damit man, wenn man am Rand, ist kein leeres Bild hat. Jedoch vermute ich, dass der Sprung von 359° auf 0° etwas jumpy wirkt. Viel einfacher aber nicht so hübsch animiert war meine Idee 90 Textfelder fest darzustellen und diese anhand der Orientierung zu beschriften. Nicht sehr hübsch aber simpel. Damit wäre auch der Sprung von 359° auf 0° nicht bemerkbar.

Code

                                    
                                 
<style>
 
div.dig  {
  position: absolute;
  width: 10px;
  height: 10px;
  font-size: 10px;
  color: black;
  text-align: center;
  padding: 0px 0 0 20px;
}
 
#table {
  border:2px solid red;
  overflow:hidden;
position:absolute;
  width: 400px;
  height: 400px;
 left:10px;
 top:10px;
 border-radius:50%;
}

</style>
<div id="alles">
  <div id="table">
    <div id="dig1" class="dig">1</div>
    <div id="dig2" class="dig">2</div>
    <div id="dig3" class="dig">3</div>
    <div id="dig4" class="dig">4</div>
    <div id="dig5" class="dig">5</div>
    <div id="dig6" class="dig">6</div>
    <div id="dig7" class="dig">7</div>
    <div id="dig8" class="dig">8</div>
    <div id="dig9" class="dig">9</div> 
    <div id="dig10" class="dig">10</div>  
    <div id="dig11" class="dig">11</div> 
    <div id="dig12" class="dig">12</div> 
   
       <div id="dig13" class="dig">13</div>
    <div id="dig14" class="dig">14</div>
    <div id="dig15" class="dig">15</div>
    <div id="dig16" class="dig">16</div>
    <div id="dig17" class="dig">17</div>
    <div id="dig18" class="dig">18</div>
    <div id="dig19" class="dig">19</div>
    <div id="dig20" class="dig">20</div>
    <div id="dig21" class="dig">21</div> 
    <div id="dig22" class="dig">22</div>  
    <div id="dig23" class="dig">23</div> 
    <div id="dig24" class="dig">24</div>  
    
      <div id="dig25" class="dig">25</div> 
    <div id="dig26" class="dig">26</div>  
    <div id="dig27" class="dig">27</div> 
    <div id="dig28" class="dig">28</div>   
       <div id="dig29" class="dig">29</div> 
 <div id="dig30" class="dig">30</div>
    <div id="dig31" class="dig">31</div> 
    <div id="dig32" class="dig">32</div>  
    <div id="dig33" class="dig">33</div> 
    <div id="dig34" class="dig">34</div>  
    
      <div id="dig35" class="dig">35</div> 
    <div id="dig36" class="dig">36</div>  
    <div id="dig37" class="dig">37</div> 
    <div id="dig38" class="dig">38</div>   
       <div id="dig39" class="dig">39</div> 
     <div id="dig40" class="dig">40</div>
    
    
    
  </div>
</div>
<script>



var dots=40;


for (i=0; i < 40; ++i){
 
  document.getElementById("dig" + (i+1)).style.top=250-55+160*Math.sin(-0.49+dots+i/6.3).toString() + "px";
document.getElementById("dig" + (i+1)).style.left=250-64+160*Math.cos(-0.49+dots+i/6.3).toString() + "px";  
 document.getElementById("dig" + (i+1)).style.transform='rotate('+i*9+'deg)'; 
}
function go(){
if (s < 360){
document.getElementById("table").style.transform='rotate('+s+'deg)';
s++;
}
if(s==360){
  s=1;
}
}
  s=0;
  setInterval(function(){ go()},20)
</script>