hubspot / facewall

Grid visualization of Gravatars for an organization

Facewall

An open-source version of HubSpot's Facewall and Facewall game.

Watch the Video

Configuring

• First thing you'll want to do is update the following files:

  • config.coffee
  • constants.coffee

• Next, you'll want to configure employees.coffee with either a URL or USER_JSON string. The format of the JSON needs to be the following:

{
   "users":[
      {
         "id": 1,
         "createdAt": 1282254176001,
         "email": "[email protected]",
         "firstName": "Adam",
         "lastName": "Schwartz",
         "role": "Principal Software Engineer"
      },
      // ...
   ]
}

Running

Facewall is a Brunch app. To run it with no authentication simply run the following:

brunch watch --server -p PORT

Then navigate to:

http://localhost:PORT/facewall/

If you want to use SSL, you'll additionally need to set up stunnel. See the Stunnel README for more information.

Deploying

See Brunch's guide on deploying.

facewall's Issues

Loading images from directory rather than gravatar

Hi, I was wondering, Is it possible to load images from a local directory where the files are hosted rather than using the website gravatar? and if so, How do i go about this? Lets say I want the images to be pulled based on the user ID? and the images are in /images/?

Is it possible?

Unable to run brunch server

Installed brunch
Ran npm install

Node ver: v0.12.6
Brunch v1.6.7

Keep getting this error. Please help!

"/Users/onooristani/Work/facewall/node_modules/javascript-brunch" does exist in the node_modules directory and has contents.

$ brunch watch --server -p 3333
/usr/local/lib/node_modules/brunch/lib/watch.js:446
          throw new Error("You probably need to execute `npm install` to insta
                ^
Error: You probably need to execute `npm install` to install brunch plugins. Error: Cannot find module '/Users/onooristani/Work/facewall/node_modules/javascript-brunch'
  at /usr/local/lib/node_modules/brunch/lib/watch.js:446:17
  at Array.map (native)
  at loadDeps (/usr/local/lib/node_modules/brunch/lib/watch.js:431:8)
  at loadPackages (/usr/local/lib/node_modules/brunch/lib/watch.js:451:13)
  at /usr/local/lib/node_modules/brunch/lib/watch.js:471:17
  at /usr/local/lib/node_modules/brunch/lib/helpers.js:597:12
  at /usr/local/lib/node_modules/brunch/lib/helpers.js:558:16
  at /usr/local/lib/node_modules/brunch/lib/helpers.js:507:12
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:263:16
  at /usr/local/lib/node_modules/brunch/node_modules/read-components/index.js:72:14
  at FSReqWrap.cb [as oncomplete] (fs.js:226:19)

local images still not working at my side

Hello,
as an beginner I have tried to add folder /images/photo.jpg into facewall folder, also delete gravatar loading function and set avatarInGridSize: (url) => url ... But I still see just a white wall without anything :(

TypeError: app.login.context is undefined

When i try to open "http://facewall:3333/facewall/game"
I just see a black circle with a "f" pulsating. After i open firebug i see the error message:

TypeError: app.login.context is undefined app.js:258

Any hint to fix that? It seems that this have something todo with the highscore, any advice to complete disable the highscore?

Thanks in advance!

Facewall refreshes view from time to time

From time to time you see that the whole view refreshes. After some time pictures were displayed the view get cleared and view loads from the beginning. This is not the nicest behavior for a screen that might hang in the hall.

Testing on a Firefox browser.

Gravatar images full screen of the browser window

Not sure if it's my specific settings or a bug.

For about 5 seconds it did line up the images correctly but it refreshed and became full screen again.

Running it here: http://facewall.justdev.in/facewall/
Using dokku and just hosting with brunch currently.

This app wont listen to my network interface

I am having an issue getting this app to listen on my network interface.

I already modified my coffee.config file to this. Anything else i'm missing here?
templates:
defaultExtension: 'hbs'
joinTo: 'static/js/app.js'

server: '0.0.0.0'
    base: '/facewall'

Not all pictures are displayed

While testing the application with default collection of employees, I have noticed that depending on the size of the window different number of pictures displayed. Most of the time you will see less than 12 pictures. To see all of them you need to make height of the windows quite small.

It feels like some pictures are not added in employee_loaded function. There we add employees only if we have enough for the whole row if row_bucket.length is grid.length. This might leave some pictures not displayed.

Failing to load facewall without ending '/'

When trying to load facewall without ending '/' (ex. http://localhost:8080/facewall) I get only letter 'f' displayed. Though when I load with ending '/' (ex. http://localhost:8080/facewall/) it works and images are displayed.

It would be great to have same results in both cases.

Game not showing employees

Got /facewall/ working, but going to /facewall/game gets me a shell page with my org name, but no employees loading. Is the game part supposed to be working out of the box (or, er, repo)? There are no instructions for the game in the readme.

Chrome for Mac 29.0 crashes after an hour

I am running this on a few systems. Is there a recommended browser/OS to run this on as Chrome seems to crash for Mac regularly.

Is it possible to host brunch's build output with dynamically loaded content?

Not an issue, but a question.

I have no other coffeescript or brunch experience, so I haven't been able to figure this out myself. I configured facewall to dynamically load content via a URL returning JSON, The host of that JSON is a python server. Everything worked fine when I was locally hosting two servers (a web.py server and facewall's brunch server), with the exception of the cross-domain issues from the servers being on different ports. To get rid of that issue and not need two services, I wanted to try to use the web.py server alone.

I tried using brunch's build command and hosting the output on the web.py server, but whenever the URL is navigated to the JSON loads but the facewall app remains on the screen with the floating dots and line. Does the facewall app need to be hosted on the brunch server in order to load dynamic content?

Use images instead of gravatars

In our company we don't use Gravatar, though we have pictures of all employees on intranet. Is there an easy way to use links to the pictures instead of gravatars?

Strange calculations in getGrid

Experiencing the same issue as described in "Gravatar images full screen of the browser window #7". Found out that getGrid function is working a bit strange. Here are my notes:

1. The recursive calls to getGrid are passing options structure instead of columnWidth.
2. getGrid is always using $(window).width() to initialize options.width, so there is no much point in the recursive calls.

Text Overlap

Emails should be trimmed and lowercased for Gravatar

As per: http://en.gravatar.com/site/implement/hash/ email addresses need to be trimmed at lowercased in order to calculate the proper hash.

It would be nice if this line: https://github.com/HubSpot/facewall/blob/master/app/collections/employees.coffee#L35
could become this:

employee.gravatar = "https://secure.gravatar.com/avatar/#{CryptoJS.MD5(employee.email.trim().toLowerCase())}?d=#{defaultGravatarImage}"

Incorrect setup directions in README

Just downloaded, npm install'd, and did "brunch watch --server -o 7676". Then I navigated to http://localhost:7676/facewall only to see a bunch of 404's for things like http://localhost:7676/static/css/app.css, but using the relative path is fine.