The fantastic Anne Siegel has just sent over some panoramas direct from the British Council location in Delhi.
In order to display them all in one convenient location I decided to use the A-Frame guide to building with components, which conveniently is a panorama browser.
Along the way, I had to install K-Frame:
npm install kframe --save
Unfortunately, I found some problems with the tutorial, so I posted a question to Stack Overflow.
Kevin Ngo, the author of the package helpfully got back to me, and bumped the version of his package. I edited my package.json to reflect his change:
"kframe": "^0.3.2",
But this resulted in the following error when I tried to run:
npm update
To update K-Frame, the package in question:
ForceMacbookProRetina:APieceOfArtAsBigAsIndia joel$ npm update npm ERR! Darwin 16.1.0 npm ERR! argv "/usr/local/Cellar/node/6.7.0/bin/node" "/usr/local/bin/npm" "update" npm ERR! node v6.7.0 npm ERR! npm v3.10.7 npm ERR! code ETARGET npm ERR! notarget No compatible version found: kframe@'>=0.3.2 <0.4.0' npm ERR! notarget Valid install targets: npm ERR! notarget 0.3.0 npm ERR! notarget npm ERR! notarget This is most likely not a problem with npm itself. npm ERR! notarget In most cases you or one of your dependencies are requesting npm ERR! notarget a package version that doesn't exist. npm ERR! Please include the following file with any support request: npm ERR! /Users/joel/Documents/Projects/jgl/BritishCouncil/APieceOfArtAsBigAsIndia/npm-debug.log
I put the version number back to 0.3.0 for safety. Kevin got back in touch and suggested installing the Event Set component individually, so I ran:
npm install aframe-event-set-component --save
Which resulted in the following output:
a_piece_of_art_as_big_as_india@1.0.0 /Users/joel/Documents/Projects/jgl/BritishCouncil/APieceOfArtAsBigAsIndia ├── aframe-event-set-component@3.0.1 └─┬ kframe@0.3.0 └── aframe-event-set-component@0.1.2
Could this be a conflict? I added the following line to my main.js:
require('aframe-event-set-component');
When I tried to view the page on my local server, I got the following errors in my Javascript console:
Uncaught Error: The component `event-set` has been already registered. Check that you are not loading two versions of the same component or two different components of the same name.(…)
So after looking up how to remove a locally installed package via npm, I removed K-Frame by typing:
npm uninstall kframe --save
This removed all of K-Frame, as well as it’s dependencies. I could verify this by checking my package.json file. I now needed to add both the Template Component, the Layout Component and the Animation Component individually:
npm install aframe-template-component --save npm install aframe-layout-component --save npm install aframe-animation-component --save
And adding both of them as requirements to my main.js:
require('aframe-template-component');
require('aframe-layout-component');
require('aframe-animation-component');
Resulted in no errors on my Javascript console!
I continued through the rest of the tutorial, creating a pair of new components (set-image.js and update-raycaster.js), and including them in my main.js:
require('./update-raycaster.js');
require('./set-image.js');
I consulted the GitHub for the tutorial several times, but in the end I got the page working, allowing for the browsing of all of Anne’s images inside A-Frame!