Messaging Lantern

A lamp that functions as an illuminated picture holder and a long-distance messenger. It is meant as a gift to a loved one or a friend where both have one Messaging Lantern. The Lantern is then filled with pictures of their dearest memories in Lithophane format. And the core is filled with variable brightness RGB LEDs. The LEDs illuminate the Lithophanes creating the most amazing effect.

Both modules are connected over the Internet allowing them to exchange text messages. The messages can be of any kind and send at any moment of the day to show that you are thinking of the other person.

At the beginning of the Covid-19 pandemic, me and my girlfriend were together for just over 6 months. Having met on an exchange in Australia we had to part ways at the end of the Semester. She moved back to New-York and I had to go back to Amsterdam.

When leaving we had so many plans to travel and to meetup. Unknowing of what was about to happen in the world...

The hammer blow came when a week before our meetup in the Netherlands. Suddenly all over the world, the borders started closing and flights got cancelled. For us, this would be the start of and 11 months forced separation.

During this time I missed her birthday and I wanted to give her something special next time we would meet. (Whenever that would be)

This is where I came up with the Messaging Lantern.

A way for me and her to send little messages when we are apart and we are thinking of each other. And in addition for both of us a display to showcase our favourite pictures together.

After 6 months of not knowing when the next time would be when we could meet there finally was clarity. The Netherlands and most of Europe allowed long-distance lovers to reunite allowing us to celebrate Christmas together. This would then also be the deadline I set for this project.

As I already stated in the introduction the Messaging Lantern is an illuminated picture holder and a long-distance messenger device. A way for me and her to send little messages when we are apart and we are thinking of each other.

It consists of 2 modules each containing the following:

- The housing: a 3D printed housing that consists of 2 major parts:

1. The Picture frame holder. Allows for a total of four: 70x100x4mm (W, L, H) pictures. These pictures are printed in a Lithophane format more on this later.
2. The electronics casing. Allows for all the electronics to be mounted on the inside of the Lantern. Also, the housing contains openings for the USB input, power switch and user interface.

- The electronics: an Arduino based ESP8266 NodeMCU platform that consists of 3 major parts.

1. ESP8266 NodeMCU development board. The ESP is the heard of the machine. It controls all user inputs, RGB lighting and is connected to over WiFi to a Wix based webserver loading and sending the messages.
2. WS2812 RGB LED strip. Behind all the Lithophane pictures there are LEDs that illuminate them. These LEDs are controlled using the Adafruit Neopixel library allowing them to be controlled from within the user interface.
3. User Interface. The ESP runs a version of the Arduino Menu library. This menu is displayed on the Oled screen and can be navigated using a Rotary encoder. From within this menu, messages can be sent and LED settings can be changed. A touch sensor is used to switch on and of the LEDs. See the included image.

The whole Messaging Lantern is power using a simple micro USB plug that can also be used to program and update the Lantern.

Tools required:

• 3D printer: To print the housing and other parts.
• Screwdriver: Flathead and/or Philips's head depended on your screws and bolts.
• Stanly knife: To clean the 3D prints.
• Soldering Iron: Solder all the electronics.
• Hot glue gun: Fasten some of the electronics and sensors on the inside.

Parts for the 3D printed Housing:

• PLA filament: two or more colours depending on the colour pallet you choose for your lantern.
• Neodymium magnets (optional): Cylindrical 2x8mm, 8 Pcs

Electronics Parts:

• main circuity:
  • 1x ESP8266 NodeMCU development board.
  • 1x Prototype PCB (6x4 cm).
  • 1x Micro USB breakout board.
  • 1x Level Logic level converter TXS0108E.
  • 1x Toggle switch.
  • 40x 2.54mm female and male headers.
• User interface:
  • 1x Ky-040 rotary encoder.
  • 1x Digital Touch capacitive sensor TTP223B.
  • 1x 0.96 Inch Oled Display Module 128X64 I2C SSD1306.
• Illumination:
  • 60x WS2812 RGB LED strip 144 leds/meter.
• Mounting:
  • 10x M3 nuts.
  • 10x m3 bolts 20mm.
  • 10x M3 screws 20mm.
  • 1x Hot glue stick.
• Misc
  • Electronics Wire 24 gauge Multicolour. At least 5 colours are recommended.
  • Shrinkwrap or Insulation tape..

The parts can be printed in any filament of your choosing. I personally used PLA as it is the cheapest and the design does not need to carry any structural loads. Mix and match any colours you like/have available for the casing, picture frame and lid.

The following prints are required:

• 1x Electronics Housing.
• 1x Electronics housing lid.
• 1x Picture frame.
• 1x Picture frame lid.
• 1x Rotary encoder button.
• 1x Touch sensor cover.

I used a layer height of 0.2 however depending on your printer you may vary this setting. Any parts that are to tight use a knife or sanding paper correct.

Note that for the picture frame holder and the top lid a high infill is recommended to avoid any stray light from penetrating the housing.

What is a Lithophane? It is essentially turning pictures into 3D objects. At first, the print does not show much but when light shines through it that’s where the magic happens. The way it works is that light passes through the thin parts while being blocked by the thick parts. In this way, the differences in light bring out the detail in the image.

How to make them: there are some excellent tools and tutorials out there like the one from All3DP. But to summarize the concept I used the online tool called 3dp.rocks/lithophane. Here you can simply upload an image and set the parameters to your liking and the program takes care of everything else.

I used:

• The free online tool 3dp.rocks/lithophane
• All the default settings: See images
• A picture with an aspect ratio 3:4 where the height is 4. This is important because it will create a Lithophane of size 100x75x3 mm (L, W, H). This size fits in the picture frame holder.
• Material: PLA
• Print layer height as fine as your machine goes. Mine goes up to 0.1mm

The inspiration for the picture frame came from Thingiverse: “Lithophane Lamp v4/v3” a design made by GrkMangas in 2017

We will first assemble the electronics in the electronics housing before we assemble the other parts of the Messaging Lantern

With any electronics project, it is always a good idea to first test if everything works as expected by creating a prototype on a prototyping board as is indicated by the schematic. By doing this you get to know the connections, play around with the different parts and iterate/change something if it isn’t to your liking. Having done that you can continue with the creation of a more permanent electronics fixture on a prototype PCB.

First, the ESP8266 and the TXS0108E are assembled on a prototyping PCB
following the schematic included with the build. Position all parts in the housing: Fasten the Oled and rotary encoder with nuts and bolts. Glue the capacitive touch sensor with the leads facing inwards on electronics casing. Glue the micro USB breakout into place and slide the Power switch in the bottom lid. Finally, connect all components following the included schematics.

Cut the LED strip in 4 equal sections of 15 LEDS and attach long wire leads to them. Keep the LEDs
separate for now we need them later when assembling the housing.

Recommendation and personal experience while building the electronics:

While building it I would recommend first fastening the components in the housing as indicated by the animation. Then mount the ESP8266 module on the prototype PCB with the TXS0108E Level Logic level converter. Do this on 2.54mm female headers such that if an accident happens (eg. A short or wrong supply voltage) the ESP and Level converter can be replaced without the need of a new PCB. Place the PCB In the approximate spot in the housing then measure the wire length needed to connect the components to the pins and add about a one or 2 centimetres for some slag in the wires. Connect everything and try to make it fit in the housing, it is quite a tight fit. For the LED’s note that there is an arrow indication of the data flow connect the data cable to the tail of the arrow.

To assemble the housing follow the given animation. If you have magnets glue them in the slots at the top of the columns of the picture frame and make sure all polarities are in the same direction. Then for the top lid place the Magnets with the attracting polarity facing down and either glue or squeeze them in. Make sure they are a tight fit! After this, the lid should stick to the top of the Picture frame holder.

Use the sticky part of the LED strips and stick them to the inside of
the Picture frame holder the vertical column should be wide enough to fit them. Connect the LEDs as is indicated by the schematic. And test the system. Insert a USB upload the code (more on this later) and check if everything behaves normally. Only then we can close the casing by screwing the picture frame holder and the bottom lid to the electronics housing. Inserting the Lithophanes and placing the lid on top.

Your Messaging Lantern is now complete!

The program that is written is quite extensive and requires the use of several
Arduino libraries. I will explain the major parts of the code here and for the details, I refer to the code itself. However if you only intend to use the code and don’t care about the implementation the next section explains what needs to be changed to customize the device for your own purposes.

Disclaimer: I do have some prior experience programming however a project of this scale was something new for me combined with a strict deadline (Christmas) for the project to be finished makes the code sometimes a bit messy or: “Why did you do it this complicated/strange way?”. “Because it worked…”. The code, therefore, is still in development and will be improved on. If you have any suggestions please do write them in the comments.

I'll go over the functionality of the code by explaining my goals and the steps implemented to achieve those goals

The first goal: Send messages over the Internet:

Step 1 selecting a message: This part of the code is written in the “Messaging_Lantern.ino” and the “menuinit.ino” file. And works by creating an interactive menu using the “Arduino Menu” library by “neu-rah”. I recommend experimenting with the following example sketches provided: “oZOledAscii” and the “clickEncoder”. These two are mostly used by me.

I defined several message categories: general, sweet, attention and example. By selecting a category a submenu opens up and we can select the messages to send. The content is of these messages are defined in the file ” menuinit.ino”.

Step 2 sending the message over the internet:

Being completely new to this I set several goals: It needs to be free, no hardware involved and accessible without changing any Router settings. My solution was to use a free WIX website. WIX is an online website hosting service that allows you to host 1 free website. This free website includes an option to host a small database that can be accessed via some javascript code written in their development environment Corvid. See “Messaging_Lantern_WIX_Database.js” for the code. In the next step, I'll explain how to make this database.

I use the ESP8266 WIFI functionality to write to this database the messages. And then read the received messages from the database at a fixed time interval of 1 minute. This functionality is implemented in “WifiConnectivity.ino”

Step 3 displaying the messages received from the other module:

Every minute the current message is called from the database and saved. Then when the Messaging Lantern has not been touched for over 10 seconds the Lantern goes into a "sleep mode" and then the OLED display will display the latest received message. This functionality is implemented in the “void Loop()” function in the “Messaging_Lantern.ino” file. To unlock the menu again a press on the rotary encoder is required.

The second goal: Function as a lamp.

For the device to function as a lamp I used the Adafruit NeoPixel library to control the strands of WS2812 LEDs.

The LEDs will display a fixed colour this colour can be selected in the Colour sub-menu by changing the RGB values from 0 to 254. In addition, there is a brightness setting from 0 to 100%. All of this functionality is implemented in the file “LEDControl.ino”.In addition, the lamp can be turned on and off using the touch sensor. This functionality is implemented in the file “TouchSensor.ino”.

How to create a Wix database. Create an account and start building your first website. It does not need to be fancy. Then do the following:

In the Wix menu Create a database. name it: "DATABASE_LANTERN" (or change to your preference will require altering of the code)

Set the permissions:

• Read: Anyone
• Create: Admin
• Update: Anyone
• Delete: Admin

Create 2 entries: With title: USER1 and USER2 and add a collum:

• fieldname: dsiplayDATA
• fieldKey: displayData
• field type: text

Fill the dsiplayDATA collum with example text. Eg: test1, test2

Copy the ID's and save them for now. Keys should look something like this:

• Key1 USER1: 1a534425-5a6a-0000-b215-0cdbf3195f30 //they don't work
• Key2 USER2: 9d6937b5-7f67-0000-b563-ba0495808197 //they don't work

On the Wix site in the section "code files" create a new backend javascript file: http-functions.js. Paste the provided code in there.

• Replace the "KEY" in both set functions
• get_setUser1DisplayMessage: key of user 1
• get_setUser2DisplayMessage: key of user 2

Now publish your website:

Sync the database: DATABASE_LANTERN to live. This option is available when you open the database.

Everything should be working now and by pasting the provided URLs (See code file) in the search bar of your web browser you should be able to obtain a JSON with the get_functions and write to the database with the set_functions. Do verify this by visiting the live view of your database. NOTE you must personalise the URLs to your website first.

KEEP THESE URLS PRIVATE! Everyone can visit them if they have the URL.

Everything that needs to be changed can be found at the beginning of the “Messaging_Lantern.ino”

To use the Messaging Lantern yourself you are required to change the following in the code:

1. Change the Wifi name and Password
2. Create a Wix database and use the personalised the communication links.
3. Set the User: to USER_1 or USER_2 on either Messaging Lanterns

Optional changes:

1. Change the content of the messages (menuInit.ino).
2. Change the default colour and brightness to your favourite RGB colour.

You are now set and ready to go!

The final step left is to give your favourite person a Messaging Lanter!

Thank you for reading this article
Do share your feedback!