<?php include_once('livedata.php');?>
<!--windirection minimal home weather station start parsing live raw output new version June 17th jquery--->

<style>
/* windirection homeweatherstation css July 15th 2016  cleaned with http://www.cleancss.com/css-beautify/*/
.windirection {
    margin: 10px 0 0 85px;
    width: 100%;
}
.homeweathercompass {
    position: absolute;
    width: 175px;
    height: 175px;
    text-align: center;
    margin-top: -20px;
    margin-left: -20px;
    background: none;
    z-index: 1;
}
.text {
    z-index: 10;
    margin:auto 0;
    margin-top: 60px;
    text-align:center;
    background: none;
    font-family: 'weathertext', Helvetica, Arial;
    font-size: 26px;   
    background: none;
	color:#878a8c;
	
}
.windvalue {
    font-family: 'weathertext', Helvetica, Arial;
    font-size: 26px;
    background: none;
	color:#878a8c;
}
.homeweathercompass > .homeweathercompass-line {
    position: absolute;
    z-index: 10;
    left: 25px;
    right: 25px;
    top: 25px;
    bottom: 25px;
    margin: auto;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    border-left: 8px solid rgba(95, 96, 97,0.5);
    border-top: 8px solid rgba(95, 96, 97,0.8);
    border-right: 8px solid rgba(95, 96, 97,0.5);
    border-bottom: 8px solid rgba(95, 96, 97,0.8);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
    -moz-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
    -o-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
    -ms-clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 0);
}

.thearrow {
    position: absolute;
    z-index: 200;
    top: 0;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 50%;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    -o-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.thearrow:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0%;
    height: 15px;
    width: 15px;
    background-color: #f26c4f;
    
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.thearrow:before {
    content: '';
    width: 6px;
    height: 6px;
    position: absolute;
    z-index: 9;
    left: 2px;
    top: -3px;
    border: 2px solid #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -o-border-radius: 100%;
    -ms-border-radius: 100%;
    border-radius: 100%;
}
.homeweathercompass > .windirectiontext {
    display: block;
    margin:auto 0;
    margin-top: 0px;
    text-align:center;
    color:#878a8c;
    font-family: "Helvetica", Arial, "Lucida Grande", sans-serif;
    font-weight: 600;
    line-height: 12px;
    font-size: 12px;
    z-index: 10;  
   
}
.windirectiontext span {
    color: #F26C4F
}
@keyframes rotate {
    0% {
        -webkit-transform: rotate(<?php echo $cumulus[7] -12;?>deg);
        -moz-transform: rotate(<?php echo $cumulus[7] -12;?>deg);
        -o-transform: rotate(<?php echo $cumulus[7] -12;?>deg);
        -ms-transform: rotate(<?php echo $cumulus[7] -12;?>deg);
        transform: rotate(<?php echo $cumulus[7] -12;?>deg);
    }
    50% {
        -webkit-transform: rotate(<?php echo $cumulus[7] -5;?>deg);
        -moz-transform: rotate(<?php echo $cumulus[7] -5;?>deg);
        -o-transform: rotate(<?php echo $cumulus[7] -5;?>deg);
        -ms-transform: rotate(<?php echo $cumulus[7] -5;?>deg);
        transform: rotate(<?php echo $cumulus[7] -5;?>deg);
        
    }
    to {
        -webkit-transform: rotate(<?php echo $cumulus[7];?>deg);
        -moz-transform: rotate(<?php echo $cumulus[7];?>deg);
        -o-transform: rotate(<?php echo $cumulus[7];?>deg);
        -ms-transform: rotate(<?php echo $cumulus[7];?>deg);
        transform: rotate(<?php echo $cumulus[7];?>deg);
        
    }
}
.thearrow {
    animation: rotate 1.5s both ease-in;
    -webkit-animation: rotate 1.5s both ease-in;
    -moz-animation: rotate 1.5s both ease-in;
    -o-animation: rotate 1.5s both ease-in;
    -ms-animation: rotate 1.5s both ease-in;
}
.animated .thearrow {
    animation: rotate 1.5s both ease-in;
    -webkit-animation: rotate 1.5s both ease-in;
    -moz-animation: rotate 1.5s both ease-in;
    -o-animation: rotate 1.5s both ease-in;
    -ms-animation: rotate 1.5s both ease-in;
}

</style>


</head>  
<body><div class="updatedtimedir"><span>
<?php echo "${cumulus[0]}";?></span><br /><?php echo "${cumulus[1]}";?></div> 


<div class="averagedir"><span>Average</span>
<?php
echo "${cumulus[46]}";?>&deg;
</div>


   

<div class="homeweathercompass">
<div class="homeweathercompass-line">
<div class="thearrow rotate"></div>
</div>
<div class="text">  
<div class="windvalue" id="windvalue"><?php echo  $cumulus[7];?>°</div>
</div> 
<div class="windirectiontext">
  <?php echo "";
  //wind direction value output   
  if($cumulus[7]<6){echo "Due <span>North<br></span></div>";}
  else if($cumulus[7]<28){echo "North North <br><span>East</span></div>";}
  else if($cumulus[7]<51){echo "North <span> East<br></span></div>";}
  else if($cumulus[7]<75){echo "East North<br><span>East</span></div>";}
  else if($cumulus[7]<95){echo "Due <span> East<br></span></div>";}
  else if($cumulus[7]<119){echo "East South<br><span>East</span></div>";}
  else if($cumulus[7]<140){echo "South <span> East</span></div>";}
  else if($cumulus[7]<174){echo "South South<br><span>East</span></div>";}
  else if($cumulus[7]<185){echo "Due <span> South</span></div>";}
  else if($cumulus[7]<208){echo "South South<br><span>West</span></div>";}
  else if($cumulus[7]<230){echo "South <span> West</span></div>";}
  else if($cumulus[7]<254){echo "West South<br><span>West</span></div>";}
  else if($cumulus[7]<275){echo "Due <span> West</span></div>";}
  else if($cumulus[7]<298){echo "West North<br><span>West</span></div>";}
  else if($cumulus[7]<320){echo "North <span> West</span></div>";} 
  else if($cumulus[7]<354){echo "North North<br><span>West</span></div>";}    
  else if($cumulus[7]<361){echo "Due <span> North</span></div>";}
   ?></span>
</div>
</div></div>

<script>
//homeweatherstation compass jquery June 7th 2016 //
window.onload = function() {
  var circle = document.querySelector('.homeweathercompass')
  var box = document.querySelector('.thearrow');
  box.classList.add('rotate');
  var el = document.querySelector("#windvalue");}
   </script>
