book collections email follower instructable user

Introductions first…

I build car gauges as a sort of on again and off again hobby. See https://www.instructables.com/id/Remote-Car-Monit... and https://www.instructables.com/id/Remote-Car-Monit... for two more recent examples. I especially like ones that blend in with the original parts of the car. So, why is this one different and what inspired me to build it. The answer is two things:

1) ESP32 - I wanted to try out the new kid on the block chip, especially since the arduino-based toolchain for it is fairly mature. One of the interesting things that the ESP32 enables is IOT with its built in wifi and bluetooth capabilities. The community has written multiple libraries to make this somewhat straightforward (webservers, AP’s, wifi clients, mDNS, etc, etc.).

2) Cheap OLED screens - Back in 2007 I made a gauge using a TFT that sat in the place of the clock on a GD (2004-2007) WRX. TFT come in various flavors. Some work better at night, some work better in the day, etc. But none of them work in all conditions. I didn’t realize the error of my ways until one of the gauges I used was useless during a forum member’s sunny track day. Enter OLED, which are awesome for automotive applications. They are not too bright at night and (more importantly) are visible in most sunlight conditions.

This is a two for one instructable as I wrote everything for two common car gauges, oil pressure and turbo pressure. Both are essentially the same thing: a small form factor gauge with an animate analog-look OLED display with discrete numbers and maximums displayed. Both also function as wifi AP’s and webservers. When one connects to them via a computer or cell phone a moving EKG stype chart is viewable (this is the somewhat innovative part).

Step 1: Code First/Hardware Second

Picture of Code First/Hardware Second
IMG_5216.JPG

Code can be downloaded here:

Oil Pressure - https://github.com/stirobot/ESP32OilPsiAnimated

Boost Pressure - https://github.com/stirobot/ESP32BoostAnimated

Boost Pressure with faces instead of analog look gauges - https://github.com/stirobot/ESP32BoostFaces

Graphics code:
The ThingPulse library is so very efficient that you can draw xbms right on top of one another and get convincing results!

The gauge images actually came from an open source graphics repository (https://thenounproject.com/). The artist Iconic, CY (https://thenounproject.com/icon/490005/).

I used gimp to generate 20 different frames with the needle pointing to each tick mark. The smiley face Icons are by NOVITA ASTRI, ID and are here: https://thenounproject.com/search/?q=smile&creato...

Then I converted these all into const uint8_t arrays using this technique (hint: if the colors are inverted when you display them, just invert the colors on the original): https://blog.squix.org/2015/05/esp8266-nodemcu-ho...

Live animation code is pretty straightforward:

  • Get reading from sensor
  • Scale reading (I made it 1 to 1 for positive boost values and only move the needle when it is in boost not when it is in vacuum)
  • Draw xbm and then put down number characters for everything else.
  • rinse and repeat

Sensor code:
I am reusing sensor code I’ve used for these two sensors for a few other projects. I did add some averaging to get away from jumpy sensors. This includes reading each "reading" being an average of 5 readings.

Boost code (sensor gives an analog val from 0-5 volts which the ADC turns into steps from 0-1024):

<pre>int getBoost() {<br>  float rboost = ((analogRead(36) + analogRead(36) + analogRead(36) + analogRead(36) + analogRead(36))/5);
  //float ResultPSI = (rboost*(.00488)/(.022)+20)/6.89 - atmo; //leave of the /6.89 for kpa
  float ResultPSI = (((rboost / 4095) + 0.04) / 0.004) * 0.145 - atmo; //by 0.145 to calc psi //4096 values on esp32
  /*rBoost = rBoost + 1 ;
    if (rBoost >= 20) {
    rBoost = 0;
    }*/
  return (ResultPSI);
}

Oil pressure code (the sensor varies its resistance based on the pressure it senses so a voltage divider is required to turn this into a voltage from 0-5v see: https://electronics.stackexchange.com/questions/3... https://www.instructables.com/id/Remote-Car-Monito...(toward the bottom) for more information):

int getOilPSI() {<br>  float psival = ((analogRead(36) + analogRead(36) + analogRead(36) + analogRead(36) + analogRead(36))/5);
  psival = -0.0601*psival + 177.04 - 14.5;
  return psival;
}

Web Server and AP functionality:
AP functionality is fairly simple - instantiate and AP object with the ESSID you want to broadcast and the password and you are good to go.

const char *ssid = "boost_gauge_ap";<br>const char *password = "password";
WiFi.softAP(ssid, password);

It even has a DHCP server so you don’t have to worry about that. By default it’s IP is 192.168.1.4 (no idea why, that’s just what the chose).
The webserver bit is a little trickier and required a bit of research. Basically you want an async webserver so it can get live updating data. Luckily there is a library for that. I am not a javascript developer, so I tinkered with a bunch of charting and graphing libraries until I stumbled on smoothie charts. Most other charting libraries are written such that they inherit all kinds of code from other libraries from across the web that are dynamically loaded when a page is rendered. I wanted this to work independent of the internet so this was a big find. Second it had to be small enough that it fit on an arduino and as you can see in the code it fits in a single char array.

Webserver declarations:<br>
#include AsyncTCP.h
#include ESPAsyncWebServer.h<br>
…
AsyncWebServer server(80); //instantiate it and pick port (80 is standard for http)
…
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", "...  			//the webpage + the smoothiecharts library in a huge char array
});
    server.on("/val", HTTP_GET, [](AsyncWebServerRequest *request){ //the first page actually calls this very small page that just returns the value
    request->send(200, "text/html", Sboost);
  });
  server.begin();
JohnN33 months ago
Great instructable. The problem for me as a senior citizen is that I can't see the details of an OLED at a distance. I'd like to see more projects using epaper displays :)
JustinN1 (author)  JohnN33 months ago
Thank you for the compliment.

Yes, these are relatively small displays that I chose based largely on convenience for this project. They fit in small locations of the dash and are sunlight readable.

I am very interested in doing an e-ink display project. The newer/now more widely available 3 color ones are particularly interesting. I'm just not sure what I'd do with one yet. They don't lend themselves to fast updating gauges but could be good for a weather station, beer brewing monitor, or something of the like.
tytower3 months ago
Seems like a pretty detailed write up and if it works it would also be useable on boats for wind ,solar and course data . I won't build it though at this point but maybe play with it later .
Can't help but mention though that it becomes very tedious to read "Use caution, knives and scissors are sharp, electricity can be dangerous so please disconnect the battery before wiring things up."
Do you really need to put that in there ? When we open something these days ,instead of a warranty we get a 20 page booklet in half a dozen languages telling us what not to do and very little of what we need . I for one am sick of it.