Automate The Delivery of VR Photos

Kevin Flanagan…

Integrating the Hugin photo stitch application into Drupal's Image Effect



Images come from the camera as stereophonic jpg.  


file 1



The 2 sites I mentioned are: & ; and they are both built with Drupal 8, the 1st beginning as a 'Varbase' distribution and the 2nd as an 'Open Social' distribution, both employ bootstrap as their base theme, and both are set up with SSL certificates, as you may have noticed. The base CSS has also been significantly enhanced to create a Unique look and Feel.

This site is styled with a distribution called 'Open Social' which is intended for NGOs and smaller municipal governments. It's landing page is designed with a call-out grab enrollment, followed by a weather report for the immediate geography, and then a Facebook-like wall for a community to talk about local concerns or just post pictures of the area, much like a self-running community newspaper.
The weather report is being updated every 15 minutes and comes courtesy of the weather page. Although NOAA does not provide local RSS feeds, their dynamic page does provide a stable XHTML rendering that XPATH can be used against to 'scrap' the necessary data on a periodic basis. I'm using he FEEDS module, with its XPATH extension for grabbing the XML formatted definitions for things like temperature, conditions, etc.  so from the GOV weather page of :…

I am applying an XPATH string of  
under the context of 

  in order to get the current temperature, as reported by the .GOV page. This value is put into a node's field, and it becomes available to be displayed on both the home page as well as the /weather page within the site.

The site was also enhanced with the search API module which allows the Drupal site to interphase with the Apache Solr search for quicker and broader search results .. This particular site was put up primarily as a reference for the municipal code, and the New Hampshire State laws which govern it. To that end, it contains over 400 pages of the NH State RSA, providing a full definition of the laws which regulate town, city and community ordinances and elections.  Using the search interphase, the entire state RSA, along with meeting minutes from the community, and the community ordinance can all be FT searched against a phrase or single word.

Other enhancements include a mail campaign system, similar to what can be outsourced from 'MailChimp', several additional modules such as display-suite, books.

While styling the home page, I discovered that a particular twig was being used by the base theme for rendering it.  I was able to over-ride this template within my new subtheme by first, enabling the debugger within the Drupal instance's services.YML file, and subsequently re-rendered the  HTML page to find  literal suggestions from the debugger on what filename to create within my local theme in order to override that base template that was being used in the first place.


Is created with the varBase theme, which is designed as a much more general base for a site. Like OS, it is designed with Bootstrap, for its grid layouts and taking advantage of built-in @media  breakpoints. I've styled it according to guidelines researched from ADA guidelines, most importantly, because over 70% of Adults in America need glasses of some sort, so why not recognize the largest community of users available.  To that end, I've added text-resizers and paid attention to color contrasts for color-blindness. I've also mandated on forms that all media MUST be accompanied by an Alt tag, so that speech-Text readers like JAWS, as outlined in the 2017 Winn-Dixie vs. Gil case, which heavily fined the supermarket chain for not providing adequate ADA compliance for its employees and customers on its website.

The site also features the GSAP/GreenSocks JQuery library for some fairly nifty animation effects while scrolling.  GSAP allows a front end designer to identify elements of the page DOM as breakpoints while scrolling a page, and triggering styling effects like expanding images or changing text color and sizes. What makes these transitions smooth is to simply employ the transition: duration: 1000ms; properties onto the appropriate CSS elements.

Virtual Reality; [Module Development]

I'm working on a module that will allow users to load a 360 stereophonic image from a Samsung 360 camera and automatically render it as a 2:1 equilateral rectangular image that can be used with google's A-Frame viewer, as seen on the page referenced above, and its accompanying library.  The module addition, which I'm currently naming as "hugin image effects" provides a Hugin extension for the "Image Effects" module.  'Hugin' is an application that runs on LINUX and Windows servers which is able to "stitch" the sides of the stereophonic image together to create the flat Equilateral-Rectangular JPG that is being used by the A-Frame viewer for seeing wicked cool VR images on a screen, phone or with VR goggles.  This has a great Use case for real-estate, restaurants or picturesque venues.