Website display canbus info

sp2k21uk-esp32 · February 22, 2022, 11:51am


#include <WiFi.h>
#include <WiFiClient.h>
#include <WiFiAP.h>
#include <SPI.h>
#include <mcp2515.h>
#include <MCUFRIEND_kbv.h>
struct can_frame canMsg;
//char receivedChars[11];
MCP2515 mcp2515(10);
MCUFRIEND_kbv tft;

#include <Fonts/FreeSans9pt7b.h>
#include <Fonts/FreeSans12pt7b.h>
#include <Fonts/FreeSerif12pt7b.h>
#include <FreeDefaultFonts.h>

#define BLACK       0x0000      /*   0,   0,   0 */
#define NAVY        0x000F      /*   0,   0, 128 */
#define DARKGREEN   0x03E0      /*   0, 128,   0 */
#define DARKCYAN    0x03EF      /*   0, 128, 128 */
#define MAROON      0x7800      /* 128,   0,   0 */
#define PURPLE      0x780F      /* 128,   0, 128 */
#define OLIVE       0x7BE0      /* 128, 128,   0 */
#define LIGHTGREY   0xC618      /* 192, 192, 192 */
#define DARKGREY    0x7BEF      /* 128, 128, 128 */
#define BLUE        0x001F      /*   0,   0, 255 */
#define GREEN       0x07E0      /*   0, 255,   0 */
#define CYAN        0x07FF      /*   0, 255, 255 */
#define RED         0xF800      /* 255,   0,   0 */
#define MAGENTA     0xF81F      /* 255,   0, 255 */
#define YELLOW      0xFFE0      /* 255, 255,   0 */
#define WHITE       0xFFFF      /* 255, 255, 255 */
#define ORANGE      0xFDA0      /* 255, 180,   0 */
#define GREENYELLOW 0xB7E0      /* 180, 255,   0 */
#define PINK        0xFC9F
#define SCREEN_WIDTH 128 // OLED display width, in pixels
#define SCREEN_HEIGHT 32 // OLED display height, in pixels

// Set these to your desired credentials.
const char *ssid = "canbusweb";
const char *password = "login123";

WiFiServer server(80);

String header;
void setup() {
  Serial.begin(115200);
  mcp2515.reset();
  mcp2515.setBitrate(CAN_500KBPS);
  mcp2515.setNormalMode();
  Serial.println();
  Serial.println("Configuring access point...");

  // You can remove the password parameter if you want the AP to be open.
  WiFi.softAP(ssid, password);
  IPAddress myIP = WiFi.softAPIP();
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.begin();

  Serial.println("Server started");
}

void loop() {
  WiFiClient client = server.available();   // listen for incoming clients
  if (mcp2515.readMessage(&canMsg) == MCP2515::ERROR_OK) {
    //start of voltage meter
    if (canMsg.can_id == 0x789 && canMsg.data[canMsg.can_dlc - 5] == 0x42) {
      decodevolts();
    }
    //end of voltage meter

    //start of SoC
    if (canMsg.can_id == 0x789 && canMsg.data[canMsg.can_dlc - 5] == 0x46) {
      decodesoc();
    }
    //end of SoC

    //start of tyre pressure
    if (canMsg.can_id == 0x72C) {
      decodeTyre();
    } //end of tyre pressure

    //start of odometer
    if (canMsg.can_id == 0x768) {
      decodeOdometer();
    }
    //end of odometer

    //start of doors
    if (canMsg.can_id == 0x748 && canMsg.data[canMsg.can_dlc - 5] == 0x12)  {
      decodeDoors();
    }
    //end of doors

    //start of lights
    if (canMsg.can_id == 0x748 && canMsg.data[canMsg.can_dlc - 5] == 0x17)  {
      decodelights();
    }
    //end of lights

    //start of temp
    if (canMsg.can_id == 0x7EB && canMsg.data[canMsg.can_dlc - 5] == 0x1B)  {
      decodecharge();
    }
    //end of temp

    Serial.print(canMsg.can_id, HEX); // print ID
    Serial.print(" ");
    Serial.print(canMsg.can_dlc, HEX); // print DLC
    Serial.print(" ");

    for (int i = 0; i < canMsg.can_dlc; i++)  {
      if (canMsg.data[i] < 0x10) Serial.print('0');
      Serial.print(canMsg.data[i], HEX);
      Serial.print(' ');
    }
    Serial.println();
  }
  if (client) {                             // If a new client connects,
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    if (client.available()) {             // if there's bytes to read from the client,
      // Display the HTML web page
      client.println("<!DOCTYPE html><html>");
      client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
      client.println("<link rel=\"icon\" href=\"data:,\">");
      // CSS to style the table
      client.println("<style>body { text-align: center; font-family: \"Trebuchet MS\", Arial;}");
      client.println("table { border-collapse: collapse; width:35%; margin-left:auto; margin-right:auto; }");
      client.println("th { padding: 12px; background-color: #0055af; color: white; }");
      client.println("tr { border: 1px solid #ddd; padding: 12px; }");
      client.println("tr:hover { background-color: #bcbcbc; }");
      client.println("td { border: none; padding: 12px; }");
    }
  }
}

void decodeOdometer() {
  /* decode Odometer
      id = 0x0768
      dlc = 7
      example data[] = 06 62 B1 01 00 04 75 00
     data byte values 04 75
       24 bit value
  */
  uint32_t Odo =  (uint32_t) canMsg.data[canMsg.can_dlc - 3] * 256  + (uint32_t) canMsg.data[canMsg.can_dlc - 2];
  tft.fillRect(20, 195, 150, 40, BLACK);
  tft.setCursor(30, 200);
  tft.setTextSize(3);
  tft.setTextColor(ORANGE, BLACK);
  tft.print(Odo / 1.609344, 1);
}


void decodeTyre() {
  /* decode Tyre pressure
      id = 0x072C
      dlc = 8
      example data[] = 07 62 B0 01 41 36 41 41
     data byte values (last 4 bytes)
      byte 3 = front left
      byte 4 = front right
      byte 5 = rear right
      byte 6 = rear left
  */

  byte RL = canMsg.data[7];
  byte RR = canMsg.data[6];
  byte FR = canMsg.data[5];
  byte FL = canMsg.data[4];
  float pressrl = RL * 0.5823 - 0.15294;
  float pressrr = RR * 0.5823 - 0.15294;
  float pressfr = FR * 0.5823 - 0.15294;
  float pressfl = FL * 0.5823 - 0.15294;
  tft.fillRect(20, 47, 40, 70, BLACK); // tyre car
  tft.fillRect(98, 47, 40, 70, BLACK); // tyre car
  tft.setTextColor(BLUE, BLACK);
  tft.setTextSize(2);
  tft.setCursor(18, 96);
  tft.print(pressrl, 1);
  tft.setCursor(100, 96);
  tft.print(pressrr, 1);
  tft.setCursor(100, 52);
  tft.print(pressfr, 1);
  tft.setCursor(18, 52);
  tft.print(pressfl, 1);
}

void decodeDoors() {
  /*  decode open doors
      id = 0x0748
      dlc = 8
      example data[] = 01 62 D1 12 80 00 00 00
     data byte values (last 4 bytes)
      0x80 = no doors open
      0x01 = Driver door
      0x02 = passenger door
      0x04 = rear left door
      0x05 = rear right door
      0x10 = bonnet
      0x20 = boot
  */

  for ( int i = 4; i < canMsg.can_dlc; ++i ) {
    switch ( canMsg.data[i] ) {
      case 0x80:
        tft.fillRect(345, 27, 70, 100, BLACK);
        return; // nothing so no need to continue
      case 0x01:
        tft.drawRect(370, 47, 20, 70, WHITE); // door car
        tft.setTextColor(RED, BLACK);
        tft.setTextSize(3);
        tft.setCursor(398, 52);
        tft.print(">");
        break;
      case 0x02:
        tft.drawRect(370, 47, 20, 70, WHITE); // door car
        tft.setTextColor(RED, BLACK);
        tft.setTextSize(3);
        tft.setCursor(342, 52);
        tft.print("<");
        break;
      case 0x04:
        tft.drawRect(370, 47, 20, 70, WHITE); // door car
        tft.setTextColor(RED, BLACK);
        tft.setTextSize(3);
        tft.setCursor(342, 96);
        tft.print("<");
        break;
      case 0x05:
        tft.drawRect(370, 47, 20, 70, WHITE); // door car
        tft.setTextColor(RED, BLACK);
        tft.setTextSize(3);
        tft.setCursor(398, 96);
        tft.print(">");
        break;
      case 0x10:
        tft.drawRect(370, 47, 20, 70, WHITE); // door car
        tft.setTextColor(RED);
        tft.setTextSize(3);
        tft.setCursor(372, 32);
        tft.print("^");
        break;
      case 0x20:
        tft.drawRect(370, 47, 20, 70, WHITE); // door car
        tft.setTextColor(RED);
        tft.setTextSize(3);
        tft.setCursor(372, 105);
        tft.print("^");
        break;
    }
  }
}

void decodevolts() {
  /* decode Volts
      id = 0x0789
      dlc = 8
      example data[] = 05 62 B0 42 06 8C 00 00
     data byte values are 06 and 8C
       24 bit value
  */
  uint32_t battvolt =  (uint32_t) canMsg.data[canMsg.can_dlc - 4] * 256  + (uint32_t) canMsg.data[canMsg.can_dlc - 3];
  tft.fillRect(50, 240, 140, 40, BLACK);
  tft.setCursor(100, 245);
  tft.setTextSize(4);
  tft.setTextColor(ORANGE, BLACK);
  tft.print(battvolt / 4);
  tft.fillRect(100, 290, 285, 30, BLACK);
  tft.fillRect(100, 290, 10, 30, RED);
  tft.fillRect(375, 290, 10, 30, GREEN);
  tft.fillRect(240, 290, 10, 30, ORANGE);
  if (battvolt >= 8 && battvolt < 1676) {
    tft.fillRect(110, 300, battvolt / 8, 10, WHITE);
  } else if (battvolt == 1676)
    tft.fillRect(110, 300, 265, 10, WHITE);
}

void decodesoc() {
  /* decode Volts
      id = 0x0789
      dlc = 8
      example data[] = 05 62 B0 46 06 8C 00 00
     data byte values (last 3 bytes)
       24 bit value
  */

  uint32_t Soc =  (uint32_t) canMsg.data[canMsg.can_dlc - 4] * 256  + (uint32_t) canMsg.data[canMsg.can_dlc - 3];
  if (Soc >= 1000) {
    tft.fillRect(235, 240, 125, 40, BLACK);
    tft.setCursor(255, 245);
    tft.setTextSize(4);
    tft.setTextColor(ORANGE, BLACK);
    tft.print(100);
  }
  tft.fillRect(235, 240, 125, 40, BLACK);
  tft.setCursor(245, 245);
  tft.setTextSize(4);
  tft.setTextColor(ORANGE, BLACK);
  tft.print(" ");
  tft.print(Soc / 10);
}

void decodelights() {
  /*  decode lights
      id = 0x0748
      dlc = 8
      example data[] = 07 62 D1 17 04 20 00 00 - lights on
                       07 62 D1 17 00 20 00 00 - lights off
    data byte values
      0x04 = lights on
      0x00 = lights off
  */

  for ( int i = 4; i < canMsg.can_dlc; ++i ) {
    switch ( canMsg.data[4] ) {
      case 0x00:
        tft.fillRect(200, 55, 50, 50, BLACK);
        tft.drawRect(200, 55, 50, 50, WHITE);
        tft.setTextColor(WHITE);
        tft.setTextSize(5);
        tft.setCursor(200, 61);
        tft.print("=)");
        break;
      case 0x04:
        tft.fillRect(200, 55, 50, 50, GREEN);
        tft.setTextColor(RED);
        tft.setTextSize(5);
        tft.setCursor(200, 61);
        tft.print("=)");
        break;
    }
  }
}

void decodecharge() {
  /*  decode charger
      id = 0x07EB
      dlc = 8
      example data[] = 04 62  B7  1B  00  00  00  00 -
                       04 62  B7  1B  01  00  00  00 -
    data byte values
      0x04 = charger connected
      0x00 = charger disconnected
  */

  for ( int i = 4; i < canMsg.can_dlc; ++i ) {
    switch ( canMsg.data[4] ) {
      case 0x00:
        tft.fillRect(200, 110, 50, 50, BLACK);
        tft.drawRect(200, 110, 50, 50, WHITE);
        tft.setTextColor(WHITE);
        tft.setTextSize(5);
        tft.setCursor(215, 127);
        tft.print("~ ");
        break; // nothing so no need to continue
      case 0x01:
        tft.fillRect(200, 110, 50, 50, GREEN);
        tft.setTextColor(BLACK);
        tft.setTextSize(5);
        tft.setCursor(215, 127);
        tft.print("~ ");
        break;
    }
  }
}

i have a working code which takes data from canbus and displays it on tft, but i want to make it sent it to a webpage that clients can access showing the charge data etc.
i have got the code to work where it creates a blank page but have no way of working out how to send the data.

can anyone help?

Idahowalker · February 22, 2022, 11:58am

ESP32 HTTP GET and HTTP POST with Arduino IDE | Random Nerd Tutorials

The GET and POST part might interest you.

I basically create a web page like so.

<?php
$setPoint = $_GET['setPoint'];
//echo $setPoint;
include 'db_connection.php';
$query = "UPDATE State SET setHumidity =" . $setPoint ;
$result = mysqli_query($con, $query); 
//echo $result ;
mysqli_close($con); 
?>

then have the MCU send data as a http thingy. The page called parses the incoming data and then places the data into the websites dB.

sp2k21uk-esp32 · February 22, 2022, 12:10pm

ok that went straight over my head

sp2k21uk-esp32 · February 22, 2022, 12:19pm

void decodevolts() {
  /* decode Volts
      id = 0x0789
      dlc = 8
      example data[] = 05 62 B0 42 06 8C 00 00
     data byte values are 06 and 8C
       24 bit value
  */
  uint32_t battvolt =  (uint32_t) canMsg.data[canMsg.can_dlc - 4] * 256  + (uint32_t) canMsg.data[canMsg.can_dlc - 3];
  tft.fillRect(50, 240, 140, 40, BLACK);
  tft.setCursor(100, 245);
  tft.setTextSize(4);
  tft.setTextColor(ORANGE, BLACK);
  tft.print(battvolt / 4);
  tft.fillRect(100, 290, 285, 30, BLACK);
  tft.fillRect(100, 290, 10, 30, RED);
  tft.fillRect(375, 290, 10, 30, GREEN);
  tft.fillRect(240, 290, 10, 30, ORANGE);
  if (battvolt >= 8 && battvolt < 1676) {
    tft.fillRect(110, 300, battvolt / 8, 10, WHITE);
  } else if (battvolt == 1676)
    tft.fillRect(110, 300, 265, 10, WHITE);
}

how would i convert this to a GET request keeping it within the decode section? using battvolt as an integer.

system · August 21, 2022, 12:19pm

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Canbus filtering General Guidance	124	3099	September 6, 2022
Canbus filtering problem General Guidance	8	764	August 21, 2022
IF Abfrage Deutsch	20	2636	May 6, 2021
CANBUS Nachrichten senden, per Seriell übermittelt, Problem mit HEX Deutsch	10	62	October 23, 2024
Problème compréhension programme can bus Français	42	5577	May 6, 2021

Website display canbus info

Related topics