Mockup for main view page

EnviroMonitor / EnviroMonitorFrontend

Frontend for EnviroMonitor

http://air-monitor.org

GNU General Public License v3.0

4 stars 3 forks source link

Mockup for main view page #3

Open zen opened 7 years ago

zen commented 7 years ago

We need a mockup for main page of the public system. It should implement:

map view, fetch location and point to some default zoom in user location are. If there are no stations, it should show customisable message like "Hey, looks like there are no air monitoring stations in your area, maybe you want to build one" with link to the project on github (or webpage, once it's created)
bottom bar (1/4th of screen) presenting air data from visible stations, with averages for pm2.5 and pm10 for last 12h
some menu showing links to most important resources, project, github, twitter, etc.

lechup commented 7 years ago

@zen what tool do You want to use to prepare mockups? I have quite nice experience with Google Drive + http://draw.io - You can later share Your work for further shape up.

zen commented 7 years ago

I think I used https://moqups.com/ but they changed their policy and they start charging for everything. We can use draw.io

lechup commented 7 years ago

@zen @ajakubo1 what do You think about this:

Main page: http://codepen.io/lechup/full/qqwmRV/

Clicked marker/point: http://codepen.io/lechup/full/zoXzzJ/

zen commented 7 years ago

Yeah, that looks pretty cool! I would go this direction

lechup commented 7 years ago

Ok, thanks. I'll play around tomorrow and create more detailed mockup.

@zen what kind of data do You want to provide after clicking on sensor marker?

I think we should go with:

CAQI
IJP - Indeks Jakości Powietrza ?
AQI
PM 2.5
PM 10
Temperature
Humidity?
Pressure?
something more?

PS: I've picked color combo we could use in layout: https://coolors.co/ed254e-3a86ff-fdf0d5-0a2342-2ca58d

lechup commented 7 years ago

I've just changed Google Maps to Leaflet + MapBox street tiles. But I have doubts regarding limits on MapBox - details here #5

zen commented 7 years ago

@lechup I think we need 2 levels of information: one for just clicking sensor pin (overlay), and second after clicking some URL inside the overlay.

For overlay I think what would be necessary:

sensor name
sensor owner
if possible - small graph with last 24h readings for pm2.5 and pm10, if not: just current readings
color clue for current conditions

For details we should probably have dedicated page with:

all sensor meta data: owner, date added, project
all readings with sliding timeline: pm2.5, pm10, humidity, temperature, pressure

That would be it for now I guess