Author Topic: New wind gauge  (Read 1398 times)

TechnoMonkey

  • Strong Breeze
  • ***
  • Posts: 127
    • EW9323
    • KTXARANS6
    • TechnoMonkeys Weather
  • Station Details: La Crosse WS-2315 / High Sierra Server / Mac Mini 2.3 GHz Intel Core i5/ 8GB Ram / OS 120GB SSD / Home Folder 500GB FireWire / DATA 8TB RAID 5 / 1TB TIME CAPSULE
New wind gauge
« 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

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>

mcrossley

  • Strong Breeze
  • ***
  • Posts: 241
  • Sorry, I'm not a WeatherCat user!
    • ICHESHIR25
    • Wilmslow Astro Weather
  • Station Details: WH1090
Re: New wind gauge
« Reply #1 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
Mark

elagache

  • Global Moderator
  • Storm
  • *****
  • Posts: 5297
    • DW3835
    • KCAORIND10
    • Canebas Weather
  • Station Details: Davis Vantage Pro-2, Mac mini (2018), macOS 10.14.3, WeatherCat 3
Re: New wind gauge
« Reply #2 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

TechnoMonkey

  • Strong Breeze
  • ***
  • Posts: 127
    • EW9323
    • KTXARANS6
    • TechnoMonkeys Weather
  • Station Details: La Crosse WS-2315 / High Sierra Server / Mac Mini 2.3 GHz Intel Core i5/ 8GB Ram / OS 120GB SSD / Home Folder 500GB FireWire / DATA 8TB RAID 5 / 1TB TIME CAPSULE
Re: New wind gauge
« Reply #3 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!

Blicj11

  • Storm
  • *****
  • Posts: 3242
    • EW3808
    • KUTHEBER6
    • Timber Lakes Utah
  • Station Details: Davis Vantage Pro2 Plus | WeatherLinkIP™ Data Logger | iMac (late 2013), 3.5 GHz Intel Core i7, 24 GB RAM, macOS Mojave | Sharx SCNC2900 Webcam | Supportive Wife
Re: New wind gauge
« Reply #4 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.
Blick