What you see on the right is a screen-shot of the live and navigable application at here.com but interface elements have been removed and the whole maps has received a colored tint.
In other words it’s possible to modify and change the look and functionality of a live website without copying it to another server or hack the server on which the website resides (don’t do that, kids!).
In this video I demonstrate how the modification works:
As a part of my work with Obscura we do visuals for various events. For this one event it would be really appropriate to display some nice slow flyover video on the big screen of 3d maps like the ones you have on Apple maps or Google maps on iOS. I found the maps at here.com and pondered how to get them on the big screen without those navigation buttons while still being able to control camera movements.
Real time browser remix
window.document.getElementById("map-controls").style.display = "none";
And voila the navigation button are gone and same goes for the other UI overlays.
Changing the look of the map was easy with CSS filters that have become available in HTML5.
So using the developer tools I also figured out a bit of the code that lies below the surface on here.com and I found some methods that I could trigger and use to navigate the map even with no visible controls. Keyboard shortcuts are already implemented (arrows, shift, + and -) but I didn’t like the movements – I thought it was going to fast on a big screen.
Problem is I would have to put all this stuff in to the console every time I open the here.com website. And with an accidental reload of the page I would have to do it again.
So I thought about writing a document that opens here.com in a pop up window and then modifies it in the same way as we did above? Well this is called cross site scripting and there are many reasons why browser creators don’t like that.
Here is the final Node-webkit application I made. To run it simply go to Node-webkit site and grab a binary for your platform then download my file and open it with node-webkit: Maps
My small app has plenty of bugs (I had one day before the event to figure it out) but feel free to have a look. Simply rename maps.nw to .zip and unpack it.
Before I end this let me show you how it looked at the event this modification was created for:
I am quite thrilled with the idea of remixing websites and as a visual performer I also find node-webkit brings a lot of potential for writing other tools that can be used for performance. With WebGL in mind this should open up a number of possibilities. And while VJing with a browser has some limitations because of the standard GUI of the browser I could easily see node-webkit applications being made for VJs or other visual artists.
So I will continue exploring this environment and would love to hear if others are doing something similar.