Code Monkey home page Code Monkey logo

coup-frontend's Introduction

GRASBROOK FUNCTIONAL SCOPE

abm

Features

The Grasbrook Functional Scope provides a mapbox based application to support functional planning for a new urban neighborhood. Users will be able to simulate pedestrian flows, stormwater runoffs, traffic noise propagation, sun exposure and wind speeds. With more modules to come.

overview_webtool_large

Building classification and detail information

rotating

Pedestrian Flow Analysis

abm

Noise Propagation Analysis

noise

Multi Layer Analysis

Explore interrelationships of different result layers. Example: In which areas are many pedestrians exposed to high traffic noise?

multi_layer

Stormwater RunOff Analysis

stormwater

Wind speed and Sun-Exposure Analysis

wind3 sun

Project setup

You will need a CityPyo account or host your own CityPyo instance and add your geojson files describing buildings, streets and open spaces.

In order to run simulations you will need basic auth credentials to the simulation APIs - or host your own.

Env-Variables:

VUE_APP_CITYPYO_URL # Ask maintainers or host your own VUE_APP_CALCULATIONS_API_URL # Ask maintainers or host your own VUE_APP_CALCULATIONS_API_USER # basic auth

VUE_APP_CALCULATIONS_API_PW # basic auth

RUN in development mode

  • Create a local file containing your CityPyo login credentials in src/config/cityPyoDefaultUser.json for autologin.
{
  "username": "YourUserName", "password": "YourPassword"
}
  • Run CityPyO locally on port 5000 Or update the .env.development file to connect to api.city-scope.hcu-hamburg.de/cityPyo
  • Update the .env.development and set your user and password for the calculations api, in order to request noise, stormwater, sun and wind calculations

Install dependencies

npm install

Serve front-end locally

npm start

View the app in a browser at localhost:8080

RUN in production mode

Create a local file containing you CityPyo login credentials in src/config/cityPyoDefaultUser.json This file can be an empty JSON e.g. {}

build source

npm i && npm run build

Detail Info

Files needed

Buildings

The buildings displayed on the map are stacked extrusions of 3 geojson layers. Please provide a groundfloor.json, upperfloor.json and rooftop.json via your CityPyo user.

Following properties can provided per Feature. Mandatory for the visualization to work are city_scope_id and land_use_detailed_type. Upperfloor features must contain a float value for building_height Rooftop features must contain float values for building_height and additional_roof_height

{"building_id": "G03", "land_use_detailed_type": "residential", "building_height": 44.3, "additional_roof_height": 47.5, "area_planning_type": "building", "floor_area": 341.8590000002878, "city_scope_id": "B-03-1"}

OpenSpaces

The open spaces displayed are read from a spaces.json provided by your CityPyo user. Following properties can provided per Feature. Mandatory for the visualization to work are city_scope_id and land_use_detailed_type.

"properties": {"area_planning_type": "specialUseArea", "land_use_general_type": "privateOS", "land_use_detailed_type": "schoolOutdoorArea", "floor_area": 2774.420039495546, "city_scope_id": "S-283"}

Static results

Provide result files for the ABM results and Sun results (currently static). Please ask maintainers for example files.

coup-frontend's People

Contributors

andredaa avatar bertramhillmann avatar dependabot[bot] avatar illsio avatar jlsievert avatar quving avatar totev avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

coup-frontend's Issues

Individual build path per site context

Create a folder for each application context (e.g. grasbrook, science city, ...) and provide a build route to build only that folder, when building for production.

Loading of wind results is confusing

After selecting a a completely new wind scenario, but before the results have loaded, the user is currently able to select different scenarios (both "saved" scenarios and another new scenario). Then as the results come in for the other secenario, they appear instead of the other selected results. At that point, it's not clear what the resulting map is representing.

Possible improvements might include:

  • add loading screen like for ABM, either only on top of the right side panel or ontop of the map, too.
  • don't allow user to to select a different (new) wind scenario while the results of a previous scenario are still being loaded
  • display the wind scenario information underneath / to the left of the "save" save button, so that the user is reassured they are saving the right scenario (something like what we have in the "combine layers" section)

@totev @andredaa : any other ideas for solving this issue? / do I understand the issue correctly?

What's going on in this screenshot? I had selected a new scenario with very high windspeeds, close to 80 kmh. Then, I clicked on the "Annual Average" scenario and the scenario settings reset -- but the "Annual Aaverage" scenario didn't load, because the frontend was still waiting on the results of the pending simulation. When the results of the high-wind scenario came in, they no longer matched the scenario setttings displayed. This is confusing.

grafik

"Version Oct. 2020" in SCHB version

Why does it say "Version Oct. 2020" when viewing the SCHB version of the web app? Left over from the frontend for externals?

-> this also means that detailed building layers are hidden. Is that intentional? Did we do that because were going to share the login with external folks?

grafik

Features to throw away

@JLSievert Hello :))
i am trying to throw some weight/technical dept over board. What do you think about these questions?

We no longer need ABM Filters right? To filter agents by age, modality etc? That would save a huge chunk of spaghetti in which we separate "active" abm sets from the unfiltered one. Plus data preparation for faster filtering and storing huge lookup tables in memory and so on. --> Time Filter should still work! Might be intertwined with the other filters?

Do we need the relative data heatmap or should we throw the code for it away?
To be honest I never really understood the difference between them (same data displayed different way, no comments)
image

Do we need the arcs?
image

Do we need the ABM and Amenity Stats?

Add "Save" scenario button for stormwater module

Add "Save" scenario options for stormwater module, same as for Noise and Wind.

  • Add "Save" scenario button to stormwater scenario settings panel.
  • Generate a text based on the secenario selection criteria.
  • Add section "RELOAD A SAVED SCENARIO" when a scenario is saved.

grafik

Move map scale to vertical position with vertical or small window

Improvement to reactive design. Move map scale to a vertical position on the left side of the screen, either above or below the left toolbar, when window size is made narrow. Or, consider an alternative solution for hiding the scale on narrow screens or mobile devices.
grafik

Inconsistent spacing between AIT/CIL/Infrared logos

We can save some space at the bottom of the screen, if we realign the spacing of the AIT/CIL/Infrared logos at the bottom left of the map (only for Wind and Sun). This is something we have tried to adjust before, and this is the closest we got. Might be worth another attempt.

To do would be: reduce spacing between AIT/CIL/Logos. Make spacing consistent.
grafik

Calculation Cache Cronjobs

Cronjobs to perform request with standard calculation

  • for each cityPyo user
    • and the standard wind scenarios.
    • the standard noise scenarios.
    • the standard stormwater scenarios.

Clean stores / codebase

  • 1 store per calculation module, instead of having them all in the same
  • review: what variables to really need to be in the store??
  • clean up ABM layer, timeline and stats creation. what is needed? remove the confusing (semi-)duplicate variables.

Add info tab to right menu panel in ABM module

Add an info tab to the right menu panel that appears once the ABM module has been run. This is the same tab style as for all other modules (wind, sun, stormwater, noise).

Content for the ABM info tab still to be prepared.

grafik

Add minimize and expand buttons to graph

Add minimize and expand buttons to graph, even on the non-mobile version.

When graph is shown, align minimize button to the upper right of the graph widget.
When graph is hidden, stack the expand button (show graph) on top of fast forward and play, but with a gap between.

Tooltips:

  • "Show Graph"
  • "Hide Graph"

Icons:

  • use "Minimize" from Materials IO for hiding graph.
  • use existing icon (not sure what it's called) to showing graph.

grafik
grafik
grafik

Sticky graph after running ABM or Stormwater then switching to noise/wind/sun

The graph in the lower left should disappear when the ABM and stormwater results are hidden from the map. The user expects to see only the noise results when clicking on "noise" and only the sun results when clicking on "sun." The user is also able to view multiple layers simultaneously by clicking on the "Layers" button on the left-hand menu, but that isn't the default.

The overlapping of the scale legend at the bottom and the graph is also an issue. The modules requiring the graph - ABM and stormwater - should also have scale legends, although the colors are not yet set.
grafik

Change "ABM" to "Pedestrians" and update sub-tab headings

Change the name of the button for the ABM module to "Pedestrians."

  • Change button name: "ABM" -> "Pedestrians"

Update the title of sub-tabs:

  • ABM | Scenario Settings -> Pedestrian Flow | Scenario Settings
  • ABM Dashboard -> Pedestrian Flow | Dashboard
  • Aggregation Layer Settings -> Pedestrian Flow | Aggregation Layer
  • "Information" tab -> Pedestrian Flow | About

grafik
grafik
grafik

New Features to support planning cases

  • Are criteria met as amount of childcare facilities / residents? (What kind of rules are actually defined??) ->>>> irrelevant? e.g. 5m2 per Schüler for Schulhof.
  • Identify particularly well performing or badly performing areas
  • ...

Reevaluate eslint rules

The current set of eslint linting rules seems very strict and is currently not enforced.

Maybe we should re-examine them and/or start a new with the least amount of recommended settings and work our way up from there?

Screenshot 2021-09-24 at 11 17 53

Hide ABM graph if no scenario has been run yet

Currently, when you enter the tool or click on "Pedestrians"button, even before a scenario has been loaded, the graph is visible. The graph in the bottom left should only appear after a scenario has been run (after the user clicks on "Run Scenario").

grafik

Yellow line cuts through box when clicking on a building

In the functional scope rocks branch -- following initial fix:

The first building you click on, a yellow line appears on top of the info box, reaching from the center to the building outline. It then gets sent behind once you click on the box.

This line should be behind the box so that it appears as though it originates from the box outline. Then, when you click on multiple buidlings, you can rearrange the info boxes in a way that allows you to compare multiple buildings with eachother -- and you always have a visual connection between the info box and the building it refers to.

The line:
grafik

The idea:
grafik

Hide filter button for ABM

Temporarily remove the filter button of the ABM-Module on the right side panel until the calculation method can be updated. Leave all of the functionality and just hide the button.

Screenshot 2021-09-23 at 14 51 18

"Cut out" Wind and Noise results layers with design area boundaries

"Punch" / cut out the Wind and Noise results using the GB design area boundaries, as is done for Sun. It used to be like this for Wind in an earlier version.
Noise [Screenshot from 15.12.2021]
grafik
Wind [Screenshot from 15.12.2021]
grafik

-> it should look more like this... (e.g. earlier version of wind)
grafik

slider dragging

slider dragging behaves weird. i think it is because the map behind is also draggable.
try set map as undraggable on slider touch ??

Wind Cronjobs

One cronjob that regularly logs in at infrared and asks for the current projects existing. This will keep the projects from being deleted at the Infrared endpoint.

Formatting irregularity in "Combine Layers" "Layer Selection"

The dropdown menus in "Layer Selection" have different spacing than in "Criteria Selection," resulting in the dropdown menus overlapping the "Layer Selection" text in my browser.

Make the formatting of the dropdowns in "Layer Selection" match the "Criteria Selection" dropdown menus.

grafik

Move north arrow to navigation button bar.

When "Toggle UI" is on, the camera button appears in the upper left corner. This overlaps with the north arrow button.

Move the north arrow button to the navigation button bar on the left center of the screen. Maintain the gap between the "buildings" and "layers" buttons and the navigation buttons.

grafik

Hide "Change Selection" button on ABM graph.

Hide the "Change Selection" / "Compare by Transit Mode" button on the ABM graph. This button is a sort of filter for different mobility types, but since this is a simulation of pedestrian movement only, the choice of categories is confusing to users. This feature might come in handy in the feature. This feature will also likely be affected by updates to the data export format from GAMA.

grafik

Formatting updates for building info boxes

Add:

  • new line in whole building information (at the top), after "buidling height": "Gross Floor Area". This should show the gross floor area of the whole building. For now, this can be calculated as the sum of the the Gross Floor Area for "Upper Floors" and "Ground Floor". In future this could be a separate value that comes from the BIM export.

Formatting:

  • Use title case throughout (e.g. building GXX -> Building GXX; building height -> Building Height)

Rename:

  • "total floor area upperfloors" (Upper Floors) -> "Gross Floor Area"
  • "floor area" (Groundfloor) -> "Gross Floor Area"

Delete:

  • "floor area" in upper floors
  • OD + trips slider

grafik

Change title of website for SCHB login.

Update the website name in upper right corner for all logins associated with the SCHB "project"

Replace: "Grasbrook CityScope" with "SCHB CityScope"
Replace: "Tool for Functional Planning" to "Competition Tool"

grafik

Buggy "Layers" and "Buildings" buttons on left-hand menu

There are multiple usability issues with the menu buttons "Layers" and "Buildings."

  • buttons do not click on and off as expected, multiple clicks directly on the button doesn't even seem to work.
  • clicking away from the menu should make it disappear
  • alignment of the "Layers" and "Buildings" menus, centered directly next to the button, isn't intuitive. Consider aligning the top of the menu with the button.

"Layers" button issues

  • length of the "Layers" menu might be problematic on smaller screens. consider adding dropdowns within menu

grafik

"Buildings" button issues

  • blue button to show building use type legend -> confusing color choice. We use blue buttons as action buttons. Showing a legend doesn't need an action button.

  • when the building use type legend appears, it pushes the buttons downwards as the element recenters. These buttons shouldn't move. Consider making a new checkbox for "Show Building Use Types" -> this would activate the colored map of the buildings. Then the legend for the buidling colors should appear automatically, for example at the bottom center of the screen where the other legends appear.

grafik

  • When clicking on "Use Type Legend" then opening "Layers" the elements stack ontop of eachother.
    grafik

Reactive design of scenario selection buttons not working properly

When making a change to a simulation scenarios, the buttons change to red to show changes or when a simulation hasn't been run yet. However, these should be blue when the selection matches the results being shown. This works most of the time for the ABM module, but doesn't work properly with the other modules.

For example, stormwater is always blue:
grafik

Wind turns red again after you have run a simulation, then click away to a new simulation topic, and return to wind, even though the scenario selected still matches the results map shown.
grafik

Make menu content depending on user

Menu content should be connected to user, so that

  • The Science City user gets to have it's own ABM menu options

    • There is only 2 scenarios to choose from a) "Current status" b) "Science City"
  • Menu differences for restricted users do not have to be hardcoded

There will potentially be restricted users for both application cases grasbrook and science city.

Suggestion: Save the user's application (science city, grasbrook, ...) in cityPyo. Create menu-config in front-end based on these applications.

New wind selection

Low prio until we have a clearer picture of where to move with the tool

Let user create a 200m*200m square for which to calc wind results.

Front-End:

  • interaction to place a 200m*200m square onto the map. move that square
  • menu to a) "create square" b) choose wind direction and velocity c) "calculate for square"
  • send request to Wind-API. Get real world coords for square.

Back-End
-> new route for custom calc square, pass bbox, wind direction and velocity as params
-> create new "Project" at AIT endpoint for the bbox plus 150m buffer in each direction
-> find buildings for the buffered bbox. Create buildings at endpoint.
-> trigger calculation
-> return result

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.