Trixology
WeatherCat => WeatherCat Web Templates => Topic started by: TechnoMonkey on January 26, 2016, 05:37:28 AM
-
I managed to create a wind gauge with just a few lines of code. (credit to www.sourcecodester.com/htmlcss/8003/image-rotate-using-css.html) The positioning needs better coding, but it works. The pointer is temporary until I build a nice one to compliment the gauge.
technomonkeys.com/Weather/main.php?page=wind_direction.php (http://technomonkeys.com/Weather/main.php?page=wind_direction.php)
<?php
$degrees = WDDEGREES$ . "deg";
?>
<style>
#pointer{
margin-left:48%;
margin-top:80px;
}
.pole{
position:absolute;
margin-left:-214px;
top:200px;
}
#blade{
transform: <?php echo "rotate($degrees)"; ?>;
}
</style>
<div id='pointer' style='text-align:left;'>
<div class="pole"><img src="images/compass.png"></div>
<img src="images/pointer.png" id="blade">
</div>
-
One I produced takes a bit more code, but uses the same basis of CSS rotations...
http://weather.wilmslowastro.com/test/instromet/climatica/climatica.php
-
Dear Mark, TechnoMonkey, and WeatherCat real-time web spinners,
Thanks for sharing your two examples of displaying wind direction in real-time. The only thing I would want to display to my current website in real-time that wouldn't remain a digital number is the wind direction. Nonetheless, I would once more like to keep it simple. I don't feel there is a desperate need to display the wind direction with great precision. If someone really needs that information, the angle could be displayed as a number instead of trying to make a graph that is actually harder to read.
Cheers, Edouard
-
One I produced takes a bit more code, but uses the same basis of CSS rotations...
http://weather.wilmslowastro.com/test/instromet/climatica/climatica.php
Well done!
-
One I produced takes a bit more code, but uses the same basis of CSS rotations...
http://weather.wilmslowastro.com/test/instromet/climatica/climatica.php
Very cool Mark. Thanks for sharing.