Tag: Google Chrome

Dragging Hot Virtual Keyboard on Chrome

Working on a solution today to have the Hot Virtual Keyboard Chrome extension allow user to drag the keyboard without it disappearing.
There is a function bind in the extension code for blur that will close the keyboard. Unfortunately, the text input field goes to a blur state when the user would start to drag the onscreen keyboard. To work around this, I modified the following file in the Chrome extension path and commented out the blur handler.

(function CS_initiate() {
  this.CS_attachKeyboard = function(elem) {
    if (elem.getAttribute(HVKeyboardDefined)) return false;
    elem.setAttribute(HVKeyboardDefined, true);
    CS_addListener(elem, focus, function(e) { TitleShowKb(); }, false);
    /** CS_addListener(elem, blur, function(e) { TitleHideKb(); }, false); **/
  };

Now this causes the keyboard to never disappear, but I set the keyboard to have a title which also has a close button so the user can close the keyboard when no longer needed.

Hot
Hot Virtual Keyboard KioskWeb theme with Title Bar

The root of this problem is that the keyboard didn’t float to where the cursor was – it was always at the bottom of the window. This way, the user can now move it to wherever without it disappearing unless they manually close it. It will also re-open the keyboard if they put focus into an input box element on the webpage.

Launch Chrome and Load a Local Extension

There are over 1,000 command-line switches to the chrome executable. This particular switch allowed me to load an extension from the command line by giving it a path to the unpacked extension.

chrome.exe --load-extension=C:ChromeExtensionsHotVirtualKeyboard1.1.0

Unpacking the extension itself is for a different day… but some quick notes on that.
To find the extension directory, I first needed the extension ID. In Chrome, I navigated to chrome://extensions/.
Under each extension, there is an ID: field with a string representing that extension’s ID which correlates to the following path:

%LOCALAPPDATA%GoogleChromeUser DataDefaultExtensionsextensionstringhere

RealVNC Viewer for Google Chrome

This is exciting to me. I may actually start using Google Chrome just for the added functionality/productivity by having RealVNC viewer for Google Chrome. I use VNC literally 10s of hundreds of times per day for remote support, maintenance, etc. and this may just make my life a little easier!
Demo Video:
http://www.youtube.com/watch?v=WY8if72eZHc
RealVNC Released VNC Viewer for Google Chrome March 7, 2013;  You can find information and download it here:  http://www.realvnc.com/products/chrome/

Harlem Shake – Facebook or Google+ Style

This is pretty awesome.  I saw a cute JavaScript code that will do the Harlem Shake for the page you’ve loaded. Navigate to the site you want;  facebook, google+, whatever.

Copy This Code

Copy the following code to your clipboard.  Note:  If you hover over the code, you’ll see a box pop up on the top right of the code;  click the paper icon to copy to clipboard.

javascript:(function(){function c(){var e=document.createElement("link");e.setAttribute("type","text/css");e.setAttribute("rel","stylesheet");e.setAttribute("href",f);e.setAttribute("class",l);document.body.appendChild(e)}function h(){var e=document.getElementsByClassName(l);for(var t=0;t<e.length;t++){document.body.removeChild(e[t])}}function p(){var e=document.createElement("div");e.setAttribute("class",a);document.body.appendChild(e);setTimeout(function(){document.body.removeChild(e)},100)}function d(e){return{height:e.offsetHeight,width:e.offsetWidth}}function v(i){var s=d(i);return s.height>e&&s.height<n&&s.width>t&&s.width<r}function m(e){var t=e;var n=0;while(!!t){n+=t.offsetTop;t=t.offsetParent}return n}function g(){var e=document.documentElement;if(!!window.innerWidth){return window.innerHeight}else if(e&&!isNaN(e.clientHeight)){return e.clientHeight}return 0}function y(){if(window.pageYOffset){return window.pageYOffset}return Math.max(document.documentElement.scrollTop,document.body.scrollTop)}function E(e){var t=m(e);return t>=w&&t<=b+w}function S(){var e=document.createElement("audio");e.setAttribute("class",l);e.src=i;e.loop=false;e.addEventListener("canplay",function(){setTimeout(function(){x(k)},500);setTimeout(function(){N();p();for(var e=0;e<O.length;e++){T(O[e])}},15500)},true);e.addEventListener("ended",function(){N();h()},true);e.innerHTML=" <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>";document.body.appendChild(e);e.play()}function x(e){e.className+=" "+s+" "+o}function T(e){e.className+=" "+s+" "+u[Math.floor(Math.random()*u.length)]}function N(){var e=document.getElementsByClassName(s);var t=new RegExp("b"+s+"b");for(var n=0;n<e.length;){e[n].className=e[n].className.replace(t,"")}}var e=30;var t=30;var n=350;var r=350;var i="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3";var s="mw-harlem_shake_me";var o="im_first";var u=["im_drunk","im_baked","im_trippin","im_blown"];var a="mw-strobe_light";var f="//s3.amazonaws.com/moovweb-marketing/playground/harlem-shake-style.css";var l="mw_added_css";var b=g();var w=y();var C=document.getElementsByTagName("*");var k=null;for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){if(E(A)){k=A;break}}}if(A===null){console.warn("Could not find a node of the right size. Please try a different page.");return}c();S();var O=[];for(var L=0;L<C.length;L++){var A=C[L];if(v(A)){O.push(A)}}})()

Internet Explorer

  1. Hit F12 to launch developer mode
  2. Click on Console and paste the code you copied into the console:
    2013-02-15_152049
  3. Hit Enter or click the play button to run the script.
    2013-02-15_152105
  4. Sit back and enjoy.

Chrome Users

  1. Right click and click on inspect element (chrome)
  2. Click the Console Tab
  3. Copy/paste this code in console
  4. Press enter and watch Facebook do the Harlem Shake