avogadrio

Avogadrio

Worship your favorite molecule by setting it as your wallpaper.

Avogadrio is a web app that will render your favourite molecule as a desktop wallpaper from either a compund name or SMILES structure. Molecule rendering is designed to be powered by Sourire which itself wraps the Indigo cheminformatics toolkit. Built on the Silex micro-framework.

Prerequisites

You’ll need to have a web server installed and configured with PHP for this to work. I really recommend XAMPP, especially for Windows users. Once you’ve done that you can proceed.

You’ll also need Node.js and npm installed and working.

Configuration

A couple of files need changing to get the site working for you.

1. Copy config/config.yaml.dist and rename it to config.yaml. Fill in the fields according to their descriptions and save.
2. For sourire_service you’ll want to point it to your local Sourire server. For example http://localhost:8080/.
3. Create files at templates/_analytics.html.twig for your analytics code and templates/_donations.html.twig for any donation buttons. Leave them blank if you like, but you must create them.

Building

Clone the project down and open the folder in your favourite editor. It’s a JetBrains PhpStorm project but you can use whichever paid/free software takes your fancy.

Before anything else, note that this project uses the Composer package manager. Install composer (see their website) and run:

composer install

Or alternatively, if you’re using the PHAR (make sure the php.exe executable is in your PATH):

php composer.phar install

Then, install the npm packages necessary to build and run the website. Run the following in your terminal in the project root directory:

npm install

This will install Bower which will allow you to install the assets the website requires (Bootstrap, jQuery etc.) using the command:

bower install

Gulp will also have been installed. This will compile the Less and CoffeeScript into CSS and JavaScript ready for production. Do this using the command:

gulp

This command will need running again every time you make a change to a Less or CoffeeScript file. If you’re working on them, run gulp watch in a terminal to watch for file changes and compile accordingly.

Acknowledgements

A big thank you to:

• Nile Red inspired me to build this. I wasn’t that big on chemistry until I came across his videos.
• Jay Holtslander put together the hamburger menu/sidebar combo in his Pen on CodePen. I believe it’s derived from earlier work by maridlcrmn.
• Thomas Moerman created Sourire, which really simplified the molecule rendering process.
• Andre Plötze created pure-knob, which is used here for the rotation knob/wheel/dial thing.
• Contributors to this awesome repo which provides the cryptocurrency donation icons in the web app (they aren’t bundled here).