The Map-Creation-Interface allows users to create maps for the simulation. The interface can after the simulation has be calculated also display the results of the simulation. The interface was originally created for a group project at the eth. I have moved it to it's own repo, as some people might want to also use it. As well that after the deadline the repos should no longer be edited. Link to The Original Repository
Since the interface was started before the simulations, there are some things that you can not simulate and some things that can be simulated but not yet displayed in the interface. Most of them will go unnoticed to the user.
Overall most notably are:
- On the interface you can create intersections with yield signs, stop signs and roundabouts. All of these were too difficult to implement in the timeframe.
- The simulation expects a road to either be a bike road, car road or a shared road. It cannot be a road with multiple lanes of different types.
- On the interface you can place agents on roads for their initial position. This was thought to be needed for testing however it was never implemented on the simulation side. The simulation will place it's own agents in the simulation.
- The interface allows you to create a road with the directions 1,-1,1,-1. However once simulated this road would look wrong. The simulation will always place the agents from the right border in the direction of travel. It also only knows all the lanes in one direction. So the agents would be placed 1,1,-1,-1.
- The simulation allows for intersections to have more than 4 connecting roads. This was simply too hard to implement in the interface. The interface was also thought more as a bugfixing and testing tool, so this feature was never thought about.
The Map-Creation-Interface was originally thought as a way to create maps for the simulation. This would have been for the purpose of testing the simulation and the pathfinding algorithms. It was also thought to create maps for the final project as we were unsure if we would be able to get usable maps of Zürich.
As we got the maps of Zürich, we decided to use the interface not only for creating maps for testing, but also for displaying the calculated simulations. This gave our team a lot of flexibility and allowed us to test the simulation with different parameters and different maps. It also allowed us to display the simulation in a way that was easy to understand and to debug. As we had quite a few bugs along the way, this was a very useful tool.
The Map-Creation-Interface is still lacking some features that would be useful for other projects. Some parts of the code are a bit hacky and could be improved. This is something the user doesn't really notice, but it would be nice to have a cleaner code base. As time goes on, the interface will probably need to be updated to work with newer versions of browsers, libraries and our own simulation. This is something that will be done as needed.
After the project is submitted the interface will be tracked in a separate repository. This will allow us to continue working on it and to add new features.
The Map-Creation-Interface was built with following languages:
- JavaScript - The main language used for the interface
- Python - Used for a simple webserver to serve the interface on the localhost
The Map-Creation-Interface uses the following libraries:
- JQuery - Used manipulating the DOM. This was used to create the map and to display the simulation
- HotkeysJS - Used for the keyboard shortcuts
- Flask - Used for the webserver
To get a local copy up and running follow these simple steps. Clone the repository
git clone git@github.com:IQisMySenpai/CoolMapCreationInterface.gitChange into the MapCreation directory
cd CoolMapCreationInterface[1] Start the webserver or [2] open the index.html file in your browser
[1]
python3 MapCreationWebServer.py[2] (Note you might have some issues with cookies)
firefox index.htmlThe Map-Creation-Interface is quite simple to use. The user can create roads and intersections by clicking on the
buttons on the interface or using the shortcuts. The roads and intersections can be moved by dragging them by their
drag-points. In the interface single roads and intersections can be edited to have different names and attributes.
Connecting a road with an intersection happens, when you pull the grab-point to one of the sides of the intersection. The
map can finally be exported as a .map export or a .tsim export. Old maps can can be imported from one of the following
files formats: .map, .tsim, or .sim (the last one is the format used by the simulation). The simulation can be
loaded by clicking the Import Simulation button. The simulation can be played, paused and reset.
All the code is in the code/MapCreation directory. The main file is index.html. This file contains all the HTML and
imports all the CSS, JavaScript and Libraries. The JavaScript code is in the js directory. The CSS code is in the css
directory. The libraries are imported from the web.
The code is split into the following files:
This is the main file. It contains all the HTML and imports all the CSS, JavaScript and Libraries. It also contains the foundation for the map, interface, simulation interface and loading screen.
This file contains all the CSS code for the interface. It is used to style the map, interface, simulation interface and loading screen.
This is a simple webserver that serves the index.html file. It is used to serve the interface on the localhost.
We need this file as some browsers don't allow us to load cookies if we have saved them for a file that is loaded from
the local filesystem.
This file contains the main code for loading the interface and the map. It creates globals for these two objects and creates all the shortcuts for the interface.
The shortcuts are the following:
- Ctrl+S Export As Save
- Ctrl+Shift+S Export As Simulation
- Ctrl+L Import Save
- Ctrl+Shift+L Import Simulation
- Ctrl+1 Roads Overview
- Ctrl+2 New Road
- Ctrl+3 New Wide Road
- Ctrl+4 Intersections Overview
- Ctrl+5 New Intersection
- Ctrl+M Overview
This file contains all the code for the map. It contains the code for creating the map, adding roads, intersections and agents are all managed by this file. It lays the foundation for everything that is displayed on the map. It also provides functions for content loading and exporting as well as verfiying the uniqueness of IDs of roads and intersections.
This file contains the code for the agents. It contains the code for creating the agents, moving them and displaying them on the map. It also contains the code for the simulation interface to access and animated them.
This file contains the configuration for the interface. It contains the default values for the roads and intersections and the default values for the simulation.
This file contains the code for the grid. It contains the code for creating the grid, displaying it and updating it on window change. It also makes sure that the spot that is shown around the cursor is always moved to the center of the cursor.
This file contains the code for the interface. It contains the code for creating the interface, displaying it and updating it on window change. It works by calling the same function for each button press and then running a different function depending on what data is given with the button press.
This file contains the code for the intersections. It contains the code for creating the intersections, displaying them and moving them.
This file contains the code for the roads. It contains the code for creating the roads, displaying them and moving them. It also has supporting functions for animating the agents later in the simulation.
This file contains the code for the simulation. It contains the code for creating the simulation, precalculating the animation and displaying the simulation. It also contains the code for the simulation interface.
This file contains all the code that is supporting and not directly related to any of the other files. It mostly contains math functions and algorithms that are used in multiple files.