The Desktop Device - a Customizable Desktop Assistant

by JanoschS1 in Circuits > Arduino

4469 Views, 28 Favorites, 0 Comments

The Desktop Device - a Customizable Desktop Assistant

The Desktop Device (DIY Personal Desktop Assistant)
IMG_0369.JPG
HackBerry Logo.png
IMG_0356.JPG
IMG_0364.JPG
IMG_0357.JPG
IMG_0361.JPG
IMG_0365.JPG
IMG_0360.JPG

The Desktop Device is a small personal desktop assistant that can display various information downloaded from the internet. This device was designed and built by me for the CRT 420 - Special Topics class at Berry College which is lead by Instructor Zane Cochran.

This instructable will go into detail about how to build your own device similar to this one. In the video that I linked, the more visually appealing steps as well as some grade A commentary from me show the process of the device being built. I'm relatively new to YouTube but I am trying to make some interesting DIY / automotive content so feel free to check it out and let me know what you think I could improve on! Also if you want to check out some of my other Instructables, you can do so by clicking on my profile.

Below are the items and software that are used to create the desktop device (The Amazon links are affiliate links which support me when you purchase items through them, at no extra cost to you)

Much like SlouchyBoard (https://www.instructables.com/id/SlouchyBoard-an-A...), we started out by Breadboarding this circuit to make sure everything worked before we soldered it into a Printed Circuit Board (PCB). These are the breadboarding components that I used to make sure everything works.

$11 ESP32: https://amzn.to/2HfT26Y

$7 Micro USB: https://amzn.to/2PXntSb

$17 Screen(HiLetgo 2.2" Display 240x320): https://amzn.to/2LNc0Gu

$6.50 Jumper Wires: https://amzn.to/2ViOfFm

(Not required, but we used a 10microFahrad Capacitor to make the screen run much better)

$15.50 Capacitor kit: https://amzn.to/2LDNcR4

10k Ohm resistors (If you ever bought an Arduino kit you probably already have these)

$9 Resistor Kit: https://amzn.to/2vVTwbL

Buttons (again, you probably have some, just make sure your PCB has the correct button!):

$17 Button kit (in case you want some other button choices):https://amzn.to/2E4Gu0j

$10 Acrylic (I used some 1/16" acrylic to make my stand, however, anything could be used): https://amzn.to/30eFyQf

$12 Spacer screws (used to attach the board to the case): https://amzn.to/2Yq5tTn

I originally wanted to 3D print a case but ended up running out of time. In the lab, we use the XYZ 3D printers which make for a good starting printer: https://amzn.to/2JAyasy

After testing all components and doing some basic programming tests, we went onto EasyEDA (https://easyeda.com/) to make the custom PCB board. Once that was done we moved all of those components over to the PCB and soldered them into place. The following steps will go into detail for the build.

The total price of this project depends a lot on what you decide to make for yourself, what components you already have and/or chose to use.

Breadboarding

Breadboard.jpeg
schematic.png
Esp32 PinOut.jpg

To begin, you want to start by wiring up all your components in a breadboard according to the circuit schematic as shown. You should wire up the screen exactly as shown in the schematic as those pins work with the screen's library, however, the buttons don't matter as much and you can do whatever you want. You don't have to use 4 buttons or any buttons at all, you could use a joystick if you really wanted to. Below are the pins that I used. Note that these are the pins that are used in programming and not the physical pins. For example, the CS pin is connected to pin 22, which is actually the third pin from the top right when viewed from the schematic. There are a few different versions of the ESP-32 out there so some of the pins may not be exactly the same as shown in this project. If yours is different try to find a pinout diagram for your version.

Screen Pins --------- ESP-32 pins

CS -------------------- 22

DC -------------------- 21

MOSI ----------------- 23

CLK ------------------- 19

RST ------------------- 18

MISO ---------------- 25

Make sure you have these right and that you hook up the two VCC and Ground pins on the screen.


Button 1 ------------ 35

Button 2 ------------ 34

Button 3 ------------ 33

Button 4 ------------ 32

The 10uF capacitor is hooked up to the EN pin on the ESP-32 and the goes to ground. The orientation of the capacitor does not matter.

The last thing is to make sure the Esp-32's 5v pin and GND pin are connected to VCC and GND respectively. Then you should be able to plug the data cable into the ESP-32 and the screen should turn on and be white.

Basic Program Tests

ManageLib.png
manageLibInstal.PNG
code pic.jpg

I will go ahead and attach some starter code that will help you test out your components and pulling data from an API. There are 5 libraries that you will need to go ahead and download inside of Arduino. Those libraries are

WiFi.h

HTTPClient.h

SPI.h

Adafruit_GFX.h

Adafruit_ILI9341.h (ILI9341 is this specific screen, this is the library for that screen)

To add a library in Arduino go to Tools > Manage Libraries and then search for the three libraries mentioned above.

The starter code that I have attached should show a small circle being drawn for each button pressed. And the price of Nike's stock should be drawn somewhere in the middle of the screen. When a different button is pressed a new circle should appear.

If all this works, you know your components are working as they should.

EasyEDA - Schematic

schematic.png
BOM.PNG
ESP32-USer.PNG
tools.PNG
convert.PNG

Got to https://easyeda.com/ to create a free account and do all that mumbo jumbo.

When you get EasyEDA set up, start by creating a new project and make a new schematic. You want to make sure you place all the parts and connect them as I have shown in the schematic unless you want to make yours different somehow. On the left side, you can search the various libraries for the parts required and then place them in the schematic.

If you search for the following terms, you should be able to find all the components. These are all the items from the parts list picture but I will go ahead and type them below so you can just copy and paste them if you want.

ESP32S Devkit - ADV (Go to the "libraries" on the left and go search under user-contributed)

2.2 TFT LCD - ADV (Go to the "libraries" on the left and go search under user-contributed)

C110153 (Go to the "libraries" on the left and go search under LCSC)

C94705 (Go to the "libraries" on the left and go search under LCSC)

C58673 (Go to the "libraries" on the left and go search under LCSC)

Once you have all the components placed, connect them to the correct pins as well as the GDN and VCC connections. You connect them by using the wiring tool and placing the GND & VCC symbols. Then once you have properly connected all the wires, you can click the convert to PCB button.

EasyEDA - PCB Design

BoardOutline.png
Complete copper.PNG
VCC and GND.PNG
DRC Errors.jpg
gerber.PNG
EportPNG.png
PNGSettings.PNG
TestingPNG.png
foam.jpeg

When you start in the PCB environment, you'll see a bunch of layers and numbers on the right. Change your units to millimeters or whatever you want to use and change the snap size (snap size is basically at what interval you can place things on the grid) to something convenient. I made mine 10mm since I wanted my board outline at 100mm x 100mm but then changed it to 0.01mm once I started placing my components.

Start by editing the board outline layer (click the color and a pencil should appear) and then draw your board outline, in my case, my board was 100mmx100mm. Once you have this, edit your top layer and start placing the components on the board how you want them by dragging them onto the outline.

Then once the components are placed, connect all blue lines with the wire tool, unless they are connected to GND or VCC. The GND and VCC connections connect directly to the board and don't need to be isolated via the wires. Once all non-VCC and GND connections are wired together, you can use the Copper area tool to make the last connections. Do this once on the top layer and once on the bottom layer. Make sure that you change one of the copper areas to VCC in the properties tab, I usually make the top layer GND and the bottom layer VCC.

Once you have that done, the board should look complete and you can zoom in to see where GND connects to the board. At this point, you want to check for DRC Errors by refreshing the DRC Errors under the Design Manager tab on the far left. If there are no errors, you are good to go and order your board. To order your board, click the button in the top ribbon with a G and right facing arrow to export your Gerber file. This will take you directly to where you purchase your boards, there are lots of options for different colors and finishes which will affect the price of the board, for PCB thickness, I think 1.6 is what we usually do.

If you want to double check that your components fit, you can export a PNG image of your board and then push your components through the paper to see that the prongs all fit. Don't worry about scaling it, you should be able to just print it out.

Soldering

The Desktop Device (DIY Personal Desktop Assistant)
soldering.png
solder station.PNG

Soldering all your components into the board is very satisfying and rewarding when everything fits into place. The whole process of soldering can be seen in the video that I made.

The soldering stations that we use in the lab are these ones: https://amzn.to/2K5c6EX and these are the helping hand we use: https://amzn.to/2JC1IpP. Now that I am graduated and I won't have direct access to them anymore, I am going to buy some for myself as soon as I get my own place.

More Programming!

nerd.jpg

I do not feel comfortable giving out all of my code as it was done for a school assignment and you should try to be creative with your own device and have it do what you are interested in.

To help with programming the screen, hopefully, my starter code will be helpful but this is also a great resource: https://learn.adafruit.com/adafruit-gfx-graphics-l...

For more on uses with the ESP32, I found a great blog that is constantly posting things (its where I figured out how to directly access the internet with the ESP32 instead of using a server as we did in school): https://techtutorialsx.com/category/esp32/

This is the link for the stock price API's, to get different stocks just replace "NKE" with other stocks such as "AMZN" or "AAPL": https://api.iextrading.com/1.0/stock/NKE/price

There are many more API's out there, however, some do require you to make accounts such as the OpenWeather API.

Go Subscribe to My YouTube Channel!

Channel.PNG
YT page1.png

If you thought this instructable was interesting, feel free to check out the video I made about the Desktop Assistant and some of my other project videos.

I am trying to get my channel to 1,000 subscribers so that I can start monetizing my channel in order to fund future projects that are more ambitious and expensive. I still have a couple of school projects from this semester that I will share and then I will start getting into new things. Those projects include a device that allows soldiers to keep track of the number of bullets left in their magazines, a Gameboy style gamepad that runs completely off a Teensy and a PCB YouTube button that has loads of LED's to display different effects. If those sound interesting please consider subscribing to my YouTube channel or here to my instructable profile.

Also if you would like me to make an instructable dedicated to EasyEDA, I can do that and make a full video on it. I know it can be pretty confusing when you first start out with it, I am trying to be thorough but it is difficult when all I have is a couple of pictures and text. Leave a comment here or on my YouTube channel so I know!

Link to my Channel: https://www.youtube.com/janoschspohner

Thanks!