Normally at the Transmedia event, students set up stalls in a large space at the University to showcase their work from the past year to family, friends and industry professionals. This year, as it was all held digitally, the site required an account system for students to log in and upload their work, along with facility for organisers to upload featured projects, a virtual exhibition which would be a 3D made version of the DMD studio with student's work, and all of the information about the event.
Usually the second years are in charge of organising the entire event, but due to the extended functionality required for the website, I offered to help build one with all the features. Second year designers provided mock ups for the site that I could use to build the site from but still had room to add or change elements where I thought necessary.
Because of the large amount of work needed for the front end and student side of the website, I wanted to build an admin panel quickly for basic user management and a few CRUD manipulations. While working at Sprechen I would normally opt to use Laravel backpack, however, for this project I went for Craftable CMS which uses Vue.js to create form components for the admin panel.
I found using the CMS quite intuitive however, I found that various things in it did not work correctly. For example, the vue-multiselect component while fantastic for selecting lists of string does not work correctly with objects so I did need to add in a watcher to handle data coming from it. The admin generator also uses Laravel media library which I am quite familiar with and made managing images much easier as they did not need fields in the model.
Certain aspects of the site would need to be turned on and off, these would be:
To do this, I created a new database table called settings that holds a key and a boolean value for on and off.
I then built a php handler that held a function to return the current setting value and one to toggle it. This way, I would be able to add in minimal code to the sidebar blade template to build a switch to toggle each of the settings.
The pitch your project presentations for the event would be hosted on YouTube live. This could then be embedded into the site with the live video's ID and shown using the stream toggle setting.
When building the student accounts system, I needed to verify that the person signing up is actually a student. This was quite an easy task as I just needed to check the email to see if it was a Winchester University email address. Students would be given a page with an editable profile image, banner, bio, course, tagline, and 3 projects with an image and description.
To achieve this, I used a similar technique to what I used in the ChildWin project where I created editable text blocks that a student can click on and edit. This was done to make the uploading process as simple as possible so that students were encouraged to fill out their profiles. Writing the edit pages like this also meant that the styling classes could be reused on the actual pages.
There were two sets of categories to group students into, this was by course and by year. This was done by giving the students an option to choose between 1st, 2nd, 3rd Year and MA on sign up which would be assigned to their user model. Secondly, a course model was created that held details about each course and would allow students to choose one that would link to their page model in a many to many relationship. Using these two attribute I would be able to filter between students based on two URL parameters where the year number and course slug are used. This technique was useful across the site when getting data for pages, carousels and schedule details.
A recurring component used across the site was these block carousels. They are used for projects and students so I built a reusable Vue component that could take an array of students or projects and loop through them.
The carousel works with an array that holds four images at a time. Every few seconds, the carousel removes the slide on the end and adds one to the start, a Vue transition component then handles moving the images along the belt. I also added a link to each block so that you can view basic information and then link to the student or project's page.
For this years event, we wanted to build a 3D virtual version of the DMD studio for site visitors to look around. This was quite the challenge as loading 3D into a site is always a heavy task that requires a lot of optimisation. However, after being inspired by Shutdown Gallery, I pressed on with Matt Nugent of Afterburner studios to build a solution.
In the past when implementing 3D, I have used Three.js, a JavaScript interface for WebGL. Three.js works by loading in a GLB or OBJ file into memory and rendering it on an HTML canvas meaning the user's browser does all of the heavy lifting. I built a prototype with the library and an untextured model of the DMD studio provided by Matt. This worked quite well locally installed and could be freely explored by the user with first person controls. However, when I moved this code onto the live server, because it used shared hosting it crashed while trying to load the 3D model with a huge file size so we decided not to use this solution.
We then scouted around for alternative solutions namely: Modelo, Sketchfab and Vectary. However, these three were either too expensive, only allowed orbit controls or required a more powerful server to run. In the end, we used a site called Orbix360 that used panoramic images rather than 3D models. This was ideal for our use case as it meant we could define locations a user could look around, limit load time massively and limit the code required down to a simple iFrame. With this, we now had a 3D exhibition for site visitors to look around.
