In my previous post "Embedding Google Cardboard Camera VR Photosphere with A-Frame", I wrote that some talented programmer would probably create a better solution for embedding Google Cardboard camera photosphere using A-Frame.
I didn't know that Chris Car had already created a sophisticated solution for this problem. You can view it here on A-Frame blog.
You first might have to use Google Cardboard camera converter tool to make your Google Cardboard photosphere.
.Early this year I started looking into the VR (Virtual Reality) web applications. Web browsers now natively support VR applications using WebVR JavaScript API. We can now design virtual worlds using markup language and connect them to devices such as Oculus Rift and Leap motion controller using just a web browser.
To hit the ground running with WebVR. I started an experiment to capture Hackerspace Phnom Penh using Google Cardboard camera app and display it using A-Frame framework. The Google Cardboard camera photosphere is not supported by A-Frame. But the positive responses to my query encouraged me to try an hack using A-Frame Panorama component.
Is it possible to embed Google cardboard camera image capture in a @aframevr powered site?
— Arky (@playingwithsid) December 17, 2015
And it works. Almost I had to tweak the scale setting a bit to try get the perspective right but it does work. The ideal solution is to create a A-Frame custom component, that I leave it for more skilled people.
The markup needed for this demo is simple, you can achieve this with one line.
<a-scene>
<a-sky src="img/hackerspace.vr.jpg" radius="2400" scale="2 1 2"> </a-sky>
</a-scene>
You can see the demo on Youtube or visit this webpage in an compatible web browser.
Notes from this morning's scaffolding an AngularJS with Yeoman demo at AngularJS training session at Development Innovations in Phnom Penh. It follows the fantastic Let's Scaffold a Web App with Yeoman code lab tutorial.
Yeoman makes web developers productive by generating basic application directories and writing various configuration files. Grunt and Bower are used for build and package management.
Yeoman is installed using Node package manager (npm). In this post I install Node.js using Node version manager (NVM) tool . You can also install npm via package manager of your operating system.
# Run the Node.js version manager(NVM) Installation script
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.17.3/install.sh | bash
# Active the Node.js version manager (NVM)
$ source ~/.nvm/nvm.sh
# Install the stable version of Node.js
$ nvm install v0.10.32
# Install Yeoman
$ npm install -g yo
# Install the AngularJS generator.
$ npm install install -g generator-angular
# Let's create a directory for our TODO AngularJS app and change directory into it.
$ mkdir todo
$ cd todo
# Scafold AngularJS App
$ yo angular
# The AngularJS generator following directory structure
$ tree -L 1 -a
.
├── app
├── bower_components/
├── bower.json
├── .bowerrc
├── .editorconfig
├── .gitattributes
├── .gitignore
├── Gruntfile.js
├── .jshintrc
├── node_modules/
├── package.json
├── test
└── .travis.yml
# Start the development server.
$ grunt serve
# Additional packages can be fetched and installed using bower.
$ bower install --save jquery-ui
# Let's build your code
$ grunt
# One final check before deployment. Serve the production server.
$ grunt serve:dist
The Node.js packages distributed by gnu/Linux distributions tends to be out of date. If you looking for an alternative method for installing Node.js on gnu/Linux. Then Node Version Manager (nvm) is a good choice. This simple bash script lets you install and manage multiple active node.js versions.
You can download Node Version Manager(nvm) from the projects github page. Digital Ocean community site has a good getting started tutorial for Node Version Manager (nvm).
# Download and the installation script
$ curl https://raw.githubusercontent.com/creationix/nvm/v0.17.2/install.sh | bash
# Activate nvm (You might want to add this line to your .bashrc or .profile file)
$ source ~/.nvm/nvm.sh
# Discover other installable versions of Node.js
$ nvm ls-remote
# Install the stable version of Node.js
$ nvm install v0.10.31
# Install another version of Node.js
$ nvm install v0.11.13
# Check the installed versions of Node.js
$ nvm ls
-> v0.10.31
v0.11.13
system
# Use v0.10.32 version of npm
$ nvm use v0.10.31
# Run using particular version Node.js
$ nvm run 0.11.13
# Alternatively use Node.js installed by your package manager
$ nvm use system
Pebble smartphone SDK 2.0 will be released later this year. It introduces new build tools, support for accelerometer, data logging, persistent storage, JavaScript and Web API(Geolocation, Local Storage) API. Developers can distribute apps on Peeble Appstore for free.
Check out the technical talk for full details. Grab the latest Pebble SDK 2.0 Beta7 and use iOS/Android 4.0 mobile device to flash your Pebble with latest Beta firmware.
You can view this presentation slides on slideshare
Pleasantly surprised to see my Firefox add-on mentioned on Mashable.com story Auto-Refresh Your Twitter Feed With These 2 Useful Tools. The add-on automatically loads new tweets as they appear without any user intervention. You can also use this add-on to display continuous real-time feed of tweets on a large screen or digital projector.
I had written this add-on during MozCamp Warsaw last year. I observed my fellow participant constantly clicking a button to reveal new tweets on Twitter.com. Using Add-on SDK I automated this tedious process. Add-on SDK allows developers to enhance the functionality of Firefox web browser using JavaScript. I love to use Add-on SDK to create such duct-tape solutions for Internet annoyances.
Google Apps Script started as functions for Google Spreadsheets. Today Apps Scripts have evolved into powerful development environment for extending Google Apps. Google Apps Scripts are written in JavaScript programming language.
Last week I attended the Google Apps For Education Summit in Hanoi. The event featured few tutorials about Google Apps Script. It seems that there is a need for simpler tutorials for teaching Apps Script programming.
Earlier this year I wrote these Google Apps Scripts Web Apps to fetch a RSS feed or web page, parse it and display its content. You can embed these Apps Script as gadgets in your Google Sites pages.
The more technically savvy readers will find the example code helpful in learning user interfaces(UI) development with Html Service and Ui Service. You might also want to read XML parsing with Google App Scripts tutorial as well. Please do refer to latest Google Developer documentation as Apps Script API change over time.
Google Apps Script to parse and display wordcentral.com's Daily Buzzword RSS feed.
Web App URI: https://script.google.com/macros/s/AKfycbwi3vmklN73Al0tXrtQIvfzwl6G3cGOBsTrY-0s1XQvN-zUhLw/exec | Source Code: https://github.com/arky/DailyBuzzword-AppScript
Google Apps Script to parse and display wordsmith.org A Word A Day RSS Feed
Web App URI: https://script.google.com/macros/s/AKfycbwbMrEhTkn-E3gqAMu7aS5PoMAOHYD62BnGpZFTGPxAY8aCsYW4/exec | Code: https://github.com/arky/awad-AppScript
First go to the page you want to add the Apps Script gadget. Select Apps Script item under Insert menu. In the next dialog box, copy and paste the Apps Script Web App URI into the provided textbox and choose select. The Apps Script Gadget will appear in your webpage.
The city of Hong Kong hosted the Gnome Asia Summit this year. GNOME is a popular open source desktop environment for gnu/Linux Operating System. This annual event attracts people from diverse open source communities across Asia.
GNOME Asia Summit kicked off with the pre-event GNOME Design Workshop. The workshop helped GNOME contributors and developers understand GNOME environment design process. The workshop was intended for novice and experience UX designers, graphic artists and experienced desktop users.
The usability of the Open Source desktop environments has always left something to be desired. The keynote talks at the event delivered by GNOME Developers were very interesting. The GNOME community which was mired by conversation and dissent. Recently the developers revamping the software under the 'Every Detail Matters' initiative. Efforts to bring new UX paradigms into GNOME are also in full swing. Check out the GNOME team mock-ups here.
3D software used to create eye-popping prototypes. Don't believe me, check out this YouTube video Channel.
In the last few years, Javascript programming language had become very popular. Today applications written in Javascript are just as fast as native applications. Gnome-shell window manager is written using Javascript, thanks to GObject Introspection libraries such as Gjs and Seed. This means you can use your web development skills to enhance and extend your GNOME Desktop functionality.
The Gnome-shell add-ons is integrated closely with the Gnome Extensions service. It lets you share your extensions easily, search and enabling new features is a breeze.
The summit also featured talks related to teaching Open Hardware concepts, Gnome Accessibility, Community development and Gender equality in Open Source communities and Localization tools and GNOME predictive text input system
Uneven CSS Div columns make your site design one big mess. The defacto solution was explained way back in 2004 by Dan Cederholm in his Faux Columns in alistapart.com .
Dan’s trick involved using background image tiling with CSS to streach the columns. Perhaps another good solution that caught my eye recently is killersites.com’s The Matching Column Script:Matching CSS Div Heights .
The instructions are pretty clear, just add a “class=columns” attribute to target Div’s and call the javascript. And that’s it. Give it a try !
Last time I had a dekko at WATiR (Web Application Testing in Ruby) it worked only on Internet Explorer (IE), I didn't think that it was worth an effort to run it on IE under Wine on gnu/Linux.
Now WATiR supports both Firefox and Safari on gnu/Linux and Mac. I was able to install the FireWATiR tool which has a ruby gem and Firefox JSSH(JSSh - a TCP/IP JavaScript Shell Server for Mozilla) plugin on Debian/Sid running Iceweasel (2.0.0.11-1)/Ruby(4.1)/Gems(1.0.1-4) with no problems.
If you are looking for a simple open-source library for automating web browsers on gnu/Debian Linux, you don't have to look any further.
