EricEastwood.com

Paper backup and recovery guide for `pass` (Password Store) - SSH and GPG keys

Tue, 11 Jun 2024 00:00:00 GMT

You will want to go through these instructions, copy-paste this blog post to your own Microsoft Word/Google Doc, replace the keys with your own, and print a copy for safe-keeping. This paper copy will be the only thing you need to recover in case of a total loss of all devices.

Printing tips

Select all of the text on this blog post and copy-paste to a new Microsoft Word/Google Doc with the formatting
Adjust the page margins to 0.5" on all sides
In Google Docs, remove the tan background color by selecting everything then Format -> Paragraph styles -> Borders and shading -> Background color -> None

If you're curious to get a preview of how the setup will look and how pass works, this Dreams Of Code video is a great resource. This blog post also goes over the initial setup of pass so that the printed instructions include everything you need to fully bootstrap a new device in case of recovery and so you have a reference on how you initially set everything when you're trying to recall months/years later. The core new piece of information that this blog post goes over is how to backup your SSH and GPG keys to paper and recover from them in case of emergency.

It's also a good idea to practice your recovery steps by setting up a new device using the paper copy instead of just copying key files over. For example, I set everything up on my Linux PC and was able to fully recover on my Macbook using the paper copy.

For reference, I was able to fully migrate from the Chrome's built-in password manager to pass (imported everything using my pass-import-chrome project). I also use pass as a complete replacement for Authy/Google Authenticator to manage one-time passwords (OTP) with the pass-otp extension.

Table of Contents (quick-links):

Initial pass setup
Backup necessary keys on paper
Setting up a new computer (restore/recovery)

`pass` (Password Store) - Emergency recovery instructions

Project: https://www.passwordstore.org/

If you're reading these instructions, it probably means:

You're setting up a new device
Everything burned down to the ground and we need to fully recover

Initial `pass` setup

Note: These initial setup steps are just provided for context in case you need to reference how things were first created. If you're looking for instructions on how to restore/recover to a new device, jump to the "Setting up a new computer (restore/recovery)" section below.

Generate GPG key used to encrypt/decrypt data

Setup a GPG key that will be used to encrypt data. You will be prompted for a name/email but this can be set to anything and is just used to help you recognize the key. You will also be prompted for a passphrase to protect the key. The passphrase should be something memorable because you will be using it over and over to decrypt your passwords.

$ gpg --gen-key
$ gpg --list-keys
# Update so that the key doesn't expire
# (key expiry can be updated whenever, even after expiration)
$ gpg --edit-key 0D73297D7CB939CC6DB6302038954DD2384B1769
gpg> expire
...
Key is valid for? (0) 0
gpg> save

Make sure AEAD encryption is disabled otherwise you will run into compatibility problems with other OpenPGP implementations like PGPainless that the Android Password Store app uses.

  $ gpg --expert --edit-key 0D73297D7CB939CC6DB6302038954DD2384B1769
  # Check if AEAD is advertised as being supported
  gpg> showpref
  [ultimate] (1). test-blog-post <test-blog-post@ericeastwood.com>
       Cipher: AES256, AES192, AES, 3DES
+      AEAD: OCB
       Digest: SHA512, SHA384, SHA256, SHA224, SHA1
       Compression: ZLIB, BZIP2, ZIP, Uncompressed
+      Features: MDC, AEAD, Keyserver no-modify

  # Disable AEAD
  gpg> setpref AES256 AES192 AES SHA512 SHA384 SHA256 SHA224 ZLIB BZIP2 ZIP
  Set preference list to:
       Cipher: AES256, AES192, AES, 3DES
-      AEAD:
       Digest: SHA512, SHA384, SHA256, SHA224, SHA1
       Compression: ZLIB, BZIP2, ZIP, Uncompressed
-      Features: MDC, Keyserver no-modify
  Really update the preferences? (y/N) y

Setup `pass`:

Install pass and pass-otp (see the dependencies section below).

Initialize the password store with the GPG key you just generated:

$ pass init 0D73297D7CB939CC6DB6302038954DD2384B1769
$ pass git init

Create a private repo on GitHub/GitLab that will be used as the remote backup for our password store. Since the password files are encrypted, the only exposure is revealing which sites you have accounts with, which is not ideal, but the convenience of a git-based remote backup outweighs this small metadata leak in my opinion. Remember, they won't know the email or username associated with the accounts as long as you avoid using them in the file names. I use a naming scheme like "github.com/personal" and "github.com/work" to keep it ambiguous.

$ pass git remote add origin git@github.com:MadLittleMods/password-store.git
$ pass git branch -M main
$ pass git push -u origin main

Add SSH key to clone password repo

Create an SSH key that we can use to clone the password repo without access to our GitHub account:

$ ssh-keygen -t ed25519 -C "MadLittleMods/password-store deploy key"
Enter file in which to save the key (/home/eric/.ssh/id_ed25519): /home/eric/.ssh/id_ed25519_password_store_deploy_key
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
[...]

(suggested name: id_ed25519_password_store_deploy_key)

Note: No password necessary on the SSH key since the passwords we're cloning are already encrypted and it's just another friction step to figure out during recovery.

Add the public part of the SSH key to the deploy key section of the GitHub repo (deploy keys are just repo-scoped SSH keys). Go to your repo settings -> Deploy keys -> Add deploy key -> For the Key field, paste in cat ~/.ssh/id_ed25519_password_store_deploy_key.pub and add a Title like SSH key to clone repo for emergency recovery.

Backup necessary keys on paper:

Export keys for other devices:

SSH key in order to clone repo (private)
GPG key in order to decrypt passwords (public/private)

SSH key

Export the SSH private key as a QR Code (see the dependencies section below for how to install qrencode):

$ cat ~/.ssh/id_ed25519_password_store_deploy_key | qrencode --size=5 --8bit --output ssh-private-password-store.qr.png

Export the SSH key as text just in case the QR code is unreadable:

$ cat ~/.ssh/id_ed25519_password_store_deploy_key
-----BEGIN OPENSSH PRIVATE KEY-----
b3BlbnNzaC1rZXktdjEAAAAABG5vbmUAAAAEbm9uZQAAAAAAAAABAAAAMwAAAAtzc2gtZW
QyNTUxOQAAACApYJV4X58eT9gh1M3YdqWI2oCfV8sOjX4KwR32O3RpDAAAAJjTje11043t
dQAAAAtzc2gtZWQyNTUxOQAAACApYJV4X58eT9gh1M3YdqWI2oCfV8sOjX4KwR32O3RpDA
AAAEBsA8SGtj3IH/2RgDo/6ERGhDV6tny/rsomknNPpKP+NylglXhfnx5P2CHUzdh2pYja
gJ9Xyw6NfgrBHfY7dGkMAAAADnRlc3QtYmxvZy1wb3N0AQIDBAUGBw==
-----END OPENSSH PRIVATE KEY-----

GPG Key

GPG Public Key

Export the GPG public key as a QR Code:

$ gpg --export 0D73297D7CB939CC6DB6302038954DD2384B1769 | qrencode --size=5 --8bit --output gpg-0D73297D7CB939CC6DB6302038954DD2384B1769-public.qr.png

Export the GPG public key as armor/base64 text:

$ gpg --armor --export 0D73297D7CB939CC6DB6302038954DD2384B1769
-----BEGIN PGP PUBLIC KEY BLOCK-----

mDMEZmT03xYJKwYBBAHaRw8BAQdACT7nJ/XDcfDHZCDnXDovA78D5W4YvcEYZsyU
OF/CP8K0MHRlc3QtYmxvZy1wb3N0IDx0ZXN0LWJsb2ctcG9zdEBlcmljZWFzdHdv
b2QuY29tPoiZBBMWCgBBFiEEDXMpfXy5OcxttjAgOJVN0jhLF2kFAmZk9N8CGwMF
CQWjmoAFCwkIBwICIgIGFQoJCAsCBBYCAwECHgcCF4AACgkQOJVN0jhLF2l3CgD/
V/TTf4lmNn+0mM2VRB8HIKHET1v8IzIe41xwbIT06L4BALW3uf57Cw+4+npuKEhm
K0C1wsIcgRdRlYWozgJiaEkEuDgEZmT03xIKKwYBBAGXVQEFAQEHQBqKYxXO8mow
FMGJTNkNYqwiPnqLAfLEsqdzavPwejxnAwEIB4h+BBgWCgAmFiEEDXMpfXy5Ocxt
tjAgOJVN0jhLF2kFAmZk9N8CGwwFCQWjmoAACgkQOJVN0jhLF2nAkwEA7jpzd+9I
UTIbpAU7cMISYU1W2z2PVd3sBXoev1kVh9sA/A0tyDWkuFXoMX3z2vq6inS0Y+MO
TiJO1lpGW+r/nc8A
=NJZ8
-----END PGP PUBLIC KEY BLOCK-----

GPG Secret key

Export the GPG secret key as a QR Code. We're using paperkey to reduce the size of the GPG secret key so it fits better in a QR code (see the dependencies section below for how to install paperkey):

$ gpg --export-secret-key 0D73297D7CB939CC6DB6302038954DD2384B1769 | paperkey --output-type raw | qrencode --size=5 --8bit --output gpg-0D73297D7CB939CC6DB6302038954DD2384B1769-secret.qr.png

Export the GPG secret key as armor/base64 text:

$ gpg --armor --export-secret-key 0D73297D7CB939CC6DB6302038954DD2384B1769
-----BEGIN PGP PRIVATE KEY BLOCK-----

lIYEZmT03xYJKwYBBAHaRw8BAQdACT7nJ/XDcfDHZCDnXDovA78D5W4YvcEYZsyU
OF/CP8L+BwMCWVcI1KGofnH//3oBk13955sm07mVlpRTRT+Qwo+NlYPCtyHc8uH1
fxZumrId9u3G8TewMk69J/XCvc5GxuETkVcST0iPDJUp2gNPBlyll7QwdGVzdC1i
bG9nLXBvc3QgPHRlc3QtYmxvZy1wb3N0QGVyaWNlYXN0d29vZC5jb20+iJkEExYK
AEEWIQQNcyl9fLk5zG22MCA4lU3SOEsXaQUCZmT03wIbAwUJBaOagAULCQgHAgIi
AgYVCgkICwIEFgIDAQIeBwIXgAAKCRA4lU3SOEsXaXcKAP9X9NN/iWY2f7SYzZVE
HwcgocRPW/wjMh7jXHBshPTovgEAtbe5/nsLD7j6em4oSGYrQLXCwhyBF1GVhajO
AmJoSQSciwRmZPTfEgorBgEEAZdVAQUBAQdAGopjFc7yajAUwYlM2Q1irCI+eosB
8sSyp3Nq8/B6PGcDAQgH/gcDArMYKe1PPgzu/6x3lyVb7FUA7DwO5ErG4SrZ8PeR
601kLAcWLtwkwQZ0/dPBnMlxZDstOxZchstmYKXlV3AYjV9TuMt57h1thGeviYq1
XoGIfgQYFgoAJhYhBA1zKX18uTnMbbYwIDiVTdI4SxdpBQJmZPTfAhsMBQkFo5qA
AAoJEDiVTdI4SxdpwJMBAO46c3fvSFEyG6QFO3DCEmFNVts9j1Xd7AV6Hr9ZFYfb
APwNLcg1pLhV6DF989r6uop0tGPjDk4iTtZaRlvq/53PAA==
=9Djr
-----END PGP PRIVATE KEY BLOCK-----

Depending on how good you think your memory is, you may want to write your GPG passphrase to unlock secret key somewhere in this document after it's printed (not good to write the passphrase in the document itself stored on your computer/cloud which isn't protected). I'll leave a place for your here in case you want to do that:

GPG passphrase: _______________________________________________

Setting up a new computer (restore/recovery)

Dependencies on Linux (Manjaro)

pamac install paperkey
pamac install qrencode
pamac install zbar

pamac install pass
pamac install pass-otp

Dependencies on macOS

brew install paperkey
brew install qrencode
brew install zbar

brew install pass
brew install pass-otp

Note: If another device still exists, we can simply copy the SSH/GPG keys from that device. But it's also good practice to attempt recovery from paper to make sure our recovery steps are possible.

Restore the SSH key from QR code

Restore the SSH key:

$ zbarcam -1 --raw -Sbinary > ~/tmp_ssh_private_key

Or if you already have an image:

$ zbarimg -1 --raw -q -Sbinary secret-key.qr.png > ~/tmp_ssh_private_key

Tip: I was having trouble with zbar recognizing the QR code when it was taking too much of the camera view. At first, I thought it was the fold/crease/wrinkle in the paper but it scanned just fine after backing it up a bit.

Move the SSH key to your ~/.ssh directory:

$ mv ~/tmp_ssh_private_key ~/.ssh/id_ed25519_password_store_deploy_key
$ chmod 600 ~/.ssh/id_ed25519_password_store_deploy_key

Add the SSH key to the agent:

$ ssh-add ~/.ssh/id_ed25519_password_store_deploy_key

Restore the GPG secret key from QR code

Restore the public key first:

$ zbarcam -1 --raw -Sbinary > ~/tmp-public-key.gpg

Or if you already have an image:

$ zbarimg -1 --raw -q -Sbinary secret-key.qr.png > ~/tmp-public-key.gpg

Warning: You need to have the public key available when restoring the secret GPG paperkey backup!

Restore the GPG secret key from a camera:

$ zbarcam -1 --raw -Sbinary | paperkey --pubring ~/tmp-public-key.gpg | gpg --import

Or if you already have an image:

$ zbarimg -1 --raw -q -Sbinary secret-key.qr.png | paperkey --pubring ~/tmp-public-key.gpg | gpg --import

Note: You will be prompted for the GPG secret key password (below) in order to import

Change the keys trust to ultimate :

$ gpg --list-keys
$ gpg --edit-key 0D73297D7CB939CC6DB6302038954DD2384B1769
gpg> trust
...
  5 = I trust ultimately
gpg> save

Clone the password repo

Note: You will need the SSH key from above in order to clone the repo

$ git clone git@github.com:MadLittleMods/password-store.git ~/.password-store

Use pass like normal 🎉

Note: You will need the GPG secret key from above in order to decrypt passwords

Possible problems

Fix GPG permission errors

gpg: WARNING: unsafe permissions on homedir '/Users/eric/.gnupg'

gpg: public key decryption failed: Permission denied
gpg: decryption failed: Permission denied

Solution via Super User answer by Alex Stragies (https://superuser.com/questions/954509/what-are-the-correct-permissions-for-the-gnupg-enclosing-folder-gpg-warning/954536#954536):

Make sure, the folder+contents belong to you:
chown -R $(whoami) ~/.gnupg/

Correct access rights for .gnupg and subfolders:
find ~/.gnupg -type f -exec chmod 600 {} \;
find ~/.gnupg -type d -exec chmod 700 {} \;

"Wrong password" when trying to decrypt password in Android Password Store app

gpg uses a certain flavor of AEAD encryption to generate keys that aren't compatible with other OpenPGP implementations.

Solution: Disable AEAD preference on your key (already mentioned in the initial GPG setup steps above)

Dev notes:

Converting an old iMac into a standalone monitor

Mon, 05 Sep 2022 00:00:00 GMT

This is a fantastic way to upcycle an old iMac that would otherwise be e-waste. I was able to get a 24" 1920x1200 sleek-looking monitor out of this for about $50 in parts.

This blog post feels a bit long but it's just a lot of images and reference material. To skip around, here are some links to the sections:

Teardown
Pinouts and references
Project schematics
LCD controller boards
Building it back up
Final result

Most of the images are bigger than they appear in this blog post. Right click and open in a new tab to see the full size.

Figuring out which iMac you have

I'm working with an Apple iMac from 2008, the year before Apple started adding target display mode to iMac's which allows standalone monitor functionality out of the box. In order to figure out which iMac model I have, I used one of the many serial number lookup sites. Here are a couple:

Serial number lookups:

iMac | 2.8 GHz Core 2 Duo | 24 Inch | Early 2008: https://techable.com/apple/specs/-8-ghz-core-2-duo-24-inch-early-2008/
https://everymac.com/systems/apple/imac/specs/imac-core-2-duo-2.8-24-inch-aluminum-early-2008-penryn-specs.html

iMac details:

Serial No: QP8390/Z0KM
Apple Model No: A1225 (EMC 2211)
Model ID: iMac8,1
Apple Order No: MB325LL/A

LCD details:

Resolution: 1920x1200
LCD: LM240WU2 SL B3

You can also confirm the details by looking at the sticker on the back of the LCD panel if you want to pre-disassemble the iMac.

Teardown

For a general teardown guide, see this video by Hugh Jeffreys. We basically need to gut everything except the LCD panel and power supply.

Here are some pics of when I did it so I could keep track of screws:

.	.

Connectors on the LCD:

14-pin backlight connector	30-pin LVDS connector for the video signal

Connectors from the built-in iMac power supply (ADP-250AF B):

14-pin backlight	12-pin mobo (`MB`)

Pinouts and references

Here are a bunch of references I found while researching this project:

Power supply connector pinouts for the original iMac power supply (Delta ADP-250AF B) (source via MrSoul):

Note: MrSoul indicates that the BL_ON/P_DIM pinout "are reversed on my diagram."

"This is the pinout of the Molex 5569 plug from the genuine Apple ADP-250AFB power supply" (source via DocMaker). This matches the CN102/PS pinouts from above as far as I can tell but the orientation is different:

Thanks for your help, everyone. My dead old 2008 iMac A1225 EMC2211 will have a new life as a simple display.

This is the pinout of the Molex 5569 plug from the genuine Apple ADP-250AFB power supply. Use of the three 12V pin to power the M.NT68676.2A [LCD controller] board. Connect GND to GND, Use the 5.5x2.1 connector instead of 12V and GND of the CN5 plug of the M.NT68676.2A.

Connect BL_ON and P_DIM/ADJ respectively to pin 3 and 4 of the CN5.

-- DocMaker, https://www.ifixit.com/Answers/View/589418/Power+Supply+pin+(voltage,+start+other)#answer701848

Project schematics

A few people have graciously documented their schematics (wiring diagrams). These are very helpful references to understand how to wire everything up. It's best to just reference all three and pull out what you need.

MrSoul project schematic (source)	Bruce Mac (source via iFixit answer)	Comitéquartier Ouest (source)

Setting up a power button

I use a bistable relay to be able to reuse the original iMac push button.

If you replace it with a classic switch (on/off), you don't need the relay, just that it makes contact between GND and PS_ON.

+12V SB is the only track that always outputs 12v, even if the power supply is not activated (but I assume it is not able to offer much amperage), I use it to power the bistable relay.

-- MrSoul, https://www.ifixit.com/Answers/View/589418/Power+Supply+pin+(voltage,+start+other)#comment802578

Bistable relay example https://aliexpress.com/item/4000820341572.html (source)

Or could probably use a latch circuit.

LCD controller boards

There are a few different 3rd-party LCD controller boards to choose from. This is what drives the LCD panel independent of the iMac and is the main piece that allows this project to be possible.

`M.NT68676.2A` LCD controller board

A lot of people seem to use this one but I ordered the other one below.

Example for sale: https://www.ebay.com/itm/364454394706

CN5 (6pin: Inverter connector) pinout:

Other board with HDMI and DisplayPort

I opted for this controller anticipating that I would want to connect to things that used HDMI and DisplayPort in the future.

Example for sale: https://www.ebay.com/itm/234611483402

Panel mount connectors

You can get panel mount connectors to extend the outputs from the driver board to a nice panel mount to the iMac case. Here are a couple options depending on how you want to lay things out. I ended up using this first option and having the HDMI port come out the back of the iMac in the deepest spot in the middle through the old air vent (pictured below).

https://www.aliexpress.com/item/3256804506817061.html

HDMI: https://www.aliexpress.com/item/3256803048450080.html
DisplayPort: https://www.aliexpress.com/item/2255800165025739.html

Building it back up

Luckily, building on the prior art of people doing this before, this project wasn't too hard to figure out. There is a lot of space to mount things inside the iMac case and I was able to re-use a few standoffs and screws from the original iMac.

I used a bistable relay so the power supply turns on when the original iMac power button is pressed. Just spliced into the existing connectors after labeling them. Nice clean result.

I cut a hole for the panel mount HDMI connector in the grill where the fan used to go. Not very pretty but the panel mount connector covers it all up.

Also had to shave down the right-angle HDMI cable sheath so there would be enough clearance behind the panel when it's stacked up with the panel mount HDMI connecter.

The little extra PCB that has the LCD controller push buttons and status LED is just tied to the memory access door on the bottom edge of the iMac for somewhat convenient access after everything is put back together. I thought about doing something more elegant on the back of the monitor with some panel mount buttons but that blows up the cost of the project. I haven't had to change any settings since setting it up anyway.

Final result

Using the references above, I was able to get everything up and running and it's now being used as a second monitor for a MacBook Pro 🎉

It doesn't have the best brightness but perhaps that's just how these old monitors perform anyway. I don't have a good frame of reference for how the original iMac worked before I inherited the e-waste.

Fixing a "stuck" main rolling brush on a Eufy RoboVac 25c (Robot Vacuum)

Mon, 13 Sep 2021 00:00:00 GMT

This guide is just meant as a light reference for others who may be trying to fix their own robot vacuum and wanting to replace the main rolling brush motor. It isn't meant to be a comprehensive guide and will probably only make sense to someone who is already familiar with electronics and debugging.

Note: I'm working with a Eufy RoboVac 25C but the Eufy 11S (slim) seems to be pretty much the same vaccuum so this should apply to that as well.

Symptoms: "Rolling brush is stuck"

This just started out as my vacuum often stopping and giving 10 beep code. Since, I didn't have the app on my phone (no one wants that vendor spyware), I just thought the cliff sensors were triggering randomly on dark edges in the rug/carpet or transitions to hard surfaces. There weren't any obstructions in the main rolling brush or side brushes for me to notice something wrong either. And unfortunately, their beep sound error code feedback system doesn't distinguish between different reasons for why it stops. My first stab at solving this was covering up the cliff sensors with paper laminated in tape so the beam would just reflect back up to mimic a flat surface and never trigger. But the issue persisted!

After enduring with the problem for weeks, I checked the app which was saying "Rolling brush is stuck". Since there wasn't any obstruction which would normally cause that over-current protection "stuck" message to kick-in, the next logical step is to check the motor.

Before taking it completely apart, I took out the brush and started the robot and could see that the little white square peg wasn't spinning to drive the brush. This suggests that the motor was likely stalling, causing it to heat up until it drew too much current and saved itself by shutting down.

After taking it apart, the motor spun freely by hand but was really weak and I could easily stop it with my hands and observe the same stalling behavior (needed a little poke to get it going). To rule out the power supply as the problem, I tried hooking it up to a separate 9v battery and it had the same behavior.

Popping the gear assembly out, the bigger bearing inside the assembly also felt a little scratchy which probably doesn't help with the starting force required and potentially led to the downfall of the motor in the first place.

Using a flashlight to look inside the motor housing, nothing seemed burnt on the motor windings but the motor definitely seems to be the problem so I decided to order a replacement.

As a note while you are debugging, the Eufy 25c does not work when the side brushes, main rolling brush, or suction fan are disconnected. It will just roll for about 6.5 seconds before it says one of those items are stuck and need to be checked.

In the comments, there are claims that another Eufy will run with things disconnected but that doesn't seem to be the case with mine. You can also see it fault without the motor connected in this YouTube video.

Teardown

In order to get to the rolling brush motor and assembly, I had to take off the bumper, bottom cover, main PCB, and suction fan. These videos from Al's Auto and Appliance were very helpful to get an idea of what to expect:

Rolling brush assembly:

It's possible to buy the whole assembly on some listings but the price is pretty high and all we really need is the motor. The gearbox on the side has a couple bearings in it.

Bearing sizes for reference:

Bigger bearing: 6800RS - 19mm OD, 10mm ID, 5mm thick
Smaller bearing: 11mm OD

(photos from this "Eufy 11S Robot Vacuum Main Brush Motor & Assembly" ebay listing but it looks the exact same as mine)

Main rolling brush motor:

The motor is supplied with 9v (measured directly with a multimeter). I could observe that when it rose to 10v, it seemed to trigger the over-current brush stuck error. I would assume it actually looks at the current vs the voltage though.

Motor part number:

Standard Motor
rp390-st/20143/dv
GMCD070717

Which we can find on the Standard Motor website via http://www.standardmotor.net/product-category/home/home_6/?lang=en#top

I was able to find some listings on AliExpress that looked slightly different than mine but they have the same part number so I assumed it would be fine. These motors have a PCB on the back with a connector instead of just exposing some tabs. The listings say that these work for Eufy Robvac 11S Max 12 15C 15C Max 25C 30 30C Max 39C Max Coredy Robot Vacuum Cleaner R3500, R3500S. My best luck was just searching for Eufy 11S brush motor.

Replacing the motor

I ordered one of the main rolling brush motors above. The PCB on the back of the motor interfered with the plastic on the Eufy 25c but I just cut off the connector and part of the PCB to make it fit and soldered directly to the PCB.

I also replaced the bigger bearing in the brush assembly since it felt a little crunchy.

The new motor is much stronger than the defective one! Eufy is once again rolling around picking everything up 🎉

Update 2023-11-10: The new main rolling brush motor is still going strong but the side brush motors are failing now (not causing any "stuck" problems though). Will write a blog post if I ever get around to that but it's time for a new robot vacuum anyway so I'm holding off. Hopefully some more new dual brush options become available now that iRobot's Roomba patent has expired.

Keywords

Main rolling brush (roller brush)
Side brushes
Drop sensors (cliff sensors)
Bumper

Gitter now speaks Matrix

Mon, 07 Dec 2020 00:00:00 GMT

Connecting Gitter to the Matrix network (native feeling Matrix bridging). All public Gitter rooms are available via Matrix, and all Gitter users natively exist on Matrix which means you can chat back and forth transparently between users on the Gitter side and the Matrix side. Burning down the list of impedance mismatch between each platform so edits, replies, emoji, markdown, etc all look seamless. Going over how we iteratively tackled this kind of bridging to an existing legacy system without any concept of bridging before-hand. We live in exciting times: open standards-based interoperable communication is on the rise again, and we hope Gitter’s new life in Matrix is the beginning of a new age of cross-project developer collaboration, at last escaping the fragmentation we’ve suffered over the last few years.

Read the rest on the Matrix blog.

Gitter Logo LED Sign Build Log

Sun, 08 Jul 2018 00:00:00 GMT

I wanted more lighting around the apartment and was inspired by the lines that my blinds made on the wall on a sunny day which kinda match the Gitter logo (I work at Gitter/GitLab).

Boiled down, this project is some internet of things(IoT) connected LEDs.

Lines on the wall created by the blinds that inspired the sign,

Parts (bill of materials)

Electronics

Beaglebone Black (rev. B), https://www.adafruit.com/product/1996
USB battery bank, https://www.amazon.com/gp/product/B00L88VP3Y
- It's important to make sure that it can be charged and power another device at the same time because it will act as a universal power supply(UPS) for the Beaglebone Black so that it won't get corrupted if the power is cut.
400w, 1u power supply, https://www.amazon.com/gp/product/B014G2OUG2
- Any reliable slim power supply, <1.5" tall. I chose a 1u server form-factor power supply because it is about 1.5" tall.
- I went with a name-brand PC power supply because anything I have tried from eBay has eventually popped. Suggestions welcome!
- This power supply is quiet but not completely silent even without a load.
RGBW LED strip (4 meters), https://www.adafruit.com/product/2439
- My strips were not individually addressable
4x IRLB8721P power MOSFETs (NPN transistors), https://www.adafruit.com/product/355
- https://cdn-shop.adafruit.com/datasheets/irlb8721pbf.pdf
Mini fans for cooling
- I used 12v fans and ran them at 7v by connecting them to a molex connector 5v(red) and 12v(yellow) pins to reduce the noise (12 - 5 = 7, voltage is relative).
Female-to-female ethernet adapter
- Used so you can plug in an ethernet to the bottom of the sign and pass-through to the Beaglebone Black
Mountable female PC power connector (IEC320 C14)
- The male power cord side is called IEC320 C13
Momentary push button (power button for Beaglebone Black)
On/off switch (for power supply)
Protoboard
- Used for the power MOSFET circuit.
Crimp connectors
4 or 5-pin JST connectors
- Used to easily connect LED strips to the power MOSFET circuit
Various resistors
Various wire

Physical/other

Sheet of 1/2" MDF wood
Aluminum LED U-channel (>3.328m), https://www.amazon.com/gp/product/B00VUAYFPK
- Used to better diffuse the light
- Search for "LED channel"
Dust filter for air intake
- Search "dust filter" on eBay -> Buy it now -> "Price + Shipping: lowest first"
Velcro
- Used to attach the LED strips to the U-channel
- There is a slot for the LED strip to slide into the U-channel but I wanted to leave the plastic sheath on the LED strips
Spray Paint
- I used a Krylon white base and primer layer with Krylon Mamboo Pink on top (2-3 of each)
Hanging hooks, https://www.amazon.com/gp/product/B000CSN35E/
- I used two of the 30lb hooks

Sign construction

The sign is made of 1/2" MDF wood and measures 1 meter x 1 meter and is 5cm deep. It's a simple 45deg corner box with an angled hanging bracket spanning across the entire width. The hanging bracket was angled just right for our hanging hooks to sit as flat and flash as possible against the wall.

The Gitter logo bars are split into two because I couldn't find LED channel that was wide-enough at this big of a proportion.

I ended up cutting these holes bigger with a keyhole/jab saw so I could feed the whole LED connector through the hole instead of soldering the connector after feeding the wires through. This makes maintenance easier because I can remove a whole strip and work on it on my desk instead of directly on the sign.

I used an old ladder to hang the sign while working on it.

Painting

To get the signature Gitter ruby/pink, #ed1965, I used a Krylon white base/primer layer with Krylon Mamboo Pink on top. I used 2-4 spray cans of each color to get full coverage on the sign.

Electronics

The brains

I used a BeagleBone Black(BBB, small Linux system like a Raspberry Pi) to control everything which allows me control the sign over the network and run any necessary smart server directly on the device. If you need some help setting up your Beaglebone Black and getting started, see my previous article. Currently, I just SSH into the BBB and run a Node.js script to adjust the LEDs.

The BeagleBone Black plugs into the USB battery bank which acts like an uninterruptible power supply (UPS). I run an ethernet cable from the BBB to a female-to-female ethernet adapter at the bottom of the sign. This makes it easy to connect/disconnect a separate ethernet cable at the bottom of the sign that goes off to the router/switch when the sign is hung up against a wall.

I also added an illuminated power button to the bottom of the sign for the BBB specifically. This is useful when you want to turn off the sign but you already put your computer to sleep and can't SSH into the sign. Or if you accidentally ran the shutdown Linux command and need to turn it back on. See the PWR_BUT pin for the button and SYS_5V pin for the LED.

UPS Battery bank powering off

I used a USB battery bank as a universal power supply(UPS) for the Beaglebone Black so that it wouldn't get corrupted if the power was cut.

The battery bank powers itself off if you don't draw enough current and you need to push the power button the battery bank to turn it back on again. Since I wouldn't have access to the power button when it is inside the sign against the wall, I ended up soldering a switch alongside to the existing momentary push button. This acts like the power button is always being pushed and keeps things rolling.

To reduce the power consumption and get rid of the needless light, I desoldered the LED backlight that is otherwise always on.

Other people on the web have pulsed some resistors/LEDs every 5 seconds to get the current threshold met but that seemed a lot more complicated.

LEDs and wiring

The LEDs are driven by IRLB8721P power MOSFETs (NPN transistors) and powered by a slim 400w server(1u) power supply. I wanted to control each LED strip and color independently but the Beaglebone Black doesn't have enough PWM pins so I ended up tieing all of the strips together and only have control of the color overall.

I used the same wiring setup for the MOSFETs and LEDs as this Adafruit guide for the analog LED strips shows. I also referenced this Electronics Stack Exchange answer about including a gate resistor.

In order to get the LED strips to lay flat, feed through the back of the sign, and not stick out from the aluminum channels, I had to solder the connector wires on the backside of the LED strip.

The LED strips are velcroed to the aluminum channel because I didn't want to remove the weatherproof sheath and it makes it easier to connect/disconnect from the sign. The adhesive backing of the velcro I used doesn't hold very well so I have to touch-up the sign whenever I notice one of the strips floating closer to the LED channel diffuser (bright spots).

I used some tape to keep wire bundles tidy and tied down to the sign.

Cutting LED strips at a non-segment

Most LED strips can only be trimmed at specific segments/intervals. In my case, it was every 3 LEDs. Because I needed to cut the LED strip in between a segment to get a custom length, I had to manually complete the circuit so the LEDs would turn on again. I couldn't find a schematic available online, so I desoldered all the components from a segment and peeled off the white solder mask to see what how the copper traces were connected (peeling worked much better than scraping it off).

Because I unknowingly cut some strips at different ends, I also had to wire them up differently. Here are the two variations and as you can see the first one is easier to wire up because everything connects to positive,

Accidentally connecting MOSFET heatsinks

Because I spaced the MOSFETs too close to each other, some of the MOSFET heatsink tabs were connected. This meant that any time either transistor gate for the blue or green LED channel were triggered, both drained. In a future iteration, I would space them apart which would also make adding heatsinks easier (see "Heating" section below).

Image courtesy of Oscar Liang

This was easily fixed by bending them at different angles so they no longer touched,

Power supply (PSU)

I chose a slim 1u server form-factor power supply because it is about 1.5" tall. But it was still a little bit too tall so I used a chisel to carve out a little pocket in the MDF wood. I attached it via the 2 convenient screw holes on one side and some velcro on the bottom of the other side.

The power supply cable runs down to same female PC power connector (IEC320 C14) that is mounted at the bottom of the sign so I can easily connect a separate cable when the sign is hung up against a wall. I added a half of a paper cup around this wiring because I shocked myself while testing.

There is also a toggle switch to turn off the PSU. The switch is connected to pin 14(green) and 15(black ground) on the 24-pin power supply connector (Google "convert pc power supply into bench" for more info).

Heating and airflow

The MOSFETs get pretty hot so I added mini aluminum heatsinks to both sides of the metal tabs. The close spacing and different angles made this tricky.

Airflow wise, I channeled the power supply fan air directly outside and pointed some mini fans towards the MOSFETs which generate the most heat overall. I also added a fan to the hanging bracket so air could more quickly rise up and out of the sign.

Airflow diagram created with this project

For the in-take fans on the side of the sign, I used Gaffers tape to channel the air through a removable metal dust filter cut from a cheap PC fan filter.

I verified that things weren't getting too hot by using some helping hands to hold a thermocouple on the MOSFETs.

Code

Here is the basic Node.js script that runs on the Beaglebone Black and makes a nice warm glow.

var bone = require('bonescript');

var maxBrightness = 0.35;

bone.pinMode('P9_14', bone.OUTPUT);
bone.pinMode('P9_16', bone.OUTPUT);
bone.pinMode('P8_13', bone.OUTPUT);
bone.pinMode('P8_19', bone.OUTPUT);

function toggleBrightness(r, g, b, w) {
  bone.analogWrite('P9_14', r, 2000, printStatus);
  bone.analogWrite('P9_16', g, 2000, printStatus);
  bone.analogWrite('P8_13', b, 2000, printStatus);
  bone.analogWrite('P8_19', w, 2000, printStatus);
}

toggleBrightness(maxBrightness * 0.2, maxBrightness * 0.2, maxBrightness * 0.2, maxBrightness * 1);

function printStatus(x) {
  console.log(JSON.stringify(x));
}

For testing, rgb-cli.js, node rgb-cli.js --red=0.5 --green=0 --blue=1 --warm_white=1

var bone = require('bonescript');
var argv = require('yargs').argv;

var maxBrightness = 1;

bone.pinMode('P9_14', bone.OUTPUT);
bone.pinMode('P9_16', bone.OUTPUT);
bone.pinMode('P8_13', bone.OUTPUT);
bone.pinMode('P8_19', bone.OUTPUT);

function toggleBrightness(r, g, b, w) {
  bone.analogWrite('P9_14', r, 2000, printStatus);
  bone.analogWrite('P9_16', g, 2000, printStatus);
  bone.analogWrite('P8_13', b, 2000, printStatus);
  bone.analogWrite('P8_19', w, 2000, printStatus);
}

var red = parseFloat(argv.red || 0);
var green = parseFloat(argv.green || 0);
var blue = parseFloat(argv.blue || 0);
var warmWhite = parseFloat(argv.warm_white || 0);

console.log('RGBW', red, green, blue, warmWhite);

toggleBrightness(
  red * maxBrightness,
  green * maxBrightness,
  blue * maxBrightness,
  warmWhite * maxBrightness,
);

function printStatus(x) {
  console.log(JSON.stringify(x));
}

Here is a script to turn the lights off, off.js

var bone = require('bonescript');

var maxBrightness = 0;

bone.pinMode('P9_14', bone.OUTPUT);
bone.pinMode('P9_16', bone.OUTPUT);
bone.pinMode('P8_13', bone.OUTPUT);
bone.pinMode('P8_19', bone.OUTPUT);

function toggleBrightness(r, g, b, w) {
  bone.analogWrite('P9_14', r, 2000, printStatus);
  bone.analogWrite('P9_16', g, 2000, printStatus);
  bone.analogWrite('P8_13', b, 2000, printStatus);
  bone.analogWrite('P8_19', w, 2000, printStatus);
}

toggleBrightness(maxBrightness, maxBrightness, maxBrightness, maxBrightness);

function printStatus(x) {
  console.log(JSON.stringify(x));
}

Low frequency = High period bugs

When using a small frequency value
with analogWrite(pinString, dutyCycle, frequencyHz, callback),
the following error can be thrown, see https://gist.github.com/MadLittleMods/fbd0a55b3470bffa06a3759a6aa45c5e.

Future plans

In the future, it would be cool to hook this up to the Gitter API so that the color changes based on unreads(green)/mentions(orange).

Our journey in switching to native Unicode emoji

Wed, 30 May 2018 00:00:00 GMT

Unicode is hard. Here's a guide to getting native Unicode Emoji right.

The switch from image-based emoji to native Unicode wasn't a straightforward journey and included many intricacies to get production ready. Support varies widely on each OS, even between the browsers on the OS. We also wanted to support falling back to image-based emoji for environments that do not support everything yet, otherwise people would see black squares. As a simple example, most Linux environments do not have Unicode emoji support unless you manually install a font. I consider this blog post the survival manual I wish I had had when implementing native Unicode emoji myself.

Read the rest on the GitLab blog.

Play sound and auto-reply when Google Hangouts text message received - Tasker Guide

Sun, 14 Jan 2018 00:00:00 GMT

This guide will go over how to play a sound/alarm/ding and auto-reply when you receive a certain SMS/text message from the Google Hangouts app. The sound will also play regardless of your do not disturb, sleep hours, silence settings.

I needed this so my family could wake me up in case of emergency or if I ever overslept when we were supposed to get together. I have been using this setup since July 2016 it has been working great. I have used this on a Moto E (Android 5) and a Google Pixel (Android 7 and 8) with Google Voice.

The phone on the right has Tasker running and the left phone sends a standard text message.

Play video

Apps to install

To get started, purchase and download the following apps. The total cost is $5.50 presently.

Tasker $3.00
- This is the main app that lets you automate and control your device based on criteria and events. If this then that type of flow.
AutoNotification (plugin for Tasker)
- AutoNotification Unlock Key (full version) $2.50
- You need the full version to be able to intercept notifications
Android Wear - Smartwatch
- This adds a compatible "Reply" button to the notification that AutoNotification can interact with (thanks to this post by joaomgcd). Normally, there is a "Reply" button/action without this app but it doesn't work and I am not sure on the exact distinction between them.

Tasker Setup

Open up Tasker

In the top-right, click the 3-dot menu icon and go to Preferences to turn off Beginner Mode

Open up AutoNotification and the unlock key app to make sure everything is activated and ready

Go back to the main screen. Press and hold the home looking icon in the bottom-left corner and click the Add button to create a new project. Projects allow you to organize a set of profiles/tasks, etc into a single place (like a folder). Let's call it Ping Pong. Once created, you will see a Ping Pong tab at the bottom of the screen.

Create the profile (listen for new hangouts message)

While you are on the Profiles tab, click the plus + button to start creating a new profile -> Event -> Plugin -> AutoNotification -> Intercept

Click the configuration edit pencil icon

On the configuration screen, do the following

Check Has Reply Action
Under Apps, choose Hangouts
Scroll down to the Notification Text setting and enter (?mi).*\bping\b.*
- The regex here is PCRE(Java regex). Thanks to João(author or AutoNotification) for clarifying this in an email!
- Basic regex breakdown
  - (?mi) adds the multiline and case-insensitive flags (so people can send PING, ping, PiNg, etc)
  - .* on either side will ensure any text with ping will be matched (perhaps you don't want this)
  - \b on either side will only match if the ping is separated by a word boundary like spaces
Check the Case Insensitive checkbox (this doesn't interact with the Regex option but whatever)
Check the Regex checkbox

Click the checkmark at the top to confirm and your profile config for the intercept event should looking something like the following. Press the back button to be done and Tasker will prompt you to create a new task.

Create the task (play sounds and auto-reply)

The task is what will happen when you receive the "ping" SMS/text. In this example we will turn up the sound level, play some sounds to wake you up, and automatically reply back to the sender so they know it worked, etc.

Click new task and name it Ping me

On the task edit screen, press the plus + button to add a new action -> Plugin -> AutoNotification -> Reply

Click the configuration edit pencil icon

On the configuration screen, change the Reply Text to pong.
Click the checkmark at the top to confirm.

Back on the task edit screen, repeat the process to create more actions, press the plus + button

Audio -> Notification Volume. Change the Level to 7
Audio -> Media Volume. Change the Level to 15
Alert -> Notify Sound. Change the Title to Ping
Alert -> Beep. The defaults are fine (and annoying)
Task -> Wait. Change the Seconds to 2
Alert -> Morse. Change the text to SOS

That should be enough to wake you up (warning LOUD if you are testing). Now when someone texts you "ping", your phone will blare some sound and auto reply with "pong".

Testing

To test, you can try texting yourself from another device or from the Google Voice interface on your computer.

You may want to cover up your speaker with your finger or adjust the sound level of the actions while you are testing as it is very loud.

Resources

AutoNotification video tutorials and guides, https://joaoapps.com/autonotification/
Tasker docs, http://tasker.dinglisch.net/

Now with HTTPS everywhere

Thu, 21 Dec 2017 00:00:00 GMT

A little late to the party but https://ericeastwood.com/ now has HTTPS everywhere!

I used mod_md for Apache which makes it painlessly easy to add LetsEncrypt SSL certs and automatically manage expiration.

apache.conf

MDomain ericeastwood.com
MDCertificateAgreement https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf

Resources

https://css-tricks.com/moving-to-https-on-wordpress/
https://github.com/icing/mod_md (Thanks @icing for the quick segmentation fault fix)

Journey to running `gitter-webapp` on Windows with Docker

Wed, 22 Feb 2017 00:00:00 GMT

NB: This was my experience around September, 2016 and I would consider myself a bit of a Docker noob at the time. Things may have changed and improved since then to make life easier. This just documents the troubles I ran into and shouldn't be considered setup guide worthy.

TLDR;

Use Docker Toolbox with the VirtualBox driver (Docker for Windows isn't ready)
Watch out for CRLF line endings that can get introduced from things like checking stuff out with git.

gitter-webapp is the project/repo that is home to the backend and frontend code for Gitter webapp. The team is pretty much exclusively macOS based but I prefer Windows.

For a while, I used ShareMouse so that I could use my macOS machine as just another external monitor to my Windows machine.

We use Docker for local dev and CI testing to run services like Mongo, redis, and elasticsearch.

Skip to the working recipe

Initial Attempt

My very initial attempt(August, 2015) assisted by @malditogeek was with Vagrant which failed because of the following issues better described in other articles.

This article describes a lot of the troubles, http://blog.prolificinteractive.com/2015/01/21/getting-vagrant-nodejs-windows-play-well-together/
- Windows 256 character limit on file paths for the shared volume
Some native Node modules that simply wouldn't compile on Windows(heapdump, protobuf, cld, buffertools).

Just recently(September 2016), I got an itch to try to get something going again.

The Docker for Windows Hyper-V trap

Docker for Windows uses Hyper-V is a native hypervisor on Windows for virtualizing things and is supposed to be a lot faster than VirtualBox setup. I couldn't get the app working with Docker for Windows but here is some references to the trouble I ran into.

Hyper-V driven machines aren't ready in my opinion.

No Inotify
- See https://docs.docker.com/docker-for-windows/faqs/#/why-doesn-t-nodemon-pick-up-file-changes-in-a-container-mounted-on-a-shared-drive
- See https://docs.docker.com/docker-for-windows/troubleshoot/#/inotify-on-shared-drives-does-not-work
- As a note, this is also a problem with new Bash on Windows 10 (WSL), https://github.com/Microsoft/BashOnWindows/issues/216
No support for mounting volumes from my understanding and usage
- The "Shared Drives" feature also wasn't working, https://github.com/docker/for-win/issues/78
  - For more info on the inner workings of this feature, http://docker-saigon.github.io/post/Docker-Beta/#mounting-volumes:ebf9573d6838c40027746e9d7482622a
- https://forums.docker.com/t/volume-mounts-in-windows-does-not-work/10693
- https://github.com/docker/docker/issues/22981#issuecomment-221637488
- https://github.com/docker/for-win/issues/77
- https://github.com/docker/docker/issues/21535
- https://github.com/docker/docker/issues/23005
- https://github.com/docker/docker/issues/21909#issuecomment-221698245

If you are running into something not laid out here, perhaps you can find something useful here, See https://github.com/docker/kitematic/wiki/Common-Issues-and-Fixes

It is only available on Windows Pro and needs to be enabled(restart required): Control Panel -> Programs -> Turn Windows features on or off

Most likely, the following command will fail to create the machine because it is "Waiting for ssh to be available…", move on to the next step to get around it.

docker-machine create --driver hyperv default

Create a virtual switch via the Hyper-V Manager -> Action -> Virtual Switch Manager.... I called mine external-switch:

docker-machine create --driver hyperv --hyperv-virtual-switch external-switch default

Tip courtesy of https://forums.docker.com/t/docker-machine-stuck-on-waiting-for-ssh-to-be-available/18702/3 -> https://forums.docker.com/t/using-docker-for-windows-docker-machine-create/8032/2

The lack of volume mounting support means that the entrypoint's defined in docker-compose.yml aren't found

docker-compose.yml

mongosetup:
  image: mongo:3.2
  volumes:
    - ${WORKSPACE}:/src
  working_dir: /src
  entrypoint: ['/src/mongo-setup.sh']

But the entrypoint can't be found. Perhaps this is just a line-ending issue but I wasn't aware of this problem at the time and was fed up and didn't want to go back after I got things working with Docker Toolbox.

$ docker-compose up -d --no-recreate
ERROR: for mongosetup  Cannot start service mongosetup: oci runtime error: exec: "/src/mongo-setup.sh": stat /src/mongo-setup.sh: no such file or directory

$ docker inspect mongosetup_1
...
"Mounts": [
    {
        "Source": "/c/Users/MLM/Documents/GitHub/something",
        "Destination": "/src",
        "Mode": "rw",
        "RW": true,
        "Propagation": "rprivate"
    },
...

Kitematic

I wish Kitematic could just skip the machine creation process and you could just choose an existing machine to inspect. I already have a machine running called default that I want it to pick up. Perhaps this possible with the barely documented .kitematicfg but I don't see an option that quite fits.

It fails first because it looks for Docker for Windows machines

This is fine, just a pain point and you need to click "Use Virtualbox". But unfortunately it can also fails to create the default machine:

You might have slightly better luck with the latest Kitematic separate from the Docker Toolbox:

The working recipe

Prerequisites

Install Docker Toolbox
Disable Hyper-V if you previously enabled it: Control Panel -> Programs -> Turn Windows features on or off

Start the Docker machine backed by VirtualBox

docker-machine create --driver virtualbox default

Setup environment variables for the particular machine. You will need to run the last line of the output from that command to actually evaluate and apply the variables which looks like: @FOR /f "tokens=*" %i IN ('docker-machine env default') DO @%i

docker-machine env default

Your docker-compose.yml might also have some host environment variables you need to define which would look like ${FOO} in docker-compose.yml. In the case of gitter-webapp, I need to supply DOCKER_HOST_IP and WORKSPACE which can be populated with the following commands. That weird for command snippet is just Batch recipe used to put output of the pwd command in the WORKSPACE env variable on Windows.

for /f "delims=" %a in ('docker-machine ip default') do @set DOCKER_HOST_IP=%a
for /f "delims=" %a in ('pwd') do @set WORKSPACE=%a

If you are not sure whether you need to set any environment variables, the docker-compose up command you run later, in order to start the containers will complain like this:

WARNING: The DOCKER_HOST_IP variable is not set. Defaulting to a blank string.
WARNING: The WORKSPACE variable is not set. Defaulting to a blank string.

Line ending `CRLF` trap

A trap I fell into was line endings(CRLF, LF) causing some containers to not work correctly.

$ docker logs gitterwebapp_mongosetup_1
standard_init_linux.go:175: exec user process caused "no such file or directory"

Which would make it seem like docker couldn't find the log file but actually that is the contents of the log file and is just a esoteric error for CRLF line endings causing things to go sour.

Even if your project was checked into the repo with LF, Git could be converting them back to Windows style line endings on checkout. You can use the following commands to kick Git into shape.

git config --global core.autocrlf input
git config --global core.eol lf
// Check the value in the current context
git config core.autocrlf

If you want to make robust docker setup, consider running things through a utility like dos2unix.

Now you can re-checkout the project or run through the steps here to refresh the project with the correct LF line-endings: https://help.github.com/articles/dealing-with-line-endings/#refreshing-a-repository-after-changing-line-endings

As a small note if you are using the Atom editor, you can open a project file and check the line-endings in the bottom-right corner:

Start the containers

docker-compose up -d --no-recreate

If something goes wrong, you can reset and delete the containers with the following commands

docker-compose stop
docker-compose rm -f

Get the app running

With gitter-webapp, the script hooks defined package.json like preinstall use some bash which won't run on Windows batch shells.

In order to install the app properly, we need to use the undocumented --ignore-scripts flag which will skip any script hooks.

npm install --ignore-scripts

Because we used --ignore-scripts to skip things, we need to manually fix up some native module builds. With gitter-webapp, I needed to run the following. May be a bit tricky with npm 3.

for /f "delims=" %a in ('cd') do (rmdir %a\node_modules\cld /S /Q) && npm i cld
for /f "delims=" %a in ('cd') do (rmdir %a\node_modules\slug /S /Q) && npm i slug

// Start the app
npm run dev

Done, Rejoice, You can now develop on Windows :D

Command Quick Reference

default is just a machine name and can be whatever you want.

Command	description
`docker-machine ls`	List all the Docker machines and check state
`docker-machine create --driver virtualbox default`	Create and start the `default` machine
`docker-machine rm -f default`	Remove the `default` machine
`docker-machine start default`	Start an existing `default` machine
`docker-machine env default`	Setup the environment variables pertaining to the machine (copy paste the last line in the output for it to actually apply)
`docker ps --all`	List all containers
`docker logs container`	Show logs for container. Useful for finding out why something errored out, etc
`docker-compose up -d --no-recreate`	Create/Start all containers defined in `docker-compose.yml`
`docker-compose stop && docker-compose rm -f`	Stop all the containers and remove them. Useful for resetting after a `docker-compose up ...`

Curves and Arcs: Quadratic, Cubic, Elliptical (SVG implementations)

Mon, 20 Apr 2015 00:00:00 GMT

I've been playing around with Bezier curves and elliptical arcs for my on-going CNC plotter project. Instead of just using g-code commands which are standard on most CNC machines, I decided to support SVG path commands. This means supporting the linear moveTo(M, m) and lineTo(L, l) as well as curve(C, c, S, s -- Q, q, T, t)/arc(A, a) commands.

Here are a few articles to get you up to speed if you're unfamiliar with the SVG path commands:

SVG Basics—Creating Paths With Line Commands by Steven Bradley
SVG Basics—Creating Paths With Curve Commands by Steven Bradley

tl;dr, I just need a library

The JavaScript and C++ implementations are available on GitHub: SVG Curve Library.

I implemented the SVG path commands in JavaScript and ported it over to C++11 in order to run on the Teensy 3.0/3.1 (Arduino-like) microcontroller.

Bezier Curves

Bezier curves are a made up of a set of control points, and a start/end point which are sometimes categorized along with the control points. The controls points influence where the curve should go. A Bezier curve can have n number of control points but we will only go over the quadratic(1) and cubic(2) varieties. The math for Bezier curves is a simple parametric equation.

A quadratic Bezier curve, has only a single control (1)point/handle.
A cubic Bezier curve, has two control (2)points/handles.

Quadratic Bezier Math/Code:

src/js/svg-curve-lib.js (snippet)

Source on GitHub

		pointOnQuadraticBezierCurve: function(p0, p1, p2, t) {
			function calculateQuadraticBezierParameter(x0, x1, x2, t) {
				var result = Math.pow(1-t, 2)*x0 + 2*t*(1-t)*x1 + Math.pow(t, 2)*x2;
				
				return result;
			}
			
			return {
				x: calculateQuadraticBezierParameter(p0.x, p1.x, p2.x, t),
				y: calculateQuadraticBezierParameter(p0.y, p1.y, p2.y, t)
			};
		},

Cubic Bezier Math/Code

src/js/svg-curve-lib.js (snippet)

Source on GitHub

		pointOnCubicBezierCurve: function(p0, p1, p2, p3, t) {
			function calculateCubicBezierParameter(x0, x1, x2, x3, t) {
				var result = Math.pow(1-t, 3)*x0 + 3*t*Math.pow(1-t, 2)*x1 + 3*(1-t)*Math.pow(t, 2)*x2 + Math.pow(t, 3)*x3;
				
				return result;
			}
			
			return {
				x: calculateCubicBezierParameter(p0.x, p1.x, p2.x, p3.x, t),
				y: calculateCubicBezierParameter(p0.y, p1.y, p2.y, p3.y, t)
			};
		},

Elliptical Arcs

These were harder to implement for me, solely because of the amount of other information out there is very slim. I found the Implementation Notes page from the SVGWG to be most helpful.

Elliptical arcs are simply sub-sections(arcs) of an ellipse(oval).

Elliptical Arc Math/Code

Elliptical arcs a bit more complicated to work out because the point on elliptical arc equation is not in a nice endpoint parameterization format. We will need to convert this center parameterized equation to a endpoint parameterization. If you want to do this conversion on your own, there are some great instructions from SVGWG.

Beware: Matrix math, make sure to expand this expression correctly

cx, cy are the coordinates of the center of the ellipse
rx, ry are the radii of the ellipse (also known as its semi-major and semi-minor axes).
phi (φ) is the rotation of the ellipse from the x-axis
theta (θ) angle. The "actual" variable in the equation that determines where the point on the arc is.

src/js/svg-curve-lib.js (snippet)

Source on GitHub

		// http://www.w3.org/TR/SVG/implnote.html#ArcSyntax
		// To double check our implementation against another source, you can use: 
		//      https://java.net/projects/svgsalamander/sources/svn/content/trunk/svg-core/src/main/java/com/kitfox/svg/pathcmd/Arc.java
		//      http://fridrich.blogspot.com/2011/06/bounding-box-of-svg-elliptical-arc.html
		// t: [0, 1]
		pointOnEllipticalArc: function(p0, rx, ry, xAxisRotation, largeArcFlag, sweepFlag, p1, t) {

			// In accordance to: http://www.w3.org/TR/SVG/implnote.html#ArcOutOfRangeParameters
			rx = Math.abs(rx);
			ry = Math.abs(ry);
			xAxisRotation = mod(xAxisRotation, 360);
			var xAxisRotationRadians = toRadians(xAxisRotation);
			// If the endpoints are identical, then this is equivalent to omitting the elliptical arc segment entirely.
			if(p0.x === p1.x && p0.y === p1.y) {
				return p0;
			}
			
			// If rx = 0 or ry = 0 then this arc is treated as a straight line segment joining the endpoints.    
			if(rx === 0 || ry === 0) {
				return this.pointOnLine(p0, p1, t);
			}

			
			// Following "Conversion from endpoint to center parameterization"
			// http://www.w3.org/TR/SVG/implnote.html#ArcConversionEndpointToCenter
			
			// Step #1: Compute transformedPoint
			var dx = (p0.x-p1.x)/2;
			var dy = (p0.y-p1.y)/2;
			var transformedPoint = {
				x: Math.cos(xAxisRotationRadians)*dx + Math.sin(xAxisRotationRadians)*dy,
				y: -Math.sin(xAxisRotationRadians)*dx + Math.cos(xAxisRotationRadians)*dy
			};
			// Ensure radii are large enough
			var radiiCheck = Math.pow(transformedPoint.x, 2)/Math.pow(rx, 2) + Math.pow(transformedPoint.y, 2)/Math.pow(ry, 2);
			if(radiiCheck > 1) {
				rx = Math.sqrt(radiiCheck)*rx;
				ry = Math.sqrt(radiiCheck)*ry;
			}

			// Step #2: Compute transformedCenter
			var cSquareNumerator = Math.pow(rx, 2)*Math.pow(ry, 2) - Math.pow(rx, 2)*Math.pow(transformedPoint.y, 2) - Math.pow(ry, 2)*Math.pow(transformedPoint.x, 2);
			var cSquareRootDenom = Math.pow(rx, 2)*Math.pow(transformedPoint.y, 2) + Math.pow(ry, 2)*Math.pow(transformedPoint.x, 2);
			var cRadicand = cSquareNumerator/cSquareRootDenom;
			// Make sure this never drops below zero because of precision
			cRadicand = cRadicand < 0 ? 0 : cRadicand;
			var cCoef = (largeArcFlag !== sweepFlag ? 1 : -1) * Math.sqrt(cRadicand);
			var transformedCenter = {
				x: cCoef*((rx*transformedPoint.y)/ry),
				y: cCoef*(-(ry*transformedPoint.x)/rx)
			};

			// Step #3: Compute center
			var center = {
				x: Math.cos(xAxisRotationRadians)*transformedCenter.x - Math.sin(xAxisRotationRadians)*transformedCenter.y + ((p0.x+p1.x)/2),
				y: Math.sin(xAxisRotationRadians)*transformedCenter.x + Math.cos(xAxisRotationRadians)*transformedCenter.y + ((p0.y+p1.y)/2)
			};

			
			// Step #4: Compute start/sweep angles
			// Start angle of the elliptical arc prior to the stretch and rotate operations.
			// Difference between the start and end angles
			var startVector = {
				x: (transformedPoint.x-transformedCenter.x)/rx,
				y: (transformedPoint.y-transformedCenter.y)/ry
			};
			var startAngle = angleBetween({
				x: 1,
				y: 0
			}, startVector);
			
			var endVector = {
				x: (-transformedPoint.x-transformedCenter.x)/rx,
				y: (-transformedPoint.y-transformedCenter.y)/ry
			};
			var sweepAngle = angleBetween(startVector, endVector);
			
			if(!sweepFlag && sweepAngle > 0) {
				sweepAngle -= 2*Math.PI;
			}
			else if(sweepFlag && sweepAngle < 0) {
				sweepAngle += 2*Math.PI;
			}
			// We use % instead of `mod(..)` because we want it to be -360deg to 360deg(but actually in radians)
			sweepAngle %= 2*Math.PI;
			
			// From http://www.w3.org/TR/SVG/implnote.html#ArcParameterizationAlternatives
			var angle = startAngle+(sweepAngle*t);
			var ellipseComponentX = rx*Math.cos(angle);
			var ellipseComponentY = ry*Math.sin(angle);
			
			var point = {
				x: Math.cos(xAxisRotationRadians)*ellipseComponentX - Math.sin(xAxisRotationRadians)*ellipseComponentY + center.x,
				y: Math.sin(xAxisRotationRadians)*ellipseComponentX + Math.cos(xAxisRotationRadians)*ellipseComponentY + center.y
			};

			// Attach some extra info to use
			point.ellipticalArcStartAngle = startAngle;
			point.ellipticalArcEndAngle = startAngle+sweepAngle;
			point.ellipticalArcAngle = angle;

			point.ellipticalArcCenter = center;
			point.resultantRx = rx;
			point.resultantRy = ry;

			

			return point;
		},

Arc/Curve Length (Distance)

Calculate the arc length/total distance of a curve/arc. It also returns some other useful/debug information that we use in generateLinearCurve(...)(see below).

Usage:

// Resolution is the number of segments we use to approximate
var resolution = 25;

var quadBezierArcLengthResult = approximateArcLengthOfCurve(resolution, function (t) {
  return pointOnQuadraticBezierCurve(startPoint, controlPoint1, endPoint, t);
});

var ellipticalArcArcLengthResult = approximateArcLengthOfCurve(resolution, function (t) {
  return pointOnEllipticalArc(
    startPoint,
    rx,
    ry,
    xAxisRotation,
    largeArcFlag,
    sweepFlag,
    endPoint,
    t,
  );
});

console.log('Quad. Bezier arc length:', quadBezierArcLengthResult.arcLength);
console.log('Elliptical arc, arc length:', ellipticalArcArcLengthResult.arcLength);

src/js/svg-curve-lib.js (snippet)

Source on GitHub

		approximateArcLengthOfCurve: function(resolution, pointOnCurveFunc) {
			// Resolution is the number of segments we use
			resolution = resolution ? resolution : 500;
			
			var resultantArcLength = 0;
			var arcLengthMap = [];
			var approximationLines = [];

			var prevPoint = pointOnCurveFunc(0);
			var nextPoint;
			for(var i = 0; i < resolution; i++) {
				var t = clamp(i*(1/resolution), 0, 1);
				nextPoint = pointOnCurveFunc(t);
				resultantArcLength += distance(prevPoint, nextPoint);
				approximationLines.push([prevPoint, nextPoint]);

				arcLengthMap.push({
					t: t,
					arcLength: resultantArcLength
				});
				
				prevPoint = nextPoint;
			}
			// Last stretch to the endpoint
			nextPoint = pointOnCurveFunc(1);
			approximationLines.push([prevPoint, nextPoint]);
			resultantArcLength += distance(prevPoint, nextPoint);
			arcLengthMap.push({
				t: 1,
				arcLength: resultantArcLength
			});

			return {
				arcLength: resultantArcLength,
				arcLengthMap: arcLengthMap,
				approximationLines: approximationLines
			};
		},

Linear Curve/Arc

A challenge I faced, was dealing with t not being linear or having an even-distribution. This means that if you just sample t at a constant interval, you will have more samples bunched up in the curvier parts.

This at first seems good because you need the most detail in corners in order to accurately represent the curve, but it also leaves you with an unknown precision/error. So I decided to implement a linear curve function in order to get a known degree of accuracy. I am not sure if this is actually better or worse for accuracy/precision. The linear curve function is also useful in games or animations where you want the object to travel along a curve at a constant rate. This will work for any pointOnThing function.

generateLinearCurve(...) will return a new function where you can pass in a t [0, 1] and get a point on the curve back. Since t will be linear with this, 0.5 is halfway along the curve, distance wise.

Usage:

// Resolution is the number of segments we use to approximate
var resolution = 25;

var linearQuadBezier = generateLinearCurve(resolution, function (t) {
  return pointOnQuadraticBezierCurve(startPoint, controlPoint1, endPoint, t);
});

var linearEllipticalArc = generateLinearCurve(resolution, function (t) {
  return pointOnEllipticalArc(
    startPoint,
    rx,
    ry,
    xAxisRotation,
    largeArcFlag,
    sweepFlag,
    endPoint,
    t,
  );
});

// Pass in t [0, 1]
// Returns a point along the curve
var pt1 = linearQuadBezier(0.5);
var pt2 = linearEllipticalArc(0.5);

src/js/svg-curve-lib.js (snippet)

Source on GitHub

		// Returns a function that will linearly interpolate along the curve u: [0, 1]
		// Inspired by: http://gamedev.stackexchange.com/a/5427/16587
		generateLinearCurve: function(resolution, pointOnCurveFunc) {
			// Resolution is the number of segments we use to approximate
			resolution = resolution ? resolution : 500;

			var result = this.approximateArcLengthOfCurve(resolution, pointOnCurveFunc);
			var arcLength = result.arcLength;
			var arcLengthMap = result.arcLengthMap;

			// Transforms `u`[0-1] into a corresponding point along the curve. `u * arcLength`
			var transformer = function(u) {
				u = clamp(u, 0, 1);
				var targetDistanceFromStartingPoint = u * arcLength;

				var resultantT = 0;

				var prevArcLength = 0;
				var prevT = 0;
				arcLengthMap.every(function(entry) {
					var t = entry.t;
					var arcLength = entry.arcLength;

					// Once we go a past our target
					// Lets interpolate from a previous to current
					if(arcLength >= targetDistanceFromStartingPoint) {
						var endDiff = arcLength - targetDistanceFromStartingPoint;
						var startDiff = targetDistanceFromStartingPoint - prevArcLength;
						var linearFactor = (startDiff/(endDiff+startDiff)) || 0;

						resultantT = prevT + (t-prevT)*linearFactor;

						// Break
						return false;
					}


					prevArcLength = arcLength;
					prevT = t;

					return true;
				});

				return pointOnCurveFunc(resultantT);
			};

			transformer.arcLength = arcLength;

			return transformer;
		}
	};

Using libuv with Windows and Visual Studio: Getting Started

Wed, 01 Apr 2015 00:00:00 GMT

libuv is a multi-platform support library with a focus on asynchronous I/O. It was primarily developed for use by Node.js, but it's also used by Luvit, Julia, pyuv, and others.

tldr: cross-platform console/terminal niceties

I was interested in this library because it has support for ANSI escape code controlled TTY which Windows doesn't really support on its own. This means cross-platform colored text. libuv is what Node.js uses for all of the CMD/console/terminal/shell niceness across platforms.

I found this library confusing and hard to get started with so I decided to consolidate various resources down to this simple tutorial.

Guide to Colored Text with `libuv`

This guide will go over getting started and setting up a project to work with libuv. By the end, you will be outputting colored text in a console window.

Download `libuv`

Download or clone libuv from the GitHub Repo. I used the "Download zip" button.

You will need Python 2.7 and Visual Studio(I am using Visual Studio Community 2013) installed.

Build `libuv`

Navigate to where you extracted libuv. Launch CMD prompt or PowerShell and run:

vcbuild.bat

This call will generate Debug/lib/libuv.lib.

[It also] will checkout the GYP code into build/gyp and generate uv.sln as well as related project files.

For more information, see the build instructions in the repo README.

Create an Empty VS Project

Make a new Visual Studio Console application. Under Installed -> Visual C++ -> Win32 -> Select Win32 Console Application (Visual C++)

Press "Next" on the following screen, then check the "Empty Project" checkbox in the Win32 Application Wizard.

Copy over the libuv include folder and Debug/lib/libuv.lib that were generated from the build into your VS project directory.

Go to: Project Properties -> C/C++ -> Additional Include Directories. Then add an entry for the include folder we just copied over.

Right click on the project and go to Add -> Existing Item. Select the lib/libuv.lib that was also copied over in a previous step.

At this point, if you try to build, you will probably get a bunch "already defined" errors.

Go to: Project Properties -> Linker -> Input -> Ignore Specific Default Libraries and add LIBCMTD.lib. Thanks to AnT's answer on Stack Overflow for that tidbit.

Create a new file for the main part of the program

Make a new project source file: Right click on the "Source Files" folder in the Solutions Explorer and click Add -> New Item. Name it main.cpp.

Once you have the code below pasted in and saved, build the project. You can use Ctrl+F5 to make the console stay open.

`main.cpp`

The code is based on the simple example from the TTY section in the Utilities chapter of An Introduction to libuv.

It should spit out some cyan text on a blue background:

#pragma comment (lib, "libuv.lib")
#pragma comment (lib, "ws2_32.lib")
#pragma comment(lib, "psapi.lib")
#pragma comment(lib, "Iphlpapi.lib")

#include <iostream>
//#include <stdio.h>
#include <string.h>
//#include <unistd.h>
//#include <io.h>
#include <uv.h>

uv_loop_t *loop;
uv_tty_t tty;
int main() {
	loop = uv_default_loop();

	uv_tty_init(loop, &tty, 1, 0);
	uv_tty_set_mode(&tty, UV_TTY_MODE_NORMAL);

	// Set as cyan text on blue background
	if(uv_guess_handle(1) == UV_TTY) {
		uv_write_t req;
		uv_buf_t buf;
		//buf.base = "\033[41;37m";
		buf.base = "\033[44;36m";
		buf.len = strlen(buf.base);
		uv_write(&req, (uv_stream_t*)&tty, &buf, 1, NULL);
	}

	// Spit out the text
	uv_write_t req;
	uv_buf_t buf;
	buf.base = "Hello TTY\n";
	buf.len = strlen(buf.base);
	uv_write(&req, (uv_stream_t*)&tty, &buf, 1, NULL);

	// Reset any ANSI styles from above
	if (uv_guess_handle(1) == UV_TTY) {
		uv_write_t req;
		uv_buf_t buf;
		buf.base = "\033[0m";
		buf.len = strlen(buf.base);
		uv_write(&req, (uv_stream_t*)&tty, &buf, 1, NULL);
	}

	uv_tty_reset_mode();
	return uv_run(loop, UV_RUN_DEFAULT);

	return 0;
}

Going further

Instead of having to write this 5-line monstrosity(below) every time you want to output something, I created a nice helper function, ccout which is "color cout".

uv_write_t req;
uv_buf_t buf;
buf.base = "Hello TTY\n";
buf.len = strlen(buf.base);
uv_write(&req, (uv_stream_t*)&tty, &buf, 1, NULL);

Usage:

ccout("asdf\n", &uv_write_t(), (uv_stream_t*)&tty);
// Some ANSI colors
ccout("\033[41;37mHello TTY\n\033[0m", &uv_write_t(), (uv_stream_t*)&tty);

`cccout` Code

#include <string.h>
#include <regex>

std::string stripAnsiEscapeCodes(std::string input) {
	// from: https://github.com/sindresorhus/ansi-regex/blob/47fb974630af70998157b30fad6eb5e5bd7c7cd6/index.js
	std::regex reg("(?:(?:\033\\[)|\233)(?:(?:[0-9]{1,3})?(?:(?:;[0-9]{0,3})*)?[A-M|f-m])|\033[A-M]");
	std::string output = std::regex_replace(input, reg, "");

	return output;
}

void ccout(std::string message, uv_write_t* req, uv_stream_t* handle) {
	// If the terminal doesn't support ANSI, strip it for clarity
	if (uv_guess_handle(1) != UV_TTY) {
		message = stripAnsiEscapeCodes(message);
	}

	uv_buf_t buf;
	buf.base = (char*)message.c_str();
	buf.len = strlen(buf.base);
	uv_write(req, handle, &buf, 1, NULL);
};

ANSI Escape codes

The ANSI escape code Wikipedia page covers all of the nitty gritty details. Below are some of the basics you will probably want to use.

Reset/Default

\033[0m: Reset all attributes. It is good practice to put this at the end so that you don't step on anyone's toes.

Here is a breakdown of this escape sequence:

\033[: Control Sequence Introducer
- \033 is the ESC character.
  - decimal: 27
  - hexadecimal: \x1B
  - octal: \033
- [: left bracket
0: SGR parameter code for Reset/Normal or "all attributes off"
m: Select Graphic Rendition(SGR). Sets SGR parameters, including text color.

Color

30-37: Text/foreground color
- 90-97(not standard) for high intensity
40–47: Background color
- 100-107(not standard) for high intensity

High intensity can also be achieved in a more standard way by using a normal color alongside the bold(1) code. ex \033[31;1mHeya. RedBold\033[0m

Color (SGR)	Text/Foreground Code	Background Code
Black	30	40
Red	31	41
Green	32	42
Yellow	33	43
Blue	34	44
Magenta	35	45
Cyan	36	46
White	37	47

Here is the code I used to generate the image above:

std::string colorStringNormal = "";
std::string colorStringCodeIndexNormal = "";
std::string colorStringBold = "";
std::string colorStringCodeIndexBold = "";
std::string colorStringHighIntensity = "";
std::string colorStringCodeIndexHighIntensity = "";

for (int i = 0; i < 8; i++) {
	colorStringNormal += "\033[" + std::to_string(30 + i) + "mHeya\t\033[0m";
	colorStringCodeIndexNormal += std::to_string(30 + i) + "\t";

	colorStringBold += "\033[" + std::to_string(30 + i) + ";1mHeya\t\033[0m";
	colorStringCodeIndexBold += std::to_string(30 + i) + ";1\t";

	colorStringHighIntensity += "\033[" + std::to_string(90 + i) + "mHeya\t\033[0m";
	colorStringCodeIndexHighIntensity += std::to_string(90 + i) + "\t";
}

ccout(colorStringNormal + "\n", &uv_write_t(), (uv_stream_t*)&tty);
ccout(colorStringCodeIndexNormal + "\n", &uv_write_t(), (uv_stream_t*)&tty);
ccout(colorStringBold + "\n", &uv_write_t(), (uv_stream_t*)&tty);
ccout(colorStringCodeIndexBold + "\n", &uv_write_t(), (uv_stream_t*)&tty);
ccout(colorStringHighIntensity + "\n", &uv_write_t(), (uv_stream_t*)&tty);
ccout(colorStringCodeIndexHighIntensity + "\n", &uv_write_t(), (uv_stream_t*)&tty);

Learn more about libuv

libuv API docs
An Introduction to libuv (uvbook)
learnuv by Thorsten Lorenz. I have not used this one, but it seems comprehensive.

Traces: Game Jam Post Mortem

Mon, 10 Nov 2014 00:00:00 GMT

I competed in the 2014 GD.SE Anniversary Game Jam and created Traces, a top-down pseudo-3D shooter.

In Traces, the goal is to power each building with a laser beam in sequential order all while killing or avoiding the enemy blobs. Activate the first building in sight and find the next building at the end of laser beam. Eat meat to restore your health.

Play Now (online)

I decided to make a web canvas game this time because I had a huge barrier to entry problem in my last game jam game, Super Bounce (you had to download the executable and then register the UI system I was using).

For this game, I used CraftyJS, a JavaScript canvas game engine library which worked great. I found it very easy to work with because of its mix and match entity and component system with scenes(similar to Unity). I also liked that it doesn't lock anything down to a particular method. I was even able to do custom canvas drawing with the normal canvas/context draw API.

Open Source

You can check out the full source on GitHub.

Challenges:

Some pitfalls I found with Crafty was positioning the viewport (see the LerpCamera component for reference), translating a mouse click into the game space, and working with a rotated entity. You can find a snippet on how to translate a click into game space in the source. I had to make a 2DExtended component which solved the rotated entity problem and added a few utility methods such as getActualPosition that would get the actual (x, y) coordinate of the rotated entity. I suggest using this BoxOverlays debug component (pictured below) to make sense of how Crafty's 2D component works.

Another issue I ran into was using SVG's and resizing sprites. The built-in sprite component was missing features for what I needed, even for my simple use case. But since Crafty is not constraining, I just used canvas context.drawImage(...) with a scratch canvas. You can checkout the Meat component to see a simple example. One note when working with the raw canvas context: make sure you are setting the x, y, w, h on the 2D component properly. This allows Crafty's draw manager to know when to redraw the entity appropriately. Also, use context.translate(e.pos._x, e.pos._y); at the beginning of the draw call (see source for examples) and then draw from reference (0, 0). This is the proper way to draw something at the appropriate position and rotation will be funky if you do not do this.

I referenced the Crafty source code many times to see what happens behind the scenes. The online documentation looks like it is generated from the source's comments which makes the source very easy to follow and great for offline reference.

Another thing to be aware of is event binding and making sure to clean up binds completely when changing scenes or removing an entity/component. To make all of this easy, I made an EventManager component which turned binding into a fire and forget type experience. All you have to do is add the EventManager component to the entity and make a cleanBind call.

// Add the `EventManager` component
// Params:
//	Event name
//	Callback when the event fires
//	Entity/Component name of parent Entity/Component. This is optional but necessary if you are removing components from entities.
this.cleanBind('damaged', this._onDamaged, 'PlayerCharacter');

An aspect missing in Crafty is built-in graphical gizmos for debugging. I made a very simple colored square entity called DebugMarker which I used heavily to find out where things were spawning, etc. A text gizmo would be another helpful addition.

Render Components and Modular UI: Getting Started (RequireJS)

Sat, 20 Sep 2014 00:00:00 GMT

I discovered Render Components from Guy Bedford in an email exchange where he laid out some basic code for the concept. Bedford has a small writeup on the ZestJS site, but this guide will cover all the same points. Because there is no written spec for Render Components, this guide covers one way of implementing this concept/idea. Details like naming conventions might not be the exact same as someone else.

This guide will go over building a pseudo-YouTube video site and workflow setup to start using Render Components.

Render components are applicable in many situations, including game UI. Game UI is just like a single page web app. I used render components in Unity with Coherent UI for my games, Radius and Super Bounce. You can check them out on GitHub.

About Render Components

Benefits of Render Components:

Modular: Code organization
No hassle Module Dependencies: Dependencies flow with the module; No need to worry about injecting them yourself. A neat little bundle of code.
Reusable, Shareable code: Reuse modules throughout and even between apps
Easy to follow file/folder structure: Although you don't have to conform to the folder structure in this guide, it makes it easy to find any module or sub-module.
Seamless binding: Elements can be bound to your JavaScript without any hassle.

A Render Component is simply a JavaScript object with two functions, template and attach.

template: Returns a template string. This will most likely be a Handlebars template but any template system is supported by currying.
- context: A JavaScript object(key-value store) which holds contextual data to display in the module
attach: A callback after the template string is rendered in the DOM.
- options: A JavaScript object(key-value store) which holds any special attachment options passed in by render.* calls.
- elements: An array of jQuery DOM elements from the rendered template. You can use this to restrict your binding to only the elements added by the template.

var renderComponent = {
  template: function (context) {
    return '<h1>Hello</h1>';
  },
  attach: function (options, elements) {
    // Do some Binding
    // $.filterFind is not a native jQuery function
    $(restrictTo).filterFind('h1').css('color', 'red');
  },
};

If you want to see a barebones project using Render Components, I have a project on GitHub.

In order to get the style, script, and other module dependencies to flow with each Render Component, we will be using RequireJS, a dependency loader and manager. I first thought of RequireJS as a backend on the frontend because I was used to assembling the whole page in PHP/Python on the server and sending it out to the client. As I started getting into RequireJS, it became clear that it is much more and thrives as a way to serve all of the different pages/content in a single page web application.

Things to know before getting started

Demo

Source Code (finished)

A fully functional demo of what will be created using this guide is available on the GitHub project pages for the repo.

You can also find the source code for the finished project on GitHub so you can reference it at any time.

This guide looks long(because it is not paginated) but it can be accomplished in 30 minutes.

To actually utilize the Render Components, we will be using renderer.js and renderer.helper.js (included in the getting started package) which is available on GitHub.

If you do not want to deal with the Sass, download the CSS files instead. You can use your own favorite Sass compiler but in this guide, I will be using Gulp to compile the Sass(.scss) files into CSS. There is already a gulpfile.js so just navigate to the project directory and run npm install once to install the dependencies and then the gulp command whenever you want to recompile. I realize this is a burden because you need Node.js, so I have linked the complete and compiled CSS wherever I am using Sass;

You will find that each module follows the same pattern.

Getting Started: Hello World

Download the Getting Started Video Site package on GitHub. This is a nice starting point because it includes all of the necessary scripts, basic styles, and assets.

Next we need to configure RequireJS. We are going to start with a "Hello World" type goal so you understand the basics of RequireJS and make sure things work at a basic level.

In js/require.conf.js:

// The following code is wrapped in this immediately invoking function
// Because the jsHint linter does not like the "use strict" tag dangling
// in the outer scope in case we concatenate a bunch of JavaScript together
// that is non-strict
(function () {
  'use strict';

  // Our RequireJS Configuration
  require.config({
    paths: {
      // Make sure to leave off the extension `.js`
      // module-name: path-to-script
      jquery: 'lib/jquery-1.11.1',
    },
  });

  // Do some Hello World
  require(['jquery'], function ($) {
    $(document).ready(function () {
      $('body').append('<h1>Hello World</h1>');
    });
  });
})();

In the index.html, add in the following script tag to the bottom of the <body>. This loads up our RequireJS configuration and includes the RequireJS library into the page. Note the trailing extension is omitted in the path to our configuration in the data-main attribute.

In index.html, add:

<script type="text/JavaScript" data-main="js/require.conf" src="js/lib/require.js"></script>

You should now see a big "Hello World" when you visit index.html.

Your first Render Component

First we need to update our RequireJS configuration to add some more libraries and plugins.

In js/require.conf.js, update to:

// The following code is wrapped in this immediately invoking function
// Because the jsHint linter does not like the "use strict" tag dangling
// in the outer scope in case we concatenate a bunch of JavaScript together
// that is non-strict
(function () {
  'use strict';

  require.config({
    paths: {
      jquery: 'lib/jquery-1.11.1',
      'jquery-ui': 'lib/jquery-ui-1.11.1',
      'jquery-utility': 'jquery.utility',

      handlebars: 'lib/handlebars-v1.3.0',
      'handlebars-runtime': 'lib/handlebars.runtime-v1.3.0',

      'amd-loader': 'lib/amd-loader',
      hbs: 'lib/require-hbs',
      css: 'lib/require-css',

      renderer: 'renderer',
    },
    shim: {
      'jquery-ui': {
        deps: ['jquery'],
      },
      'jquery-utility': {
        deps: ['jquery'],
      },

      handlebars: {
        exports: 'Handlebars',
      },
      'handlebars-runtime': {
        exports: 'Handlebars',
      },
    },
  });

  // Your Hello World code here...
  // It can stay for now
})();

Next: Create a folder called pages at the root of the project and then create a file called video.page.js in that folder.

We are using Guy Bedford's awesome RequireJS plugins, require-hbs and require-css, in the following snippet. Don't worry, the plugins are already included in the Getting Started package.

In pages/video.page.js:

define(['hbs!./video/video', 'css!./video/video', './video/video.bits'], function (
  tmpl,
  videocss,
  videoScriptBits,
) {
  return {
    template: tmpl,
    attach: function (options, elements) {
      // You can do stuff here
      // even return some methods

      // Bind some stuff
      videoScriptBits.bind(elements);
    },
  };
});

In pages/video/video.hbs:

<div class="player-area">
  <div class="player-wrapper">
    <video></video>

    <div class="player-wrapper-resize-handle ui-resizable-handle ui-resizable-s">
      <svg class="icon">
        <use xlink:href="#shape-resize-vertical-handle" />
      </svg>
    </div>
  </div>
</div>

<div class="bottom-area">
  <div class="info-wrapper">
    <div class="info-box">
      <h2>Info</h2>
    </div>

    <div class="comments">
      <h2>Comments</h2>
    </div>
  </div>

  <aside class="suggestion-sidebar">
    <h2>Suggestions</h2>
  </aside>
</div>

Download the styles for this page module and save it as pages/video/video.scss. Here is the CSS file if you don't want to deal with Sass.

Download the JavaScript for the page module and save it as pages/video/video.bits.js

To render the page module, Add the following pages module to the bottom of the paths object in the RequireJS configuration. Don't forget the trailing comma on the line above

In js/require.conf.js:

'pages': '../pages'

Also, change the "Hello World" block from before, at the bottom of our config, to the following
In js/require.conf.js:

// Load up the video page
// This is sort of like an initialization of the application
require(['require', 'jquery', 'renderer'], function (require, $, renderer) {
  renderer.append(
    'pages/video.page',
    {
      /*context*/
    },
    {
      /*attachOptions*/
    },
    $('body'),
    function (attachReturn) {
      // ...
    },
    require,
  );
});

Compile the Sass files if necessary, and refresh the index.html page. You should see a wireframe-like structure of our video site.

To give you a sense of all the modules and how they fit in, here is a nice diagram:

Adding the player module

As you will see, the modules of the page are set up the same way the over arching page is. There is no special styling or scripts for this module because the <video> element takes care of it all. All we have to do is give it the src path to the video in the Handlebars template. Create a modules folder in the root of the project.

In modules/video-player.module.js:

define(['hbs!./video-player/video-player'], function (tmpl) {
  return {
    template: tmpl,
    attach: function (options, elements) {},
  };
});

In modules/video-player/video-player.hbs:

<video src="{{video-src}}" controls></video>

Add the following modules module to the bottom of the paths object in the RequireJS configuration.

In js/require.conf.js:

'modules': '../modules'

We need to add some context to fill in the {{video-src}} Handlebars expression above in the template.

In js/require.conf.js:

// ...

// The variables we are going to pass into our template
var context = {
	'video-src': 'video/big_buck_bunny.webm',
};

renderer.append('pages/video.page', context, {}, $('body'), function(attachReturn) {

// ...

Next, we need to update our video page to actually use this module.

The following makes use of our js/helpers/renderer.helper.js Handlebars helper, which makes it easy to inline Render Components in our Handlebars templates. Keep in mind that this helper relies js/renderer.js which you can use to render Render Components on the fly in your own scripts.

In pages/video/video.hbs, update:

<div class="player-area">
  <div class="player-wrapper">
    {{@helpers/renderer.helper module="modules/video-player.module" }}
  </div>
</div>

You should now have a playable video on the page.

Adding the video info module

In modules/video-info.module.js:

define(['hbs!./video-info/video-info'], function (tmpl) {
  return {
    template: tmpl,
    attach: function (options, elements) {},
  };
});

In modules/video-info/video-info.hbs:

<h2 class="video-info-title">{{video-title}}</h2>
<div class="video-info-description">{{video-description}}</div>

Add more information to the page context.

In js/require.conf.js:

// ...
var context = {
  'video-title': 'Big Buck Bunny',
  'video-description':
    "Big Buck Bunny (code-named Peach) is a short computer animated comedy film by the Blender Institute, part of the Blender Foundation. Like the foundation's previous film Elephants Dream, the film was made using Blender, a free software application for animation made by the same foundation. It was released as an Open Source film under Creative Commons License Attribution 3.0. - Wikipedia",
  'video-src': 'video/big_buck_bunny.webm',
};
// ...

In pages/video/video.hbs, update:

// ...
<div class="bottom-area">
  <div class="info-wrapper">
    <div class="info-box">{{@helpers/renderer.helper module="modules/video-info.module" }}</div>
  </div>
</div>

Adding the Commenting System

The Commenting System module is the most complex for this project because it has sub-modules, script binding, and styles.

In modules/comments.module.js:

define([
  'hbs!./comments/comments',
  'css!./comments/comments',
  './comments/comments.bits',
], function (tmpl, commentscss, commentsScriptBits) {
  return {
    template: tmpl,
    attach: function (options, elements) {
      commentsScriptBits.bind(elements);
    },
  };
});

In modules/comments/comments.hbs:

<h2>Comments</h2>

<div>
  <form class="comment-form">
    <input type="text" class="comment-form-name-input js-name-input" placeholder="Your Name" />
    <br />
    <div class="comment-form-message-input">
      <textarea class="js-message-input" placeholder="Say something..."></textarea>
    </div>
    <br />
    <input type="submit" value="Post" />
  </form>
</div>

<ul class="comment-list">
  <li>Sample comment</li>
  <li>Don't worry, we will replace these soon</li>
</ul>

Download the styles for this page module and save it as modules/comments/comments.css. No Sass in this one.

We will come back to this script after we have the comment sub-module complete:
In modules/comments/comments.bits.js:

define([
  'module', // we can use `module.id` for binding or something...
  'jquery',
  'jquery-utility',
  'renderer',
  'require',
], function (module, $, $utility, renderer, require) {
  'use strict';

  return {
    bind: function (restrictTo) {
      // Set restricTo default
      restrictTo = typeof restrictTo !== 'undefined' ? restrictTo : $(document);

      $(document).ready(function () {
        $(restrictTo)
          .filterFind('.comment-form')
          .on('submit', function (e) {
            e.preventDefault();

            // We will fix this up later using the actually `comment` module
            $(restrictTo).filterFind('.comment-list').append('<li>Heya, I loved this video</li>');
          });
      });
    },
  };
});

In pages/video/video.hbs, update:

// ...
<div class="bottom-area">
  <div class="info-wrapper">
    // ...

    <div class="comments">{{@helpers/renderer.helper module="modules/comments.module" }}</div>
  </div>
</div>

Adding the Comment sub-module

In modules/comments/modules/comment.module.js:

define(['require', 'hbs!./comment/comment', 'css!./comment/comment'], function (
  require,
  tmpl,
  commentcss,
) {
  return {
    template: tmpl,
    attach: function (options, elements) {},
  };
});

In modules/comments/modules/comment/comment.hbs:

<li class="comment">
  <img src="{{avatar-src}}" class="comment-avatar" />
  <div class="comment-body">
    <h4 class="comment-name">{{name}}</h4>
    <div class="comment-message">{{message}}</div>
  </div>
</li>

Download the styles for this page module and save it as modules/comments/modules/comment/comment.scss. Here is the CSS file if you don't want to deal with Sass.

Compile the Sass.

Update the context to add in some comments to display.

In js/require.conf.js:

var context = {
  // ...
  'comment-list': [
    {
      name: 'Eric',
      message: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
      'avatar-src': 'https://secure.gravatar.com/avatar/ac5413?s=64&d=identicon',
    },
    {
      name: 'MLM',
      message: 'Aenean commodo ligula eget dolor. Aenean massa.',
      'avatar-src': 'https://secure.gravatar.com/avatar/ab1234?s=64&d=identicon',
    },
  ],
};

In modules/comments/comments.hbs, update:

// ...
<ul class="comment-list">
  {{#each comment-list}} {{@helpers/renderer.helper module="modules/comments/modules/comment.module"
  }} {{/each}}
</ul>

Add in video suggestions, finishing it off

Lastly, we need to add in the video suggestion in the sidebar. By now you probably have the hang of Render Components and could probably try doing this last module on your own before reading on. Use the context below as a guide on how you would set up the template.

In js/require.conf.js:

var context = {
  // ...
  'video-suggestion-list': [
    {
      'video-title': 'Lorem Ipsum',
      'thumbnail-src': 'https://secure.gravatar.com/avatar/e1e1e1?s=64&d=identicon',
      'channel-name': 'Dummy',
      'view-count': 23921685,
    },
    {
      'video-title': 'Aenean massa',
      'thumbnail-src': 'https://secure.gravatar.com/avatar/aeeaaa?s=64&d=identicon',
      'channel-name': 'Dummy2',
      'view-count': 2364,
    },
  ],
};

In modules/video-suggestion.module.js:

define([
  'hbs!./video-suggestion/video-suggestion',
  'css!./video-suggestion/video-suggestion',
], function (tmpl, css) {
  return {
    template: tmpl,
    attach: function (options, elements) {},
  };
});

In modules/video-suggestion/video-suggestion.hbs:

<div class="video-suggestion">
	<img src="{{thumbnail-src}}" class="video-suggestion-thumbnail" />
	<div class="video-suggestion-body">
		<h3 class="video-suggestion-title">{{video-title}}</h2>
		<div class="video-suggestion-channel-name">
			{{channel-name}}
		</div>
		<div class="video-suggestion-view-count">
			{{@helpers/toCommaSepNum.helper view-count}} views
		</div>
	</div>
</div>

Download the styles for this page module and save it as modules/video-suggestion/video-suggestion.scss. Here is the CSS file if you don't want to deal with Sass.

In pages/video/video.hbs, update:

// ...
<div class="bottom-area">
  // ...

  <aside class="suggestion-sidebar">
    <h2>Suggestions</h2>
    {{#each video-suggestion-list}} {{@helpers/renderer.helper
    module="modules/video-suggestion.module" }} {{/each}}
  </aside>
</div>

You should now have a complete pseudo-YouTube video site made with Render Components:

Looking for more examples?

Check out my two open source Unity games on GitHub (Radius and Super Bounce). These projects are from before I figured out all the best practices for this article but the core idea is the same.

Super Bounce: a Game Jam Project

Mon, 14 Jul 2014 00:00:00 GMT

I recently participated in the 3 day 2014 GDSE Game Jam and created a fairly solid result: Super Bounce. You can download it for Windows and Mac at superbouncegame.com . Also, as per the open source guideline of the game jam, the game's source code is available on GitHub.

Play Now

The journey

Super Bounce is based on the super bouncing physics bug from Halo 2. To do a super bounce: just land on a mesh edge with a "crouch" and a relatively high velocity to soar to the sky. I did a lot of super bouncing back in the Halo 2, original Xbox days and even had my own bouncing clan. You can find a lot of super bouncing montages on YouTube if you want to see the original mechanic in action.

This was my first time participating in a game jam, and everything went smooth without many snags. I was able to start off with a nice base because I used another open source project I created, Radius, an open source Unity project reference that covered most aspects needed like multiplayer, UI, etc.

The biggest hurdle of this game was figuring out if you are landing on an edge. There are a lot of scripts out there will give you the closest vertex on a mesh but that was not good enough for this game. You can see what I am doing in the source code but the gist of it is that I loop through the mesh and find the closest vertex. Then, I find all connecting points to that vertex from the triangles array to form the lines and see if the player is close enough to be considered colliding with them. The current implementation is still not bullet proof but it does detect edge collision very well.

Another point of conflict was the character controller. I had a script from an earlier project that used SweepTestAll and the complex collider capability of a rigidbody. This worked well but you could easily walk/clip through walls. The second iteration still used a rigidbody but set the velocity attribute directly. This solved the walking through walls issue but messed with the bouncing mechanic. The player would sometimes bounce/slide off the edge and fall into/through corners. The latest version, 0.5, uses the standard capsule character controller in Unity because it works well for a humanoid and the other scripts were just something I made for complex shapes.

Gameplay

Jump off a building and land on a mesh edge while holding Shift to super bounce
When landing on an edge, you need have a velocity that is greater than a normal jump. Jumping off of a building is usually necessary for the initial bounce.
Land on multiple edges, for example on a corner, to bounce higher.
Chain bounces together by continuing to land on edges to get to taller buildings.

Note: I have not implemented the literal "crouch" as it was known in Halo 2. Instead, you just have to hold Shift while landing on the edge.

Texture Tiling based on object Size/Scale in Unity

Sun, 25 May 2014 00:00:00 GMT

Say you want to create a ground plane that can be scaled to any size and maintain the same texture size on the surface without having to change the material tiling every time. Since this is not default functionality or some setting you can turn on, how can this be accomplished? I had this exact same question about a year ago when messing with Unity. DaveA answered a bit vaguely and re-reading his answer now, I implemented exactly what he suggested. You can see how to create both ideas he suggested in this article.

There are two methods to achieve texture tiling based on size. The first way is adjusting actual texture tiling property whenever a change is detected in scale. The second option is to procedurally generate a plane mesh with many segments all with overlapping UVs.

Method #1: Texture Tiling

I recommend this approach because it doesn't waste memory and resources on a bunch of vertices like method #2 requires.

We will be monitoring Transform.lossyScale for changes because it is the world scale, and we only care about the plane's actual size which includes any parents scaling. Once we detect a change, update Material.mainTextureScale to the appropriate tiling for that new size.

Another point of interest is the [ExecuteInEditMode] attribute which will make the script run in the editor even without playing.

Note: Unity's default Plane primitive seems to have its UVs upside down. You can model your own 10mx10m, 10x10 segment plane in a 3D program(Blender, C4D, 3ds max). Or you can use this procedural plane script which is available in my project Radius, on GitHub.

Setup and Usage:

Drag TextureTilingController.cs onto a Plane Primitive
- Adjust the "Texture to Mesh Z" option to set the texture scale in the game world
Now you can adjust the plane size however big or small you want (use Transform scale properties for x and z).
- Whenever the object changes size, it will adjust the texture tiling automatically.
- You can also manually update the tiling using the "Update Tiling" option in the context menu.

`TextureTilingController.cs`

using UnityEngine;
using System.Collections;

[ExecuteInEditMode]
public class TextureTilingController : MonoBehaviour {

	// Give us the texture so that we can scale proportionally the width according to the height variable below
	// We will grab it from the meshRenderer
	public Texture texture;
	public float textureToMeshZ = 2f; // Use this to constrain texture to a certain size

	Vector3 prevScale = Vector3.one;
	float prevTextureToMeshZ = -1f;

	// Use this for initialization
	void Start () {
		this.prevScale = gameObject.transform.lossyScale;
		this.prevTextureToMeshZ = this.textureToMeshZ;

		this.UpdateTiling();
	}

	// Update is called once per frame
	void Update () {
		// If something has changed
		if(gameObject.transform.lossyScale != prevScale || !Mathf.Approximately(this.textureToMeshZ, prevTextureToMeshZ))
			this.UpdateTiling();

		// Maintain previous state variables
		this.prevScale = gameObject.transform.lossyScale;
		this.prevTextureToMeshZ = this.textureToMeshZ;
	}

	[ContextMenu("UpdateTiling")]
	void UpdateTiling()
	{
		// A Unity plane is 10 units x 10 units
		float planeSizeX = 10f;
		float planeSizeZ = 10f;

		// Figure out texture-to-mesh width based on user set texture-to-mesh height
		float textureToMeshX = ((float)this.texture.width/this.texture.height)*this.textureToMeshZ;

		gameObject.renderer.material.mainTextureScale = new Vector2(planeSizeX*gameObject.transform.lossyScale.x/textureToMeshX, planeSizeZ*gameObject.transform.lossyScale.z/textureToMeshZ);
	}
}

Method #2: Overlapping UVs Method

In order to have your texture tile seamlessly across the plane using the overlapping UV technique, there are two things to take into account:

Make a procedural plane mesh that adapts the number segments depending on the proportion of the texture
Make each pair of triangles that make up one rectangle overlap in the UV map.

This means you will have 6 vertices for every iteration of the tiling. I do not recommend this for large ground planes.
Note: Unity has a 65k(65,534) vertex limit for a single mesh.

I use this same technique for making any sized territory in Radius.

Setup and Usage:

Drag ProceduralPlane.cs and GroundController.cs onto an empty gameobject.
To adjust the plane size, edit the Width and Height properties of GroundController.cs.
Fill in the references for Procedural Plane and Texture. Drag the object with script in the hierarchy tab onto the Procedural Plane field. Drag the texture you are going to tile from the Project tab onto the Texture field.

`ProceduralPlane.cs`

You can get the procedural plane script in my project Radius, on GitHub.

Requires: MeshUtils.cs also available in Radius.

`GroundController.cs`

using UnityEngine;
using System.Collections;

[ExecuteInEditMode]
public class GroundController : MonoBehaviour {

	public ProceduralPlane proceduralPlane;

	public float Width = 10f;
	public float Height = 10f;

	// Give us the texture so that we can scale proportionally the width according to the height variable below
	// We will grab it from the meshRenderer
	public Texture texture;
	public float textureToMeshZ = 2f; // Use this to constrain texture to a certain size


	float prevWidth = 10f;
	float prevHeight = 10f;
	float prevTextureToMeshZ = 2f;

	// Use this for initialization
	void Start () {
		this.prevWidth = this.Width;
		this.prevHeight = this.Height;
		this.prevTextureToMeshZ = this.textureToMeshZ;

		// Do calculations and Generate the mesh
		this.UpdatePlaneSize();
	}

	// Update is called once per frame
	void Update () {
		// If something has changed
		if(this.Width != this.prevWidth || this.Height != this.prevHeight || this.textureToMeshZ != this.prevTextureToMeshZ)
			this.UpdatePlaneSize();


		// Maintain previous state variables
		this.prevWidth = this.Width;
		this.prevHeight = this.Height;
		this.prevTextureToMeshZ = this.textureToMeshZ;
	}

	[ContextMenu("UpdatePlaneSize")]
	void UpdatePlaneSize()
	{
		//Debug.Log("updating ground plane");

		// We will pack as many height segments in collider height
		this.proceduralPlane.SegmentsZ = (int)Mathf.Floor((float)this.Height/this.textureToMeshZ);
		// Multiply amount of height segments by the texture-to-mesh height
		// This will not be the same as the collider height.
		this.proceduralPlane.Height = this.proceduralPlane.SegmentsZ * this.textureToMeshZ;

		// Figure out texture-to-mesh width based on user set texture-to-mesh height
		float textureToMeshX = ((float)this.texture.width/this.texture.height)*this.textureToMeshZ;
		// Proportionally pack in the width segments
		this.proceduralPlane.SegmentsX = (int)Mathf.Floor((float)this.Width/textureToMeshX);
		// Multiply amount of width segments by the texture-to-mesh width
		this.proceduralPlane.Width = this.proceduralPlane.SegmentsX * textureToMeshX;

		// Generate mesh
		this.proceduralPlane.RecalculateMesh();
	}
}

BeagleBone Black: Ubuntu Getting Started

Sat, 24 May 2014 00:00:00 GMT

I was really intrigued by the BeagleBone Black's (BBB) low cost, great performance, and IO all on the familiar Ubuntu OS. I am still quite new to the BeagleBone Black and hope to create some great projects with it in the future.

This is a quick guide to get you up and running with Ubuntu on your BeagleBone Black. I created this guide because many of the guides and instructions are scattered across many places and I wanted a concise place to reference.

Flashing/Installing Ubuntu on your BeagleBone Black

Download the latest Ubuntu image. Pick the latest .img.xz file (on the bottom) from the rcn-ee site

ex.
http://rcn-ee.net/deb/flasher/saucy/BBB-eMMC-flasher-ubuntu-13.10-2014-03-27-2gb.img.xz

Extract the .img.xz download to get the .img file. You can use 7zip to extract it. If you didn't add the extension when installing 7zip: Open With -> 7zip -> 7zFM.exe

Download and install Win32 Disk Imager.

Plug in your microSD card that is at least 8gb. You can use any adapter or USB card reader. Look at the file explorer to find the drive letter.

Start Win32 Disk Imager and browse for the .img file. Select the correct drive letter from the drop down.

This process will rewrite all data on the microSD card so make sure you backup anything you might want on it.

Press the Write button. The process will take a bit of time and will come up with write complete dialog when done.

Safely Remove the microSD from your computer. Make sure your BeagleBone Black is shutdown and not powered. Also unplug the ethernet because it consumes a bit of power.

Plug in the microSD into the BBB. While you hold the User Boot (S2) button down, plug in power to the board via USB or 5v adapter. The 4 lights should light up then change away. After that you can release User Boot button.

The flashing process should take about 25-45 minutes. There is not a good way to tell if it actually flashing. When I did it the D2(0) and D4(3) LEDs were blinking a lot. When the process is done, the blinking should completely stop and ALL 4 LEDs will be lit up.

Note: If after 45 minutes, the LEDs are still not solid, power off the board (hold the power button down for ~8 seconds, until all the LEDs turn off) and try again.

Power off the board (power button, 8 seconds). Remove the microSD card.

Power the board back on and you should be able to play with Ubuntu now!

Keep in mind that this is not Ubuntu Desktop; If you plug in the micro-hdmi, you will see the same stuff as you do when you SSH into your board with PuTTY.

More? Getting Started

SSH into your board

When your plug in your board via USB, it should show up as a flash drive (mass storage). Make sure you go through the Start.htm and install all of the necessary drivers including the USB to virtual Ethernet driver. If you are running Windows 8, use these instructions on how to install unsigned drivers.

If you're used to SSHing into things, here is the command you can run:

ssh ubuntu@192.168.7.2
# password is "temppwd"

Otherwise, here is a GUI program on how to accomplish the same thing:

Visit the BBB IP (will probably be 192.168.7.2). You can find it in the Start.htm (under step #3) but you can just open BASIC_START.htm and it will redirect you to it.
Open your favorite SSH program of choice. We're going to be using PuTTY
In the Host Name (or IP Address) field, enter your BBB IP.
Change the connection type to SSH and make sure the Port field is 22.
Click the Open button at the bottom to start your session. It will ask about SSH key stuff if you are accessing for the first time, just click accept/yes/save.
For the login as prompt, Enter ubuntu and press enter.
For the password, enter temppwd because this is the default.
Change the default password so others can not login: passwd
- Enter in the current in the current password temppwd. Then your new password twice.

Create your own root user

SSH into your BBB (see instructions above)
Add a user: sudo adduser yourownusernamehere
Edit the sudo configuration: sudo visudo
Use the arrow keys and find the section that looks like this:
```
# User privilege specification
root	ALL=(ALL:ALL) ALL
```
Add root privileges to your new user. Under that section add the following line: yourownusernamehere ALL=(ALL:ALL) ALL
Ctrl+x to exit. Type y, enter. And finally press Enter to complete the save.

Update/Upgrade

Get all of your current programs/packages up to date.

Plug in an ethernet cable to your BBB and connect it to something internet access(router, switch). Alternatively you can share your PC/laptop internet connection via USB to your BBB (see section below on how to do this).

Test internet connection by running these commands:

ping 8.8.8.8 Try to connect to Google directly via IP
ping google.com Try to connect to Google via DNS nameservers
Ctrl+z to stop pinging

Run the following commands. You may need to type y and enter along the process to confirm some actions.

sudo apt-get update
sudo apt-get upgrade

In Windows, goto Control Panel -> Network and Internet -> Network and Sharing Center -> Change Adapter Settings (on the left).

Right-click on your connection with internet(wired or wireless) and click Properties. Go to the Sharing tab and check Allow other network users to connect through this computer's Internet connection. In the selection box choose the BBB virtual local area connection. Press OK.

For some reason Windows will assign a static IP to the virtual local area connection. So right-click your BBB local area connection and click properties. In the list, select Internet Protocol Version 4 (TCP/IPv4), and click the Properties button. In the General tag, change both the IP and DNS to Obtain automatically. Press OK, Close.

Then on the BBB side:

On your BBB, run this command to temporarily set your BBB's default gateway:
sudo route add default gw 192.168.7.1
Add a nameserver so we can reach domains: sudo nano /etc/resolv.conf
Add nameserver 192.168.7.1 to the bottom of the list.
- 192.168.7.1 is the IP the BBB sees as the computer it is connected to.
Test internet connection by running these commands:
- ping 8.8.8.8 Try to connect to Google directly via IP
- ping google.com Try to connect to Google via DNS nameservers
- Ctrl+z to stop pinging

I had some trouble trying to get the BBB to ping when I first set this up. I thought it was a firewall(or Norton's(anti-virus) firewall) blocking ICMP echo request packets but I added some traffic rules and it didn't change anything. Plus, I can ping on my Windows 8 PC that I am sharing the connection with. I fixed this issue by changing the TCP/IPv4 settings of the connection with Internet and that we are sharing to something manual, saving, then switching back to automatic. I am not sure why this fixes it.

Command cheat sheet

Command	Description
`su newusername`	Switch users
`sudo shutdown -h now`	Shutdown the BBB

Extra Links:

Update (2016-6-4): here are some links on using Debian 8.4 Jessie

Font Size based on Font Family

Mon, 19 May 2014 00:00:00 GMT

Font legibility, crispness(aliasing), and physical size vary between fonts when set at the same font-size. Fonts are designed/optimized at distinct sizes and alias extremely well at those specific size intervals. This makes it hard to set a catch-all size on the web and have it work beautifully with many typefaces.

As you can see from the image above, Calibri is a much smaller font compared to Ubuntu and Open Sans. You can also see the varying levels of clarity between the sizes of each font.

So what if you have a font stack in CSS that looks like font-family: 'Ubuntu', 'Calibri', sans-serif; and you fallback to Calibri. All of a sudden your sites font size greatly decreases. Of course Calibri is a great looking font and you want to use it as a fallback but increase the size when it does. This guide will go over how you can have the best of all typefaces and style them just right so the fallbacks are perfect.

CSS only alternative (maybe)

The font-size-adjust property takes a stab at this issue by making font size actually based on the size of the lower case letters in the loaded font. It works as a scalar for font-size and guarantees the font will be scaled so that the lowercase letter height will be font-size*font-size-adjust. In the example snippet below the typefaces lowercase letter height would be 6px.

/* lower case letters will be 6px high */
font-size: 12px;
font-size-adjust: 0.5;

This helps with legibility at small sizes between font fallbacks but still does not let you customize the size based on the font family. Another problem is that font-size-adjust is only supported in Firefox at the moment.

Introducing Web Font Loader

To achieve the true font-size based on font-family we are going to be using Adobe Typekits Web Font Loader JavaScript library. The readme in the GitHub repo explains a lot and goes through many configurations but I will be going over just what we need to get font-size based on font-family.

Web font Loader works by identifying if the fonts specified in the modules of the configuration are loaded. And then adding corresponding css classes(what Typekit calls Events) to the HTML tag of your page. You can then use those classes in your CSS to style your page appropriately.

Don't be confused by the name "Web Font Loader", as we are not using the library to load/import fonts into the page(in this guide). We are simply testing for whether they are already loaded and are able to be used in the page.

How to use Web Font Loader

Web Font Loader(webfont.js) is a Google hosted library so it is easy to include and use. You could always download and include it yourself. Web Font Loader even works offline(for the features we are using in this guide).

// Link the latest 1.x version. This applies to any google hosted library.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

// Or specify a set version
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.3/webfont.js"></script>

Initialize the library

There are two ways to run Web Font Loader, but the easiest and most sensible way to me is to just call WebFont.load({}). The other way is to set the global variable WebFontConfig and then include the webfont.js library. If you are using JS strict mode "use strict";, then use window.WebFontConfig = {}; to keep from getting errors.

After you have webfont.js included somewhere; Add each font family you are using to the custom module families array. In this small example we are going to use Open Sans which looks good at a base size of 12px and Ubuntu which looks good at a base size of 13px.

You can put this snippet in a <script> tag at the bottom of the body so that it runs once the page has been fully parsed and rendered. It will work just fine if you include it in the head(or wherever).

// Get classes from fonts
WebFont.load({
  custom: {
    families: ['Open Sans', 'Ubuntu'],
  },
});

Define Font Sizes using the Event Classes

Once the snippet above executes, it will add the css event classes the HTML element of the page. We can use the CSS event classes to set a font-size for each family.

The syntax for the CSS events looks like this:

.wf-<familyname>-<fvd>-active

<familyname>: Lowercase name of the font. Spaces and underscore are stripped out.
<fvd>: Shortand for describing the weight and style. ex.

n4: normal style, weight: 400 (normal)
n7: normal style, weight: 700 (bold)
i4: italic style, weight 400 (normal)

We will just be using the n4 fvd variant as there is no need to test each flavor of the font.

Define the event classes in opposite(left->right to bottom->top; see example below) order you have in the font-family stack on your body. This way they will override each other correctly when you have to fallback.

body {
  font-family: 'Open Sans', 'Ubuntu', sans-serif;
  font-size: 12px;
  font-weight: 400;
}
/* Change font-size based on font-family 
 * We get these event classes from the webfontloader
*/
.wf-ubuntu-n4-active body {
  font-size: 13px;
}
.wf-opensans-n4-active body {
  font-size: 12px;
}

Now when Open Sans is available, it will use a font-size of 12px.
If Open Sans is not available and the font-family stack falls back to Ubuntu, it uses a font-size of 13px

Demo: jsFiddle

You can check out a demo of what the guide goes through.

To test the font fallback and size change, just put a space between the multi-line comment like so /* * / for the @import definitions in the CSS. This will toggle the import on and off. If you already have Open Sans or Ubuntu installed locally in your OS, you won't see the difference.

/* Open sans is commented out (notice the space) */
/* * /
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
/* */
/* Ubuntu is defined */
/* */
@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic);
/* */

Unity and DLLs: C# (managed) and C++ (unmanaged)

Thu, 01 May 2014 00:00:00 GMT

With Unity 5, there is no difference in terms of engine features between Personal/Free and Professional editions. This means that "Native Code Plugin Support" is not a problem anymore and there are no restrictions with DLLs and C++(unmanaged) code.

This guide really only applies to Unity 4 and below

When dealing with unmanaged and managed code, verbiage like P/Invoke, marshaling, interoperability get thrown around. The whole ordeal can be a bit daunting.

This guide will go over dealing with DLLs in Unity Free/Standard and Unity Pro. Even with the native(unmanaged) code barrier in Unity Free, it is still possible to use unmanaged code.

Overview

Specifically, we will be making a C# managed DLL which relies on/references a C++ unmanaged DLL and then use those functions in Unity.

TLDR; For Unity 4 Pro and Unity 5:

Add all code/DLLs to the Plugins folder: UnityProject->Plugins

TLDR; For Unity Free:

Add unmanaged code to the Unity Project Root: UnityProject
Add managed code to the Plugins folder: UnityProject->Plugins
When you build a project, copy the unmanaged code to BuildRoot->Data->Plugins

Create a C++ DLL (Unmanaged)

To start, lets create the unmanaged DLL which the other pieces rely on.

In Visual Studio, Create a New Project: Visual C++->Win32->Win32 Console Application
Name it TestCPPLibrary
On the Application Settings Wizard that pops up after you press OK: change the Application Type to DLL
Check the Empty Project box on the same page
Create the following two files and paste in the contents

`TestCPPLibrary.h`

// TestCPPLibrary.h

#ifdef TESTFUNCDLL_EXPORT
#define TESTFUNCDLL_API __declspec(dllexport)
#else
#define TESTFUNCDLL_API __declspec(dllimport)
#endif

extern "C" {
    TESTFUNCDLL_API float TestMultiply(float a, float b);
	TESTFUNCDLL_API float TestDivide(float a, float b);
}

`TestCPPLibrary.cpp`

// TestCPPLibrary.cpp : Defines the exported functions for the DLL application.
//

#include "TestCPPLibrary.h"

extern "C" {
	float TestMultiply(float a, float b)
	{
		return a * b;
	}

	float TestDivide(float a, float b)
	{
		if (b == 0) {
			return 0;
			//throw invalid_argument("b cannot be zero!");
		}

		return a / b;
	}
}

Create a C# DLL (Managed)

In Visual Studio, Create a New Project: Visual C#->Windows->Class Library
Name it TestCSharpLibrary
Add the C++ Dll to your C# Solution
- Right-click the solution in your C# project and goto Add->Existing Item
- Browse and choose your TestCPPLibrary project.
Right click on your C# project and go to Properties
In the Application tab, change the Target Framework to .NET Framework 3.5
Application->Target Framework (.net version)">
Create the following file and paste in the contents

TestCSharpLibrary.cs

using System;
using System.Runtime.InteropServices;

namespace TestCSharpLibrary
{
    public class TestCSharpLibrary
    {
        // From c++ Dll (unmanaged)
        [DllImport("TestCPPLibrary")]
        public static extern float TestMultiply(float a, float b);

        // From c++ Dll (unmanaged)
        [DllImport("TestCPPLibrary")]
        public static extern float TestDivide(float a, float b);


        public static float SharpMultiply(float a, float b) {
            return (a * b);
        }

        public static float SharpDivide(float a, float b) {
            if (b == 0)
            {
                return 0;
            }

            return (a / b);
        }
    }
}

Build (Make the DLLs)

Right click the solution and press Build (F7). It should run until you see:
========== Build: 2 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========

You should be able to find both DLLs in the C# project folder:

TestCSharpDll\TestCSharpLibrary\Debug\TestCPPLibrary.dll
TestCSharpDll\TestCSharpLibrary\TestCSharpLibrary\bin\Debug\TestCSharpLibrary.dll

Add the DLLs to your Unity Project

Since native(unmanaged, the c++ DLL in our case) is a Pro/Mobile-only feature, it is quite easy to get this running in Unity Pro, but a bit more involved for Unity Free/Standard/Indie.

Unity Pro and any Unity 5

If you are using Unity Pro,

Copy both DLLs(TestCSharpLibrary.dll, TestCPPLibrary.dll) into UnityProject->Plugins

The project will work in the Unity Editor and when you make a Build

Unity (Free/Standard/Indie)

If you are using the standard version of Unity:

Copy TestCSharpLibrary.dll, the C# managed DLL, into UnityProject->Plugins
Copy TestCPPLibrary.dll, the C++ unmanaged DLL, into the UnityProject root.

This will allow the project to run in the Unity Editor but will not work in a build.

To get your project working in a build... After you build your project:

Copy TestCPPLibrary.dll, into your Build Root->Data->Plugins, alongside your other DLL

Using the DLL in Unity

Here is a simple script utilizing the DLLs:

UseDLL.cs

using UnityEngine;
using System.Collections;
using System.Runtime.InteropServices;
using System.IO;

public class UseDll : MonoBehaviour {

	// Straight From the c++ Dll (unmanaged)
	[DllImport("TestCPPLibrary", EntryPoint="TestDivide")]
	public static extern float StraightFromDllTestDivide(float a, float b);

	// Use this for initialization
	void Start () {

		/* */
		// Call the C# DLL SharpMultiply function
		float multiplyResult = TestCSharpLibrary.TestCSharpLibrary.SharpMultiply(3, 5);

		// Call the C# DLL TestDivide function which relies on the C++ DLL for this functionality
		float divideResult = TestCSharpLibrary.TestCSharpLibrary.TestDivide(15, 3);

		float straightFromDllDivideResult = StraightFromDllTestDivide(20, 5);

		// Print it out to the console
		Debug.Log(multiplyResult);
		Debug.Log(divideResult);
		Debug.Log(straightFromDllDivideResult);

		// Write the result into a file, so we can even see it working in a build
		using(StreamWriter writer = new StreamWriter("debug.txt", true))
		{
			writer.WriteLine(multiplyResult);
			writer.WriteLine(divideResult);
			writer.WriteLine(straightFromDllDivideResult);
		}
		/* */

	}

	// Update is called once per frame
	void Update () {

	}
}

Running the script, should output to the console and write to debug.txt:

Running into Issues?:

Internal compiler error ... `System.Reflection.ReflectionTypeLoadException`

If you are getting an error similar to Internal compiler error. System.Reflection.ReflectionTypeLoadException in Unity when trying to build your project; You need to change the targeted .NET version of your C# file to something like .NET 3.5.

Right click on your C# project and go to Properties
In the Application tab, change the Target Framework to .NET Framework 3.5
Application->Target Framework (.net version)">

Failed to load ... expected 64 bit architecture (IMAGE_FILE_MACHINE_AMD64), but was IMAGE_FILE_MACHINE_I386.

If you are getting this error, you probably need to recompile your libraries for x64 platform (64 bit).

In Visual Studio, go to the properties of your project, then at the top click the "Configuration Manager..." button. In the table, under the Platform column, change it to "x64" then recompile your project.

How to Install WordPress with Nginx on Ubuntu 12.04

Thu, 17 Apr 2014 00:00:00 GMT

About

WordPress is an open source, PHP based blog and content management system(CMS) made to streamline the process of getting your website up and looking pretty. The WordPress community makes a multitude of plugins (over 30,000) that extend the functionality to make it work just the way you like. There is also an enormous support community to help with any issues.

Nginx(pronounced "engine-x") is a popular light-weight server alternative to Apache. It is considered leaner and meaner than Apache because it uses an event-driven system that chomps through requests rather than spinning up separate processes and threads for each request.

Prerequisites:

User with root privileges
Linux, Nginx, MySQL, PHP (LEMP) stack

Download WordPress

Download the zipped package(archive file) directly from the WordPress website: wget https://wordpress.org/latest.tar.gz
Unzip/Extract the files from the package: tar -xvzf latest.tar.gz
Create the /var/www directory. The -p flag will create the directory only if it doesn't exist already: sudo mkdir -p /var/www
- NOTE: Instead of creating and using the /var/www directory, you can use /usr/share/nginx/www instead. Make sure to adjust all of the commands and configs if you do.
Add permissions to the Nginx user(www-data) to the directory we just created: sudo chown -R www-data:www-data /var/www
Now let's also add your username to the www-data group: sudo usermod -a -G www-data yourusername (replace "yourusername" with your username)
Copy the WordPress files we just extracted into the /var/www/ directory: sudo cp -r ~/wordpress/* /var/www - Don't worry, the files are not public yet. We will change this in the Nginx server block.
Now we can clean up a bit. Delete the zip archive: rm latest.tar.gz
Delete the folder we extracted: rm -r wordpress/

Create the Database and User

Start the MySQL shell and login: mysql -u root -p
- You should see mysql> on the left now. Query OK [...] will appear after you enter each of the following commands.
Create a new database to store all wordpress content(articles, settings, etc). I am calling my database "wordpress" to keep things simple: CREATE DATABASE wordpress;
Now we need to create a user which WordPress will use to set and retrieve content: CREATE USER 'wordpressuser'@'localhost' IDENTIFIED BY 'password';
If you need to change the password of the user, you can just run this command: SET PASSWORD FOR 'wordpressuser'@'localhost' = PASSWORD('password');
Give your wordpress user all permissions for the database we just created: GRANT ALL PRIVILEGES ON wordpress.* TO 'wordpressuser'@'localhost' IDENTIFIED BY 'password';
Now that you have set up some new privileges, reload these settings: FLUSH PRIVILEGES;
Exit the MySQL shell: exit;

Create a Nginx Server Block

Create a new Nginx server block file: sudo nano /etc/nginx/sites-available/wordpress

Paste the following snippet into the new file (explanation below)

Find server_name example.com; and change it to your domain name example.com. If you don't have a domain, you can use your server IP address.
listen is the port we check for web requests on
root is the base folder where we have content
index is the auto-complete file when nothing is in the url(ex. http://example.com/)
server_name your domain or IP
location / { ... } is the block that allows the Wordpress permalinks to work
location ~ \.php$ { ... } is the block that passes any .php request to the PHP

server {
  listen 80;
  root /var/www;
  index index.php index.html index.htm;

  server_name example.com;

  location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to index.html
    try_files $uri $uri/ /index.php;
  }

  # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
  location ~ \.php$ {
    # NOTE: You should have "cgi.fix_pathinfo = 0;" in php.ini
    try_files $uri =404;

    # With php5-fpm:
    fastcgi_pass unix:/var/run/php5-fpm.sock;
    fastcgi_index index.php;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    include fastcgi_params;
  }
}

Save and Exit. Press Ctrl+x to exit. Press y to confirm and then enter to finally save.
Enable the server block by creating a link between the configuration and the enabled directories: sudo ln -s /etc/nginx/sites-available/wordpress /etc/nginx/sites-enabled/wordpress
Remove the default server block from the enabled directory: sudo rm /etc/nginx/sites-enabled/default
Now reload the Nginx service: sudo service nginx restart

Setup WordPress

Now when you visit your site either by IP or domain it should show a "There doesn't seem to be a wp-config.php file." dialog like the one below:

Press the Create a Configuration File button and the Let's go! button on the following page. Now you should see a form that asks for the database info. Fill it out appropriately with the credentials you set up, then press submit.

Press the Run the install button on the following page.

Now enter in your site title and admin account info and press the Install WordPress button. The page should look like this.

Success!

It should present you with a "Success!" screen and you should be able to login to the admin panel and visit the main site now.

(Optional) Enable Permalinks

In the left-hand menu go to Settings -> Permalinks. Change the radio button setting to your needs(I usually use "Month and name"). Then click Save Changes.

(Optional) Install W3 Total Cache

W3 Total Cache(W3TC) is a quick and easy way to speed up your site by utilizing the power of caching and minification.

I suggest running Google's PageSpeed Insight test before and after you install to see the improvement.

NOTE: This plugin will cache your files making it a little bit difficult to make theme changes. All you have to do is Purge the cache every time you make a modification.

In the left-hand menu go to Plugins -> Add New. Type W3 Total Cache in the search.

Click the Install Now link.

If WordPress is asking for your FTP credentials, this means it can't access the files directly. To fix this, just change the wordpress file owner to the www-data user and group

sudo chown -R www-data:www-data /var/www

Click the Activate Plugin link(screenshot) after it installs.

Click the W3TC Settings link or in the left-hand menu go to Performance -> General Settings.

Leave the "Toggle All" radio unchecked
Enable Page cache. Cache pages for faster loading and more efficient delivery.
Enable Minify. Shrink and combine JS and CSS files for faster loading and more efficient delivery.
Enable Object Cache. Speed up generation of content by WordPress.
Enable Browser Cache. Properly tags content so that browser clients minimize downloads of pages (file header stuff).

If you are getting an error(something about the file length 150, etc) with the Minify function: Visit http://example.com/wp-admin/admin.php?page=w3tc_minify#advanced and check the Disable minify automatic file name length test option. The Filename length should be 150. Disable Minify, save, then re-enable it.

You need to include the W3TC nginx.conf file generated in the root of your wordpress install to the wordpress nginx server block. Add this to bottom of the server block below the php location block.

/etc/nginx/sites-available/wordpress

server {
  [...]

  # For W3 Total Cache(W3TC)
  include /var/www/nginx.conf;
}

Save(Ctrl+x) and restart nginx: sudo service nginx restart

There is a lot more you can do with W3 Total Cache but those are just the easy click and done settings. To further utilize this plugin, you could get a CDN to host all of your static files, or even add in the CloudFlare integration.

Want even more?

You could even install Varnish. Varnish is a web app accelerator that stores a copy of a page and serves it immediately when a request comes in rather than having Nginx and WordPress rebuild the page on every request. This will act as another layer of caching on top of W3 Total Cache.

In the W3 Total Cache settings under the Reverse Proxy category make sure to add 127.0.0.1 to the Varnish Servers textarea. This will allow W3 Total Cache to purge the Varnish cache.

Common Commands:

Command	Description
`sudo service nginx restart`	Restart the Nginx process
`sudo nano /etc/nginx/sites-available/wordpress`	Edit the Nginx server block we made for WordPress

Facedancer21 Getting Started in Windows

Wed, 19 Mar 2014 00:00:00 GMT

This guide will go over compiling the firmware, flashing it to your device, and emulating your first USB device. I was successful using Windows 8(not 8.1) but it still came with challenges. Hopefully this guide can steer you clear of any head-banging issues.

If you need help making/assembling your own Facedancer board, follow this guide I made previously.

Getting started

Inspect your board for any solder bridges, cold joints, etc. Use a multimeter in continuity mode to test. This is important as you are connecting this to your precious pc.

Plug in the host side to your pc via USB 2.0. I ran into Blue Screen issues on Windows 8 using USB 3.0.

If you want to be cautious, plug it in on an old PC first and see if it enumerates without issue. You could even use a USB Isolator like this(I use one).

You should see the Rx and Tx LEDs blink a bit. It should automatically start finding drivers. When it is done, in Device Manager, you should have USB Serial Converter under the Universal Serial Bus controllers category and a USB Serial Port(COMx) under Ports (COM & LPT) category.

Getting the code

All of the firmware is available in the goodfet svn repo. To download the repo, download and install TortoiseSVN. Now create a folder where you want to store the svn(avoid spaces in the path). I chose Downloads/goodfet_svn. TortoiseSVN is a shell extension so that means it adds entries to your right-click context menu. Right click the folder you just created and click SVN Checkout... . In the URL field enter: https://svn.code.sf.net/p/goodfet/code/trunk/ and press OK. All of the files should download and you will get a green checkmark on all the files and directories.

The client folder refers to more of the host-side stuff. The firmware folder applies to the stuff you program into your device.

After you got it all downloaded you need to add the client directory to your path environment variable. ex: C:\Users\madli_000\Downloads\goodfet_svn\client;

Note: You will need to exit your console(cmd prompt) every time you update an environment variable for them to take effect. To set or modify an environment variable, you can use setx somekey somevalue in cmd prompt. Or go to control panel: Control Panel -> System and Security -> System -> Advanced System Settings -> Environment Variables. If you are adding directories to the path variable, just separate them with a semicolon(;).

Compiling the Code

If you just want a pre-compiled hex file (not sure how up to date it is), you can just download from the project dist/ directory. Otherwise, you'll need to compile it yourself using the steps below:

Install 32-bit Python 2.7.x. Add python to your path environment variable; ex. C:\Python27_32bit\;C:\Python27_32bit\Scripts;. If you don't add it to your path you will have to call python via its full path every time like "C:\Python27_32bit\python.exe".
Install pyserial by running this command pip install pyserial. If you need the pip command: Use these Windows binaries and first install setuptools. Then install pip. If you didn't add python to your path in the previous step you will have to use pip's full path like: "C:\Python27_32bit\Scripts\pip.exe" install pyserial
Install MinGW. Add it to your path environment variable; ex. C:\MinGW\bin
Download the mspgcc zip. Create a 3rd_party folder inside your MinGW installation (C:\MinGW\3rd_party). Copy the mspgcc zip into this folder. Now unzip it. Add the bin folder inside where you unzipped to your path environment variable; ex. C:\MinGW\3rd_party\mspgcc-20120406-p20120911\bin
Install GOW: lightweight alternative to Cygwin. It should be already added to your path but just check to make sure; ex. C:\Program Files (x86)\Gow\bin
Add the environment variable board with the value of facedancer21.
cd to the firmware folder in the svn(ex. cd "C:\Users\madli_000\Downloads\goodfet_svn\firmware").
Run make clean install in cmd prompt. This will probably error out(like the message below) but do not worry. you still generated/compiled the goodfet.hex file we need.
```
make (e=2): The system cannot find the file specified.
make: *** [install] Error 2
```

Flashing the code

It is important to understand the COMX, ttySX, port X relationship. Simply put, ttySX and port X are zero indexed so they will be one less than COMX. ex. COM7=ttyS6=port 6

Flash the firmware to your Facedancer board:

"C:\Python27_32bit\python.exe" "C:\Users\madli_000\Downloads\goodfet_svn\client\goodfet.bsl" --comport=6 --speed=38400 --debug -e -p "C:\Users\madli_000\Downloads\goodfet_svn\firmware\goodfet.hex"

OR if you added python to your path and are in the client directory, it can be simplified to:

python goodfet.bsl --comport=6 --speed=38400 --debug -e -p "../firmware/goodfet.hex"

A lot of stuff should scroll in your cmd prompt. When it is done it should say: 5374 bytes programmed. You can see the full output of this being successful with DEBUG=3 in goodfet.bsl in this pastebin.

You can run "C:\Python27_32bit\python.exe" goodfet.bsl -h to find out what all those parameters mean.

Emulating your first USB Device (Communicating through the TARGET port)

Now that your board is all set up, it is time to get into the action.

Plug in another cable in the TARGET end and into another PC or your own(haven't tried).

In the client svn directory, run python goodfet.maxusbhid in cmd prompt.

You should see the lights start to blink pretty solid. On the second PC, in Device Manager you should see HID Keyboard Device under the keyboards category.

Here is the full console output of running that command.

C:\Users\madli_000\Downloads\goodfet_svn\client>"C:\Python27_32bit\python.exe" goodfet.maxusbhid
C:\Users\madli_000\Downloads\goodfet_svn\client\GoodFETMAXUSB.py:15: UserWarning: This library will soon be deprecated in favor of the USB*.py libraries.
  """This library will soon be deprecated in favor of the USB*.py libraries."""
goodfet.maxusbhid:16: UserWarning: The libraries upon which this program depends will soon be deprecated in
favor of the USB*.py libraries.  See facedancer-keyboard.py for an example of
this program written using the new libraries.
  this program written using the new libraries."""
port: None
port: None
port: COM7
Connected to MAX342x Rev. 13
Starting a HID device.  This won't return.
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0100, wIndex=0x0000, wLength=0x0040
Handling a setup packet of bmRequestType=0x00, bRequest=0x05, wValue=0x0001, wIndex=0x0000, wLength=0x0000
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0100, wIndex=0x0000, wLength=0x0012
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0200, wIndex=0x0000, wLength=0x0009
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0300, wIndex=0x0000, wLength=0x00ff
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0303, wIndex=0x0409, wLength=0x00ff
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0200, wIndex=0x0000, wLength=0x00ff
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0300, wIndex=0x0000, wLength=0x00ff
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0302, wIndex=0x0409, wLength=0x00ff
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0300, wIndex=0x0000, wLength=0x00ff
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0302, wIndex=0x0409, wLength=0x00ff
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0100, wIndex=0x0000, wLength=0x0012
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0200, wIndex=0x0000, wLength=0x0009
Handling a setup packet of bmRequestType=0x80, bRequest=0x06, wValue=0x0200, wIndex=0x0000, wLength=0x0022
Handling a setup packet of bmRequestType=0x00, bRequest=0x09, wValue=0x0001, wIndex=0x0000, wLength=0x0000
Handling a setup packet of bmRequestType=0x21, bRequest=0x0a, wValue=0x0000, wIndex=0x0000, wLength=0x0000
Stalling a class request.
Stalling EPO for bmRequestType=0x21, bRequest=0x0a, wValue=0x0000, wIndex=0x0000, wLength=0x0000
Handling a setup packet of bmRequestType=0x81, bRequest=0x06, wValue=0x2200, wIndex=0x0000, wLength=0x006b

Running into issues?

This guide is mostly from my memory as I didn't want to uninstall everything just to try to step back through it. If you running into an issue, try these things below and then contact me and tell me what I forgot.

Try Cygwin. I couldn't get it to program but maybe you will be successful. You will need the devel/make and the python package.
If using Cygwin, try adding the environment variable CYGWIN with the value of reset_com. See this documentation for more details.
Try setting the environment variable GOODFET to ttyS6 or 6. This is sometimes used in some of the scripts if it can't find a port.

Command cheat sheet

Command	Description
`make clean install`	Same as `make clean` and `make install`. Use in the `firmware` svn directory to compile and create the `goodfet.hex`
`python goodfet.bsl --comport=6 --speed=38400 --debug -e -p "../firmware/goodfet.hex"`	Use in the `client` svn directory to Program the board with the compiled hex on COM7(change port to your situation).
`python goodfet.bsl -h`	Show the help text for goodfet.bsl. Shows all possible arguments, etc.
`python goodfet.maxusbhid`	Use in the `client` svn directory to emulate a HID Keyboard device.
`python -m serial.tools.list_ports`	List all serial ports. Does not always work properly

Extra Links:

Swap File Guide (Ubuntu)

Tue, 11 Mar 2014 00:00:00 GMT

Here is a basic how-to guide on setting up and managing a swap file. I am using Ubuntu 12.04 but I am sure it applies to other versions and Linux distros. I recently had to figure out how to increase the size of an existing swap file so I thought I would throw together a guide(see section below "Create Swap file` if you need to do this).

A swap file(called a page file in Windows) is a way to increase memory/RAM capacity without upgrading hardware (virtual memory). It is simply a file on your hard drive. When your physical sticks of RAM get full, the system will copy over to the swap file to avoid a crash or lose data. Swap files will be slower at reading and writing because they reside on your hard drive but is better than a complete failure.

See table of useful commands (cheat sheet) when dealing with swap files at the bottom of this article.

Create a swap file

Create a file for swapping

You need to create a big file the size of your swap. Use dd or fallocate.

ex:
Create a 512MB or .5GB swap file: sudo dd if=/dev/zero of=/swapfile bs=1024 count=524288
Create a 1024MB or 1GB swap file: sudo dd if=/dev/zero of=/swapfile bs=1024 count=1048576

Size is determined by: bs*count in bytes
if=/dev/zero makes it read from that file. /dev/zero returns as many null characters that are read.
of=/swapfile determines the name
bs is the number of bytes in a chunk
count is the number of chunks

Prepare the swap file

Run: sudo mkswap /swapfile

Activate the swap file

Run: sudo swapon /swapfile

Make the swap file permanent by adding it the the `fstab`

Open /etc/fstab. You could use: sudo nano /etc/fstab
Add this line to the end: /swapfile none swap sw 0 0

If you want to learn more about the fstab syntax/configuration, see this fstab Ubuntu doc

Set the permissions on the swap file to `0600`:

This will only allow the owner(root) to read and write to the file.

sudo chown root:root /swapfile
sudo chmod 0600 /swapfile

Set swappiness to 10

Swappiness is a value 0 to 100. A value of 0 means that the swap file will be avoided until actually necessary (run out of memory). A value of 100 will put stuff into the swap file as soon as possible. The default is 60. You can think of the number as the percentage left of actual RAM when the system starts copying into the swap file.

A swappiness value of 10 will make it act as an emergency airbag to avoid out of memory errors.

Run both commands:

echo 10 | sudo tee /proc/sys/vm/swappiness OR sudo sysctl vm.swappiness=10
echo vm.swappiness = 10 | sudo tee -a /etc/sysctl.conf

The first one modifies the swapiness variable in the virtual memory(vm) process(not permanent). And the second makes it permanent by adding it to the conf which gets loaded in at boot time.

You can see how tee works here. It just overwrites the file and displays what is written. The -a parameter appends the text instead.

Alternatively you can just:

Open /etc/sysctl.conf. You could use sudo nano /etc/sysctl.conf
Find vm.swappiness. If it doesn't exist, add it to bottom of the file: vm.swappiness=10
Change value to 10 and save. If using nano: press Ctrl+x to exit, then press y to save.

You can check your swappiness value using this command: cat /proc/sys/vm/swappiness

Verify it is working:

Run sudo swapon -s to see a summary of your swap file setup. It should be listed.

Also if you run free -m, it should show the split in usage between mem and swap.

Resize existing swap file (increase swap size/space)

Just create a new swapfile (follow instructions above), then deactivate the old one. Don't forget to update the fstab.

To deactivate a swapfile: sudo swapoff /swapfile
To delete the swapfile: sudo rm /swapfile

Other References:

Basic Command cheat sheet:

Command	Description
`sudo swapon -s`	List swap files
`free -m`	Show memory usage breakdown
`cat /proc/sys/vm/swappiness`	Check swappiness value
`sudo swapon -a`	Turn on all swap files
`sudo swapon /swapfile`	Turn on swap file specified
`sudo swapoff -a`	Turn off all swap files
`sudo swapoff /swapfile`	Turn off swap file specified

Assembling the Facedancer21

Thu, 06 Mar 2014 00:00:00 GMT

The Facedancer is a board to fuzz and emulate/prototype USB devices with host side python, PyUSB. Here is the official Facedancer21 page. It was masterminded by Travis Goodspeed and Sergey Bratus. The Facedancer21 is the 24th revision of the pcb.

The Facedancer is not really available pre-assembled for cheap so you will have to build your own. You can buy a fully assembled version from this site but you don't get any SMD soldering practice and it costs about double.

If you already have a board and need some help flashing it and emulating your first device, follow this guide.

Tools:

Soldering Iron
Spool of Solder
Flux (I used a flux pen)
Tweezers
Spool of desoldering Wick or Braid
Multimeter for testing
Helping hands
Magnifying glass or something of the sorts

Parts:

You can order the Facedancer PCB by following the instructions on this page

I ordered double of the jelly-bean parts (resistors, capacitors, LEDs) in case I messed up soldering or lost one. All of the parts will run you about $35 from Digikey.

Once you have received all of your parts, make sure they sent you the right parts. Visually inspect and match them to the images on Digikey. Digikey made a pick-error and sent me the wrong part. I got some 1k resistors instead of the 0.1uF caps. I didn't realize this when soldering them and when I plugged in the board it caused my PC to Blue Screen(BSoD). Luckily the good people in the #goodfet IRC channel were able to spot that I had resistors where the caps should be.

Part (link to Digikey)	Package	Quantity
FT232RL	SSOP28	1
MSP430F2618TPM	QFP64	1
MAX3421E	TQFP32	1
USB Mini female		2
USB Type A female		1
12 Mhz Crystal	HC49/US	1
27pF capacitors	0603	2
1uF capacitors	0603	2
0.1uF Decoupling Capacitors	0603	3
0603 LEDs	0603	3
330ohm Resistors	0603	2
33ohm Resistors	0603	2

Assembly:

Here are a few SMD soldering tutorials to watch before you get started:

If you have any random boards and parts, practice with those a bit before starting.

I used a couple techniques to accomplish the job. Both of them are shown and explained in the video tutorials I mentioned above:

Tack and place: Flux the pads. Put a bit of solder onto on of the pads. Use your tweezers to place the part and reflow the solder you just put on. Slide the part into place and remove the iron. Solder the rest of the pins/pads.
Drag soldering: Flux the pads. Tack down a pin on multiple sides of the chip. Flux again. Add a little bit of solder to the first couple of pins. Now move your iron back and forth across the side until the solder flows to all the pins. You will have to make multiple passes. If you can't get solder to flow all the way down the to last pins on the side just add a bit to that side and repeat. Repeat for all sides. Check for solder bridges with your magnifying utility and use the desoldering wick/braid to clean them up.

Use the lowest temperature setting with your soldering iron that will still melt the solder. This will minimize lifting of pads, etc. It is extremely easy to lift the pads where there is a no-connect (NC). Most of the pins on the MSP430 are left unconnected so if you accidentally lift a pad, check the schematic (below) to see if it is used. Just clean up the bridges.

Steps:

Start with the QFP64 MSP430 chip.
This is probably the hardest part of this build. A 64 pin 0.5mm pitch chip with very few pins actually connected to something else. You can see that a couple of pads lifted in the image, but fortunately only on unused pins (NC, not connected to anything).
Solder up the 3x 0.1uF caps to C1, C2, and C4 (Check the pcb layout below)
Also solder the 1x 1uF capacitor to C3
The last capacitors to solder are the 2x 27pF for the crystal oscillator. C6 and C7
Next is the row of 330ohm (2x) resistors and LEDs (3x). Tin each pad and move down the line. The little arrow on the bottom of the LED should be pointing in the same direction of the arrow on the silkscreen.
Finish off the rest of the jelly bean parts by soldering the 2x 33ohm over by the TARGET USB footprint.
Tack the MAX3421E chip down and drag solder each side just like the MSP430 in step 1.
Solder up the 2x USB Mini connectors. Tack one of the ground legs down. Do not be afraid to reflow the joint and straighten out the connector. It will be extremely hard to adjust the connector once you solder another leg.
Solder up the FT232RL. Tack and drag.
Solder up the crystal. Nice and easy. Orientation does not matter.
Optionally, solder up the USB Type A connector on the bottom side for host functionality. You will need to bend the pins in order to fit it down onto the board. You may also want to clip a few of the leads to get them away from other pads.
Done:

Whats next?

Go flash your board. You can use my next guide in my Facedancer series: Facedancer21 Getting Started in Windows

Extra links:

Emulating USB Devices with Python by Travis Goodspeed
Writing a Thumbdrive from Scratch - Conference Talk: Travis Goodspeed
SEC-T 2012 - Trashing USB layers using the Facedancer Board - Conference Talk: Travis Goodspeed
The FaceDancer21: IMHO a simple example of our community at its best...
Facedancer board lets your Python programs pretend to be USB hardware - Hackaday
Solder Time! FaceDancer11 and GoodFET41 Assembly - Another assembly guide: By Brad Antoniewicz and Tushar Dalvi

CNC: Controlling Linear Servos

Wed, 29 Jan 2014 00:00:00 GMT

Here is a simple guide/tutorial on how to get your linear servo moving. The video below demos what I made. You can see how everything is set up below that:

Play video

Parts:

Teensy 3.0 or 3.1: Substitute your own Arduino/microcontroller
Mini Linear Servo
1x 10 uF Capacitor
1x Diode
(Optional) Potentiometer for jog code.

I was able to run the mini servo off of the Teensy's 3.3V pin which has a 100mA max rating.

Code:

There are two different demo projects. The first one just jogs the servo back and forth. The second demo uses the potentiometer as input to manually control the position of the servo.

A linear servo works just the same as a normal hobby 0 to 180 degree servo. Instead of a short pulse being 0 degrees it represents a bottom position and 180 degrees represents a top position.

Pulse relationship (linear):

1000 microseconds: bottom position
1500 microseconds: middle position
2000 microseconds: top position

The diode in both designs acts as a flyback diode to mitigate any current generated from moving the servo by hand (bumping the arm, etc).

First demo:

Sweeps the linear servo up and down.

int servoPin = 0;
int pulse = 1000;

void setup() {
	pinMode(servoPin, OUTPUT);
}

void loop() {

	digitalWrite(servoPin, HIGH);
	delayMicroseconds(pulse);
	digitalWrite(servoPin, LOW);

	delay(300);

	digitalWrite(servoPin, HIGH);
	delayMicroseconds(2000);
	digitalWrite(servoPin, LOW);

	delay(300);

}

Second Demo:

Manually control/jog the linear servo with the potentiometer. Includes some averaging to smooth the potentiometer input.

const int servoPin = 0;
const int potPin = 23;

const int pulseStart = 1000; // Number of microseconds to get to position 0%
const int pulseEnd = 2000; // Number of microseconds to get to position 100%
int pulseRange = -1; // We use this later to scale potVal

const int timeBetweenPulses = 30000; // Number of microseconds between pulses

elapsedMicros sincePulse; // Keeps track of time between pulses
elapsedMicros sincePulseStart; // Keeps track of pulse length in time
elapsedMicros sinceSerial;
elapsedMicros sincePotRead;

int potVal = 0;

const int numReadings = 8;
int readings[numReadings];
int readIndex = 0;
int total = 0;

int averagedPotVal = 0;
int pulseTime = 0;

void setup() {
	pinMode(servoPin, OUTPUT);

	pulseRange = pulseEnd - pulseStart;

	// Init read values
	for(int i = 0; i < numReadings; i++)
		readings[i] = 0;

	Serial.begin(9600);
}

void loop() {

	if(sincePotRead >= 1000)
	{
		potVal = analogRead(potPin);

		// subtract the last reading:
		total= total - readings[readIndex];
		// read from the sensor:
		readings[readIndex] = potVal;
		// add the reading to the total:
		total= total + readings[readIndex];
		// advance to the next position in the array:
		readIndex = readIndex + 1;

		// if we're at the end of the array...
		// ...wrap around to the beginning:
		if (readIndex >= numReadings)
			readIndex = 0;

		// calculate the average:
		averagedPotVal = total / numReadings;

		pulseTime = (((float)averagedPotVal/1023)*pulseRange)+pulseStart;

		sincePotRead = 0;
	}


	if (sinceSerial >= 100000)
	{
		String unformater = "'";
		String sep = ", ";
		Serial.println(String(averagedPotVal) + sep + String(pulseTime) + "\0");
		sinceSerial = 0;
	}

	if(sincePulse >= timeBetweenPulses)
	{
		// Keep high for the amount we want
		if (sincePulseStart <= pulseTime)
		{
			digitalWriteFast(servoPin, HIGH);
		}
		else
		{
			digitalWriteFast(servoPin, LOW);

			// No need to to do this as we do it later
			// But doesn't hurt
			sincePulseStart = 0;

			// Now that the pulse is done
			// Reset the time between pulse
			sincePulse = 0;
		}

	}
	else
	{
		// Reset pulseStart time until we actually get to doing it
		// Because this variable keeps counting
		sincePulseStart = 0;
	}

}

Now with RSS

Tue, 21 Jan 2014 00:00:00 GMT

I added a RSS feed so that you can keep up with whatever I am doing. You can also see it linked in the footer.

Just follow:

https://ericeastwood.com/rss.xml

If you have any suggestions on how to improve the feed (number of items, descriptions, etc), please feel free to contact me.

CNC: Controlling Stepper Motors

Sun, 29 Dec 2013 00:00:00 GMT

Here is a simple guide to get your stepper motors spinning. The video below demos what I made. You can see how everything is set up below that:

Play video

Parts:

Teensy 3.0 or 3.1: Substitute your own Arduino/microcontroller
Stepper Motors: 1.7A NEMA 17 4-wire
Motor Controllers: I used a 3.5A controller with the TB6560 chips
Power Supply: 24V 10A (I used a Sopudar SPD-240-24)

Wiring Diagram / Schematic:

Code (.ino, arduino code):

const int stepperX_pul = 0;
const int stepperX_dir = 1;

const int stepperY_pul = 2;
const int stepperY_dir = 3;

int microstep_count = 0;

void setup()
{
	// Set up the x axis
	pinMode(stepperX_pul, OUTPUT);
	pinMode(stepperX_dir, OUTPUT);

	// Set up the y axis
	pinMode(stepperY_pul, OUTPUT);
	pinMode(stepperY_dir, OUTPUT);

	// initialize the pulse pins
	digitalWrite(stepperX_pul, HIGH);
	digitalWrite(stepperY_pul, HIGH);

	// initialize the direction pins
	digitalWrite(stepperX_dir, HIGH);
	digitalWrite(stepperY_dir, HIGH);
}

void loop()
{
	digitalWrite(stepperX_pul, HIGH);
	digitalWrite(stepperY_pul, HIGH);

	delayMicroseconds(100);

	digitalWrite(stepperY_pul, LOW);
	digitalWrite(stepperX_pul, LOW);

	delayMicroseconds(100);

	// Once we make a full revolution,
	// make the motor spin the other direction
	if(microstep_count >= 3200)
	{
		digitalWrite(stepperX_dir, !digitalRead(stepperX_dir)); // Change direction.
		digitalWrite(stepperY_dir, !digitalRead(stepperY_dir)); // Change direction.
		delay(100);

		microstep_count = 0;
	}
	else
		microstep_count++;
}

Pong on a FPGA

Wed, 18 Dec 2013 00:00:00 GMT

Just finished the classic tennis game Pong for my Basys 2 FPGA (built from scratch). The project is written in VHDL and is played on a VGA monitor. You can see a video of it in action at the bottom of this article.

Features:

Multiplayer: Battle against your friend
Play against the AI. Or AI vs AI battles
Score Keeping
Hidden Mode / Easter Egg (see below)

Source:

Just visit the GitHub Repo.

Controls:

Action	Control
Player Left/1 Paddle movement	btn2 and btn3
Player Right/2 Paddle movement	btn0 and btn1
Reset	switch0
Player Left/1 AI Enable	switch7
Player Right/2 AI Enable	switch6

Technology:

A small list of things implemented in this design:

Collision Detection and Resolution
VGA Output, game video
Text display on VGA which includes a ram arbiter (uses my other project FP-V-GA Text)
Basic AI for the paddles
Button and Switch Input
Seven-segment driver (BCD converter)

Other:

I entered this project into the Hackaday Fubarino Contest so of course there is an easter egg. Just get the score to read 1337 and you will see an awesome Hackaday mode. This means the player on the left side needs 13 points and player on the right needs 37 points. The mode lasts for as long as you keep the score as 1337 so you will have to work together to volley the ball around. I made two versions of the pixel hackaday logo but ended up using the bigger one as the ball.

Featured on Hackaday.com: Fubarino Contest: FPGA Pong

Update 2013-12-31: I am one of the Fubarino Contest Winners! (article on Hackaday)

Watch the video to see this special mode:

Play video

VGA Simulator: Getting Started

Wed, 11 Dec 2013 00:00:00 GMT

Go straight to the VGA Simulator

About

The VGA Simulator is a web based tool to easily view a raw VGA signal without having to hook it up to an actual CRT monitor. Easily review and save any frames generated. It uses horizontal sync, vertical sync, and red, green, blue to recreate pixel perfect frames.

The purpose of this tool was to create a faster way to debug FPGA/VHDL projects that utilize VGA. The problem is that synthesizing and generating a bit-file takes too long with Xilinx mainly because it only utilizes a single core. Although we have Simulators such as Isim to debug almost every aspect of a design, it is hard visualize a bunch a 1 or 0 flying past the screen on the rgb lines.

This tool is not VHDL specific, you just need to generate a log file with lines formatted as so: current_sim_time time_units: hs vs red green blue (ex. 535 ns: 1 1 010 010 01)

Play video

Workflow

Create a test bench for your design.
Add some code that logs the vga signal to a file.
Run that log file in the VGA Simulator

Set up

Create a test bench or open up an existing test bench
Add the use statements for both the ieee and std to the top of your file with the rest of the using statements
```
use ieee.std_logic_textio.all;
use std.textio.all;
```

Add the following process that logs to the file. The clk needs to be synchonized to your pixel clock and be just as fast or oversample your pixel clock. You can write your own logging, it just needs be formatted as so: current_sim_time time_units: hs vs red green blue (ex. 535 ns: 1 1 010 010 01). Also see Log File Formatting below.

process (clk)
file file_pointer: text is out "write.txt";
variable line_el: line;
begin
if rising_edge(clk) then
-- Write the time
write(line_el, now); -- write the line.
write(line_el, ":"); -- write the line.

    -- Write the hsync
    write(line_el, " ");
    write(line_el, hsync); -- write the line.

    -- Write the vsync
    write(line_el, " ");
    write(line_el, vsync); -- write the line.

    -- Write the red
    write(line_el, " ");
    write(line_el, Red); -- write the line.

    -- Write the green
    write(line_el, " ");
    write(line_el, Green); -- write the line.

    -- Write the blue
    write(line_el, " ");
    write(line_el, Blue); -- write the line.

    -- write the contents into the file.
    writeline(file_pointer, line_el);

end if;
end process;

Run the test bench in Isim or any other simulator
Find your log file and browse for it in the VGA Simulator tool. The log file should be in the same folder as the test bench or in the executable folder of your simulation tool.
Optional: Set the back porch in the fine tuning section. This will center your image in the canvas so that no clipping occurs. The back porch is the amount of pixel clock cycles after the rising edge of the sync pulses (hsync for back porch x, and vsync for back porch y). See this diagram (source)
Click submit and watch the frames generate
You can also review any frames generated by the process by clicking the thumbnails.
To save a frame, just make the frame the main monitor window and then click the Download current frame link just above the monitor.

Log File Formatting / Syntax

Must be a .txt file
Text file lines must be formatted as so current_sim_time time_units: hs vs red green blue (ex. 535 ns: 1 1 010 010 01)
Everything should be binary except sim time
Pad red, green, and blue with 0 (zeroes) to the max color depth
Log a line every rising edge of a clock that is synchronized with your pixel clock and is just as fast or oversamples.
Make sure you set your clock period correctly in your testbench!

Animated Sine Wave two-ways with pygame and tkinter

Sun, 01 Dec 2013 00:00:00 GMT

I decided to post up this simple script that generates an animated sine wave that scrolls horizontally. I built both versions because I need to use a canvas and some bare-bone pixel manipulation for a future project and want to find the best solution.

Update (2013-12-11): I decided to use JavaScript and the HTML5 <canvas> for the project I ended up making. Go check out the VGA Simulator

The first one is made with pygame, which runs smooth and is straight forward efficient. The second version made with tkinter is slow and laggy. I even had to batch edit pixels which does not help much. Both of them function exactly the same but the tkinter version is just not as fast.

Version made with pygame

All you need is Python 2.7 and pygame installed. If you are on Windows, you might consider getting a nice binary from here. This is also a great project to get started with pygame.

import pygame
import time
import math

# Some config width height settings
canvas_width = 640
canvas_height = 480

# Just define some colors we can use
color = pygame.Color(255, 255, 0, 0)
background_color = pygame.Color(0, 0, 0, 0)

pygame.init()
# Set the window title
pygame.display.set_caption("Sine Wave")

# Make a screen to see
screen = pygame.display.set_mode((canvas_width, canvas_height))
screen.fill(background_color)

# Make a surface to draw on
surface = pygame.Surface((canvas_width, canvas_height))
surface.fill(background_color)

# Simple main loop
running = True
while running:
	for event in pygame.event.get():
		if event.type == pygame.QUIT:
			running = False

	# Redraw the background
	surface.fill(background_color)

	# Update sine wave
	frequency = 4
	amplitude = 50 # in px
	speed = 1
	for x in range(0, canvas_width):
		y = int((canvas_height/2) + amplitude*math.sin(frequency*((float(x)/canvas_width)*(2*math.pi) + (speed*time.time()))))
		surface.set_at((x, y), color)

	# Put the surface we draw on, onto the screen
	screen.blit(surface, (0, 0))

	# Show it.
	pygame.display.flip()

Version made with tkinter

NOTE: For python 3.x: change the import statement at the top to from tkinter import ... ("..." is the rest of that line) - The package changes to lowercase T in 3.x. The uppercase Tkinter package is for python 2.x

from Tkinter import Tk, Canvas, PhotoImage, mainloop
import math
import time

# Used to store debug file
#import os
#BASE_DIR = os.path.realpath(os.path.dirname(__file__))

# Some config width height settings
canvas_width = 640
canvas_height = 480

# Create a window
window = Tk()
# Set the window title
window.wm_title("Sine Wave")

# Put a canvas on the window
canvas = Canvas(window, width=canvas_width, height=canvas_height, bg="#000000")
canvas.pack()

# Create a image, this acts as the canvas
img = PhotoImage(width=canvas_width, height=canvas_height)

# Put the image on the canvas
canvas.create_image((canvas_width/2, canvas_height/2), image=img, state="normal")


def sine_wave_anim():
	# Update sine wave
	frequency = 4
	amplitude = 50 # in px
	speed = 1

	# We create a blank area for what where we are going to draw
	color_table = [["#000000" for x in range(0, canvas_width)] for y in range(0, amplitude*2)]

	# And draw on that area
	for x in range(0, canvas_width):
		y = int(amplitude + amplitude*math.sin(frequency*((float(x)/canvas_width)*(2*math.pi) + (speed*time.time()))))
		color_table[y][x] = "#ffff00"

		# Don't individually put pixels as tkinter sucks at this
		#img.put("#ffff00", (x, y))

	# Then batch put it on the canvas
	# tkinter is extremely inefficient doing it one by one
	img.put(''.join("{" + (" ".join(str(color) for color in row)) + "} " for row in color_table), (0, int(canvas_height/2 - amplitude)))

	# Debug the color_table
	#with open(os.path.join(BASE_DIR, 'output.txt'), "w+") as text_file:
	#	text_file.write(''.join("{" + (" ".join(str(color) for color in row)) + "} " for row in color_table))

	# Continue the animation as fast as possible. A value of 0 (milliseconds), blocks everything.
	window.after(1, sine_wave_anim)


# Start off the anim
sine_wave_anim()
mainloop()

CCLK to JTAG Clock: Bit File Programming Error Fix

Thu, 21 Nov 2013 00:00:00 GMT

If you are running into the following error (Adept, or other programmer), here is how to fix it in Xilinx.

I came across this issue when using my Basys 2 and trying to load a bit file with Digilent's Adept programmer. It is only a compatibility issue with the bit file and FPGA board.

Startup clock for this file is'CCLK' instead of 'JTAG CLK'. Problems will likely occur.
Associate config file with device anyway?

In the Processes pane, select Generate Programming File
Then go to Process -> Process Properties -> Startup Options -> FPGA Start-Up Clock and change it to JTAG CLK.
Click, OK. Then re-generate the programming file and program your board.

Coherent UI Getting Started

Mon, 18 Nov 2013 00:00:00 GMT

Coherent UI developed by Coherent Labs is a fully featured GUI system for any Unity (or .NET) game that utilizes the power of HTML, CSS, and Javascript. Use any bleeding edge HTML5, CSS3 features that run on WebKit and any JavaScript libraries you need. It is literally as easy as making a web page on Chrome. It also utilizes the WebKit debugger (just like Chrome) so it is easy find the root cause of any problem.

The video explains the whole process but this blog post contains some nice references (see video description for timestamps).

Play video

Notes:

Only works with Unity Pro
- This is because Coherent UI is a Plugin which means it is written in native code (C, C++, Objective-C, etc). Plugins are only supported by Unity Pro. See this documentation. Also note that Plugins do not work in the web player.
There is a evaluation/developer version that they can send you. Same but has a watermark

Setting it up:

Import the Coherent Package by going to Assets -> Import Package -> Custom Package.
Install Coherent by going to Assets -> Coherent UI -> Install Coherent UI (not necessary in newer versions)
Set the folder where all your UI files will reside: Edit -> Project Settings -> Cohere UI -> Select UI Folder
Drag a CoherentUIView Script onto your Camera (Standard Assets -> Scripts -> CoherentUI -> CoherentUIView)
On the CoherentUIView, enable Is Transparent so that we can see the game.
Also enable Enable Binding Attribute so we can talk between JavaScript and Unity. In Coherent 1.6+, this is now called Enable [CoherentMethodAttribute] under the Scripting section on the CoherentUIView.
To clarify, use Automatic binding (this is if you are looking at the docs)
In newer versions of Coherent (at least 1.6 and up) you need to add couiView.ReceivesInput = true; in code to have input forwarded on desktop.

Make a C# Hud script and also drag it onto the camera. You can use the code below as your base:

using UnityEngine;
using System.Collections;
using Coherent.UI.Binding;

public class HUD : MonoBehaviour {
  private CoherentUIView m_View;

  void Start () {
    m_View = GetComponent<CoherentUIView>();
  }
}

Calling a (GUI) JavaScript function with (Unity) C#:

In Unity (C#):

m_View.View.TriggerEvent("jsEventExample", arg1, arg2, arg3);

Part of your GUI JavaScript (JS):

function BoundFunctionInJavaScript() {
  console.log(arguments[0] + arguments[1] + arguments[2]);
}

$(document).ready(function () {
  // Bind event “jsEventExample” to a js function
  engine.on('jsEventExample', BoundFunctionInJavaScript, this);
});

Calling a (Unity) C# function in (GUI) JavaScript:

In Unity (C#):

[Coherent.UI.CoherentMethod("FunctionInUnity")]
public string FunctionInUnity(float arg1, float arg2, float arg3)
{
	// Returns sum of arguments supplied
	return arg1 + arg2 + arg3;
}

Part of your GUI JavaScript (JS):

// Calls a function in Unity called “functionInUnity” with 3 arguments
// Get return data via arguments[0]
engine.call('FunctionInUnity', arg1, arg2, arg3).then(function () {
  console.log(arguments[0]);
});

Apache Guide (Basic)

Fri, 15 Nov 2013 00:00:00 GMT

Basic `<Directory>` tag explanation

Here is a sample script allowing all users:

<Directory "/var/www/static/">
	Options -Indexes
	Order deny,allow
	Allow from all
	AllowOverride All
	Require all granted
</Directory>

Options -Indexes: Removes the ability to view all files in directory if index html or php are not present
Order deny,allow: Applies the deny operations before the allow operations
AllowOverride All: Allows .htaccess to override settings in httpd.conf, etc
Require all granted: some mod_authz_core thing. Not completely sure.

Create password protected Directory or Location:

# PW protect URL
<Location "/secret-stuff">
	AuthType Basic
	AuthName "Private Directory"
	AuthUserFile /etc/httpd/.htpasswd
	Require valid-user
</Location>

# PW protect directory
<Directory "/path/to/directory">
	# ... Look above
</Directory>

AuthType Basic: Set the Basic authentication method
AuthName "Private Directory": Provide a name for the location. This shows up on the login modal/popup (optional)
AuthUserFile /etc/httpd/.htpasswd: Specify the pathname to the file that contains usernames and passwords. The usual filename to use is .htpasswd
Require valid-user: Specify that only users that exist in the file are allowed access

via this documentation

Create `.htpasswd` file:

Run htpasswd /etc/httpd/.htpasswd newuser
Type the password and re-type

Change password of existing user

Run htpasswd -p /etc/httpd/.htpasswd newuser
Type your new password and re-type

via this documentation

Find Apache User or Group:

This is the user with permissions on your machine that apache uses to carry out its functions. If you are getting permission denied in the error.log you probably need to add this group to the directory/file.

For Ubuntu the default user and group is www-data. You can find it in /etc/apache2/apache2.conf which will look like:

User ${APACHE_RUN_USER}
Group ${APACHE_RUN_GROUP}

${APACHE_RUN_USER} is a reference to environment variables set in /etc/apache2/envvars so just go look in there for APACHE_RUN_USER

via Lars Noodén on this thread

Basic Apache commands:

Command	Description
`sudo /etc/init.d/apache2 reload`	Restart the apache server

Django setup for WAMP

Thu, 14 Nov 2013 00:00:00 GMT

This is a basic guide to get Django running with WAMP. This tutorial was written with Python 2.7.5 and Django 1.5 in mind but applies for all versions.

You can use the Windows command prompt (cmd) whenever it says to run a command. I suggest using this command prompt alternative.

Basic Setup:

Install WAMP
Get mod_wsgi module for apache. I suggest getting it from here. Add mod_wsgi.sotoC:\wamp-2-4.64bit\bin\apache\Apache2.4.4\modules
Add the line in httpd.conf: LoadModule wsgi_module modules/mod_wsgi-ap24-py27.so
Install Python 2.7.5 because Python 3.3 does not have enough supported packages
Install virtualenv (python package) using this command: pip install virtualenv
Create a folder called www-src alongside your wamp www folder and navigate to it in cmd using this command: cd C:\wamp-2-4.64bit\www-src
Create a new environment called venv using this command: virtualenv venv
Navigate to C:\wamp-2-4.64bit\www-src\venv\Scripts and run the command activate to get your virtualenv running. You will notice (venv) in cmd.
Install django in your virtualenv from the website or use this command: pip install Django
Make a new django project using this command: python django-admin.py startproject mysite
Add the python home to the bottom of apaches's httpd.conf and point to your virtualenv: WSGIPythonHome "C:/wamp-2-4.64bit/www-src/venv"

Connect it to WAMP by adding this to apaches's httpd.conf:

WSGIScriptAlias /django-project "C:/wamp-2-4.64bit/www-src/django_project/django_project/wsgi.py"
WSGIPythonPath "C:/wamp-2-4.64bit/www-src/django_project/"

<Directory "C:/wamp-2-4.64bit/www-src/django_project/django_project/">
   <Files wsgi.py>
       Order deny,allow
       Require all granted
   </Files>
</Directory>

Put the following code at the top of settings.py:

import os
BASE_DIR = os.path.realpath(os.path.dirname(__file__))

In your django project settings.py set up static file stuff:

STATIC_ROOT = 'C:/wamp-2-4.64bit/www/static'
STATIC_URL = 'http://localhost/static/'
STATICFILES_DIRS = (
 os.path.join(BASE_DIR, 'static'),
)

Serve your static files. Add this to apache's httpd.conf:

Alias /static C:/wamp-2-4.64bit/www/static

<Directory "C:/wamp-2-4.64bit/www/static">
   Order deny,allow
   Allow from all
   Require all granted
</Directory>

Common Commands:

manage.py is in the base of your django projects directory
django-admin.py should be on your system path. Problems? See this documentation

Command	Description
`python manage.py collectstatic`	Gets all new or edited static files and puts it in the STATIC_ROOT to be served
`python manage.py syncdb`	Update the db structure to reflect your models
`python django-admin.py startproject mysite`	Start a django project to host your django apps
`python manage.py startapp polls`	Start a django app in your django project
`python manage.py changepassword username`	Change the password of the specified user. (Optionally, you can visit: `example.com/path-to-admin/password_change/` if you have the admin enabled)

Best Practices:

Use these windows binaries for many python packages provided by Christoph Gohlke

Welcome to the site!

Wed, 13 Nov 2013 00:00:00 GMT

I am happy to move on from "under construction" to this iteration of the site. The site is built with Python and Django, my new found go-to for making websites. The design and layout was made with much love by me.

This site currently boasts a blog, about page, and contact page. I plan to write about my latest developments, tutorials, and quick guides about the web dev, design, hardware, and more.

Feel free to use the contact page to get in touch with me or the about page to get to know me first.

EricEastwood.com

Paper backup and recovery guide for `pass` (Password Store) - SSH and GPG keys

pass (Password Store) - Emergency recovery instructions

Initial pass setup

Generate GPG key used to encrypt/decrypt data

Setup pass:

Add SSH key to clone password repo

Backup necessary keys on paper:

SSH key

GPG Key

GPG Public Key

GPG Secret key

Setting up a new computer (restore/recovery)

Dependencies on Linux (Manjaro)

Dependencies on macOS

Restore the SSH key from QR code

Restore the GPG secret key from QR code

Clone the password repo

Possible problems

Fix GPG permission errors

"Wrong password" when trying to decrypt password in Android Password Store app

Converting an old iMac into a standalone monitor

Figuring out which iMac you have

Teardown

Pinouts and references

Project schematics

Setting up a power button

LCD controller boards

M.NT68676.2A LCD controller board

Other board with HDMI and DisplayPort

Panel mount connectors

Building it back up

Final result

Fixing a "stuck" main rolling brush on a Eufy RoboVac 25c (Robot Vacuum)

Symptoms: "Rolling brush is stuck"

Teardown

Rolling brush assembly:

Main rolling brush motor:

Replacing the motor

Keywords

Gitter now speaks Matrix

Gitter Logo LED Sign Build Log

Parts (bill of materials)

Electronics

Physical/other

Sign construction

Painting

Electronics

The brains

UPS Battery bank powering off

LEDs and wiring

Cutting LED strips at a non-segment

Accidentally connecting MOSFET heatsinks

Power supply (PSU)

Heating and airflow

Code

Low frequency = High period bugs

Future plans

Our journey in switching to native Unicode emoji

Play sound and auto-reply when Google Hangouts text message received - Tasker Guide

Apps to install

Tasker Setup

Create the profile (listen for new hangouts message)

Create the task (play sounds and auto-reply)

Testing

Resources

Now with HTTPS everywhere

Journey to running `gitter-webapp` on Windows with Docker

Initial Attempt

The Docker for Windows Hyper-V trap

Kitematic

The working recipe

Prerequisites

Line ending CRLF trap

Start the containers

Get the app running

Command Quick Reference

Curves and Arcs: Quadratic, Cubic, Elliptical (SVG implementations)

tl;dr, I just need a library

Bezier Curves

`pass` (Password Store) - Emergency recovery instructions

Initial `pass` setup

Setup `pass`:

`M.NT68676.2A` LCD controller board

Line ending `CRLF` trap

Guide to Colored Text with `libuv`

Download `libuv`

Build `libuv`

`main.cpp`

`cccout` Code

`TextureTilingController.cs`

`ProceduralPlane.cs`

`GroundController.cs`