Javascript/CSS Compass
HTML
<div id="compass-container">
<div class="arrow down"></div>
<div class="arrow up"></div>
<div id="viewport">
<div id="compass-scale">
</div>
</div>
</div>
CSS
div#compass-container {
position:relative;
height: 6em;
}
div#viewport{
position:relative;
height:40%;
width:50%;
left:50%;
top:1.2em;
margin-left:-25%;
overflow: hidden;
}
div#compass-scale {
position:relative;
width: auto;
height: 100%;
}
.mini-container {
width:1em;
height:95%;
top:0em;
border: 0px solid black;
float:left;
}
.line {
position: relative;
left:45%;
width:.1em;
background-color:black;
}
.line.small {
height: 15%;
}
.line.medium {
height: 30%;
}
.line.big {
height: 45%;
}
.compass-text {
position:relative;
height:100%;
width:100%;
margin-top:.4em;
text-align: center;
font-family: sans-serif;
color:dodgerblue;
}
.compass-text.small {
font-size: .6em;
}
.compass-text.big {
font-size: .8em;
}
.arrow {
position:absolute;
width: 0;
height: 0;
left:50%;
}
.arrow.up {
margin-left:-1em;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 2em solid dodgerblue;
bottom: 0em;
...
JavaScript
var remap = function(value, from1, to1, from2, to2, clamp) {
var remapped = (value - from1) / (to1 - from1) * (to2 - from2) + from2;
return remapped;
};
var singleWidth = 0;
var buildCompass = function() {
var compassScale = $("#compass-scale");
compassScale.append(createMiniContainer("big", "big", "N"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("medium", "small", "NO"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("big", "big", "O"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("medium", "small", "SO"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("big", "big", "S"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("medium", "small", "SW"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
compassScale.append(createMiniContainer("small"));
...