But wouldn’t it be much more practical to do away with physical keys altogether? Nowadays, there are numerous ways to open a lock: Fingerprint scanners, facial recognition, NFC, numeric codes, dials – or, of course, brute force methods such as explosives and brute force. But if you are looking for an inexpensive, non-violent and simple solution, the keypad lock comes into focus.

Surprisingly, there are hardly any really good DIY solutions for hobbyists on the Internet. So I tackle it myself – my first keypad lock, which I simply call “Version 1”.

This might also be interesting for you: Do it yourself powerbank with voltage regulator and voltmeter

Construction of the housing

The initial focus is on the housing and the keypad holder. The first question that always arises is: How big should it be? The answer depends on several factors:

• Which components are required? Each component takes up space and influences the design.
• How much space do the components take up? A compact design is advantageous, but must not restrict functionality.
• What are the haptics and operability like? The keypad should be comfortable to use without being too cramped or impractical.

These considerations form the basis for the housing design – because good planning saves time and nerves later on.

What will be inside the housing?

The central component is, of course, the membrane keypad (1.0.1). It has the following dimensions:

• Width: 69 mm
• Length: 76 mm
• Thickness: 0.6 mm (or 0.95 mm above the keys)

The keypad also has a ribbon cable with DuPont sockets for connection to a microcontroller. The cable itself is 85 mm long and 17.78 mm wide.

The control center of the lock is the Nano (1.0.2). To accommodate it neatly in the housing and to make the cable connections as convenient as possible, I opted for a Nano expansion board with screw terminals (1.0.4).

A hollow socket (5.5 x 2.1 mm, 1.0.4) is used for the emergency power supply so that the lock continues to function even in the event of a power failure.

The pin and socket connectors (1.1.1) serve as the central power distribution and are later soldered to the breadboard (1.1.2). Jumper cables (1.1.3) are used to ensure that all components are reliably connected. Depending on the position of the components, different lengths are required – in this case 10 cm and 20 cm.

For the status display of the keypad lock, I use Neo Pixel addressable LEDs of type WS2812b (1.2.1). These can be used to control different colors and effects to visually display the current status of the lock.

I will go into the positioning of the screws in more detail later.

Now that the components have been determined, I can think about the size of the housing. This is not only determined by the installed elements, but above all by the usability and feel.

We encounter keypads every day – on ATMs, telephones, door lock systems and, of course, smartphones. The decision for the depth of the housing is based on a positive memory of my penultimate workplace: the keypad lock at the entrance was raised and easily accessible from both sides. You could operate it comfortably with your right or left thumb, and the rounded corners provided a pleasant feel when you put your hand on it.

Keypad lock Housing design

This results in a depth of 45 mm (2.0.3). For better ergonomics, the corners have a radius of 15 mm (R15) and the surrounding upper edges have a radius of 10 mm (R10). I am aware that these roundings slightly reduce the interior space, but the comfort and appearance outweigh this disadvantage.

The width and height of the housing are determined by the components to be installed. The space for the cabling must also be taken into account. Particularly important: When installed, the Nano should still be accessible with a standard USB mini cable, for example to be able to install new programs.

Mounting and fastening

• Four M3 threads (2.0.1) on the inside allow the support plate to be screwed on.
• In addition, there are four mounting points with Ø4.2 mm holes for attaching the housing to a door, cover or wall.
• The housing has a window (2.0.2) measuring 60 × 67 mm, which is intended for the keypad. This is later filled with the carrier plate.
• Retaining columns with M2 threads and the opening for the hollow socket (1.0.4) are marked with orange ellipses (2.0.1, 2.0.3).
• The next picture (2.0.4) shows the external dimensions: 110 mm wide and 117 mm high.
• In addition, an aperture or slot 50 mm long is required for the LED cover (2.0.5).

For the wall thickness of the housing, I have provided 2 mm throughout – stable enough for the intended purpose.

With the housing construction completed, we can now continue with the other components.

The support plate – the central mounting element

The next important component is the carrier plate. The name is self-explanatory: With the exception of the hollow bushing, all components are attached here. This system offers several advantages over direct mounting in the housing:

Easy mounting outside the housing – More space and better handling when wiring.
Modularity – different carrier plates with different components are possible.
Simple enclosure design – The enclosure design remains simpler and more flexible.
Easy replacement – Components can be replaced or extended more easily.

But there is another decisive advantage for the keypad lock in particular:

The keypad is glued directly into a designated recess in the carrier plate (2.1.1). The carrier plate and keypad are then inserted into the housing from behind and fixed in place with M3 screws. The frame of the window in the housing completely covers the edge and the cables.

Safety aspect: The window is dimensioned in such a way that the edge and the cables remain concealed, but the buttons are fully visible and operable. This means that the keypad cannot be removed without destroying it – an important protective mechanism against tampering.

Fastening the components to the carrier plate

There are various mounting options for the electronics on the back (2.1.2) of the carrier plate:

M3 thread for the nano adapter (2.1.3) – As nano adapters on the Internet often have different hole spacings, there is an additional fastening thread on the right-hand side (2.1.2) for flexible adjustment. If the holes still do not fit exactly, they can be carefully widened – but without damaging the adapter’s conductor tracks.

M2 thread for the Nano R3 ATMEGA168P (2.1.4) – An alternative, cost-effective solution instead of a Nano R3 with adapter.

M2 thread for the breadboard (20×80 mm, 1.1.2, 2.1.5) – This is used for power distribution and connects all power supply lines neatly at a central point.

The LED cover and its attachment

The LED cover (2.2.1) has been designed so that it is clicked into the slot (2.0.5) of the housing from the rear. The radius on the outside of the LED cover corresponds to the housing radius, creating a smooth transition and allowing the cover to blend in seamlessly.

I don’t need to redesign the mounting bridge (front 2.2.2, back 2.2.3) as I have already used it successfully in other projects.

Mounting the LEDs

Now it remains to mount the three WS2812b LEDs (1.2.1). I will explain why exactly three LEDs are needed later in the programming section of this article.

The development of the LED holder (SMD50, 2.2.4) was more complex than expected. Of course, you could simply glue, clamp or hot glue the LED strips – but that seemed too unprofessional to me.

I therefore invested a lot of time and effort in designing a perfect holder. The result can be seen in picture 2.2.5.

Further information:

For details on the construction, there is a separate article on NerdCorner.

3D printing of the components

Once the design has been completed, the parts must now be printed.

Material selection for the individual components:

• Housing (3.0.1): Printed with ABS filament, consisting of front and back.
• Carrier plate (3.0.2): made from PLA filament.
• LED cover (3.0.3): produced upright in the printer, printed with PLA+ in the color “natural”.
• LED terminals (3.0.4): also made of PLA+, manufactured in the same process as the LED cover.
• Bridge for the hollow socket: printed from PLA filament, analogous to the carrier plate.

With these materials, the mechanical and thermal properties of the components are optimally matched to their respective applications.

Post-processing of the components

After printing, both the printed parts and some purchased parts need to be processed.

1⃣ Cleaning the 3D printed parts

• Removal of support material and protruding print residues.

2⃣ Cutting the thread
Housing (4.0.1):

• Four M3 threads (Attention: blind holes! Proceed carefully when cutting so as not to push the base outwards).
• Two M2 threads (4.0.2).
• Support plate (4.0.3):
  • The M2 threads marked in blue must be cut in any case.
  • When using a nano adapter with screw terminals (2.1.4), the M2 threads marked in red must also be cut.

3⃣ Shortening the perforated grid plate

• The perforated grid plate (4.0.4) must be shortened to 8 to a maximum of 10 perforated grids.
  Important: The mounting holes should be retained (see 4.0.5).

4⃣ Shortening the pin header

• Shorten the pin header to eight pins using a side cutter (4.0.6).

Soldering the components

Now it’s time to solder the parts. First we concentrate on the power supply board:

1⃣ Soldering the power supply board

• Perforated grid plate (4.0.5): Soldering the base strip (1.1.1) and the pin strip (4.0.6).
• Pin strip (4.1.2): A two-row pin and skirting board is soldered on. We connect the two rows on the back with solder.
• The rows differ in male and female as well as in the colors: red for plus and black for minus. This makes it easier to connect the power supply.

2⃣ Soldering the WS2812B LEDs

• Soldering the connections of the WS2812B LED strip (4.1.3).

3⃣ Soldering the hollow socket

• Finally, the hollow socket (1.0.4) is soldered (4.1.4).
• Detailed instructions on soldering the hollow socket can be found in a separate article. It is important to know the exact procedure in order to avoid mistakes.

Assembling the keypad lock

1⃣ Installing the LED cover

• First click the LED cover (2.2.1) into the housing.
• Glue the LED cover in the intended places as shown in pictures 5.0.1 and 5.0.2.

2⃣ Plug in the Nano R3

• Insert the Nano R3 (1.0.2) into the Nano adapter (5.0.3) of your choice.

3⃣ Installing the Nano adapter

• Screw the Nano adapter (1.0.3) with the inserted Nano R3 (1.0.2) to the back of the carrier plate (4.0.3).
• Use the M3 threads on the carrier plate and the screws (1.2.2), as shown in pictures 5.0.4 and 5.0.5.

4⃣ Attaching the power supply

• Attach the power supply (4.1.2) to the back of the carrier plate (4.0.3) using the screws (1.2.4).
• See figure 5.0.6.

Mounting the keypad on the support plate

1⃣ Selecting the screw length

• Make sure to select the correct screw length as shown in Figure 5.1.1.
• Screws must not be too long, otherwise they will protrude from the adhesive surface when the keypad is attached and the keypad cannot be glued on cleanly.

2⃣ Preparing the keypad

• Remove the protective film from the keypad (1.0.1).
• To remove the film, use a carpet knife to carefully get between the adhesive layer and the protective film at one corner (see 5.1.2).
• Once you have reached the corner, peel off the entire protective film (see 5.1.3).

3⃣ Stick on the keypad

• Insert the keypad (1.0.1) into the recess on the front of the carrier plate (2.1.1) and press it firmly into place.
• The keypad must be completely recessed and must not protrude over the edge (see 5.1.4).
• Make sure that the cables are also in the recess (see 5.1.5).

Wiring the keypad to the Arduino Nano R3

1⃣ Using jumper cables

• Jumper cables (10 cm long, male-male) are used to connect the keypad to the Arduino Nano R3 (see 5.2.1).

2⃣ Connecting the cables

• Make sure that you do not twist the cables, but only bend them.
• The left cable is connected to D2 of the Arduino and the right cable to D8.
• There are seven cables in total, which occupy the connections D2 to D8 (see 5.2.3).

3⃣ Use pin headers

• As the pitch of the Arduino adapter and the keypad do not match, you can use pin strips to make the connection.

4⃣ Fastening the LED terminals

• The clips (3.0.4) for the WS2812B LEDs are clicked onto the LEDs.
• It is best to do this on a flat surface (see 5.2.4).

5⃣ Attaching the LED strip

• The WS2812B strip is now pushed onto the center of the top of the carrier plate (see 5.2.5 Front and 5.2.6 Rear).

Assembling the carrier plate and housing

1⃣ Screwing the support plate to the housing (5.3.1)

• Make sure that you use M3 screws that are not too long. Otherwise, they could push a bump into the front of the housing when tightened.
• The alignment of the carrier plate in the housing is important: the LED strip should be on the same side as the LED cover.
• After screwing, the keypad should be lightly pressed against the inner frame of the housing (see 5.3.2 and 5.3.3).

2⃣ Pre-assembly of the hollow socket for the emergency power supply

• For the emergency power supply, you must pre-assemble the hollow socket and screw it to the housing.
• The hollow socket with bridge and nut is shown in Figure 5.3.4.
• Insert the hollow bush into the round recess of the bridge.
• Lock the hollow bushing with the nut on the other side of the bridge.

3⃣ Fastening the hollow bush in the housing

• The hollow bush with the bridge is then screwed to the retaining pillars provided in the housing using M2 screws (see 5.3.5 and 5.3.6).

Connecting the cables and completing the power supply

1⃣ Connecting the control cable for the servo motor

• The control cable for the servo motor is connected to pin D9 of the Nano R3 (5.4.1).

2⃣ Connecting the power supply for the Nano R3

• The power supply for the Nano R3 is connected to the GND pin and the VIN pin of the Nano R3 (5.4.2).

3⃣ Connecting the control cable for the WS2812B

• The control cable for the WS2812B LED strip is connected to pin D10 of the Nano R3 (5.4.3).

4⃣ Wiring of the power distributor

• All remaining cables must be connected to the power distributor:
  • Servo motor connection
  • Arduino Nano R3
  • WS2812B LED strip
  • Hollow socket All connections are made with plus and minus (see 5.4.4 and 5.4.5).

5⃣ Using different colors and connection types for the wiring

• It helps to use different cable colors:
  • Red for plus
  • Black for minus
• The power distributor has different connection types:
  • Male for plus
  • Female for minus

6⃣ Note on the hollow socket

• There is a separate article on wiring and connecting the hollow socket, which you should definitely read

7⃣ Attaching the connector housings for the servo motor and power supply

• A three-pin plug is required for the servo motor connection.
• A two-pin plug is required for the external power supply.

Further details on the construction process and the download links for connector housings can be found here.

Figure 5.5.1 shows the entire cabling again.

Arduino code

After the intensive work with the hardware and the 3D printer, we now turn our attention to the strategy and programming of the keypad lock. Why is a strategy important for a keypad lock? A well thought-out sequence of actions – i.e. the order in which the keypad lock is operated, which events result from certain actions and which goal is being pursued – forms the basis for functional control. This guideline is therefore also crucial for programming the keypad lock: it determines what should happen when and which hardware is used. The aim is to create a logical and comprehensible sequence of events, which in this case can also be understood visually.

Example 1:
The keypad lock should display how many digits have already been entered. (See Figures 7.0.1 to 7.0.4)

Example 2:
The keypad lock should indicate whether the password entered is correct after pressing a specific key. (See figure 7.0.5)

Example 3:
The keypad lock should indicate if something has been entered incorrectly, such as an incorrect password or too many keystrokes. (See figure 7.0.8)

Example 4:
The keypad lock should display the current status. (See Figures 7.0.5 to 7.0.7)

Now let’s move on to programming the keypad lock, which differs from conventional programs on the Internet in a few respects. To begin with, the three necessary libraries are included: <Keypad.h> for the keypad, <Adafruit_NeoPixel.h> for the WS2812B LEDs and <Servo.h> for the servo motor (Figure 6.0.1). In the following section, the pin assignment for the LEDs is defined, whereby pin D10 is used and the number of LEDs and the color scheme are determined. The brightness of the LEDs is also defined – this value can be adjusted depending on the location, with higher values providing more brightness (values from 0 to 255). (See figure 6.0.2) The third section is dedicated to the description of the keypad used, including the number of rows and columns and the assignment of the buttons. (See figure 6.0.3).

In the fourth section, the servomotor is configured by defining the degree range it can cover and the speed at which it should move (see Figure 6.1.1). This is followed by the section for entering the password. Here you have the option of changing the default password 1516 to set a new four-digit password. The program will only work correctly if a four-digit code is entered. In this section, the control pin for the servo motor is also set to D9 (see Figure 6.1.2). The following section is dedicated to defining the colors for the various events.

The last two sections explain the behavior of the keypad lock during certain actions. This description is of course only a rough overview of the program. In a future article for keypad lock version 2, we will explain the program in more detail and more comprehensively.

//==========================================Librarys==============================================================
#include <Keypad.h>
#include <Adafruit_NeoPixel.h>
#include <Servo.h>
//========================================Neo-Pixel==============================================================
#define LED_PIN 10
#define LED_COUNT 3
Adafruit_NeoPixel strip(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800);
int led_strength = 75; //controlls Brighttness (0 - 255)
//========================================Keypad=================================================================
const byte rows = 4;
const byte cols = 3;
char keys[rows][cols] = {
 {'1', '2', '3'},
 {'4', '5', '6'},
 {'7', '8', '9'},
 {'*', '0', '#'}
};
byte rowPins[rows] = {8, 7, 6, 5};
byte colPins[cols] = {4, 3, 2};
Keypad keypad = Keypad( makeKeymap(keys), rowPins, colPins, rows, cols );
//=========================================Servo============================================================
Servo lock;
int pos = 0;
int servo_angle = 180;
int servo_speed = 15;
//======================================Password===============================================================
String input;
const String password = "1516"; //Set Password
int n = 1;

 

void setup() {
 input.reserve(password.length() +2);
 strip.begin();
 strip.show();
 lock.attach(9); //motor pin
}

void loop() {
//-------------------colours------------------------------------------------------------------- 
 uint32_t blue = strip.Color(0, 0, led_strength);
 uint32_t green = strip.Color(0, led_strength, 0);
 uint32_t red = strip.Color(led_strength, 0, 0);
 uint32_t orange = strip.Color(led_strength, led_strength/2, 0);

 char key = keypad.getKey();

if (key != NO_KEY) {
//-------------------------End conditions------------------------------------------------------
 if (key == '#') {
 if (input == password) {
 //unlock
 strip.clear();
 strip.fill(green, 0, LED_COUNT);
 strip.show();
 for (pos = 0; pos <= servo_angle; pos += 1) {
 lock.write(pos);
 delay(servo_speed );
 }
 while (1 == 1)
 { char key = keypad.getKey();
 strip.clear();
 strip.fill(orange, 0, LED_COUNT);
 strip.show();
 if (key == '*')
 {
 strip.clear();
 strip.fill(green, 0, LED_COUNT);
 strip.show();
 break;
 }
 }

 for (pos = servo_angle; pos >= 0; pos -= 1) {
 lock.write(pos);
 delay(servo_speed );
 }
 n = 1;
 input = "";
 delay (1000);
 strip.clear();
 strip.show();
 } else {
 //wrong password
 strip.clear();
 strip.fill(red, 0, LED_COUNT);
 strip.show();
 n = 1;
 input = "";
 delay (1000);
 strip.clear();
 strip.show();
 }
 }
 else if (n == password.length() + 1) {
 //Input too long
 strip.clear();
 strip.fill(red, 0, LED_COUNT);
 strip.show();
 n = 1;
 input = "";
 delay (1000);
 strip.clear();
 strip.show();
 }
//----------------------------------Buttons------------------------------------------
 else {
 input += key;
 if (n == password.length() ) {
 strip.clear();
 strip.fill(blue, 0, LED_COUNT); 
 strip.show();
 n++;
 }
 else {

 strip.clear();
 strip.setPixelColor(n-1, blue);
 strip.show();
 n++;
 }
 }
 }

}

Function

Operating the keypad lock is very intuitive. As soon as the first button is pressed, the right-hand LED lights up blue (7.0.1). When the second button is pressed, the middle LED turns blue (7.0.2). After the third button is pressed, the left-hand LED lights up blue (7.0.3). Finally, with the fourth button, all three LEDs light up blue (7.0.4). When these three LEDs light up blue, the user knows that the # button must be pressed.

If the # button is pressed, the password is checked. If the password is correct, all three LEDs light up green at the same time and the servomotor is activated (7.0.5). The green light remains on as long as the servomotor has not yet reached its end position (open). As soon as the servomotor reaches the end position (open), the LEDs change from green to orange (7.0.6). The orange color remains until the user presses the * button.

After pressing the * button, the LEDs change back to green (7.0.7) and remain in this color until the servomotor has reached the end position (closed). If this is the case, the LEDs go out and the keypad lock is ready for new entries.

However, if the password is incorrect after pressing the # button in step 7.0.4, all three LEDs light up red (7.0.8). The red light is also displayed if more than four buttons, apart from the # button, are pressed.

Door mounting

Of course, this variant is not intended for use on an ordinary door, where you simply walk through and the door closes by itself. The reason for this is that the lock remains open until the * button is pressed. But how can you press the * button when you are on the other side of the keypad lock, behind the wall? A delay in the program could help, but who knows how long it takes to pass through the door and close it behind you? A much more sensible solution would be to implement an additional switch that is placed on the other side of the door. When pressed, this switch would lead directly to point 7.0.6 and open the lock so that the door can be opened from the inside without having to enter a password.

But that’s for the future. Now we come to mounting the keypad lock on a door. I have provided four holes on the back of the housing for this purpose. These holes have a recess on the inside for conventional hexagon nuts M4 DIN 934. The corresponding holes can be seen in Figure 8.0.1 (rear view) and Figure 8.0.2 (front view), whereby the housing is shown slightly transparent for better visualization. Installing the nuts is very simple: After ensuring that all support material has been removed, the nut is pressed into the recess provided from behind. Press-in nuts should not be used as they are unnecessarily expensive.

I have developed a drilling template for fixing to the wall or door (Fig. 8.0.3). This template contains a hole with a diameter of 4 mm at each of the four corners. The distance between the holes corresponds to the distance between the holes on the housing. The template can be easily fixed to the surface of the door, for example with adhesive tape (Fig. 8.0.4). This saves you the tedious task of marking out the drill holes and avoids errors.

Figure 8.1.1 shows the drilled mounting holes from the front, marked by magenta-colored circles. Thanks to the drilling template, these holes are the correct distance apart. If the position slips slightly during drilling or is not exactly correct, this is not a problem. In this case, you can simply drill the mounting holes slightly larger to align the keypad lock precisely when screwing it on. In addition, two holes can be seen in yellow circles in this picture, which are unfortunately slightly broken out at the edge. These holes are intended for the servo cable and the power supply. Once the holes had been drilled, I fitted the keypad lock and fed the cables through the holes provided on the back of the door (Fig. 8.1.2).

The entire assembly of the keypad lock is shown on the front side of the door in Image 8.2.1. If you are not satisfied with this mounting solution, don’t worry: As a final step, I have designed a back cover that allows the keypad lock to be mounted on a wall or frame (Image 8.2.2). To do this, simply place the housing of the keypad lock onto the back cover and secure it from behind using M4 countersunk screws (marked by magenta circles in Image 8.2.2). After that, the entire construction is mounted on the wall, for which two tabs with two holes each are available (yellow circles in Image 8.2.2).

It is also important to remember to add one or more openings in the housing for the servo and power supply cables. Additionally, the security risk should be considered, as an unauthorized person could potentially unscrew the keypad lock using the accessible screws.

Locking Mechanism

If you’re still missing a real locking mechanism that goes beyond just a servo connection, you can look forward to the “Locking Unit,” which is already in development and will be featured in future versions of the keypad lock.

The development of the keypad lock was an exciting yet challenging task. Some key features of VERSION 1 of the keypad lock are particularly noteworthy:

• Compatibility with various Arduino Nano models and adapters – Ensures flexibility in hardware selection.
• Visual feedback – Users are directly informed about number input and the status of the keypad lock.
• Emergency power supply via barrel jack – Guarantees reliable operation in case of power failures.
• Stable software – Developed to ensure reliable functionality.
• Optimized ergonomics for both left- and right-handed users – Designed for comfortable use by all users.

Files for Download

• Keypad lock housing

The post DIY keypad lock – 3D printing and code appeared first on Nerd Corner.

I often see blog articles where the HTML code is embedded in the Arduino file. You can do this for a mini demonstration, but it’s complete rubbish for everyday use. It is far too confusing and as soon as the project grows it is no longer usable.

The proper alternative is to set up a folder called “data” and store the web pages in this folder as html files. In addition, the styling is saved as a CSS file and functions can even be executed via a JavaScript file. So everything is 1:1 like on a normal web server!

This might also be interesting for you: WeMos D1 R2 first steps and Wifi integration

List of components

• Arduino IDE (development environment)
• WeMos D1 R2

The setup of the file system (officially SPIFFS) needs to be done once and is very easy:

(First you should have completed the basic setup from the first part!)

1. Download a copy of the file “ESP8266FS-0.2.0.zip” from GitHub and unzip it
2. Place the file esp8266fs.jar in the Arduino tool directory. The path looks like this: [home_dir]\Arduino\tools\ESP8266FS\tool\esp8266fs.jar (See picture) I had to create the path part tools\ESP8266FS\tool\ in the Arduino folder myself.
3. Restart the Arduino IDE.

That’s it already! You can now see the new item “ESP8266 Sketch Data Upload” in the Arduino IDE under Tools.

How can I use the new file system now?

1. Create an additional folder with the name “data” in your current WeMos project folder. As shown in the following image

2. Place the files you want to upload in the ‘data’ directory
3. In the Arduino IDE, select the WeMos in the ‘Tools’ menu and select a size for ‘Flash Size’
4. Close the dialogue box for the serial monitor!
5. Select the ‘ESP8266 Sketch Data Upload’ option from the ‘Tools’ menu.

As soon as the upload is complete, the message window of the Arduino IDE shows 100% upload.

WeMos example programme for switching the OnBoard LED on and off

Similar to the first part, the web server will control the OnBoard LED. The code from the first part also serves as the basis. The revised code looks like this:

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200); //Baudrate
  Serial.println("ESP starts");

  WiFi.begin("NerdCornerWiFi","NerdCornerPassword");


  Serial.print("Connecting...");

  while(WiFi.status()!=WL_CONNECTED){ //Loop which makes a point every 500ms until the connection process has finished

    delay(500);
    Serial.print(".");
  }
  Serial.println();

  Serial.print("Connected! IP-Address: ");
  Serial.println(WiFi.localIP()); //Displaying the IP Address

  if (MDNS.begin("nerd-corner")) {
    Serial.println("DNS started, available with: ");
    Serial.println("http://nerd-corner.local/");
  }

  server.serveStatic("/", SPIFFS, "/", "max-age=86400");
  SPIFFS.begin();

  server.onNotFound([](){ 
    server.send(404, "text/plain", "Landing page not found! Don't forget to name your landing page 'index.html'!");  
  });
 
  server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
    }
    server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

  server.begin();
  // initialize digital pin LED_BUILTIN as an output.
  pinMode(LED_BUILTIN, OUTPUT);
}

void loop() {
  server.handleClient();
  MDNS.update();

}

void switchLedOff(){ 
  digitalWrite(LED_BUILTIN, HIGH);   // turn the D1 LED off 
}

void switchLedOn(){ 
  digitalWrite(LED_BUILTIN, LOW);    // turn the LED on 
}

I would like to point out a few special features. For example, we have added the following:

server.serveStatic("/", SPIFFS, "/", "max-age=86400"); 
SPIFFS.begin();

Without these two lines, access to the files in the “data” folder would not be possible. Please note that the name “index.html” is set as the default for the landing page. However, you can change this if you really want to.

server.on("/led", HTTP_POST, []() {    
     
    const String ledState = server.arg("ledstate");
    if(ledState=="on"){
      switchLedOn();
    }
    else if(ledState=="off"){
      switchLedOff();
      }
      server.send(200, "text/json", "{\"result\":\"ok\"}");
  });

The “/led” endpoint receives the commands from the web server. If the command is “on”, the LED is switched on and if “off”, the LED is switched off.

Wemos website for switching the WeMos OnBoard LED on and off

The example website has a very simple structure. It primarily consists of 2 buttons for switching the LED on and off.

The folder structure of the website is very clearly organised. There is a main page with the name “index.html”. This name is common worldwide for the main pages and is also automatically recognised by WeMos. There is also a “CSS” folder for styling and a “JS” folder for functions.

We link the styles in the header area of the website. There is a standard bootstrap, which automatically makes everything a bit nicer, and a custom styles file with my own customisations. The functions of the website are also linked in the header area. I use the jQuery standard to send requests from the website to the WeMos. My own custom functions are in the “index.js”.

Please note that the jQuery file must be included BEFORE your own file, otherwise no jQuery commands can be used in your own code! The custom functions are then used by the buttons. The HTML code of the page looks as follows:

<!DOCTYPE html>
<html lang="en"></html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/custom-style.css" />
    <title>D1 Webserver</title>
  </head>
  <body>
    <h1>D1 Webserver with filesystem</h1>
    <p>
      This is an example for a WeMos Webserver with a filesystem. You can easily
      create webpages with html, css and js!
    </p>

    <h3>Example to turn on and off the built in LED</h3>
    <button class="button-style" onclick="changeLEDState('on')">Turn on</button>
    <button class="button-style" onclick="changeLEDState('off')">
      Turn off
    </button>

    <h3>Example to demo a JS function</h3>
    <button class="button-style" onclick="showAlert()">Show alert</button>
  </body>
</html>

Special attention is paid to the JavaScript function “changeLEDState(value)”

function changeLEDState(value) {
  $.post("/led", { ledstate: value });
}

Because jQuery is used for communication with the WeMos, a simple dollar sign with the corresponding request command is sufficient. A value is also sent with this POST request, which is either “on” or “off” to switch the LED on and off.

The web page can be downloaded as a zip file below.

Files to download

• Wemos example webserver to control OnBoard LED

The post WeMos D1 R2 – Host entire website with html, css & js appeared first on Nerd Corner.

This might also be interesting for you: Magnetic clamp for strong neodym magnets

Production of the LED strips

You also need to know how such LED STRIPS are manufactured, the misconception that the strips are fitted on an endless belt and cut as required is wrong. The strips are stretched 500mm long in a placement machine and fitted with the LEDs. The number of LEDs depends on how many LEDs are needed per metre. There are strips with 30/60/144 LEDs per metre. The 500mm strips are then soldered together at the ends to the required length.

Realisation of the SMD5050 bracket

As always, I first look for all available LED strips from my collection that contain an SMD5050. It was important to have all the variants from the different manufacturers. This way you can find the best possible middle way to apply the function (i.e. the clamping) to as many variants as possible.

The idea was not to glue the strip to the back, but to clamp the LEDs to the outer surfaces. Figure 1.0 shows some of the numerous variants for SMD5050

• 1.0.1 WS2812B strip with 30 LEDs per metre
• 1.0.2 WS2812B strip with 60 LEDs per metre
• 1.0.3 WS2812B strip with 144 LEDs per metre
• 1.0.4 Sk6812 strips with the same subdivisions as above
• 1.0.5 Cold white strip with 60 LEDs per metre

The next step is to measure and compare the outer dimensions of the SMD5050. As the name SMD5050 implies, the numbers 5050 stand for the mass of 5mm on the outer lines (5050 is equal to 5mm long and 5mm wide). To my astonishment, the SMDs are only a hundredth of a millimetre apart. This means that the deviations are marginal (2.0.1, 2.0.2) and negligible for the design.

The situation is different with the height of the LEDs, where the differences are somewhat more striking (2.0.3, 2.0.4 and 2.0.5). But the biggest difference lies in the soldering with more or less solder. The differences are now known and can be taken into account in the design.

The solder joints and external resistors cause the most problems. The solder joints are often very different, sometimes slightly thicker and sometimes protruding beyond the side edge. The resistors are also positioned in different places depending on the strip.

First I draw the retaining clip (3.0.1) to which the LED will later be attached. Next, I design the holding frame for the SMD5050, which will later be used to clamp the LED (3.0.2). In picture 3.0.3 I add so-called recesses. I measured these recesses in the frame for the various LED strips.

After these three main steps, I print the first prototype with my favourite material and favourite printer. After the first attempts to clamp the LED, I was very confident that it would work in the end. Of course, you have to keep an eye on the stability of the clamp when removing the material.

The development is based on my previous experience. It’s a balancing act between holding force, stability and printability. The number of printed prototypes, in this case fifteen, says only a little about the work that has been done. Fifteen attempts is rather few. I was lucky with the basic concept and that the idea was the right one.

In pictures 3.0.4 and 3.0.5 you can see the changes to 3.0.3 in the dimensions and shapes, such as the addition of bevelled edges.

Manufacturing the clamp in the 3D printer

The CAD development is now complete. The next step is the printing process. A number of factors need to be taken into account, such as the correct calibration of the 3D printer. If you print a housing with a lid on a poorly calibrated or uncalibrated 3D printer with the same settings and material, it will always fit together. The dimensions are not correct but the covers of the housing and lid are the same and therefore it still fits.

The situation is different when an externally produced component such as the SMD5050 comes into play. Then the dimensions must match within a certain tolerance range. If you don’t want to calibrate your 3D printer, you can adjust the dimensions using the slicer. Every slicer offers a so-called scaling function. The next factor is related to the size of the clamp, as the clamp is very small, the nozzle cooling must be set to 100%. Nozzle cooling is actually the wrong term, as it is not the nozzle that should be cooled, but the filament that emerges. With small components, the hot nozzle passes the workpiece again more quickly so that it cannot cool down properly. As a result, the filament runs and cannot hold the desired shape.

The printing direction should also not be underestimated. With our clamps, the printing direction should be sideways, i.e. printed horizontally (4.0.1).

Mounting the SMD5050 LED strip bracket

To mount the clip, it is advisable to place the individual LED or strip on a flat surface and then press the clip on from above. The LEDs are very stable and can withstand a lot. If you have any doubts about the holding power of the connection, you can of course add some glue. It is also not necessary to clamp every LED to the strip, it is sufficient to clamp every third or fourth LED.

I have designed different types of clamps that can be screwed, clamped and, of course, glued. However, there is one restriction. The clamp can only be attached in two directions. I had to make the compromise in the design that only two sides are suitable for clipping. This means you can’t turn and attach the clip every 90 degrees, but only 180 degrees. In short, the soldering points must always be to the right and left of the clip and not at the top and bottom. (see pictures 5.0 – 5.1)

Application examples for the LED strip bracket

• 5.0.1, 5.0.2 WS2812B 60 LED/m
• 5.0.3 RGW on circuit board
• 5.0.4 WS2812B 144 LED/m (only every second LED can be clipped)
• 5.1.1 SK6812 soldered to carrier plate clamped
• 5.1.2 WS2812B soldered three pieces
• 5.1.3 RGW
• 5.1.4 CW with side clips right and left

Download files

• Bracket for SMD5050

The post Click and clamp system – SMD5050 bracket appeared first on Nerd Corner.

You might also be interested in: 3D printed battery container

List of components

• LED tealightset
• Button cell CR2032
• Jumper cables
• Screws

Procedure

First, I ordered a set of LED tea lights. I measured it and examined whether it could be connected to a cable. I was quite surprised by the technique of how the LED gets power from the battery. It is simple but well thought out! With the on/off switch, a metal pin is pushed to the edge of the battery. This edge is the positive pole. The other metal pin is fixed in the housing and permanently touches the bottom of the battery. The bottom is the negative pole. The metal pins reminded me of pins on jumper cables. You can see how I connected the cables to the tea lights in the following series of pictures.

First, the cover and contact foil must be removed. Then the battery is removed.

The two current collectors are now visible in the battery compartment. The negative pole is brought into the vertical position using a screwdriver or pliers.

Then remove the black plastic cover (female) from both jumper cables with side cutters. But be careful not to damage or crush the metal clamps!

A jumper cable is pushed over the pin at the positive terminal and at the negative terminal and pressed on. Afterwards, the holding capacity of the press connection should be tested. When the metal clamps are firmly seated on the pin, the function of the LED should be checked. For example, by removing the battery.

The cables are fixed with hot glue. Finally, after checking the function of the LED again, I attach a connector housing to the cables. You can find out how to construct such a connector housing here.

Secondly, I need a holder for my wired tea lights. I want to design the holder myself on the CAD and then print it out on the 3D printer. You can see how to design such a tea light holder in Solidworks in the video below:

After the tealight holder has been designed and printed, it is painted. Then the wired LED tea light can be mounted in the holder. Of course, the holder should be properly deburred beforehand. You can see the procedure in the next picture.

When using the tealight holder shown here, make sure that the cables are fed through the hole provided for this purpose. Please also take care to insert the cables one after the other into the hole in step 6.4.

Power supply

The third step is the power supply for the tea lights. For this I use a USB power supply with 5V and a step down module like the LM2596s. The voltage converter is supposed to provide me with the 3V that the tea lights need. Fortunately, I have constructed some housings for the LM2596 in the past that I can use here.

With the LM2596 used here, I reduce the voltage from the USB charger from 5V to 3V for the LED. You can also apply a voltage of less than 3V, in which case only the luminosity of the LEDs is reduced. The arrangement of the holders in the picture is only an example.

If you need an independent power source, e.g. a power bank, you can use my power bank with 3V output.

Assembly

Different screws can be used for mounting the tea light holders. Depending on the surface, you can use wood screws or cylinder head screws, for example. Alternatively, you can also screw the holder directly to the wall with the help of dowels. The only thing to note is that the screw head must be larger than 7 mm and smaller than 11 mm in diameter. The hole for the screws has a diameter of 5 mm. The hole for the cables lies vertically on the centre line of the screw hole and the centre distance to this is exactly 7 mm. The diameter of the cable hole is 4.5 mm.

Files for download

• Tealight holder

The post 3D Printed Tealight Holder appeared first on Nerd Corner.

The flashlight was hard to position properly and it dazzled. For this reason, I came up with the idea of developing my own glare-free lamp, which you can simply place on the heating bed and is not blinding. Preferably wireless with a powerbank. I had already built my own powerbank with the Battery Shield V3, which I used as a basis this time.

This might also be interesting for you: Own powerbank with the Battery Shield V3

List of components

• 1 x Hollow socket 5,5×2,1
• 1 x Battery Shield V3
• 1 x LiPo 18650 3500mAh
• 1 x rocker switch 250V/3A mounting dimension 15×10,5mm
• 4 x hexagon socket head screws M2 x6
• 6 x raised countersunk head screws M2 x 20
• 17 x 5V SMD2835 LED strips
• 5 x jumper cable

Choice of LED

Since the basic housing of the powerbank with the Battery shield V3 was already finished, I mainly had to think about the lighting. LEDs with 5V or 3V should be used as illuminants, because the Battery shield V3 provides either 5V or 3V. For my purposes a lower lumen value is sufficient. After a short research I found suitable LED strips.

The light temperature of my LED strip is 6500K also called cold white. This light contains a lot of blue, which makes it easy to work with and details become visible quickly. Since the Battery shield V3 has three additional 5V and one USB A output, powering the LEDs is no problem.

The LEDs for the glare-free lamp are SMD2835. These are 2.5 mm wide and 3.5 mm long and have a slightly lower luminosity than a SMD5050. How much the LEDs consume is critical to the lamp’s burn time, as the power supply from the battery is limited.

Construction of the cover and middle cover

As already mentioned in the previous section, the base case of the powerbank is not changed. Instead, the LEDs are glued onto an inner cover. The middle cover also serves as a support for the hollow socket for the 3V output. Furthermore, a breakthrough was contructed to pass through the cables from the on-off switch. The slanted openings of the intermediate cover should help to apply adhesive to the LED strips from behind if necessary.

For the top side (the lid, where the light shines through) it became a little more complex. On the one hand, enough light should shine through, but on the other hand, it must not dazzle! Of course, a crystal clear lid would be ideal for the light yield, but as I said, then it would possibly dazzle. To strike a balance between effective light output and freedom from glare, several factors must be taken into account:

• Material selection (filament)
• Distance to the light source
• Thickness of the lens
• Printing strategy

The choice of material for the anti-glare lamp was “ivory”. The distance to the illuminant is 10.5 mm and the layer thickness (material thickness) is 1 mm. The layer height is 0.25 mm, i.e. one millimeter results in four layers, with the first layer applied 45° to the left and the second layer 45° to the right. Due to the different directions of the layers, the light is refracted again and again and becomes glare-free. This is a subjective perception and the designation glare-free therefore does not apply to all people.

Assembly

• Soldering the parts to the jumper cables:
  

• Cutting and gluing the LED strips: The LED strip is separated into two times 6 LEDs and once 5 LEDs and glued to the intermediate cover. The cable opening on the lid for the plug must remain free:
  

• Attach the hollow bushing to the intermediate cover:
  

• Screw the battery shield into the housing after the ten threads have been previously cut into the housing.

• Press the rocker switch into the cover:

• Press LiPo 18650 into the receptacle

• Connect cable and turn on:

• If all LEDs light up, place the middle cover on the housing and then place the cover on the middle cover and screw it down:
  

Glare free lamp CAD design

For the threads, the holes are designed for core hole diameter, i.e. for M2 for diameter 1.6 mm. You can tap the thread with the tap or form (press in) with a screw. Personally, I prefer the thread cutting. The two graphics show where the threads have to be cut on the housing.

Further notes

Some may wonder why the rocker switch sticks out of the lid and is not recessed. It makes it easier to turn the lamp on and off.  Most of the time you only have one hand free and can’t really reach into the recess, but if the rocker switch sticks out it’s easier to operate it. Nevertheless, I have also designed a version with recessed rocker switch, which you can download in the download section!

The power of the lamp is about 1.4 watts. At 5.05 V the current is therefore 0.27 A, which is no problem for the Battery Shield V3 and the LiPo. The burn time of the lamp is about 5 hours in continuous operation. For this data, I used a Samsung 18650 with 3500 mAh. The powerbank can be used in parallel to run the lamp. However, the total current should not exceed 3A.

I use this lamp not only for my 3D printer, but also for soldering, reading or as a night light. The powerbank is also extremely light with 127g.

Download files

• STL files of the glare free lamp

The post Glare free lamp and powerbank appeared first on Nerd Corner.

That’s why I designed a quick connector in CAD that makes it very easy to solder jumper cables. The connector serves as an ideal soldering aid. Of course, the wire diameter must be sufficient for the required number of amperes! On the market there are mainly inferior connectors. My STL file on the other hand is cheap and works perfectly.

This might also be interesting: Universal connector housing!

List of components

• 4 Pin RGB LED Strip
• Jumper cable
• Heat shrink tubing
• Hot Glue

Project application

For a larger project I needed 16 RGB strips with 21 LEDs each. The strips were pushed into a 3D printed socket afterwards. The LED strip was separated directly at the pre-marked point with a standard pair of scissors (usually the RGB strips are divisible after every third LED).

For the jumper cables I chose one side male and the other female. The side with the PINs (male) were soldered to the RGB strip and the socket (female) was used as a plug. It is crucial to use jumper cables with square housing (standard dimension: 2.54 mm). The length of the plastic housing does not matter. Depending on the brand, the plastic housings are 12 mm or 14 mm long.

Procedure

Since no preparatory work on the cables is necessary, soldering can be started directly. I prefer to apply solder to the RGB strip at the soldering points (copper layer) first.  After that I solder the PINs to the soldering points without additional solder. The PINs should not be soldered too deep towards the LED and the alignment must fit.

Then the connector comes into play. This connector is on the RGB side and open at the top. The RGB strip is inserted into the connector so that the solder joints are in the connector. Then the four cables are pressed into the slots and the solder joints are sealed with hot glue if necessary. For safety reasons, I recommend to attach a heat shrink tubing. This way you get a super strong connection!

Steps in pictures

Advantages:

• No cable preparation
• Strong connection
• Easy 3D printing

Disadvantages:

• Requires more space
• STL file only for RGB strips with 10 mm width

Download files

• • STL file of the soldering aid

The post Printed connector as soldering aid for jumper cables and LED strips appeared first on Nerd Corner.

This might also be interesting for you: Simple guide on how to use a Hall Sensor with an Arduino

List of components

• Arduino Nano
• Nano Terminal Adapter
• 6 magnets
• Hall sensor KY024
• LED strip
• Jumper cables
• Screws 2x M2 and 1x M3 for the sensor
• Deep groove ball bearing 6807 2RS / 61807 2RS 35x47x7 mm
• 3D printing test setup (STL files in Download section)

Construction of test bench

First we glued the 6 magnets into the 3D printed wheel. Make sure that the magnets are aligned homogeneously. Then the deep groove ball bearing is inserted into the detection wheel. The wheel can now be connected to the 3D printed bracket. Next we attach the Hall sensor KY-024 to the bracket. The Arduino Nano is plugged onto the adapter terminal and also attached to the bracket. The LED strip does not have to be attached separately. So you can start with the wiring.

Wiring

The wiring is not very difficult. Proceed according to the fritzing sketch. Connect the 4 jumper cables to the pins of the Hall sensor KY-024 and connect them to the Arduino Terminal Adapter. The 5V output of the Arduino is shared with both the Hall Sensor and the LEDs. Since there are only a few LEDs, no external power supply is required. For the LED strip you may have to solder them. We recommend to use a 220 Ohm resistor for the digital input of the LED strip.

Arduino Code Simple (with digital input)

In this code example, the Hall sensor KY024 sends the digital value 1 (HIGH) if there is a magnet or 0 (LOW) if no magnet is nearby. As soon as a HIGH is detected, the LEDs start to light up. But if the a magnet stops in front of the Hall sensor, it will send a HIGH constantly and the LEDs won’t stop lightning.

#include <FastLED.h>
#define LED_PIN     7
#define NUM_LEDS    6

CRGB leds[NUM_LEDS];

int digitalPin = 9; // Hall magnetic sensor input 1 (high) or 0 (low)
int digitalInputValue ; // digital readings

void setup ()
{
  FastLED.addLeds<WS2812, LED_PIN, GRB>(leds, NUM_LEDS);
  pinMode (digitalPin, INPUT); 
  
  Serial.begin(9600);
}

void loop ()
{
  
  digitalInputValue = digitalRead(digitalPin) ; 
  Serial.println(digitalInputValue); // print value
  if (digitalInputValue == HIGH) 
  {
    for (int i = 0; i <= 5; i++) 
    {
    leds[i] = CRGB ( 255, 0, 0);
    FastLED.show();
    delay(40);
    }
  }

  else if (digitalInputValue ==LOW)
  {
    for (int i = 0; i <= 5; i++) 
    {
      leds[i] = CRGB ( 0, 0, 0);
      FastLED.show();
      delay(30);
    }
  } 
}

Arduino code more advanced (with analog input)

This code is a bit more advanced. The goal for the Hall Sensor Movement Detection is to let the LEDs light up as soon as a rotary movement is detected. Even if a magnet stops directly in front of the KY024 Hall sensor, the LEDs must not light up, because there is no movement.

For this reason, the analog value of the Hall sensor is considered instead of the digital value. If the analog value changes, a rotary movement takes place. A small offset has been integrated to compensate minor fluctuations that occur even without a rotary movement. A counter was programmed as a double safeguard, which also counts how often the analog value changes. The double protection is intended to prevent the Hall sensor from detecting a magnetic field at a standstill.

#include <FastLED.h>
#define LED_PIN 7
#define NUM_LEDS 6
CRGB leds[NUM_LEDS];


int analogPin =A0;
int analogVal; // analog readings
int detector =0;
int firstVal=0;
int HIGHcount=0;


void setup() {
  FastLED.addLeds<WS2812, LED_PIN, GRB>(leds, NUM_LEDS);//pinMode (led, OUTPUT); 
  pinMode (analogPin, INPUT); 
  Serial.begin(9600);
  
}

void loop() {
  analogVal= analogRead(analogPin);
  detector = abs(firstVal-analogVal);  //if there is a difference >0 then the wheel might be spinning
  firstVal=analogVal;

  if (detector>4)   //offset = 4 can be adjusted
  {
    HIGHcount++;  //counting the high to eleminate false positives  
    }
  else if (detector<=10)
  {
    HIGHcount=0;
  }

  if (HIGHcount>1)
  {
    YellowToRed(0); 
    delay(1000);
    HIGHcount=0;
    }

  else
  {
     for (int i = 0; i <= 5; i++) 
  {
    leds[i] = CRGB ( 0, 0, 0);
    FastLED.show();
    delay(30);
  } 
    }

}


void YellowToRed(int colorStep)
{
  for( colorStep; colorStep<250; colorStep+=5 ) {

      int r = 255;  // Redness starts at zero and goes up to full
      int b = 0;  // Blue starts at full and goes down to zero
      int g = 255-colorStep;              // No green needed to go from blue to red

      // Now loop though each of the LEDs and set each one to the current color

      for(int x = 0; x < NUM_LEDS; x++){
          leds[x] = CRGB(r,g,b);
          leds[x].maximizeBrightness(255-colorStep);
      }

      // Display the colors we just set on the actual LEDs
      FastLED.show();

      delay(50); 
  }
}

Pictures of the Hall Sensor Movement Detection

Download files

• Magnet Wheel (STL)

The post Hall Sensor Movement Detection appeared first on Nerd Corner.