hwallann / dust-webapp

A Vue.js app showing the dust levels (dustenivå) at our C.S. Dept.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Duster overalt.

- Fredrik H. Rasch

Example Screenshot

Watch it live!

http://startiot.cs.uit.no/dust/

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run serve

# build for production with minification
npm run build

NEW: Configure Your Own Modules!

Simply append a JSON-string at the end of the URL, like this: http://startiot.cs.uit.no/dust/[{"name":"bus-card","title":"UiT Southbound","from":"19021323:2"},{"name":"airport-card","title":"Helsinki-Vantaan lentoasema","center":"60.32,24.95","zoom":"9"}]

The JSON-string must be an array containing object representations of each module to add to the screen. The following module definitions are available:

Dust-card

{
  "name": "dust-card",
  "thingId": "Managed IoT Cloud Thing ID"
}

Bus Card

{
  "name": "bus-card",
  "title": "The module title",
  "from": "Travel magic from ID"
}

Airport Card

{
  "name": "airport-card",
  "title": "The module title",
  "center": "lat,lng coordinates of the map center",
  "zoom": "0-18 value of the starting zoom level of the map"
}

TD-card

{
  "name": "td-card"
}

Example

[
  {
    "name": "bus-card",
    "title": "UiT Southbound",
    "from": "19021323:2"
  },
  {
    "name": "airport-card",
    "title": "Helsinki-Vantaan lentoasema",
    "center": "60.32,24.95",
    "zoom": "9"
  },
  {
    "name": "dust-card",
    "thingId": "00001337"
  }
]

About

A Vue.js app showing the dust levels (dustenivå) at our C.S. Dept.


Languages

Language:JavaScript 64.9%Language:Vue 31.4%Language:PowerShell 2.1%Language:CSS 1.1%Language:HTML 0.6%