Giter VIP home page Giter VIP logo

pzgps's Introduction

pzgps

The goal of this project is to collect data from a GPS unit connected to a Raspberry Pi Zero and stream that data out to a web front end via a WebSocket.

Lerna

This project uses Lerna to manage the server and front end packages (in --independant mode). If you want to develop anything, you'll need to install Lerna so you can lerna bootstrap which will install all of the dependencies for each repo.

npm install --global lerna

Pull Requests Accepted!

  • Please feel free to submit pull requests.
  • This project is meant to be a sandbox for learning various things, so expect things to change.
  • If this info turns out to be useful to you, please let me know!

Using the Server Package

The server package, that provides the GPS data over the WebSocket, resides in /packages/pzgps-server/ and has a thorough README.md that you should read.

Using the Front End Packages

Preact

Currently the Preact version of the front end has the most code/features/effort.

Run the webserver with npm start.

Note the packages/pzgps-preact/src/lib/conf.js file, which should be modified to match your pizero's name on your network. You can change the name by logging into the pizero, then...

  • raspi-config
  • Go to Advanced Options
  • Go to Hostname
  • Type in a new hostname then hit Ok

Enabling a MapQuest staticmap

One of the views can load a Mapquest "staticmap" if you have a "Consumer Key" and provide a module from the NodeJS application that includes that key.

  • Register for a developer account for free.

  • Go to your new profile, and click the "Manage Keys" on the left side menu.

  • Click the "Create a New Key" button and provide a name (callback url is not needed for this project).

  • You can always find your Consumer Key on the "Manage Keys" page after creating one.

  • Make a file in the /packages/pzgps-server/lib directory named mqkey.js and format it like the example below.

    module.exports = { 'consumerKey': 'PASTE YOUR CONSUMER KEY HERE' };

When starting the server use the --mq flag. An NPM command is provided in /packages/pzgps-server/package.json that will start with the MapQuest module included (eg, npm run withMapquest will execute node index.js --port 9000 --mq).

Assuming all of the above is in place, the MapQuest component in the UI will receive the key over the WebSocket and use it to formulate the URL to get the static map. Because the client is receiving updates from the server continually, the map will update if the coordinates change.

AngularJS

In the /packages/pzgps-angular1/ directory, run npm start to start the webserver. The default port of the webserver can be changed in the /packages/pzgps-angular1/bs-config.json file.

ReactJS

In the /packages/pzgps-reactjs/ directory, run npm start to start the webserver. This project uses webpack and will auto-reload your browser for you.

pzgps's People

Contributors

dependabot[bot] avatar kapusta avatar tobozo avatar

Stargazers

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

Watchers

 avatar  avatar  avatar

Forkers

tobozo

pzgps's Issues

Db component

  • Move Database things to a component
  • Make a db.js file and abstract indexes and such out to there
  • Get most db stuff out of src/components/RouteEditor/RouteEditor.jsx
  • Find a proper home for src/components/App/Db.jsx
  • query the routes end point for routes instead of using allDocs()

There is no UI

  • Make a small ng1 app
  • figure out file/dir structure that makes sense for FE and BE
  • npm install angular-websocket --save
  • Add live-server support - live-server --entry-file=index.html

add react-router

  • learn
  • break up the components into paths (reuse App?)
  • support WebSocket reuse like in the angular1 FE

MapQuest staticmap view in the reactjs pkg

  • follow the pattern in the GpsData component
  • add a staticmap using a consumer key if it exists
  • only show the MapQuest button if the key exists
  • the map should update if the gpsData changes

websocket frames causes rebuilds...

New frames come in, the data is put into the component with setState which causes the entire app to recompile/run/mount/etc, consider moving that out of a setState call

Create a react front end

Needs....

  • Basic app structure/outline
  • Boostrap 4 css
  • websocket component
  • connect back end data to front end and render as an unordered list
  • add mapquest component that consumes the gpsData and consumerKey

store gps data on the pizero using Realm(?)

On TPV events, if distance from previous location is greater than n meters, record the new location in a Realm. Provide access to that data from the FE.

  • Create /lib/realmApi.js and add getter and setter
  • Create /lib/realmSchema.js and define a location object
  • Add UI to initiate a save of a location, with a user defined note

add couchdb/pouchdb support

Couch/Pouch install docs

  • add feature/couchdb branch
  • make a routes table, post some data into it

Questions...

  • POST directly from the FE?
  • send a ws frame and have that POST data into couch?
  • send data somewhere after that?
  • how to share that data?

improve lighthouse score

Current HEAD on feature/preat-pwa scores 62 on lighthouse against the webpack dev build, improve that score.

  • test against prod build
  • get https working on the pizero (letsencrypt and apache or ws/ssl)

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.