Git Product home page Git Product logo

pwd-river-dispatches's Introduction

pwd-river-dispatches

Application developed in partnership with the Fairmount Waterworks, under Azavea's PWD contract. The "Dispatches from the River" exhibit will introduce users, first, to the concept that the watershed is being monitored through these data points, and, second, to a few key learnings that show how collecting this data has helped us understand and manage our water resources more effectively. This activity will focus on five key measures: temperature, turbidity, salinity, Dissolved Oxygen, and pH.

Requirements

  • Node v4.5+

Getting Started

Unzip the original package from PWD into a folder in your system. This can be found at smb://fileshare.internal.azavea.com/projects/PWD_StormwaterBilling/documents/fairmount_water_works/river_dispatches. Then run:

./scripts/setup $SOURCE_DIR

where $SOURCE_DIR is the path of the unzipped directory on your local.

Development

Run the server using

./scripts/server

Ports

Port Service
9000 Node Development Server

Scripts

Name Description
server Run a node development server
setup Install NPM dependencies

Making a Release

You can find the latest version of git-flow to install here. Once it's installed, you'll need to enable git flow in the repo by typing git flow init. Use the default values provided; master is the branch for the current release; develop is the branch for the next release.

After you've enabled git-flow, you can use the following commands to make a release, replacing "0.1.0" with the version you're releasing and also adding release notes to CHANGELOG.md:

git flow release start 0.1.0
vim CHANGELOG.md
git add CHANGELOG.md
git commit -m "0.1.0"
git flow release publish 0.1.0
git flow release finish 0.1.0

After you've completed the git flow steps, you'll need to push the changes back from your local master and develop branches back to the main repo:

git checkout master
git push origin master
git checkout develop
git push origin develop
git push --tags

Jenkins will build the release zip file (including assets) under its pwd-river-dispatches-release job.

Installing via IIS

The release zip will contain web.config files that instruct IIS v7+ to serve the files for this application. For a new install, follow these steps:

  1. Unzip the release package to a permanent directory on the server
  2. Open IIS Management console, and right mouse click on Sites -> Add Web Site
    1. Give the site name as river-dispatches
    2. Set the Physical Path to the directory from Step 1
    3. Set the Port to something available on the machine, 8000
    4. Click ok, and check that http://localhost:8000 serves the app iis
  3. It may be helpful to further make that URL the default home page in Chrome so that it can easily be restarted in the event of a server reboot.

pwd-river-dispatches's People

Contributors

kellyi avatar rajadain avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pwd-river-dispatches's Issues

Clean up design

Clean up styling of sensor values, headers/subtitles, and "sensors" screen.

Pull Data from USGS

Using USGS, pull data for the following parameters:

  • Salinity / Conductivity
  • pH
  • Turbidity
  • Temperature
  • Dissolved Oxygen

Make a JavaScript file that exposes a function which pulls the appropriate number depending on an argument.

Based on investigation for #2

Add HTML Pages

Add an HTML page for each sensor type that uses the JavaScript file created in #5 to pull each sensor value into it. The value should be fetched on page load. If there is an error in fetching the value, or if the value is empty, it should show nothing. If there is a legitimate value, it should be shown with the appropriate units.

Ensure that the values look good in context of their placement, i.e. text size, color, position.

Add Offline Support

Currently if the app is offline, we see this message in the browser console:

image

Previously when the page would have been blank, this was not a problem. But now that we need to use predefined values instead, find a way to catch this error and use the fallback value in place.

Also handle failures related to DNS not resolving.

Sensor range reading errors

... we are getting an error reading on dissolved oxygen and pH because it looks like it is outside the range of the exhibit choices. Dissolved oxygen is over 12ppm and pH is over 7.7. The read out in real time shows .9999.

Refactor JavaScript Code

We have gotten to the point that there is too much code in one file to be easily manageable. Consider splitting the code into other, smaller files. This is the organization I imagine:

usgs-details/
├── index.html
├── js
│   ├── api.js
│   ├── render.js
│   └── utils.js
└── style.css

Instead of having one file usgs-details.html, we have a directory usgs-details/ with other files under it. This is a pure refactor, with no additions to code.

QA Testing and Release

Once #24 has been done we should spend some time doing QA testing and then make a release.

Project README has instructions for making a release; Jenkins builds master when that branch is updated on the pwd-river-dispatches-release job.

We should probably find out whether computer this runs the app via some kind of local server or by opening the dispatches...html file in Chrome and test it in the same way.

Add /assets dir to cipublish script

#27 adds an /assets dir to the project including some font files and an illustration. We should update the cipublish script to include that dir in the release zip file.

Integrate real fallback values

In #17, we added placeholder static values to use if wifi or both sensor APIs are down. This card is to integrate real monthly fallback values for each metric, to be provided by Victora. She said she won't be able to get to this until the week of 8/28.

Test, Package, and Send

  • Test the app to ensure it works well, both in online and offline conditions.
  • Package the app with our changes over the original ZIP
    - [ ] Send to client (to be handled in #25)

Improve Data Styling

Currently it looks like this:

image

Improvements we may consider:

  • Making the text bigger
  • Making the text more centered
  • Using different fonts / styling

We should keep in mind that some units (for example for Salinity / Conductivity) can get pretty long.

We may consider changing what the units look like, for example using or °C instead of deg C.

In some cases, we may not want to show the units at all, such as pH where they come as FNU.

Fallback Values

There are cases when the USGS API may be down, either by accident or by design. In such cases, we should fall back to average values.

Devise a system that pulls in the current month's average value if an API call fails. Use mock values for now. Actual values will be provided by client soon.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.