Generate classroom seating charts, rosters, flash cards, and name tents. Originally built for the University of Chicago Law School.
Web app tool for creating seating charts, flash cards, and name tents as downloadable PDFs. The app is built with the Laravel PHP framework and with React + Redux on the front-end. It uses html2canvas and jsPDF to generate the PDF deliverables.
Flash cards are built for Avery template #5388, and name tents are built for Avery template #5309.
The site uses Laravel, so first head over to www.laravel.com and make sure your server meets the installation requirements.
Download this repository and put to into your project's folder. Then cd into it and run:
composer install
Note: Depending on how you have Composer installed, this may instead be php composer.phar install
Create a .env file and run php artisan key:generate to create a unique app key for your app.
Next, make sure you have Node and NPM installed, and then run:
npm install
Then set up your database's credentials in the .env file. Run php artisan migrate. This should setup all required tables and columns. Voila!
To CRUD rooms, go to the Rooms page from the menu. A "room" is just a grid of coordinates laid out over a rectangle. A "table" is just a line with start and end coordinates, and optionally a middle coordinate for it to bend towards. A table will then distribute its seats evenly along its line. That's pretty much it.
For all the data related to classes and students, it's up to you to populate your database. We have our Namespot instance dispatching nightly Jobs to grab data from our university's database with Guzzle. For inspiration for your own jobs, check out ours in apps\Jobs.
At the moment there is no UI functionality for CRUDing staff. Faculty members are created automatically as instructors when they log in, but that works by checking if they're attached to any classes first. So, a new staff member trying this will be turned away because they're not attached to any class members. To add a new staff member, add them to the DB. Do a SQL insert on the users table with their info and make their role 'staff'. The role of 'dev' is a superuser.
By default html2canvas into jsPDF does not yield high-res, beautiful results, particularly with images. We address this with a two-fold approach. First, there is a "scale" config option in html2canvas, so we do use that. However, this only seems to affect text. Text becomes crystal clear when you set this to double or quadruple, so we'll use that. Images are still grainy though. So to get around that we need to do some hacky CSS. You make the image twice (or 4, or whatever) times as big. Then, use a transform: scale(0.5) to bring it back down to its intended size. Of course, you also need to do some extra stuff to keep this from breaking the layout around it. Not ideal, but it works and you get great looking printouts that are sized properly, ie, the PDF that comes out is still actually letter or tabloid sized, even though the images are the resolution of something much larger. In the old version of Namespot, we got high quality printouts by literally doubling the entire thing, ending up with, for example, a PDF file with the aspect ratio of 11x17, but it was actually 22x34, and the system printer dialog box would crunch it back down to 11x17.