mitchell/mywebsite
1
0
Fork 0
mirror of https://github.com/mgerb/mywebsite synced 2026-01-08 09:02:47 +00:00
Code Issues Releases Wiki Activity

added markdown parsing - working on converting html posts

Browse Source
This commit is contained in:
mgerb42
2016-08-16 12:47:23 +00:00
parent db3e51b69a
commit 00f562dfb6
14 changed files with 841 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.babelrc Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": ["es2015"]
}

64
New Folder/2015-08-13-esp8266.html Normal file
View File

@@ -0,0 +1,64 @@
<div class="blog-post">
<h2 id="title" class="blog-post-title">ESP8266 - Cheap Wifi Microcontroller</h2>
<p id="date" class="blog-post-meta">August 13, 2015 by Mitchell</p>
<p id="intro">I've recently started playing around with microcontrollers, or more specifically arduinos. I have always had some projects in mind that require the use of some sort of microcontroller, most of which requred a wifi connection. There are a few wifi options availabe for the arduino, some of which can be very expensive. I eventually stumbled upon the ESP8266, which I have finally figured out... mostly.
</p>
<hr>
<h3>Why the ESP8266?</h3>
<p>It is extremely cheap! They can be found for roughly $3 apiece whereas the wifi arduino shield is around $70! I figured I would take my chances with the cheaper option and I ordered <a href="http://www.banggood.com/ESP8266-Remote-Serial-Port-WIFI-Transceiver-Wireless-Module-p-947259.html">three of these</a>. After frying two of these in process of trying to figure the darn things out, I ordered a <a href="http://www.banggood.com/ESP8266-ESP-07-Remote-Serial-Port-WIFI-Transceiver-Wireless-Module-p-968190.html">5 pack of the ESP-07 version.</a> Banggood also sent me 7 of them which was a bonus.
<h3>Why the ESP-07 version?</h3>
<p>The ESP8266 can be programmed as a stand alone device with the <a href="https://github.com/esp8266/Arduino">Arduino IDE!</a> That's right, you don't even need an arduino! Also, most of the arduino libraries work with it! I went this direction after exeriencing many frustrations using the ESP8266 in conjunction with an arduino. The ESP-07 version has more GPIO pins and is about the same price, whereas the ESP-01 only has two GPIO pins, one of which much be grounded to program the device.
</p>
<h3>First experiences with the ESP8266</h3>
<p>After playing around with this microcontroller for some time now, I have concluded that it can be finicky at times. Documentation for the device can also be difficult to find, especially if you run into problems. I am going to discuss what I went through to finally get the device fully working, along with the frustrations that I experienced.
</p>
<p>When you first get the device, make sure to have solid connections to each one of the pins. You will need an FTDI programmer to connect to USB. <a href="http://www.banggood.com/FT232RL-FTDI-USB-To-TTL-Serial-Converter-Adapter-Module-For-Arduino-p-917226.html">This is the one that I have and it works fine.</a> Just make sure you have one that is 3.3v capable or it will not work! The ESP8266 can draw over 200 mA at times and the FTDI programmer simply does not provide enough power. <a href="http://www.banggood.com/3Pcs-MB102-Breadboard-Module-Adapter-Shield-3_3V5V-For-Arduino-Board-p-957095.html">This is the power supply I used.</a>
</p>
<h3>Wiring</h3>
<p>Wiring is pretty much the same across different versions of the ESP8266. Connect VCC and CH_PD to power at all times. Gnd to gnd and on the ESP-07 GPIO15 must also go to gnd. When you program the device, you must have GPIO0 to ground for programming mode. You must also connect RX on the ESP8266 to TX on the FTDI programmer and vice versa. Make sure to connect all of the power and ground wires to the power supply and NOT the FTDI programmer. The only two wires you should have connected to the FTDI programmer are RX and TX.
</p>
<h3>Testing the ESP8266</h3>
<p>To test out the device, plug it into your computer and use a serial monitor. You can use the arduino serial monitor, or you can also use putty. Make sure to select the correct COM port and the right baud rate. Baud rates can vary. I have had some that are 9600 and others have been 115200. Just change the baud rate until you see text that you can actually read. Once connected, you can change the baud rate of the ESP8266.
</p>
<p>There is a set of AT commands to communicate with the ESP8266. The documentation of these commands is descent although some commands were a bit hard to find. <a href="https://nurdspace.nl/ESP8266">Here is a list of most of the commands.</a> A few important commands that are often missed are to change the baud rate and update the firmware on the device. You can update the firmware by using AT+CIUPDATE. You can also change the baud rate by using AT+CIOBAUD=9600, or whatever baud rate you desire.
</p>
<p>These commands can be used to test the ESP8266, but they are also the same commands if you wanted to use it with an arduino. Simply wire it up to serial on an arduino and print out the commands. I played around with this for a bit, but not long enough to get it fully working. This is how I was originally going to use the device, but I found it to be much easier programming the ESP8266 directly as a standalone device.
</p>
<h3>Programming ESP8266 with Arduino IDE</h3>
<p>A major advantage of programming the ESP8266 is that it is more powerful, yet much smaller in size. It uses a 32 bit processor and also has 1mb of ram (on the newer versions). <a href="https://github.com/esp8266/Arduino">Link to Github ESP8266 Arduino IDE.</a> You can install this in your Arduino IDE by File > preferences and adding <code>http://arduino.esp8266.com/package_esp8266com_index.json</code> to Additional Boards Manager URLs. Now you can go to Sketch > Libraries > Manage Libraries and add the ESP8266 library.
</p>
<p>Select an example sketch (WIFIScan) and make sure your ESP8266 is plugged in with GPIO0 to ground! It must be to ground to enter programming mode! Select Generic ESP8266 Module for the board and the right port. It shouldn't matter which programmer is selected. Compile and upload your sketch and it is as simple as that!
</p>
<h3>Complications</h3>
<p>I just want to reiterate some of my complications that I ran into throughout this process. The biggest thing to keep in mind it to check your connections! The first time I soldered all of the connections I couldn't figure out why it wasn't working. I checked each connection with a meter only to find out one of them was bad. Another thing is to make sure you use an external power supply! Connect all power and ground connections to these! Also connect the ground of your FTDI programmer to the ground of your power supply. Make sure the voltage of your power supply and FTDI programmer are 3.3v! Remember to connect GPIO0 to ground ONLY when uploading to the ESP8266.
</p>
<h3>Sources</h3>
<a href="https://www.sparkfun.com/products/13678">https://www.sparkfun.com/products/13678</a>
<br>
<a href="http://www.esp8266.com/">http://www.esp8266.com/</a>
<br>
<a href="https://github.com/esp8266/Arduino">https://github.com/esp8266/Arduino</a>
<br>
<a href="http://www.pridopia.co.uk/pi-doc/ESP8266ATCommandsSet.pdf">http://www.pridopia.co.uk/pi-doc/ESP8266ATCommandsSet.pdf</a>
<br>
<a href="https://nurdspace.nl/ESP8266">https://nurdspace.nl/ESP8266</a>
<br>
<a href="http://www.electrodragon.com/w/ESP8266">http://www.electrodragon.com/w/ESP8266</a>
</div>

91
New Folder/2015-10-28-wifi-led.html Normal file
View File

@@ -0,0 +1,91 @@
<div class="blog-post">
<h2 id="title" class="blog-post-title">Wifi Controlled LED Lights</h2>
<p id="date" class="blog-post-meta">October 28, 2015 by Mitchell</p>
<p id="intro">LED lights can be used for many different things. I have used LED lights in the past in my computer and even on my desk. They have always been wired to a physical switch. I now have LED lights that I can turn on and off and even change color from a simple web page that I can access with my phone.
</p>
<hr>
<p>For this project I used the ESP8266 microcontroller to connect to my wireless network, run a web server, and control an RGB LED strip based on inputs from a web form. I followed <a href="https://learn.adafruit.com/rgb-led-strips">this guide</a>, but incorporated Wifi to control the LEDs.
</p>
<p>Required Components
</p>
<p>ESP8266 <br>
12v Powersupply 1.2 Amps per meter (Keep in mind the ESP8266 can draw 200-400ma) <br>
Wiring <br>
<a href="http://www.banggood.com/10-Pcs-TIP120-NPN-TO-220-Darlington-Transistors-p-932779.html">TIP120 Transistors</a> <br>
12v to 3.3 volt converter
</p>
<br>
<p>Code can be found <a href="https://github.com/mgerb/wifi_leds/blob/master/wifi_RGB_strip.ino">here</a>.</p>
<div>
<script src="https://gist.github.com/mgerb/7858a3d20041dd94c841.js"></script>
</div>
<br>
<h3>Code</h3>
<p>Depending on which version of ESP8266 you have, this might not work. You need at least 3 GPIO pins. I used version ESP-07, which has plenty of usable GPIO pins. The code is fairly simple. Basic functionality includes connecting to my Wifi network and starting up a web server. I was able to log into my router after the ESP connected to assign it a static IP. This way I could always access the web server with the same IP address.
</p>
<p>The main program loop listens for an http request on the web server. If the cycle parameter is set to true, the color cycle function will continue to run until the server gets another HTTP request. The color cycle function happens to be a problem because it does not run asynchronously. This means that the whole color cycle must complete before it can respond to another HTTP request. This can cause delays when accessing the web page. Because this is a small personal project I didn't look into fixing this issue.
</p>
<p>All data from the web page is passed to the server through get parameters. The program parses through these parameters and checks to see if any of the colors are out of range. If they are out of range it either sets them to a max value of 250 or a min value of 0 (off). The changeColor method is called with paramters from the web form.
</p>
<h3>Changing Colors</h3>
<p>The changeColor function takes in 6 parameters; one for current color and one for each color passed from the web form. This function needs the current color because it implements the changing of colors gradually. Again, it is all synchronous so during the changing of colors the web server will not be able to respond to requests.
</p>
<h3>Cycling Colors</h3>
<p>The color cycle function is a bit more confusing than the changeColor function. This function cycles through each color once. The delay can be adjusted to how fast you would like the cycle to last. This function will continuously get called as long as the cycle boolean is true. After each cycle the server will still check for an http request. Like I mentioned above this function is synchronous so it must complete a full cycle before any other code is executed.
</p>
<p>This function is only chaning 2 RGB values at any one time. It contains two loops, one of which is nested. The first loop selects two pins to be cycled at one time: rgbColor[decColor] and rgbColor[incColor]. For example, it will first select Red and Green, then Green and Blue, and finally Blue and Red. During each selection, a nested loop is run, which cycles the color values of selected color pins. Red starts at 250 where Green starts at 0. The nested loop cycles Red to 0 while cycling Green to 250, exits the nested loop, and then proceeds to cycle Green and Blue, and finally Blue and Red.
</p>
<h3>Wiring</h3>
<p>The wiring for this project is fairly straight forward. The image below is from Adafruit's website and it illustrates the wiring for an Arduino. The ESP8266 wiring is fairly similar, but because it runs on 3.3 volts, I have used two regulators to convert 12 volts. I used a 5v and 3.3v regulator because the 3.3v regulator could not take 12v as an input. You could also just get a 12v to 3.3v converter but I used what I had on hand.
<br>
<br>
12v PSU > 5v > 3.3v > ESP8266
<br>
<br>
The power on the LED strip is wired straight to the positive connections on the 12v power supply.
</p>
<div>
<img class="img-responsive" src="https://learn.adafruit.com/system/assets/assets/000/002/692/medium800/led_strips_ledstripfet.gif?1396785823" alt="image">
</div>
<br>
<p>The image below is how I have my ESP8266 wired under my desk to control my led lights. As you can see the power comes in from the top right and the output for each RGB pin is on the left where the black is the 12v.
</p>
<div>
<img class="img-responsive" src="http://i.imgur.com/4p5CKOL.jpg" alt="image2">
</div>
<br>
<p>A picture of the final setup. I have one long LED strip along the back of the desk and two smaller strips on the back of each of the monitors.
</p>
<div>
<img class="img-responsive" src="http://i.imgur.com/aI5clZW.jpg" alt="image2">
</div>
</div>

50
New Folder/2015-12-18-temperature-sensor.html Normal file
View File

@@ -0,0 +1,50 @@
<div class="blog-post">
<h2 id="title" class="blog-post-title">Temperature Sensor on the Web</h2>
<p id="date" class="blog-post-meta">December 18, 2015 by Mitchell</p>
<p id="intro">The temperature readings that are displayed on this site come from the ESP8266 with a DHT11 sensor attached to it. I am going to explain the steps in the entire process. I will split it up into two parts. In this post I will focus on programming the ESP8266 and how to send data to a web server.
</p>
<hr>
<p><span class="colorRed">Update:</span> I have updated some information regarding this project. Refer to these other posts.
</p>
<a href="/?post=12-29-15.html">ESP8266 temperature sensor updates and difficulties</a>
<br>
<a href="/?post=1-1-2016.html">Temperatue Sensor - Server Side</a>
<br>
<br>
<p>For this project you will need an ESP8266 and a DHT temperature sensor. For prototyping purposes I prefer to use the <a href="http://www.banggood.com/NodeMcu-Lua-ESP-12E-WIFI-Development-Board-p-985891.html">NodeMCU module</a>. There are a variety of temperature sensors that you could use, but I prefer the DHT11 because it is easy to use and it is cheap! I ordered a 5 pack of them from <a href="http://www.banggood.com/5Pcs-KY-015-DHT11-Temperature-Humidity-Sensor-Module-For-Arduino-p-983263.html">Banggood</a>. The source code for this project can be found on <a href="https://github.com/mgerb/esp8266-HTTPTempSensor">Github</a>.
</p>
<h3>How it works</h3>
<p>When the ESP first boots up, it reads WiFi credentials from the EEPROM and tries to connect to an access point using those credentials. If no connection is made, it starts up it's own access point and runs a web server with a captive portal. This means that when anyone connects to it, it will redirect any dns request to itself, which forces anyone to the configuration page. The user can connect to the access point and enter in the ssid, password, and preferred sensor name. This information will be saved into EEPROM and the ESP will then reboot and start sending sensor data to the server.
</p>
<div>
<img class="img-responsive center" src="http://i.imgur.com/PhnDEyU.png" alt="image2">
</div>
<h3>ESP8266 File System</h3>
<p>To run the web server, I used the file system library within the arduino ESP library. This is how I store the web content in flash on the chip. It allows me to modify all of the necessary web files without having to deal with sending them as strings from the arduino code.
</p>
<p>To use the file system, you must download the tool <a href="https://github.com/esp8266/arduino-esp8266fs-plugin/releases/download/0.1.3/ESP8266FS-0.1.3.zip">here</a> to upload your files to the ESP. Once downloaded, store it in a tools folder in the arduino folder (path "/Arduino/tools/ESP8266FS/tool/esp8266fs.jar"). Now when you create a new sketch go to the sketch folder and create a "data" folder. To upload data to this folder select "Tools > ESP8266 Sketch Data Upload" and the files will be uploaded to the ESP and will be ready to use within the program. More information on the ESP8266 file system can be found <a href="http://esp8266.github.io/Arduino/versions/2.0.0/doc/filesystem.html">here</a>.
</p>
<h3>Sending data to the server</h3>
<p>There are many ways to send the data to a server, but I implemented data transfer with a simple get request. I chose this route because it is extremely simple to create a REST API in Node.js. I will cover this in a nother post. If you are unfamiliar with a get request, it is a way a web server can receive a request, and also parameters within that request. In this case, I send temperature, humidity, location, and a key as parameters in the request.
</p>
<p>If this were a full production application, this would not be the ideal way to handle data transfer to a server because it is not encrypted. A better practice would be to implement this using another TCP transfer protocol. In my case, it would be better to send a POST request over SSL, but I have not looked into that for this project yet as the method I am currently using seems to work just fine.
</p>
<h2>Code</h2>
<script src="https://gist.github.com/mgerb/fbed7864f8617ada797a.js"></script>
</div>

72
New Folder/2015-12-29-esp8266-updates.html Normal file
View File

@@ -0,0 +1,72 @@
<div class="blog-post">
<h2 id="title" class="blog-post-title">ESP8266 temperature sensor updates and difficulties</h2>
<p id="date" class="blog-post-meta">December 29, 2015 by Mitchell</p>
<p id="intro">I'm working on setting up new sensors now that I have been developing the back end of my website to display sensor information. Throughout this process I made updates to the current code for the project. As I continue to make progress I am overcoming obstacles as they show up.
</p>
<hr>
<p>I changed the way that the ESP8266 sends web pages to the user via HTTP requests. Previously I made use of the file system in the ESP8266, but I changed the way I did this because I noticed that it was a bit slow handling all the requests, especially because I used bootstrap to make the user interface look pretty. Although I cut down the bootstrap to only the pieces that I needed, it was still slower than I wanted.
</p>
<p>I decided to not use the file system and handle the html pages within header files. I found a fairly nice way of doing this. To do this, declare a new character array, store it in flash memory with "PROGMEM", and use the raw string literal functionality of C to escape all characters in a string as show below. This is not quite as nice a dealing with an HTML file in memory, but it is easier because you do not have to upload the files to the file system every time, which takes a good amount of time.
</p>
<code>const char page_html[] PROGMEM = R"=====(/*insert html here*/)=====";</code>
<p>This newly created page can now be sent back to the user upon an HTTP request.
</p>
<code>server.send(200, "text/html", page_html);</code>
<p>There were a few other updates that I made. I realized that if the access point the ESP was connected to goes down, it would not try to reconnect. It will now check if it is connected to the access point every time it tries to take a temperature reading and send data. If it is not connected to the access point it will reboot. Now that it reboots, if it still cannot connect to the access point it will be stuck in config mode. I fixed this by creating a timeout. If it has been sitting in config mode for 10 minutes the device will reboot.
</p>
<p>These example are show below. Keep in mind that this is not the entire program, but just the new functionality that I mentioned. The source code for the project can be found <a href="https://github.com/mgerb/esp8266-HTTPTempSensor/tree/working">here</a>.
</p>
<script src="https://gist.github.com/mgerb/61882e3676688bd4fb74.js"></script>
<h3>Problems flashing the ESP</h3>
<p>I previously used the ESP-07, but recently got some new ESP-12e's because of the higher flash size. I thought this would be great if I was going to make use of the file system. After spending hours and hours trying to flash these chips, I came to the conclusion that I need a better serial to USB programmer. The current one that I use came from China and was very cheap.
</p>
<p>With the new version of ESP Arduino software (2.0.0), you get the option of flashing with the ck mode. This requires GPI0 > DHT and RESET > RST. My FTDI programmer did not have an RTS pin, but rather a CTS. I found that I could flash one of my chips with this and the other I could not. After doing some research I found that it may be a problem with my Mac. Unfortunately my Ubuntu image that I usually dual boot with acted up and would not boot. This left me without any other operating system to try at the time.
</p>
<br>
<img class="img-responsive center" src="http://i.imgur.com/iNacOBT.jpg" alt="image">
<br>
<p>Because I was experiencing problems flashing with the new ESP8266 Arduino software, I reverted to an older version (1.6.5). In this version I was able to put GPI0 > Ground and start the ESP8266 in flash mode. This is the part where I realized I have a bad FTDI programmer. When I flash the device, it will get stuck every once in awhile. I then have to unplug everything and try again. I then tried a different programmer and it was able to work every time.
</p>
<p>After a good amount of frustration I was able to get my ESP8266 flashed with my new program and I got another temperature sensor set up. Here is the wiring that I used in the sensor. Keep in mind the DHT11 sensors that I used had a 10k resistor built into them.
</p>
<p>GND > GND</p>
<p>GPI15 > GND</p>
<p>VCC > 3.3v</p>
<p>EN (CH_PD) > 3.3v</p>
<p>GPIO5 > Sensor Data</p>
<p>The sensor VCC and Ground then were hooked up accordingly. I used an 800ma 3.3v regulator to power everything and it is working fine.</p>
<br>
<img class="img-responsive center" src="http://i.imgur.com/WrDh8oN.jpg" alt="image">
</div>

55
New Folder/2016-01-01-temperature-sensor-server.html Normal file
View File

@@ -0,0 +1,55 @@
<div class="blog-post">
<h2 id="title" class="blog-post-title">Temperature Sensor - Server Side</h2>
<p id="date" class="blog-post-meta">January 1, 2016 by Mitchell</p>
<p id="intro">The server side coding is a bit more complicated than programming the ESP8266 itself. I use a NoSQL database to store the information and some of the queries are complex and can be confusing to understand. I also make use of REST API's to send the data to the client side.
</p>
<hr>
<h3>Storing Information</h3>
<p>For this project I am using MongoDB to store all of my information because it goes well with my server, which is coded in Node.js, but any database could be used. I also wanted to learn about NoSQL databases because I already have experience with SQL databases. Information on coding the ESP8266 can be found <a href="/?post=12-18-2015.html">here</a> in a previous post.
</p>
<code>mitchellg.me/temperature?temperature=0&humidity=0&location=0&key=0</code>
<p>Above is the GET request that is sent to the server from the ESP8266. Data is tranferred through GET parameters. The key is an authentication code that I set to prevent unwanted HTTP requests. This is similar to an API key. Below is the code implemented to handle the HTTP request from the ESP8266.
</p>
<script src="https://gist.github.com/mgerb/4bedafa2bde264ee3135.js"></script>
<h3>Creating the REST API</h3>
<p>There are many ways that I could display the temperature information on a graph, but I was trying to come up with a quick and easy way that was also efficient. I also wanted reusability in case I wanted to add or change things down the road. I decided I was going to use <a href="http://www.chartjs.org/">Chart.js</a> because it is open source and free. These graphs are implemented on the front end using javascript. Because of this I needed to figure out a way to send the sensor data to the client side. I felt that the best way for me to do it would be creating a REST API. I plan on making another post in the future explaining all of my client side code along with how to use Chart.js.
</p>
<p>Now that I know how I want to display my information I just need to think of what information I want to display. I thought it would be cool to display a few different graphs. As of right now I have one graph that displays data by the year and one that displays by each month. The maximum and minimum temperature of each day are displayed as well as the average humidity for that day. The user can also select which year or which month to display and the graph will adjust accordingly.
</p>
<p>Now that I know what information I need I can start developing my REST API. I have a MongoDB collection called "temperature", which stores temperature, humidity, location, and time updated. Updated is a type of Date, which I will use in all of the queries to group by each day. To do the grouping in MongoDB I needed to use the <a href="https://docs.mongodb.org/v3.0/aggregation/">aggregation functionality</a> of MongoDB. Aggregation allows me to essentially perform queries on top of queries using the MongoDB "pipeline". This is similar to an SQL query when a selection is performed within a selection.
</p>
<script src="https://gist.github.com/mgerb/4879f4897f7e863e9003.js"></script>
<h3>Explanation of MongoDB Queries</h3>
<p>The first function takes in a location and year and returns maximum and minimum temperature readings as well as average humidity for each day in the selected year. The results are also returned sorted from newest to oldest.
</p>
<p>In the first part of the aggregation pipeline, which is $project, I am just selecting the temperature, humidity, year, month, and day. This part is important because it allows me to pull the year, month, and day from the date that is stored in the database. This way I do not have to store each of these entries separately in the database.
</p>
<p>This data is then passed to the next part of the aggregation pipeline. The $match pipeline stage selects out information from the collection which match with the selected year and location.
</p>
<p>The $group aggregation operator is the stage in which I actually group the data by the location, year, month, and day. For each group I also take the max and min temperatures along with the average humidity by using the correct accumulator operators. Now that I have the appropriate information I need, I just use the $sort pipeline operator to sort the data based on time updated.
</p>
<p>The function to display by month is the exact same, except I take in the month attribute and add it to the $match operator within the aggregation pipeline. Just like that the query is complete and all I need to do is send the response back to the client. Chart.js uses JSON format, which makes things extremely easy because MongoDB querie results are in JSON. I set the content type to JSON, and use JSON.stringify() to convert the JSON to a readable format for debugging purposes. An example API request can be tested out here.
</p>
<p><a href="/api/sensorbylocation/year?location=Winona%20Apartment&year=2016">/api/sensorbylocation/year?location=Winona%20Apartment&year=2016</a>
</p>
</div>

125
New Folder/2016-01-04-hosting-digital-ocean.html Normal file
View File

@@ -0,0 +1,125 @@
<div class="blog-post">
<h2 id="title" class="blog-post-title">Hosting a Node.js Web Server on Digital Ocean</h2>
<p id="date" class="blog-post-meta">January 4, 2016 by Mitchell</p>
<p id="intro">A VPS or "Virtual Private Server" is a nice way to host a web server. Digital Ocean provides a great service based on my experiences. I recently rebuilt a new server to host this site and I will go over the entire setup process.
</p>
<hr>
<h3>Creating a Droplet</h3>
<p>Digital Ocean calls their VPS's "Droplets" and they are very simple to set up. Create an account on the site and attach a credit card. You are now ready to create a droplet. In my case I use an Ubuntu server but Digital Ocean offers a variety of linux operating systems. Select the size, location, and name and the server is up and running! You will be emailed with the login information.
</p>
<h3>Login with SSH</h3>
<p>Select your newly created droplet and navigate to console access. You will be prompted to change your password. Once the password is changed you can connect to the root user account via SSH.
</p>
<pre><code>
$ ssh root@&lt;ip address&gt;
</code></pre>
<p>If you are using a Windows machine you can download <a href="http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html">putty</a> to connect with SSH. If you choose not to use SSH you can just use the console access on the Digital Ocean website.
</p>
<h3>Firewall</h3>
<p>The very next thing I do is set up the firewall. I only want to open ports that need to be open. I use the built in firewall tool in Ubuntu called UFW.
</p>
<pre><code>
$ ufw enable
</code></pre>
<p>Now that UFW is enabled I can start opening the necessary ports. I must open 22 if I want to continue to SSH into the server.
</p>
<pre><code>
$ ufw allow 22/tcp
</code></pre>
<p>This will open TCP port 22 for SSH. I also open port 80 because that is the port in which the web server will run on.
</p>
<h3>Network Monitoring</h3>
<pre><code>
$ sudo apt-get install vnstat
</code></pre>
<p>VNStat is a nice tool that will allow me to monitor the bandwidth my server consumes both outbound and inbound. Simply use the command "vnstat" to check the bandwidth. Note that it takes awhile for vnstat to capture bandwidth data if you just upon first installing it.
</p>
<h3>Terminal Multitasking</h3>
<pre><code>
$ sudo apt-get install screen
</code></pre>
<p>Screen is a really nice tool too use when dealing with multiple terminal windows. Simply use the command <code>$ screen</code> to start screen. Press CTRL>A then C to open another screen window. Navigate between screens by pressing CTRL>A then N. To check if scren is attached or detached simply use the command <code>$ screen -ls</code>. Reattach to screen by using <code>$ screen -r</code> and detach with <code>$ screen -d</code>. If screen is open and already attached, but you wish to attach to it, simply use the command <code>$ screen -d -r</code>.
</p>
<h3>NPM</h3>
<p>Now that I have the basics set up on my server I can start installing the dependencies for my Node.js web server. NPM is a package manager that is needed for Node.js. It makes things very easy when used properly.
</p>
<pre><code>
$ sudo apt-get install npm
$ sudo npm update npm -g
</code></pre>
<p>The package manager on ubuntu does not have the most recent NPM packge as of right now but it is very easy to update with NPM itself. The second command listed above will download the newest version of NPM and update itself.
</p>
<h3>Node.js</h3>
<p>Now that NPM is installed I can use it to install Node.js.
</p>
<pre><code>
$ sudo npm cache clean -f
$ sudo npm install -g n
$ sudo n stable
$ sudo ln -sf /usr/local/n/versions/node/&lt;VERSION&gt;/bin/node /usr/bin/node
</code></pre>
<p>This will install the latest version of Node.js.
</p>
<h3>MongoDB</h3>
<p>Installing MongoDB used to be very simple, but now they do not include the init scripts with the newest version. Installation instructions can be found <a href="https://docs.mongodb.org/manual/tutorial/install-mongodb-on-ubuntu/">here</a>.
</p>
<p>Once MongoDB is installed it can be run by using the command <code>$ mongod</code>, but I am going to show an easier way using the startup script. This way MongoDB will start when the VPS boots and it can also be monitored with the <code>$ service</code> linux command.
</p>
<pre><code>
$ cd /etc/init.d
$ sudo nano mongod
</code></pre>
<p>Once here copy the contents of <a href="https://github.com/mongodb/mongo/blob/master/debian/init.d">this file</a> into mongod. We now have the startup script, but we need to change some permissions first before it can run.
</p>
<pre><code>
$ sudo chmod 755 /etc/init.d/mongod
$ sudo chown root:root /etc/init.d/mongod
</code></pre>
<p>And to run MongoDB upon system startup.
</p>
<pre><code>
$ update-rc.d mongod defaults
</code></pre>
<h3>Restoring Database Files</h3>
<p>The web server is almost ready, but first I need to make sure all of my previous records are stored in the database. To do this I navigate to the folder which my records are stored in, which is contained in my git repository. I then use the command <code>$ mongorestore</code>, which loads everything from the dump into the freshly installed MongoDB. To backup MongoDB simply navigate to the desired folder to store the backup and issue the command <code>$ mongodump</code>.
</p>
</div>

65
New Folder/2016-05-22-flashing-esp8266.html Normal file
View File

@@ -0,0 +1,65 @@
<div class="blog-post">
<h2 id="title" class="blog-post-title">Flashing the ESP8266 with the Arduino IDE</h2>
<p id="date" class="blog-post-meta">May 22, 2016 by Mitchell</p>
<p id="intro">Flashing the ESP8266 with the newest version of the ESP8266/Arduino can be tedious with the off brand FTDI programmers.
</p>
<hr>
<h3>Problems with knockoff FTDI programmers</h3>
<p>The new version of ESP8266/Arduino offers different flashing methods than the previous versions, which are the CK and NodeMCU methods. These new methods allow the flashing tool to automatically reset the ESP8266 into boot loader mode. This is convenient if you have a NodeMCU or the right FTDI programmer. I have a cheap knock off FTDI programmer in which the CK flashing method does not work with.
</p>
<p>The table below shows the correct connections for using the esptool-ck method of flashing. The FTDI programmer that I use does not have the "RTS" pin. Alternatively it has a "CTS" pin. I figured the FTDI programmers were the exact same, but after attempting to flash with this method I was convinced otherwise.
</p>
<p><a href="https://github.com/igrr/esptool-ck" target="_blank">The current version of ESP8266/Arduino uses the esptool-ck flashing method</a></p>
<div class="table-responsive">
<table class="table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td>No DTR/RTS manipulation</td>
</tr>
<tr>
<td>ck</td>
<td>RTS controls RESET or CH_PD, DTR controls GPIO0</td>
</tr>
<tr>
<td>wifio</td>
<td>TXD controls GPIO0 via PNP transistor and DTR controls RESET via a capacitor</td>
</tr>
<tr>
<td>nodemcu</td>
<td>GPIO0 and RESET controlled using two NPN transistors as in <a href="https://raw.githubusercontent.com/nodemcu/nodemcu-devkit/master/Documents/NODEMCU_DEVKIT_SCH.png">NodeMCU devkit</a>.</td>
</tr>
</tbody>
</table>
</div>
<h3>The Solution</h3>
<p>Unfortunately the current verion of ESP8266/Arduino does not offer alternative methods of flashing. After hours of frustration I finally figured out a solution to the problem.
</p>
<p>The methods to flash the ESP8266 within the Arduino IDE can be adjusted. I first thought I needed to download another method to flash with such as the <a href="https://github.com/themadinventor/esptool">esptool.py</a>, but I found a much easier solution. The "boards.txt" file can be edited, which allowed more customization to the flashing settings within the Arduino IDE. This is the path on my system.
</p>
<pre><code>/Users/$USER/Library/Arduino15/packages/esp8266/hardware/esp8266/2.1.0/boards.txt</code></pre>
<p>The reset method needs to be changed from "ck" to "none" in order for this to work properly.
</p>
<pre><code>generic.upload.resetmethod=ck</code></pre>
<p>to</p>
<pre><code>generic.upload.resetmethod=none</code></pre>
<p>Because we are not using the CK flashing method, we need to boot up the ESP8266 into boot loader mode manually.
</p>
<pre><code>
GPIO0 -> gnd
VCC -> 3.3v
CH_PD -> 3.3v
GND -> gnd
TX -> RX
RX -> TX
</code></pre>
<p>The ESP8266 must be powered by an external 3.3v power supply, because the FTDI programmer cannot supply enough current. Also keep in mind that the ground of the FTDI programmer MUST be connected to the same ground that the ESP8266 is connected to. If this is not done it will not flash.
</p>
<p>This should solve any problems flashing with a knockoff FTDI programmer.</p>
</div>

89
New Folder/resume.html Normal file
View File

@@ -0,0 +1,89 @@
<div class="resume">
<h2>Mitchell Gerber</h2>
<p>Hello, my name is Mitchell and I am pursuing a career in software engineering. I have a passion for creating things and learning new technologies.
</p>
<p>I always find enjoyment in building things, whether it's computers, drones, or software. I started programming upon entering college and I have been hooked ever since. Programming has become a hobby of mine and it has opened up many opportunities.
</p>
<p>My primary strengths include server side development in Java as well as Node.js. I have experience working with relational databases such as MySQL. I've recently become familiar working with MongoDB as well. I helped develop a web application for Digi International that is used to debug embedded devices for testing purposes. I worked with Java/JSP, which ran on a Jetty web server and used an H2 SQL database.
</p>
<p>My interest in developing things follows me home after work hours. I often lose track of time working on personal projects. I'm currently working on this personal website to learn Node.js and familiarize myself with newer web development technologies. In my free time I enjoy building and flying radio controlled unmanned aerial systems. I've also recently gained an interest in programming microcontrollers.
</p>
<div class="row text-center">
<div class="col-lg-6">
<a href="/?post=12-18-2015.html" target="_blank"><img class="img-responsive" src="/public/images/sensors.png" alt="Sensor Project"></a>
<a href="/?post=12-18-2015.html" target="_blank">Sensor Project with ESP8266</a>
</div>
<div class="col-lg-6 text-center">
<iframe width="300" height="200" src="https://www.youtube.com/embed/9re_9DdNV6Y" frameborder="0" allowfullscreen></iframe>
<br>
UAS Footage from one of my drone projects
</div>
</div>
<h2>Technical Skills</h2>
<p>I started with Java and have been working with it since the end of 2012. I consider myself experienced in Java as I have used it for numerous projects throughout college as well as at my job as a Software Tester/Developer. I found my interest in web development in late 2014. Since then I've become familiar with different back end languages including Node.js, PHP, and Java. I've also worked with MongoDB as well as relational databases such as MySQL.
</p>
<p>Beginning of Summer 2015 I started venturing into the category of microcontrollers. I've become familiar with programming the Arduino as well as a microcontroller called the ESP8266. Throughout this process I've gained knowledge of working with C.
</p>
<p>As of late 2014 I've been using Linux as my primary operating system for software development, which has allowed me to become more familiar with Unix systems. I've also worked with Ubuntu server, which is used to host this website.
</p>
<h2>Related Experience</h2>
<ul>
<li>
<span class="colorRed">2014-Present</span> Software Developer/Tester - Digi International, WSU, Winona, MN
<br>
<blockquote class="resume">
<ul>
<li>Conduct manual system tests on software.</li>
<li>Develop testing tools for debugging embedded devices</li>
<li>Develop firmware for an embedded system.</li>
<li>Participate in weekly conference calls and produce weekly status reports</li>
<li>Collaborate with others on software development projects.</li>
</ul>
</blockquote>
</li>
<li>
<span class="colorRed">2011-2014</span> Technical Assistant - South Central Education Consortium, Grand Meadow, MN
<blockquote class="resume">
<ul>
<li>Support 10-20 faculty and staff with software and hardware issues.</li>
<li>Set up and image computer labs</li>
</ul>
</blockquote>
</li>
</ul>
<h2>Education</h2>
<ul>
<li><span class="colorRed">2012-2016</span> Bachelor of Science, Magna Cum Laude
<br>
Winona State University, Winona, MN
<br>
Major: Computer Science
<br>
Major GPA: 3.68
<br>
Dean's List: 6 semesters
</li>
</ul>
<h2>Contacts</h2>
<ul>
<li><a href="mailto:mgerb42@gmail.com">mgerb42@gmail.com</a></li>
<li><a href="https://github.com/mgerb" target="_blank">GitHub</a></li>
<li><a href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank">LinkedIn</a></li>
</ul>
</div>

2
client/assets/scss/main.scss
View File

@@ -35,7 +35,7 @@ body{
.Header{
width: 100%;
background: url("/images/header.jpg");
background: url("../images/header.jpg");
background-size: cover;
height: 30em;
border-bottom: solid;

54
metadata.js Normal file
View File

@@ -0,0 +1,54 @@
import fs from 'fs';
import marked from 'marked';
import highlight from 'highlight.js';
marked.setOptions({
header: true,
highlight: (code) => {
return highlight.highlightAuto(code).value;
}
});
const dir = './posts/';
const json = {
posts: []
};
//do everything synchronously to keep posts ordered
function parse_dir(dir, folder_name){
const posts = fs.readdirSync(dir);
for(let post of posts){
const stats = fs.statSync(dir + post);
if(stats.isDirectory()){
parse_dir(dir + post + '/', post);
} else {
const file = fs.readFileSync(dir+post, 'utf8');
const tokens = marked.lexer(file, null);
const path = dir + post;
const temp = {
path: path.slice(1, path.length),
category: folder_name,
date: post.slice(0, 10),
title: marked('<h2>' + tokens[0].text + '</h2>'),
intro: marked(tokens[1].text)
}
console.log(marked(file));
json.posts.push(temp);
}
}
}
parse_dir(dir, 'posts');
//sort posts by date
json.posts.sort((a, b) => {
return new Date(b.date) - new Date(a.date);
});
//output to public path
fs.writeFile('./dist/metadata.json', JSON.stringify(json,null,4), (err) => {
if (err) throw err;
console.log("Saved metadata.json");
})

4
package.json
View File

@@ -4,7 +4,7 @@
"description": "My personal website built with React and Go",
"main": "index.js",
"scripts": {
"build": "webpack -p",
"build": "webpack && babel-node metadata.js",
"c9": "webpack-dev-server --port $PORT --host $IP --hot --content-base dist --history-api-fallback",
"dev": "webpack-dev-server --content-base dist --inline --hot --history-api-fallback",
"prod-linux": "export NODE_ENV=production && webpack -p",
@@ -24,6 +24,7 @@
"homepage": "https://github.com/mgerb/mywebsite#readme",
"dependencies": {
"babel": "^6.5.2",
"babel-cli": "^6.11.4",
"babel-core": "^6.13.2",
"babel-loader": "^6.2.4",
"babel-plugin-react-html-attrs": "^2.0.0",
@@ -36,6 +37,7 @@
"exports-loader": "^0.6.3",
"file-loader": "^0.9.0",
"font-awesome": "^4.6.3",
"highlight.js": "^9.6.0",
"html-webpack-plugin": "^2.22.0",
"node-sass": "^3.8.0",
"react": "^15.3.0",

43
posts/2015-07-21-first-post.md Normal file
View File

@@ -0,0 +1,43 @@
## First Blog Post
My first blog post introduces this website and the motives behind it. I discuss setting up a Node.js webserver for the first time and my experiences with it thus far.
I have had this site up for awhile now, but I've decided to turn it into a blog style website, more or less. I first started working on the site because I wanted to learn new web development tools, in this case, Node.js and MongoDB.
I already had previous experience with SQL databases and other server side scripting languages such as PHP and JSP, but I heard good things about Node.js and I wanted to familiarize myself with a NoSQL database. At first, Node.js was a bit confusing to work with and figure everything out. Now that I am starting to get the hang of Node and MongoDB I am enjoying them more and more.
## Setting up Node.js for the first time
There are multiple ways to get up and running with Node. Node uses "modules" and has some that are already built in. Others need to be installed with the NPM package manager, which will become your friend. I am going focus on installing Node.js with Express, which is a web framework for Node.js.
```bash
$ sudo apt-get install nodejs
$ sudo apt-get install npm
```
Once you have both Node.js and NPM installed, install Express and MongoDB. We are going to install and use express generator to easily create a skeleton that we can work from.
```bash
$ npm install express-generator -g
```
Based on your system, installing MongoDB may be a bit different. [Here is a guide on how to install.](http://docs.mongodb.org/manual/) Once express generator is installed, it is extremely simple to set up a new Node application.
```bash
$ express myapp
```
This will generate a new folder myapp with prebuild folders and files.
```bash
$ cd myapp
$ npm install
$ npm start
```
Now as easy as that sounds, you have a Node web application running on your machine. You can navigate to your web app at localhost:3000 (It's configured to use port 3000 by default)
Express organizes everything nicely in the [Model View Controller](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller) software pattern. Folders are split up into views, routes, and public files. If you are implementing a database, you would also create a "models" folder. There is also a folder which contains Node modules. When you use NPM to install new modules this is where they will be located.
Node is a very powerful tool that I plan on exploring more in the future. As development of this site continues, I plan to submit more content similar to this.

126
posts/2015-07-28-how-to-use-git.md Normal file
View File

@@ -0,0 +1,126 @@
<h2 id="title" class="blog-post-title">How do I use git?</h2>
<p id="date" class="blog-post-meta">July 28 2015 by Mitchell</p>
<p id="intro">Git is a very useful file management system that you will find very handy. There are many services that host git repositories and it can also be installed on a personal server if you so choose. I'm going to explain how to set up git and discuss some useful commands and what they do.
</p>
<hr>
<p>Throughout this tutorial I am going to be focusing on <a href="http://www.github.com">Github</a>, because I find it easy to use and it is what I use most of the time. Github is just one of the many web-based git repository hosting services. It also has a nice GUI interface that may be useful to beginners, but I will mainly be focusing on git via command line. I have used both in the past and although command line may seem intimidating at first, it becomes easier and more powerful over time.
What exactly does git do? Git is basically a cloud service that you can use for your coding projects. You may be wondering why use git over other cloud hosting services such as dropbox? Git is essentially the same thing, but has many built-in utilities for coding projects specifically. For example, you can see the changes between each commit (or each time you save new changes) displayed in each file. Github has a nice web interface that displays of this information. This helps with version control and it allows you to see which users have made what changes.
## How to set up git
```bash
$ Sudo apt-get install git
```
In linux just use the command above to install git. You will then run all git commands within the terminal. If you are on a Windows machine you can install git [here](http://git-scm.com/download/win). Once git is installed you can start using it immediately.
```bash
$ cd Desktop && mkdir testgit && cd testgit && git init
```
Executing the above command will create a folder on the desktop and initialize a git repository. It also creates a .git folder that contains the settings of the repository. If you have already created a project and want to set it up as a git repository just simply navigate to the root directory and use `$ git init`.
```bash
$ echo "testgit" >> README.md
```
You must create a readme file within the directory to be able to push to github. You can put anything in the readme, but github uses this file to display information about your repository on the main page.
You must also first register with Github before you can create your own repositories. When pushing to your repository, you will be asked for your login credentials. You can globally configure these if you do not wish to be asked every time.
```bash
$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com
```
Now that you have initialized your git repository, you can start on your project and begin adding files. When you wish to save your files to the repository, you must first add all of the changes. YOU MUST ADD CHANGES BEFORE YOU COMMIT!! I have commited and pushed without adding changes multiple times before so do not forget!
```bash
$ git add -A
```
This will add all changes of all files in the directory. Once you have added all of the changes you can now commit.
```bash
$ git commit -m "First Commit"
```
Committing your changes does NOT push them to Github. It just saves all of the new changes and sets them up to be pushed. The above command will make a commit with the message "First Commit". You must have a message with each commit! The -m parameter allows you to put a message in quotes without opening it up with an editor.
Now everything is ready to be pushed to Github. We first need to create a repository on Github that we can push to. You can simply do this by clicking the "New Repository" button on Github's website. Once the repository is created, we need to attach our newly created repository to it. We can do this by using the `remote` command.
```bash
$ git remote add origin https://github.com/username/repositoryname.git
```
Replace "username" and "repositoryname" with your username and the name of your newly created repository and now your local repository should be attached to Github. Now we can finally push all changes to Github.
```bash
$ git push origin master
```
You should be prompted to enter your username and password, unless you configured that globally before. Now, each time you want to save your changes to github, execute the follwoing commands.
```bash
$ git add -A
$ git commit -m "Commit Message"
$ git push origin master
```
If you ever lose files, or want to work on this same project on another machine you can simply clone the entire repository and continue working on it from the last time you pushed. Just navite to your repository on Github's website and copy the URL.
```bash
$ git clone https://github.com/username/repositoryname.git
```
This will copy the entire repository into its own folder. If you implement changes on one machine and you want to update the repository on another, you can pull all of the most recent changes.
```bash
$ git pull
```
Note: You must do this in the directory of the repository you wish to pull the changes.
This is just a beginner guide on how to use git for the first time. There are still many other things that git has to offer, but these are the basic commands to get you started and using git.
## Edit 10/27/15: More information on Git
I would like to discuss a few more things about git that I have learned and become familiar with. I am hosting this website on an Ubuntu VPS from Digital Ocean and I rely heavily on git to update and make changes. I've recently added a new "working" branch to my repository. This makes it easier to work on changes while not breaking the master branch. Another branch can be made on github and you can base it off another branch. I started a "working" branch and copied the master branch.
```bash
$git checkout working
```
Now, after cloning my repository I can switch to my new working branch with the checkout command. Keep in mind that if I was working on my master branch with uncommited changes, I cannot checkout to another branch without commiting current changes to the master branch. After making new changes to my new "working" branch I can add, commit, and push them to Github. If and when I want to update my master branch I can checkout to my master branch, merge changes with "working" and push changes to Github. The master branch should then be up to date with the "working" branch.
```bash
$git add -A
$git commit -m "commit message"
$git push origin working
$git checkout master
$git merge working
$git push origin master
```
At any time you can check to see which branch you are working on and if any files have been updated/are ready to commit by using the status command:
```bash
$git status
```
Now that my changes with "working" are updated on "master" I can pull the changes to my server on Digital Ocean. I sometimes have to log into my server and make minor updates to the code. This can cause merge conflicts with git and I may be unable to pull the master branch. To resolve this issue I must reset the master branch so that I can pull new changes.
```bash
$git reset --hard
$git pull
```
This will reset the branch to the last commit and get rid of any uncommited changes. Only do this if you have not made changes that you want to save. Because it is running on my server, I want to overwrite any changes anyway.
These are a few more git commands that I have learned since working on this project. As I become more familiar with git I will continue to update this post