ESP13 wifi shield

The ESP13 wifi shield is a cool and massively frustrating piece of equipment. But don’t despair its not broken. to work it requires equal parts:

  • reading the documentation thats there
  • lateral thought
  • dismiss the “pin compatible with the uno” comments.

Getting going

Many posts discuss the doit firmware and assume that it is installed.
This gives you a nifty web host to connect directly to. Thats cool and all but we are real techies so using the original firm ware how does it work. lets start with basic wiring.

My module I got form Jaycar (don’t start I know) and I am connecting with a UNO R3 this was a total fail to start with:

  • No wifi signal,
  • no example script worked,
  • uploads failed if the dip switches were set on

Software

open a new blank sketch, and upload the blankness in to the UNO first. this will start you with a serial free slate.

  • Go to the Arduino IDE
  • go to properties (preferences) and in the “Additional Boards Manager”  add the URL
    http://arduino.esp8266.com/stable/package_esp8266com_index.json
  • save and close.
  • next Tools > Board > boards manager
  • start typing “esp” and install the package for the “ESP8266”
  • next Tools > Board > ESP DUINO (ESP13)
  • then Tools > Serial monitor

cool ready to go.

Hardware

  • Disconnect the uno from everything.
  • Disconnect the wifi shield from everything

Connect

  • Uno 5v > ESP13 5v
  • Uno GND > ESP13 GND
  • Uno RX > ESP13 TX
  • Uno TX > ESP13 RX

Note: the esp13 wifi shield connection pins are all next to each other in a row. Basically the TX, RX, G and 5V  in a row.  The Uno labels all its connections also.

Connect the uno USB for power and serial.

Communicate

Set the Serial monitor

  • baud rate to 115200 and the
  • line end to Both NL & CR

Now you are ready to communicate check the reference commands here: https://room-15.github.io/blog/2015/03/26/esp8266-at-command-reference/

but for fun try:

AT -> will respond OK
AT+CWLAP -> will respond WIFI in the area
AT+RST -> will respond with the modules info.

It really is fairly easy to start having fun again!

INCOMPLETE DOCO 
- missing images / diagram
- programming info 

I plan to add more but this is a start to the process and a good step forward in my knowledge.

Mapping tools

Ever needed to build an online map?
Want to make google maps look better?
Google is not the only option, even if it is one of the most well developed and managed.

Complete Tools

Map Box

complete mapping solution, data vector maps and a pretty looking API.

Google – Maps for work

Premium mapping tools to beat those API limits.

 

Skin builders

Snazzy Maps

Google maps never looked so good. Works by allowing you to style a map and then export the options object required wen requesting a map via the google API.

Styled maps wizard

V.Basic Google maps skinning tool.

 

IP location tools

www.geoplugin.net

accessing a users agent IP and querying geoplugin will give you detailed info on the IP location. like:

http://www.geoplugin.net/json.gp?ip=169.123.13.33

pretty cool :)

Presentation options

Setting up a presentation or making a set of slides for company, colleges or a laugh. This is a list of tools I’ve found to make you look like a pro AND share your work with the world.

Self hosted tools

reveal.js

HTML presentation library makes markup awesome and add interactive elements to your slides.

We don’t know what we don’t know…
more to come

 

Online tools

Slides

Slides is the online editing tool from the creators of reveal.js. Service requires an account free for public shares then monthly starting at $6 per month.

Slideshare

online presentation tool owned by LinkedIn.

Goole slides

Google Docs offers an online tool with much of the functionality of your desktop presentation tools. Using the publish to the web functionality you can easily share a version of your presentation via an embed link

We don’t know what we don’t know…
more to come

 

Use binding to link multiple elements to a function on event

When creating multiple elements in React using prototype.map() is a neat simple way to cut through any array. But managing JSX and the closure that happens in the map() and accessing the “this.moduleFunction”  can make things a tad more confusing.

Two things need to happen and it’s all about bind()


create a bound event function

var boundClick = this.ModuleFunction.bind(this, i, data.id);

Here for each item in the array a new bound function is created, sweet. But accessing the moduleFunction is not possible without another binding.


Bind map() to the modules scope

This can be done in a couple of ways:

  1. Lo-Fi assign this  – var _this = this; The _this is then available to all subsequent callbacks and will not interfere with the parent object.
  2. Use the built in bind call back arg!

In the function below the binding to the modules scope occurs in the “e}, this);” reference.
It allows us to access ‘this’ happily in map() , best part you can assign any object here.
Its like your not even in a private function.

anyArray.map(function(data){
//iterating
}, this);


Track outbound links with tag manager

Requires the following addition to standard tag manager set up.
One Macro {{site URL}}, one new rule  and one Tag (Event Fire – Outbound)

Macro 

Name: site URL
Type: Constant
Value: your site URL


 

 

Tag

Name: Event fire – Outbound
Type: Universal analytics – Event
Values:

Category: outbound-links
Action: Click
Label: {{element url}}


 

 

Rule

{{event}} = gtm.click

{{element url}} != {{site URL}}


 

 

Dependences 

  • Click listener required for gtm.click