Bicycle Dynamics Analysis App

The Bicycle Dynamics Analysis App provides a GUI for using the BicycleParameters Python program on the web. Using Dash, we transform Python code into HTML/CSS/JS which is nicely rendered within a web browser. The application is available at https://bicycle-dynamics.onrender.com/.

Directory Structure

Within the BicycleParameters/bicycleparameters/ directory, the primary module for the application is app.py and it is written entirely in Python. The /assets/ folder contains files which are to be displayed by the app, and the /data/ folder contains raw bicycle measurement data. Some custom CSS is contained within /assets/styles.css, but most of the CSS can be written directly in app.py using dash-bootstrap-components. You can read more about the purpose of the /assets/ folder on the Dash documentation.

Development

To develop the application, you need to have an environment which contains all the necessary dependencies for running app.py. If you are using conda, you can use the cycle-app-environment.yml located in the top-level BicycleParameters/conda/ directory to build a conda environment which contains all the packages you need to develop and run this code. Alternatively, you can simply view the contents of cycle-app-environment.yml and install those packages accordingly or use the requirements.txt file available in the top level directory.

To run app.py and view the contents locally, navigate to the BicycleParameters/ directory and run:

python -m bicycleparameters.app

This command calls python and passes the file bicycleparameters.app (this is like /bicycleparameters/app.py) using the -m flag as if we were simply running a python script. If you instead navigate to /bicycleparameters/ and run python app.py, the plot images will not appear in your browser. Stick to the first command above.

If app.py has been executed properly, you should see an output similar to the following;

(bp) user@host:~/BicycleParameters/bicycleparameters$ python -m bicycleparameters.app
Dash is running on http://127.0.0.1:8050/

 Warning: This is a development server. Do not use app.run_server
 in production, use a production WSGI server like gunicorn instead.

 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on

Now if you navigate to http://127.0.0.1:8050/, you should see your local version of the app displayed in your browser. Congratulations! As you play with the application online you should see feedback within your terminal window. Debug information will also display here. In addition, I recommend using the inspect element tool available with most browsers to debug things live within your browser.

Additional Resources

Here are some resources that I found very useful when first developing this application:

• The offical Dash documentation. Just about every single link on this page will have useful information for you.

• Dash Bootstrap Components documentation. This is used to write CSS Bootstraps using the Python language.

• The Mozilla Web Development guide. I highly recommened this guide for learning about HTML, CSS, and general web development.

• The example usage page for Bicycle Parameters. Useful for understanding how the backend code works.

• w3schools.com. Has great HTML/CSS reference pages as well as tutorials. Also has some for Python.

• This Software Carpentery site. Has nice general programming tutorials as well as an in-depth git tutorial.

Feel free to extend this list as you develop and learn. Overall, I ended up needing to learn and use web development skills far more than I needed to really understand Python itself. Program in whichever way brings you the most joy. I wish you the best, future devs!