Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: hunter-waite/adjective_fire_danger
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: master
Choose a base ref
...
head repository: SLUGIS/adjective_fire_danger
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
Can’t automatically merge. Don’t worry, you can still create the pull request.
Loading
Showing with 608 additions and 975 deletions.
  1. +1 −0 .github/workflows/data_collection.yml
  2. +1 −0 .github/workflows/testing.yml
  3. +2 −0 .gitignore
  4. +14 −8 README.md
  5. +42 −23 index.html
  6. +14 −10 index.js
  7. +165 −0 scripts/leaflet.html
  8. +15 −12 scripts/update_database.py
  9. +0 −8 xml/BRANCH_MOUNTAIN.txt
  10. +0 −12 xml/CARRIZO.txt
  11. +0 −7 xml/LAS_TABLAS.txt
  12. +0 −14 xml/LA_PANZA.txt
  13. +0 −7 xml/SAN_SIMEON.txt
  14. +0 −7 xml/SLO.txt
  15. +354 −867 xml/temp.xml
1 change: 1 addition & 0 deletions .github/workflows/data_collection.yml
Original file line number Diff line number Diff line change
@@ -47,5 +47,6 @@ jobs:
- name: Pushing changes
uses: ad-m/github-push-action@master
with:
branch: master
github_token: $({ secrets.GITHUB_TOKEN })
force: true
1 change: 1 addition & 0 deletions .github/workflows/testing.yml
Original file line number Diff line number Diff line change
@@ -45,5 +45,6 @@ jobs:
- name: Pushing changes
uses: ad-m/github-push-action@master
with:
branch: master
github_token: $({ secrets.GITHUB_TOKEN })
force: true
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -10,4 +10,6 @@ Gemfile
Gemfile.lock
index.markdown
fire_danger_secrets.json
unitapp_admin.json
__pycache__
notes.txt
22 changes: 14 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
# **Adjective Fire Danger/Smokey Bear**
![Cal Fire Logo](img/calfirelong.png)

# **Smokey the Bear/Adjective Fire Danger**

View the final product [here!](slocountyfire.org/adjective_fire_danger)

Pulls Data from the RAWS (Remote Automated Weather Stations) and uses the most recent adjective fire rating
to determine fire danger for that specific day.

## **Workflow**
Using a github actions command an action occurs every hour that runs
*scripts/xml_parser.py* then pushes all new data to the github server.
Using a github actions cron command an action occurs every hour that runs
*scripts/xml_parser.py* then pushes all new data to the github server. At 9 am
on the local server another script gets run that updates the google sheet that
creates the graph.

## **index.html**
Start page of the adjective fire danger, uses bootstrap to manage all the different divisions.

## **index.js**
This code functions to pull data from hourly updated files and display the
correct corresponding smokey bear image
This code grabs the data from the XML folder to display the correct Smokey the Bear image.
Using the JavaScript library *[Leaflet](https://leafletjs.com/index.html)* it creates a map that shows the fire danger for all
of the RAWS in SLO.

#### *Functions*
* *updatePage()* - Initializes the map and legend then loops through all the stations that the website handles.
@@ -51,9 +59,6 @@ A short script for updating the fire danger in the database connects to the Fire
* *main()* - Gets the database credentials, time and calls for an update to the database
* *update_document()* Updates the documents in the Firestore that hold the Smokey Bear data

## **index.html**
Start page of the adjective fire danger, uses bootstrap to manage all the different divisions.

## **update_fire_danger.sh**
This is the file that gets run on the x-drive every morning at 9 am and grabs the prediction for the adjective fire danger
on that day. It runs scripts/xml_parser.py and scripts/update_sheet.py to update the google sheets that create the graphs
@@ -71,3 +76,4 @@ to create the graphs for the last 30 and 90 days
3) The github actions script updates the text files in the github repo once an hour but does not do anything to
update the google sheet. The x-drive runs the same xml_parser script once a day then uses that data to update the
google sheet.
4) Look on "Madonna" for more information.
65 changes: 42 additions & 23 deletions index.html
Original file line number Diff line number Diff line change
@@ -4,22 +4,26 @@

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Adjective Fire Danger</title>

<link rel="shortcut icon" type="image/ico" href="img/favicon.png"/>

<!-- Bootstrap Stuff -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<!-- Font Awesome used for the icons in the menu bar -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

<script src="index.js" type="text/javascript"></script>

<!-- Different styling stuff -->
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>

<!-- Leaflet Import -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
@@ -28,25 +32,24 @@
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

</head>

<body onload="init()" data-target=".navbar-fixed-top">

<!-- Begin Navbar, Navabr Section using custom CSS from style.css -->
<nav class="navbar navbar-custom navbar-fixed-top navbar-expand-lg" role="navigation" >
<a class="navbar-brand" href="http://slocountyfire.org/">
<img src="img/calfirelong.png" id="CalFireLogoLong" class="mw-100" style="width: 290px" alt="CAL FIRE SLUGIS"></img>
</a>

<!-- Toggler/collapsibe Button -->
<!-- Navbar collapse toggle -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nav navbar-nav ml-auto">
<div class="dropdown d-none d-lg-block">
<!-- Navbar expanded -->
<button class="btn btn-lg btn-custom" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
@@ -59,6 +62,8 @@
</div>
</div>

<!-- Navbar collapsed, basically mobile -->
<!-- Buttons using the FontAwesome -->
<div class="d-lg-none">
<button class="btn btn-custom nav-item">
<a class="nav-link" href="http://slocountyfire.org/BurnDayStatus">
@@ -94,8 +99,11 @@
</ul>
</div>
</nav>
<!-- End Navbar -->

<!-- Begin Body -->
<div class="container-fluid">
<!-- Begin Smokey. smokey the bear images, scale to size of window and side by side -->
<div class="row">
<div class="col-sm-6" name="smokey_coastal">
<img src="img/low.png" id="smokey_bear_coastal" class="mx-auto d-block mt-4 w-50" alt="Smokey The Bear"></img>
@@ -106,49 +114,60 @@ <h3 class="text-center" style="py-5">Coastal</h3>
<h3 class="text-center" style="py-5">Inland</h3>
</div>
</div>
<!-- End Smokey -->

<!-- Begin Smokey Text -->
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<p>This site pulls data from the WIMS Data Exchange Facility, the data uses Ignition Component and Staffing Levels to
calculate an adjective fire rating for the different areas. This is more commonly known as Fire Danger and is denoted by Smokey The Bear's arm.</p>
<p>The <b>Coastal</b> Smokey Bear uses data from the San Luis Obispo RAWS (Remote Automated Weather Station) while the <b>Inland</b> Smokey bear uses data from the Las Tablas RAWS.
Smokey's arm points to the calculated adjective fire danger for the separate coastal and inland areas, it corresponds directly to the fire danger of that area.
calculate an adjective fire danger rating for the different areas. This is more commonly known as Fire Danger and is denoted by Smokey the Bear's arm.</p>
<p>The <b>Coastal</b> Smokey Bear uses data from the San Luis Obispo Remote Automated Weather Station while the <b>Inland</b> Smokey bear uses data from the Las Tablas Remote Automated Weather Station.
Smokey's arm points to the calculated adjective fire danger rating for the separate coastal and inland areas.
</div>
<div class="col-sm-1"></div>
</div>
<!-- End Smokey Text -->

<!-- Begin Map Text -->
<div class="row mt-2">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<h3 class="text-center" style="py-5">Adjective Fire Danger Rating Map</h3>
<p>Below shows a graph of the available San Luis Obispo County Remote Automated Weather Stations. Each circle represents a station and its color denotes the adjective fire danger rating of the area surrounding it.</p>
</div>
<div class="col-sm-1"></div>
</div>
<!-- End Map Text -->

<!-- Being Map, Division created for leaflet to fill map -->
<div class="row">
<div class="mx-auto d-block" id="fire_danger_map"></div>
</div>
<!-- End Map -->

<div class="row mt-2">
<!-- Begin Graph Text-->
<div class="row mt-4">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<h3 class="text-center" style="py-5">Fire Danger Map</h3>
<p>Above shows a graph of the availible San Luis Obispo County RAWS. Each circle represents a station and its color denotes the fire danger of the area surrounding the station.</p>
<h3 class="text-center" style="py-5">Adjective Fire Danger Rating History</h3>
<p>Shown below are the adjective fire ratings for the past 30 and 90 days. The graphs show the 4 stations typically used in the <a href="http://slocountyfire.org/FDOP/">Fire Danger Operating Plan(FDOP).</a>
La Panza and Las Tablas are considered inland stations while San Simeon and San Luis Obispo would be considered coastal stations.</p>
</div>
<div class="col-sm-1"></div>
</div>
<!-- End Graph Text -->

<!-- Begin Graphs, references a google sheet located on the SLUGIS account -->
<div class="row">
<div class="col-sm-6">
<img id="fd_last_30" class="mx-auto d-block mt-4 w-100" alt="Fire Danger Last 30 Days" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTByfkzrqGO6UR3nbHS5LVzWa5hSaaewyjevjtsHEKN8vCUqH3d_Gl8NsQ0mGFGYC9-Ch5yb7kedCq5/pubchart?oid=540355554&amp;format=image"></img>
<img id="fd_last_30" class="mx-auto d-block w-100" alt="Adjective Fire Danger Last 30 Days" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTByfkzrqGO6UR3nbHS5LVzWa5hSaaewyjevjtsHEKN8vCUqH3d_Gl8NsQ0mGFGYC9-Ch5yb7kedCq5/pubchart?oid=540355554&amp;format=image"></img>
</div>
<div class="col-sm-6">
<img id="fd_last_90" class="mx-auto d-block mt-4 w-100" alt="Fire Danger Last 90 Days" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTByfkzrqGO6UR3nbHS5LVzWa5hSaaewyjevjtsHEKN8vCUqH3d_Gl8NsQ0mGFGYC9-Ch5yb7kedCq5/pubchart?oid=1382988888&amp;format=image"></img>
<img id="fd_last_90" class="mx-auto d-block w-100" alt="Adjective Fire Danger Last 90 Days" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTByfkzrqGO6UR3nbHS5LVzWa5hSaaewyjevjtsHEKN8vCUqH3d_Gl8NsQ0mGFGYC9-Ch5yb7kedCq5/pubchart?oid=1382988888&amp;format=image"></img>
</div>
</div>

<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-10">
<h3 class="text-center" style="py-5">Fire Danger History</h3>
<p>Shown above are the adjective fire ratings for the past 30 and 90 days. The graphs show the 4 stations typically used in the <a href="http://slocountyfire.org/FDOP/">Fire Danger Operating Plan(FDOP).</a>
La Panza and Las Tablas are considered inland staions while San Simeon and San Luis Obispo would be considered coastal stations.</p>
</div>
<div class="col-sm-1"></div>
</div>
<!-- End Graphs -->

</div>
</body>
24 changes: 14 additions & 10 deletions index.js
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ function updatePage() {
}).addTo(mymap);

// create a legend feature for the map
var legend = L.control({ position: "bottomleft" });
var legend = L.control({ position: "topright" });

// add different features for the legend
legend.onAdd = function(mymap) {
@@ -43,7 +43,7 @@ function updatePage() {
// loops through all the availivble stations
// station name lat, long image name
for (station of [["LAS_TABLAS", [35.656447, -120.9241], "smokey_bear_inland"],
["SLO", [35.179347, -120.392719], "smokey_bear_coastal"],
["SLO", [35.3027, -120.6786], "smokey_bear_coastal"],
["BRANCH_MOUNTAIN", [35.185233, -120.084989], null],
["CARRIZO", [35.096528, -119.773222], null],
["SAN_SIMEON", [35.59555, -121.1096], null],
@@ -91,14 +91,9 @@ function parseStation(station, mymap) {
updateImg(station, './img/extreme.png');
createCircle(mymap, station[0], station[1], '#FF0000', 'EXTREME');
break;
}
}

// checks to make sure the image source is not null
// then updates the correct smokey bear
function updateImg(station, img) {
if(station[2] != null) {
document.getElementById(station[2]).setAttribute('src', img);
default:
updateImg(station, './img/low.png');
createCircle(mymap, station[0], station[1], '#9EA5B4', 'No Data');
}
}

@@ -114,8 +109,17 @@ function loadFile(filePath) {
return result;
}

// checks to make sure the image source is not null
// then updates the correct smokey bear
function updateImg(station, img) {
if(station[2] != null) {
document.getElementById(station[2]).setAttribute('src', img);
}
}

// creates a circle that displays a pop up
function createCircle(mymap, name, loc, color, label) {
name = name.split('_').join(' ');
var circle = L.circle(loc, {
color: color,
fillColor: color,
Loading