Author Archives: godlikemouse

Deploying Go Revel Apps On Heroku

I’ve spent quite a bit of time trying to figure out how to successfully deploy Go Revel applications to Heroku, luckily for you.  Let’s go through them step by step and I’ll show you how I did it.

Install Go

First install Go if you haven’t already, this should be pretty self explanatory.

Install Revel

Next, install the Revel framework.  Change to the directory where you have your GOPATH configured, for example:

user@computer:$ cd $GOPATH

Then execute the following to install Revel:

user@computer:$ go get github.com/revel/revel
user@computer:$ go get github.com/revel/cmd/revel

Update your path to contain the Revel binary:

user@computer:$ export PATH=$PATH:$GOPATH/bin

Now change directory to the src directory:

user@computer:$ cd $GOPATH/src

Create the app

If you haven’t already done so, create a basic vanilla app using revel by executing the following command (replaceing “myapp” with your application name of course):

user@computer:$ revel new myapp
user@computer:$ cd myapp

Next, let’s make sure the app runs by executing the run command:

user@computer:$ revel run myapp

Open a browser to http://localhost:9000 (or whatever port you have your application configured to run on) and verify that everything is working as expected.

Install Heroku Toolbelt

Download and install the Heroku Toolbelt: https://toolbelt.heroku.com/

Next login to Heroku using the toolbelt:

user@computer:$ heroku login
Enter your Heroku credentials.
Email: adam@example.com
Password (typing will be hidden):
Authentication successful.

Once that’s done you’ll need to create the application.  If you’ve already done so by way of the Heroku web GUI, you can skip this step, if not execute the following (Once again replacing “myapp” with your actual app name):

user@computer:$ heroku create -b https://github.com/revel/heroku-buildpack-go-revel.git myapp

This will ensure that the revel go buildpack is being used.

If you’ve already created the application using the Heroku web GUI, then go under settings and set the buildpack to use “https://github.com/revel/heroku-buildpack-go-revel.git”

heroku-buildpack

Initialize Git

Next ensure that you are still under your application directory “src/myapp” and execute the following:

user@computer:$ git init

Now that your git is initialized let’s link it to the Heroku online app repo, execute the following (Replace myapp with your actual app name).

user@computer:$ heroku git:remote -a myapp

Install Godep

Now, we need to install Godep for our project to work correctly on Heroku, install by executing the following:

user@computer:$ go get github.com/tools/godep

Next, let’s automatically update all of our dependencies using godep, execute the following under your application directory:

user@computer:$ godep save ./…

If this ran correctly, you should see a “Godeps” and “vendor” folder under your application directory. Note: pay special attention to the “./…” that needs to be there verbatim.

 

Test Heroku Local

To ensure everything is going to work in the Heroku environment, we should first test the application locally by executing the following:

user@computer:$ heroku local

[WARN] ENOENT: no such file or directory, open ‘Procfile’
[FAIL] No Procfile and no package.json file found in Current Directory – See heroku local –help

You probably noticed the errors there, this isn’t really an issue, we just need to complete a few things.  First lets create a file called “.env” and add an environment variable to it that tells Heroku to use a version later than go 1.5, execute the following:

user@computer:$ echo “GO15VENDOREXPERIMENT=1” > .env

This file should be located at the root of your application directory (“myapp/.env”).

Next, let’s create a simple Procfile to execute our revel run command.  Execute the following:

user@computer:$ echo “web:revel run myapp prod 9000” > Procfile

Finally, let’s add our application name to the “.godir” file.  Execute the following:

user@computer:$ echo “myapp” > .godir

Now, let’s run “heroku local” again, you should see something similar to the following:

user@computer:$ heroku local

[OKAY] Loaded ENV .env File as KEY=VALUE Format
3:37:24 PM web.1 | ~
3:37:24 PM web.1 | ~ revel! http://revel.github.io
3:37:24 PM web.1 | ~
3:37:24 PM web.1 |
3:37:24 PM web.1 | INFO 2016/06/29 15:37:24 revel.go:365: Loaded module static
3:37:24 PM web.1 | INFO 2016/06/29 15:37:24 revel.go:365: Loaded module testrunner
3:37:24 PM web.1 | INFO 2016/06/29 15:37:24 revel.go:230: Initialized Revel v0.13.1 (2016-06-06) for >= go1.4
3:37:24 PM web.1 | INFO 2016/06/29 15:37:24 run.go:57: Running myapp (myapp) in dev mode
3:37:24 PM web.1 | INFO 2016/06/29 15:37:24 harness.go:170: Listening on :9000
3:37:24 PM web.1 |

Now open your browser to http://localhost:9000 again and verify that it runs correctly in the heroku environment.

If everything runs well locally, then we’re ready to deploy.

Deploy To Heroku

First let’s add all of our changes to git, execute the following:

user@computer:$ git add .

Next, let’s commit:

user@computer:$ git commit -m “Initial commit”

Now let’s push the changes to Heroku

user@computer:$ git push heroku master

Counting objects: 377, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (352/352), done.
Writing objects: 100% (377/377), 845.31 KiB | 0 bytes/s, done.
Total 377 (delta 96), reused 0 (delta 0)
remote: Compressing source files… done.
remote: Building source:
remote:
remote: —–> Fetching set buildpack https://github.com/revel/heroku-buildpack-go-revel.git… done
remote: —–> Revel app detected
remote: —–> Installing go1.6… done
remote: Installing Virtualenv… done
remote: Installing Mercurial… done
remote: Installing Bazaar… done
remote: —–> Running: godep restore
remote:
remote: —–> Discovering process types
remote: Default types for buildpack -> web
remote:
remote: —–> Compressing…
remote: Done: 127.8M
remote: —–> Launching…
remote: Released v4
remote: https://obscure-beyond-93544.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy… done.
To https://git.heroku.com/obscure-beyond-93544.git

Once completed you should be ready to go.  Next run the following to test:

user@computer:$ heroku open

If you received errors during deployment or testing, you may be able to help resolve your issue by viewing the heroku logs:

user@computer:$ heroku logs

 

Hopfully everything turned out well for you.  If it didn’t, drop me a line and I’ll see if I can help you out.

Getting The XBox 360 Controller To Work Correctly With Steam And Windows 10

If you like to play your Steam games in Big Picture mode and have upgraded to Windows 10 recently, you may have noticed that the main XBox controller button no longer functions as it’s supposed to.  But don’t worry, there is a very simple fix for this and it doesn’t require the XBox app.  First bring up the Game DVR systems by pressing:

Win + G

This should bring up the Game DVR bar.

Game DVR

Next click on the Gear (Settings) icon on the far right.

Located the second to last checkbox which reads: “Open Game bar using (XBox button) on a controller” and uncheck it.

Game DVR SettingsNow you’re good to go.  Close out the Game DVR settings dialog and give it a try.  If all is well you should be able to launch Steam in Big Picture mode and your screenshot shortcuts, etc should all be working now.

Drawing on Textures in ThreeJS

If you’re an avid user of ThreeJS you have more than likely at some point run into the situation where you need to either create a texture from scratch for the point of coloring it, or have had the need to update/draw on a texture for one reason or another.  The following will walk you through what is needed to accomplish this.

First, start by creating an in memory canvas object that we will use to draw on.  This will eventually be transformed into a texture object.

//create in memory canvas
var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext("2d");

 

For this example, I’m creating a simple 100×100 pixel image and retrieving the 2d context which we will next use for performing that actual modification of the image.

//paint the image red
context.fillStyle = "#ff0000";
context.fillRect(0, 0, 100, 100);

 

Here we’re setting the fill color to red and painting the entire image.  Next, let’s convert our in memory canvas object into an image.

//create image from canvas
var image = new Image();
image.src = canvas.toDataURL();

 

Finally, let’s take our new image and create a texture object which can be applied to a material.

//create new texture
var texture = new THREE.Texture(image);
texture.anisotropy = 4;
texture.needsUpdate = true;
 
//apply texture to a material, go forth and be merry

 

That’s really all there is to it, you can make the context draw lines, rects, etc. onto the in memory canvas until your heart’s content.  For convenience, the following is the entire code example wrapped up into one.

//create in memory canvas
var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
var context = canvas.getContext("2d");
 
//paint the image red
context.fillStyle = "#ff0000";
context.fillRect(0, 0, 100, 100);
 
//create image from canvas
var image = new Image();
image.src = canvas.toDataURL();
 
//create new texture
var texture = new THREE.Texture(image);
texture.anisotropy = 4;
texture.needsUpdate = true;
 
//apply texture to a material, go forth and be merry

Getting Windows 10 Home Remote Desktop Working

Windows 10 Home edition by default will not allow you to have inbound remote desktop connections.  Regardless of any settings you may find to the contrary, turning off your firewall, etc. there will just not be anything you can do directly at the user level to enable it.  All is not lost however, there is a very simple fix that you can apply to enable this functionality.

First download RDPWrap at: https://github.com/stascorp/rdpwrap/releases

You want to download the release which takes a form like “RDPWrap-v1.6.zip” for example.

Next, unpack the zip file to a directory and find the file entitled “install.bat”, right click and choose “Run as Administrator”, grant the permission when prompted and let the batch file run its course.

After the installation completes, execute the file “RDPCheck” and ensure that the “Wrapper state”, “Service state” and “Listener state” status are all green.  If they are, then you’re good to go, change whatever configuration settings you would like and remote in.

RDPCheck

If you find that any of the status states are red, such as the “Listener state” for example, ensure that your firewall is not blocking by turning your firewall off just for a quick test and try the “RDPCheck” again.  If you still find that there is a status issue, file the file “update.bat”, right click and choose “Run as Administrator”, grant the permission when prompted and let the batch file run its course.  Once the update has completed, try running the “RDPCheck” check again, you should be good to go.

New Rubik’s Cube jQuery ThreeJS WebGL Plugin

I have previously released a jQuery Rubik’s cube plugin comprised of only HTML, JavaScript and CSS.  Although pretty nifty, there were a few issues with regards to support from some browsers, most notably Firefox and Internet Explorer.  I decided to recreate the plugin using WebGL.  The result is my jquery.cube.threejs.js plugin. As seen below.

The plugin code is available here: https://github.com/godlikemouse/jquery.cube.threejs.js

See the Pen jQuery ThreeJS Rubik’s Cube by Jason Graves (@godlikemouse) on CodePen.

This plugin utilizes standard cube notation, both modern and old to execute moves. For example, the moves executed by the 3×3 cube above are utilizing the following notation:

x (R’ U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 R2 x’

This algorithm is being passed to the cube plugin by way of the execute() method or data-moves attribute.

This plugin currently supports a number of configuration options that can be passed at instantiation time including, cube face colors, animation delay time with more to come shortly.

This incarnation of the plugin also supports cube sizes of 2×2 up to 9×9 with no issues.  Cubes larger than 9×9 may see some degradation in frame rates depending on the speed of the client devices.

For more information on this plugin or to view the source please visit: https://github.com/godlikemouse/jquery.cube.threejs.js

Build Your Own Private Gaming Cloud

I’ve run into several occasions where I’ve purchased a game and there’s no support for cloud save storage. Back in the day this was the norm, but being that most gaming services such as Steam, Origin, etc. offer some form of cloud game saving backup and storage; I find myself a bit spoiled by these niceties and get irritated when I purchase a game where this is not provided.

I have come up with a very simple and fast way to implement your own gaming cloud storage for games that don’t support it out of the box and it requires no programming whatsoever.

So let’s get started.

Cloud Storage Client

The first thing you’re going to want to do is setup and account with an online storage service that has an installable client for handling the cloud synchronization, for my example I’ll be using Google Drive on Windows, but you can use any cloud storage client you prefer, Dropbox, Box, etc.

First download and install the client software.
GoogleDriveDownload

Local and Remote Folder Setup

Next you’ll need to locate the game save location on your machine. For my example, I’ll be using GTA V purchased through the Rockstar Social Club.

The game save location for this game is:

C:\Users\<username>\Documents\My Games\Rockstar Games\GTA V

(Please note that the <username> notation should be replaced with your actual username.)

GTAVDirectory

Next, let’s setup a folder in our cloud service provider specifically for gaming. I have mine setup as “Gaming” located at:

C:\Users\<username>\Google Drive\Gaming

GamingFolder

Now what you’re going to want to do is copy the “GTA V” directory first to a location where nothing can happen to it (just to be safe, I put mine on the Desktop), then copy the “GTA V” folder to your “Gaming” folder located under your storage service folder:

C:\Users\<username>\Google Drive\Gaming\GTA V

GamingGTAVFolder

Next, make sure you’ve already copied the original game save folder someplace other than your storage service folder just to be safe, then remove the original “GTA V” directory located at:

C:\users\<username>\Documents\My Games\Rockstar Games\GTA V

GTAVDirectory

Finally, create a symbolic link to the storage service folder with the exact name of the game directory name. If you’re using Windows please follow the “For Windows 7 or Higher” section, if you’re using Mac OS or Linux please follow the “Mac OS or Linux” section.

For Windows 7 or Higher

First click the windows start button (or hit the windows key) and type “cmd”. Next, right click on the “cmd” entry in the start menu and select “Run as Administrator”.

RunCmdAsAdmin

Next change directory to the directory above your original game save location, for example:

cd "C:\Users\<username>\Documents\My Games\Rockstar Games"

Finally create the symbolic link for the game to the storage service folder:

mklink /D "GTA V" "C:\users\\Google Drive\Gaming\GTA V"

You should see something like this when the command is complete:

symbolic link create for GTA V <<===>> c:\Users\<username>\Google Drive\Gaming\GTA V

For Mac OS X or Linux

Open a terminal (Mac: command + space and type “term”) and change to your game directory:

cd /Users/<username>/Documents/Games

Create the symbolic link for the game to the storage service folder:

ln -s /Users/<username>/Google\ Drive/Gaming/GTA\ V GTA\ V

Test and Play

Finally, test and make sure this works by launching the game and verifying that your game has loaded correctly. Once your sure all your game save content is correct, feel free to remove the safe location back copy folder (In my example this is the “GTA V” folder I copied to the desktop).

Repeat the symbolic link creation process on all the the machines you want to be able to seamlessly access your games on and you’ll never have to worry about your game saves again.

How To: Hulu.com and Arch Linux

Hey everyone, I’ve figured out how to get Hulu.com working on Arch Linux today. Here’s what I did in case anyone else needs help:

First install pipelight:

user@computer:$ yaourt -S pipelight

Next, if you don’t already have it install firefox:

user@computer:$ sudo pacman -S firefox

Next, update and configure pipelight:

user@computer:$ sudo mkdir /root/.gnupg
user@computer:$ sudo pipelight-plugin --update

Next, enable the flash plugin:

user@computer:$ sudo pipelight-plugin --enable flash

Next, add the plugins to firefox:

user@computer:$ sudo pipelight-plugin --create-mozilla-plugins

Lastely, make sure you have hal installed:

user@computer:$ yaourt -S hal-flash-git
user@computer:$ yaourt -S hal-info

Once you’ve completed the steps above, completely kill of firefox (Super+Q), then restart and browse to Hulu.com, you should be able to watch it with no problems.

New Rubik’s Cube jQuery Plugin

I consider myself an avid speed cuber. Not world class, but fast enough and not too obsessed with it. That being said all the sites I’ve seen in the past with references to algorithms all seem to use really clunky client side Java or Flash plugins to handle the demonstration of moves.  I wanted to create a simple to implement jQuery plugin that utilizes the browser’s built in features to do the same thing.  The result is my jquery.cube.js plugin. As seen below.

The plugin code is available here: https://github.com/godlikemouse/jquery.cube.js

 

See the Pen jQuery and CSS Implemented Rubik’s Cube by Jason Graves (@godlikemouse) on CodePen.

This plugin utilizes standard cube notation, both modern and old to execute moves. For example, the moves executed above are utilizing the following notation:

x (R’ U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 (R U R’) D2 (R U’ R’) D2 R2 x’

This algorithm is being passed to the cube plugin by way of the execute() method.

This plugin currently supports a number of configuration options that can be passed at instantiation time including, cube face colors, animation delay time with more to come shortly.

For more information on this plugin or to view the source please visit: https://github.com/godlikemouse/jquery.cube.js

Responsive CSS Truncate and Ellipsis

We’ve all run into situations where we need to truncate text due to length constraints.  Most of the time this simply requires a truncation function which determines the maximum length of text and if the string exceeds that length, truncates it and adds an ellipsis (“…”).  But what about when we are developing responsive web applications that require text to be truncated according to the current device screen or browser size.  Luckily CSS3 supports a text-transform property called “ellipsis”, this however also requires that the bounding box defined with an overflow and a definite width and height.  Or does it…?

I’ve found an interesting way to implement CSS text truncation in a responsive setting that can be used with responsive layouts such as Pure, Bootstrap, etc.

The following code creates a single line responsive truncate and ellipsis behavior.

.truncate-ellipsis {
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}
 
.truncate-ellipsis > * {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

 

<div class="truncate-ellipsis">
    <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo nibh. Sed cursus ante ut nunc molestie viverra.
    </span>
</div>

 

This works by taking a parent element, in this case a “div” with the class “truncate-ellipsis” and turning it into a display type table with a fixed table layout. Its child element, in this case a “span” is transformed into a table cell with the overflow set to hidden and the text-transform property set to ellipsis.  This of course can be modified to suit specific needs of height and container size and should act as a pretty good starting point for basic implementation.

Storing And Retrieving Objects In HTML5 Local Storage

I’ve recently had the need to store information using HTML5’s local storage API.  To my surprise the API itself is geared toward only letting you store strings.  That being said I needed to store and retrieve information in a way that would make it easy to retain types as well as store complete objects.  The following is the approach I used which should help those of you unfamiliar with HTML5 local storage get up to speed on how to use it, as well as introduce a possibly not so obvious way to store complete object information as well as retain basic types.

Basic storage of information is simple.

localStorage["mykey"] = "myvalue";

Retrieval is just as easy.

var myvalue = localStorage["mykey"];

But what about actual types? Hmmm….

localStorage["mykey"] = 42;
var myvalue = localStorage["mykey"]; //returns the string "42"
 
//wait a minute...
 
localStorage["mykey"] = {};
var myvalue = localStorage["mykey"]; //returns the string "[object Object]"

Well crap! I’ve lost my input type and retrieved a string on the other side.  What’s a coder to do?  How about we make it retain our input types, not only that, let’s make it so we can store object types as well.

jQuery has some nice JSON parsing utilities among other things, let’s incorporate that along with a way to serialize objects into JSON strings.  First we’ll need a JSON serializer, better known as a stringifier (No, I didn’t make that up.  That’s actually what it’s called.)

Here’s a simple method which can be used to extend jQuery and allow objects to be stringified.

jQuery.extend({
stringify : function stringify(obj) {
	if(JSON && JSON.stringify)
		return JSON.stringify(obj);
 
	var t = typeof (obj);
	if (t != "object" || obj === null) {
		// simple data type
		if (t == "string") obj = '"' + obj + '"';
			return String(obj);
	} else {
		// recurse array or object
		var n, v, json = [], arr = (obj && obj.constructor == Array);
 
		for (n in obj) {
			v = obj[n];
			t = typeof(v);
			if (obj.hasOwnProperty(n)) {
				if (t == "string") v = '"' + v + '"'; else if (t == "object" && v !== null) v = jQuery.stringify(v);
				json.push((arr ? "" : '"' + n + '":') + String(v));
			}
		}
		return (arr ? "[" : "{") + String(json) + (arr ? "]" : "}");
	}
}
});

The above code is a very simple stringifier.  There are far more complex ones out there if you do a little searching, but I’ve been using this one for quite a while and it has always suited my needs.  Unfortunately however, I don’t remember where I originally found this code.  I didn’t write it, full credit goes to the original author (and if you know who that is please let me know and I’ll add an ownership clause).

Now, if we combine the use of our new stringifier and the use of jQuery’s own $.parseJSON, we should be in business.  Let’s give it a try.

var myvalue = {
first: "Bob",
last: "Dobalina",
age: 52
};
 
//let's store it
localStorage["mykey"] = $.stringify(myvalue);
 
//now let's retrieve it
myvalue = $.parseJSON( localStorage["mykey"] ); //returns actual JSON object

Perfect, now all our types are intact, we can store and retrieve objects ad nauseam, the world is once again a perfect place, birds are singing, no they don’t use Photoshop – super models really look like that and everything that tastes good is actually good for you.  Let’s verify our object types.

var first = myvalue.first; //returns "Bob"
var last = myvalue.last; //returns "Dobalina"
var age = myvalue.age; //returns 52

It’s worth being said that this point as well that local storage does have a size limitation of 5MB based on origin (which if you’re unfamiliar with is scheme + hostname + port).  So keep that in mind as you move forward with storing local information.  Hope this helps and thanks for swinging by.