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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* 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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!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:

1
2
3
4
5
6
7
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.