Trixology

WeatherCat => WeatherCat Web Templates => Topic started by: TechnoMonkey on January 26, 2016, 05:37:28 am

Title: New wind gauge
Post 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)

Code: [Select]
<?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>
Title: Re: New wind gauge
Post by: mcrossley on January 26, 2016, 10:11:17 am
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
Title: Re: New wind gauge
Post by: elagache on January 26, 2016, 10:49:35 pm
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
Title: Re: New wind gauge
Post by: TechnoMonkey on January 26, 2016, 10:58:39 pm
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!
Title: Re: New wind gauge
Post by: Blicj11 on January 27, 2016, 05:58:54 pm
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.