Weather Tracker IoT | Jiho Park/title> <style> .publication-title { font-size: 3rem; font-weight: bold; display: flex; align-items: center; gap: 0.5rem; } .title-text { background: linear-gradient(90deg, #00f260, #0575e6, #ff0080, #7928ca); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1), 4px 4px 8px rgba(0, 0, 0, 0.2); animation: gradientShift 30s infinite ease-in-out; } @keyframes gradientShift { 0% { background-position: 48% 50%; } 50% { background-position: 52% 50%; } 100% { background-position: 48% 50%; } } .publication-links .button { background: linear-gradient(45deg, #00f260, #0575e6, #ff0080, #7928ca); background-size: 300% 300%; color: white !important; font-weight: 600; border: none; transition: background-position 3s ease; text-shadow: 0 0 px black; } .publication-links .button:hover { background-position: 100% 50%; color: #fff !important; } .publication-links .button .icon i, .publication-links .button .icon img { filter: drop-shadow(0 0 1px rgba(0,0,0,0.7)); vertical-align: middle; } /* 让按钮间距更合理 */ .publication-links .link-block { margin: 0 0.3rem; } </style> </head> <body> <section class="hero"> <div class="hero-body"> <div class="container is-max-desktop"> <div class="columns is-centered"> <div class="column has-text-centered"> <h1 class="title publication-title"> <span class="title-text">Weather Tracker IoT </span> </h1> <div class="is-size-5 publication-authors">  <span class="author-block"> <a href="https://github.com/parkjh21c" target="_blank">Jiho Park</a><sup>1</sup>, <br> </span> </div> </br> <div class="is-size-5 publication-authors"> <div style="text-align: center; margin-bottom: 5px;"> <span class="author-block"><sup>1</sup> Sejong University, Department of Intelligent Mechatronics Engineering</span> </br> </div> </div> <div class="column has-text-centered"> <div class="publication-links">  <span class="link-block"> <a href="https://github.com/JiyunElizabethYang/IoT-C" target="_blank" class="external-link button is-normal is-rounded is-dark"> <span class="icon"> <i class="fab fa-github" style="color: black;"></i> </span> <span>Code</span> </a> </span> </div> </div> </div> </div> </div> </div> </div> </section> <section class="section hero is-small"> <div class="container is-max-desktop"> <div class="columns is-centered"> <div class="column is-full"> <div class="content"> <h2 class="title is-3 has-text-centered" style="background: linear-gradient(45deg, #f200b571, #eb419f8e, #0077ff5b, #2881cad7); color: white; padding: 10px; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); text-align: center;"> Weather Tracker IoT </h2> <div class="level-set has-text-justified"> <p></p> </div> <div style="border: none; border-radius: 15px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); overflow: hidden; background: linear-gradient(45deg, #0575e6, #7928ca81); padding: 10px;"> <video poster="" id="tree" autoplay controls muted loop height="100%" style="display: block; width: 100%; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);"> <source src="static\videos\video-demo.mp4" type="video/mp4"> </video> </div> </div> </div> </div> </div> </section>  <section class="section hero is-light"> <div class="container is-max-desktop"> <h2 class="title is-3" style="background: linear-gradient(45deg, #f200b571, #eb419f8e, #0077ff5b, #2881cad7); color: white; padding: 10px; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); text-align: center;"> My Contribution </h2> <div class="columns is-multiline">  <div class="column is-half"> <div class="box workflow-card"> <div class="step-number">01</div> <h3 class="title is-4"><i class="fas fa-satellite"></i> GPS Module</h3> <p>Configured a GPS module within the simulation environment to reliably receive real-time <b>Lat (Latitude)</b> and <b>Lon (Longitude)</b> coordinates.</p> </div> </div>  <div class="column is-half"> <div class="box workflow-card"> <div class="step-number">02</div> <h3 class="title is-4"><i class="fas fa-map-marked-alt"></i> Coordinate and Location Name Conversion</h3> <p>The system supports two-way conversion between coordinates and location names using the <code>location.h</code> library.</p> </div> </div>  <div class="column is-half"> <div class="box workflow-card"> <div class="step-number">03</div> <h3 class="title is-4"><i class="fas fa-th"></i> KMA Grid Conversion</h3> <p>Mapped the standard geographic coordinates (Lat/Lon) into the specialized <b>Grid Coordinate System</b> required by the KMA API.</p> </div> </div>  <div class="column is-half"> <div class="box workflow-card"> <div class="step-number">04</div> <h3 class="title is-4"><i class="fas fa-cloud-sun"></i> Passing Grid Coordinates to the KMA API</h3> <p>Transmitted the converted Grid coordinates to the <b>KMA API</b> server to fetch and display live weather information.</p> </div> </div> </div> </div> </section>  <section class="section hero is-small"> <div class="container is-max-desktop"> <div class="columns is-centered"> <div class="column is-full"> <div class="content"> <h2 class="title is-3" style="background: linear-gradient(45deg, #f200b571, #eb419f8e, #0077ff5b, #2881cad7); color: white; padding: 10px; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); text-align: center;"> GPS Module Implementation </h2>  <span class="link-block"> <a href="https://github.com/JiyunElizabethYang/IoT-C/blob/main/server.py" target="_blank" class="external-link button is-normal is-rounded is-dark"> <span class="icon"> <i class="fas fa-file-alt" style="color: #D3D3D3;"></i> </span> <span>server.py</span> </a> </span> <div class="content has-text-justified"> <p> One of the main technical challenges was that <strong>Wokwi does not provide a built-in GPS module</strong>. As a result, the simulation environment cannot directly obtain location data. To address this limitation, we chose to retrieve location information locally using <strong>Visual Studio Code (VSC)</strong>. </p> <ul> <li> <strong>Initial Attempt:</strong> I first tried to estimate the location using an IP-based Wi-Fi approach. However, this method only returned the location of the internet base station, which was not accurate enough for precise weather data retrieval. </li> <li> <strong>Local Location Acquisition:</strong> Since most laptops do not have a physical GPS sensor, I utilized the <strong>Windows Geolocation API</strong>, which estimates the device’s position using Wi-Fi and network-based information. </li> <li> <strong>Server-Based Bridge:</strong> Because Wokwi runs in a sandbox environment, direct access to the host system is restricted. To overcome this, I implemented a local server using <code>server.py</code>. This server retrieves the estimated latitude and longitude from the host machine and transmits them to the Wokwi simulation, effectively bypassing the sandbox limitation. </li> </ul> <div class="has-text-centered mt-4"> <img src="static/images/server_py.png" alt="Local GPS Server Architecture" style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> </div> </div> </div> </div> </div> </div> </section>  <section class="section hero is-small"> <div class="container is-max-desktop"> <div class="columns is-centered"> <div class="column is-full"> <div class="content"> <h2 class="title is-3" style="background: linear-gradient(45deg, #f200b571, #eb419f8e, #0077ff5b, #2881cad7); color: white; padding: 10px; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); text-align: center;"> Coordinate and Location Name Conversion </h2>  <span class="link-block"> <a href="hhttps://github.com/JiyunElizabethYang/IoT-C/blob/main/src/location.h" target="_blank" class="external-link button is-normal is-rounded is-dark"> <span class="icon"> <i class="fas fa-file-alt" style="color: #D3D3D3;"></i> </span> <span>location.h</span> </a> </span> <div class="content has-text-justified"> <p> By converting regional data from Excel into a <code>location.h</code> file, the system supports both coordinate-to-location and location-to-coordinate conversion for KMA weather API requests. </p> </div> <div class="columns is-mobile is-centered mt-4"> <div class="column is-half"> <img src="static/images/xlsx.png" alt="Geocoding Process Image 1" style="display: block; width: 100%; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);"> </div> <div class="column is-half">  <img src="static/images/location_h.png" alt="Geocoding Process Image 2" style="display: block; width: 100%; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);"> <img src="static/images/location_h2.png" alt="Geocoding Process Image 2" style="display: block; width: 100%; border-radius: 15px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);"> </div> </div> </div> </div> </div> </div> </section>  <section class="section hero is-small"> <div class="container is-max-desktop"> <div class="columns is-centered"> <div class="column is-full"> <div class="content"> <h2 class="title is-3" style="background: linear-gradient(45deg, #f200b571, #eb419f8e, #0077ff5b, #2881cad7); color: white; padding: 10px; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); text-align: center;"> KMA Grid Conversion </h2> <div class="content has-text-justified"> <p> Our system retrieves weather information using the <strong>KMA (Korea Meteorological Administration) API</strong>. However, this API does not accept standard GPS coordinates (latitude and longitude) directly. The KMA API uses a unique system called <b>KMA grid coordinates (NX, NY)</b> for its weather data, instead of standard GPS coordinates. </p> <ul> <li> <strong>Why Grid Coordinates Are Needed:</strong> The KMA divides the entire country into a grid, where each grid cell represents an area of approximately 1 km × 1 km. Weather data is provided based on these grid cells, not raw GPS coordinates. </li> <li> <strong>Coordinate Conversion:</strong> To request accurate weather data, I converted standard latitude and longitude values into the corresponding KMA grid coordinates using a dedicated transformation algorithm. </li> <li> <strong>Practical Integration:</strong> This conversion process was implemented directly in the firmware, allowing the IoT device to seamlessly connect location information with the KMA weather database. </li> </ul> <div class="has-text-centered mt-4"> <img src="static/images/grid_mermaid.png" alt="Local GPS Server Architecture" style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> <img src="static/images/change_grid.png" alt="Local GPS Server Architecture" style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> </div> </div> </div> </div> </div> </div> </section>  <section class="section hero is-small"> <div class="container is-max-desktop"> <div class="columns is-centered"> <div class="column is-full"> <div class="content"> <h2 class="title is-3" style="background: linear-gradient(45deg, #f200b571, #eb419f8e, #0077ff5b, #2881cad7); color: white; padding: 10px; border-radius: 10px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); text-align: center;"> Passing Grid Coordinates to the KMA API </h2> <div class="content has-text-justified"> <p> After converting the location into <strong>KMA grid coordinates (NX, NY)</strong>, the resulting values are directly passed to the <strong>KMA weather API</strong>. This step ensures that the API request follows the coordinate system required by the Korea Meteorological Administration. </p> <ul> <li> <strong>Grid-Based Request:</strong> The previously converted NX and NY values are used as input parameters when calling the KMA Open API. </li> <li> <strong>Consistent Data Flow:</strong> By delivering grid coordinates that match the KMA standard, the system can reliably retrieve weather data for the corresponding region. </li> </ul> <div class="has-text-centered mt-4"> <img src="static/images/CURRENT_LOCATION.png" alt="KMA Grid Coordinate Flow" style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"> </div> </div> </div> </div> </div> </div> </section> <footer class="footer"> <div class="container"> <div class="columns is-centered"> <div class="column is-8"> <div class="content"> <p> This page was built using the <a href="https://github.com/eliahuhorwitz/Academic-project-page-template" target="_blank">Academic Project Page Template</a> which was adopted from the <a href="https://nerfies.github.io" target="_blank">Nerfies</a> project page. You are free to borrow the of this website, we just ask that you link back to this page in the footer. <br> This website is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative Commons Attribution-ShareAlike 4.0 International License</a>. </p> </div> </div> </div> </div> </footer>    <script> document.addEventListener('DOMContentLoaded', function() { // 1. 위에서 만든 Carousel의 id ("#pdf-carousel")를 찾아 초기화합니다. bulmaCarousel.attach('#pdf-carousel', { slidesToScroll: 1, // 한 번에 1장씩 넘기기 slidesToShow: 1, // 한 번에 1장만 보여주기 navigation: true, // true로 설정하면 좌/우 화살표 버튼이 생깁니다. pagination: true // true로 설정하면 하단에 점(dot) 네비게이션이 생깁니다. }); }); </script> </body> </html>