Programming Ponderings: 2016

Friday, November 25, 2016

Arduino Joystick Library - Version 2.0

Introduction

Since I released the original Arduino Joystick Library (see http://mheironimus.blogspot.com/2015/11/arduino-joystick-library.html or http://www.instructables.com/id/Arduino-LeonardoMicro-as-Game-ControllerJoystick/ for more details) I have received numerous requests for enhancements. Most of these requests fall into the following two categories:

Increase the precision of the axes.
Make a version with only a specified set of features.

To accommodate these requests (and a few others) I have release Version 2.0 of the Arduino Joystick Library.

Out of the box the Arduino Leonardo and the Arduino Micro appear to the host computer as a generic keyboard and mouse. This article discusses how the Arduino Leonardo and the Arduino Micro can also appear as one or more generic Game Controllers or Joysticks. The Arduino Joystick Library Version 2.0 can be used with Arduino IDE 1.6.6 (or above) to add one or more joysticks (or gamepads) to the list of HID devices an Arduino Leonardo or Arduino Micro (or any Arduino clone that is based on the ATmega32u4) can support. This will not work with Arduino IDE 1.6.5 (or below) or with non-32u4 based Arduino devices (e.g. Arduino UNO, Arduino MEGA, etc.).

Features

The joystick or gamepad can have the following features:

Buttons (default: 32)
Up to 2 Hat Switches
X, Y, and/or Z Axis (up to 16-bit precision)
X, Y, and/or Z Axis Rotation (up to 16-bit precision)
Rudder (up to 16-bit precision)
Throttle (up to 16-bit precision)
Accelerator (up to 16-bit precision)
Brake (up to 16-bit precision)
Steering (up to 16-bit precision)

These features are configured using the Joystick_ class’s constructor.

Installation

The latest build of Version 2.0 of the Arduino Joystick Library can be downloaded from the following GitHub repository:
https://github.com/MHeironimus/ArduinoJoystickLibrary/tree/version-2.0

The library can also be downloaded directly using the following URL:
https://github.com/MHeironimus/ArduinoJoystickLibrary/archive/version-2.0.zip

Copy the Joystick folder to the Arduino Libraries folder (typically located at %userprofile%\Documents\Arduino\libraries on Microsoft Windows machines). On Microsoft Windows machines, only, this can be done by executing deploy.bat. The library should now appear in the Arduino IDE list of libraries.

Included Examples

The example Arduino sketch files listed below are included in this library. These will appear in the Arduino Example menu when the Arduino Joystick Library is installed.

Example	Description
JoystickTest	Simple test of the Joystick library. It exercises many of the Joystick library’s functions when pin A0 is grounded.
MultipleJoystickTest	Creates 4 Joysticks using the library and exercises the first 16 buttons, the X axis, and the Y axis of each joystick when pin A0 is grounded.
JoystickButton	Creates a Joystick and maps pin 9 to button 0 of the joystick, pin 10 to button 1, pin 11 to button 2, and pin 12 to button 3.
JoystickKeyboard	Creates a Joystick and a Keyboard. Maps pin 9 to Joystick Button 0, pin 10 to Joystick Button 1, pin 11 to Keyboard key 1, and pin 12 to Keyboard key 2.
GamepadExample	Creates a simple Gamepad with an Up, Down, Left, Right, and Fire button.
DrivingControllerTest	Creates a Driving Controller and tests 4 buttons, the Steering, Brake, and Accelerator when pin A0 is grounded.
FlightControllerTest	Creates a Flight Controller and tests 32 buttons, the X and Y axis, the Throttle, and the Rudder when pin A0 is grounded.
HatSwitchTest	Creates a joystick with two hat switches. Grounding pins 4 - 11 cause the hat switches to change position.

Running the JoystickTest Example

The JoystickTest example sketch is included with the library. I recommend using this example to verify everything is working properly before beginning to write your own sketch files. Load, compile, and upload this example sketch file to an Arduino Leonardo or Micro using the Arduino IDE (version 1.6.6 or above).

Once you have uploaded the JoystickTest sketch file to the Arduino Leonardo or Micro, perform the following steps to verify everything is working properly. Note: the following steps are for Windows 10. If you have a different version of Windows or a different operating system, these steps may differ. Open the “Devices and Printers” window. This can be done by clicking the Start menu or pressing the Windows Key and typing “Devices and Printers”.

The Arduino Leonardo or Arduino Micro should appear in the list of devices.

Right mouse click on the Arduino Leonardo or Arduino Micro to display the settings menu.

Select “Game controller settings” to get to the “Game Controllers” dialog.

The Arduino Leonardo or Micro should appear in the list of installed game controllers. Select the Arduino Leonardo or Micro and click the Properties button to display the game controller test dialog.

While this dialog has focus, ground pin A0 on the Arduino to activate the test script. The test script will test the game controller functionality in the following order:

32 buttons
throttle and rudder
X and Y Axis
Z Axis
2 Hat Switches
X, Y, and Z Axis Rotation

Simple Gamepad Example

Once the Arduino Leonardo or Micro has been tested using the JoystickTest example, I suggest making a simple gamepad controller. This controller will have five buttons: up, down, left, right, and fire.

Connecting the Buttons

Connect one end of each button to the ground pin. Connect the other end of each button as indicated below:

Arduino Pin	Description
2	Up
3	Right
4	Down
5	Left
6	Fire

Sketch File

Upload the GamepadExample example sketch file to the Arduino Leonardo or Micro. This example is included with the Arduino Joystick Library.

Test

Open the game controller properties or use the joystick testing application of your choice to test the behavior of your gamepad.

Joystick Library API

The complete documentation for the Arduino Joystick Library can be found at https://github.com/MHeironimus/ArduinoJoystickLibrary/tree/version-2.0.

Tuesday, August 16, 2016

Set Color of HTML INPUT's Placeholder Text

All INPUT Elements

It is possible to set the text color of an HTML INPUT element's placeholder text using the following browser-specific css:

/* WebKit, Blink, Microsoft Edge, Google Chrome */
::-webkit-input-placeholder { 
    color:    red;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder { 
    color:    red;
    opacity:  1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder { 
    color:    red;
    opacity:  1;
}
/* Micosoft Internet Explorer 10+ */
:-ms-input-placeholder { 
  color:    red;
}

Specific INPUT Elements

If you want to change the placeholder text color of just a single element, you can add the appropriate CSS selector to the beginning of each CSS vendor prefix. For example, if you want to only change the placeholder text color of the INPUT element with an id of greenPlaceholder, you would use the following css:

/* WebKit, Blink, Microsoft Edge, Google Chrome */
#greenPlaceholder::-webkit-input-placeholder { 
    color:    green;
}
/* Mozilla Firefox 4 to 18 */
#greenPlaceholder:-moz-placeholder { 
    color:    green;
    opacity:  1;
}
/* Mozilla Firefox 19+ */
#greenPlaceholder::-moz-placeholder { 
    color:    green;
    opacity:  1;
}
/* Micosoft Internet Explorer 10+ */
#greenPlaceholder:-ms-input-placeholder { 
  color:    green;
}

Notes

If you do not specify the opacity setting on the Firefox browser, the text color will be lighter than the color you specify (e.g. red looks more like pink).
Do not combine all of the CSS statements into one statement (e.g. ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {color: red;}). If a browser does not recognize a selector, it invalidates the entire line of selectors.

Example

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>INPUT Placehold Text Example</title>
  <meta name="description" content="An example page showing how to set the HTML INPUT element's placeholder text color.'">
  <meta name="author" content="Matthew Heironimus">

  <style>
      body {
          font-family: Verdana, Arial, Sans-serif;
          font-size: 14pt;
      }
      label {
          display: inline-block;
          width: 250px;
      }
      input {
          font-size: 14pt;
      }
      div {
          margin-bottom: 6px;
      }

      /* WebKit, Blink, Microsoft Edge, Google Chrome */
      ::-webkit-input-placeholder { 
          color:    red;
      }
      /* Mozilla Firefox 4 to 18 */
      :-moz-placeholder { 
          color:    red;
          opacity:  1;
      }
      /* Mozilla Firefox 19+ */
      ::-moz-placeholder { 
          color:    red;
          opacity:  1;
      }
      /* Micosoft Internet Explorer 10+ */
      :-ms-input-placeholder { 
        color:    red;
      }      

      /* WebKit, Blink, Microsoft Edge, Google Chrome */
      #greenPlaceholder::-webkit-input-placeholder { 
          color:    green;
      }
      /* Mozilla Firefox 4 to 18 */
      #greenPlaceholder:-moz-placeholder { 
          color:    green;
          opacity:  1;
      }
      /* Mozilla Firefox 19+ */
      #greenPlaceholder::-moz-placeholder { 
          color:    green;
          opacity:  1;
      }
      /* Micosoft Internet Explorer 10+ */
      #greenPlaceholder:-ms-input-placeholder { 
        color:    green;
      }      

  </style>

</head>
    <body>
        <div>
            <label for="redPlaceholder">Red Placeholder Text:</label>
            <input id="redPlaceholder" type="text" placeholder="This should be red" />
        </div>
        <div>
            <label for="greenPlaceholder">Green Placeholder Text:</label>
            <input id="greenPlaceholder" type="text" placeholder="This should be green" />
        </div>
    </body>
</html>

Tuesday, May 03, 2016

Node.js Hosting – Windows vs. Linux – Case Sensitivity

The Problem

I recently worked on a Node.js project were we were doing our development on Windows 7 machines, but the actual hosting was being done with Cloud Foundry (running Linux). This website contained a number of graphical images, which appeared correctly on our Windows 7 development machines, but when we deployed our application to Cloud Foundry, a number of the images would not appear. The cause for this discrepancy between environments was Linux is a case sensitive operating system, but Windows is not case sensitive.

The Quick Solution

To resolve this issue we went through our code and verify the case of the filenames matched any references to those files in our source code.

Preventing the Issue

We wanted to prevent an issue like this from happening again, so we decided to institute a naming convention for all of our image files. In our case we decided to make them all lower case. To enforce this convention we used the gulp-check-file-naming-convention (see https://github.com/HAKASHUN/gulp-check-file-naming-convention for more details) gulp plugin by HAKASHUN.

The following is a simple gulp example showing how this plugin can be used:

const gulp = require('gulp');
const fileNamingConventionChecker = require("gulp-check-file-naming-convention");

gulp.task('default', function() {
    gulp.src("./public/**/*")
        .pipe(fileNamingConventionChecker({ caseName: 'lowerCase' }));
});

The error message that is generated by this gulp plugin will look something like the following:

[08:27:59] Using gulpfile ~\Source\git\app\gulpfile.js
[08:27:59] Starting 'default'...
[08:27:59] Finished 'default' after 11 ms

events.js:160
      throw er; // Unhandled 'error' event
      ^
 Error: Invalid file name at ←[31mC:\Users\NAME\Source\git\app\public
\img\SquareProfile.jpg←[39m :
 > ←[32msquareprofile.jpg←[39m is valid.

Thursday, March 03, 2016

Remote Desktop & Remote Control Raspberry Pi

Introduction

This article discusses how to log into a Raspberry Pi Remote Desktop from a Windows machine and how to Remote Control a Raspberry Pi from a Windows machine.

Remote Desktop Raspberry Pi from Windows

Remote desktop allows you to log into a desktop (i.e. X-Windows session) on your Raspberry Pi. If you have the Raspberry Pi connected to a physical monitor, you will not be logging into that desktop, but a new desktop that will be dedicated to your remote desktop session. For instructions on how to remote control the Raspberry Pi from Windows, see the second half of the article.

Setup Raspberry Pi for Remote Desktop

Startup the Raspberry Pi.
Open a terminal prompt.
Enter the following command to install xrdp (http://www.xrdp.org/):
sudo apt-get install xrdp

You may be prompted for your password (the default password for the Raspberry Pi is “raspberry”).
Reboot the Raspberry Pi. The Remote Desktop Protocol server (xrdp sesman) should automatically start on reboot.
Get the IP address of the Raspberry Pi. This can be done by executing the following command from a terminal prompt:
ifconfig

Connect From Windows Machine

Start the Remote Desktop Connection application.
- On Windows 7 click Start, All Programs, Accessories, Remote Desktop Connection.
- On Windows 10 click Start and enter Remote Desktop Connection.
Enter the IP address of the Raspberry Pi in the “Remote Desktop Connection” dialog and click Connect.
When connecting you may see one or more of the following dialogs:
Once connected, a login dialog will be displayed.
Enter a username and password. The default Raspberry Pi username is pi and the default password is raspberry.
Once you are logged in, you should see the Raspberry Pi desktop.

Remote Control Raspberry Pi from Windows

Remote controlling allows you to control the currently active desktop (i.e. X-Windows session) on your Raspberry Pi. With this technique, you can control (e.g. manipulate the mouse & keyboard) the desktop that is shown on the physical monitor that is connected to the Raspberry Pi.

Setup Raspberry Pi for Remote Desktop

Startup the Raspberry Pi.
Open a terminal prompt.
Enter the following command to install x11vnc (http://www.karlrunge.com/x11vnc/):
sudo apt-get install x11vnc
Enter the following command to set the vnc password. This is the password users will need to enter to remote control the desktop.
x11vnc –storepasswd
You can test the x11vnc server by entering the following at a terminal prompt.
x11vnc –usepw
You should see a message like the following on the terminal.

Connect From Windows Machine

Install a VNC client. In this example I use TightVNC Viewer (http://www.tightvnc.com/download.php).
In the VNC client, enter the IP address of the Raspberry Pi followed by a “:” and the display number, which can be found terminal window running x11vnc (this will normally be a 0, but in our example above this is a 2).
Enter the password that was used when setting up x11vnc.
You should now be able to see and interact with the Raspberry Pi desktop.

Automatically Startup x11vnc on the Raspberry Pi

Create the directory ~/.config/autostart, if it does not already exist. This can be done using the following terminal command.
mkdir –p ~/.config/autostart
Create a text file in this directory, called xterm-autostart.desktop. You can create and edit this file with the following terminal command.
leafpad ~/.config/autostart/xterm-autostart.desktop
Put the following text into this file.

[Desktop Entry] Encoding=UTF-8 Name=x11vnc autostart Comment=Starts the x11vnc server to allow for remote VNC connections. Exec=x11vnc –forever -usepw
Reboot the Raspberry Pi.
Once the Raspberry Pi desktop appears, you should be able to remote control the Raspberry Pi using a VNC Client.