Merge pull request #5 from amrikarisma/bugfix/layout-display

Bugfix/layout display

Author: amrikarisma

CHANGELOG.md

@@ -104,6 +104,48 @@
 
 ---
 
+## [1.2.1] - 2025-07-12
+
+### 🚀 Performance Optimizations
+- **Improved FPS**: Optimized display refresh rates from 15-25fps to 30-40fps target
+- **Reduced Serial Communication**: Increased serial update interval from 10ms to 20ms
+- **Smart Display Updates**: Added time-based update throttling for display components
+- **Efficient Memory Usage**: Optimized sprite operations and memory allocations
+
+### 🔧 WiFi & WebServer Improvements
+- **Fixed WiFi Timeout**: Corrected WiFi shutdown logic after 1 minute of inactivity
+- **Power Management**: Proper WiFi and Bluetooth shutdown for power saving
+- **Manual WiFi Restart**: Added 'w' command to restart WiFi/WebServer via serial
+- **Reduced Debug Overhead**: Optimized debug print frequencies to reduce serial load
+
+### 🖥️ Display Performance
+- **Throttled Updates**: 
+  - RPM display updates: every 100ms max
+  - Panel updates: every 50ms max  
+  - Indicator updates: every 100ms max
+  - RPM bar updates: every 75ms max
+- **Selective Redraws**: Only update display elements when values actually change
+- **Optimized Debug Display**: Reduced debug info update frequency to 1000ms
+
+### 🎨 Splash Screen Improvements
+- **Eliminated Slide Animations**: Replaced risky slide animations with safe fade effects
+- **Fade-In Title**: Smooth fade-in animation for main title
+- **Fade-In Website**: Cyan fade-in effect for website text
+- **No Ghosting**: Completely eliminated text ghosting issues
+
+### 🛠️ System Optimizations
+- **Reduced CPU Load**: Optimized main loop with yield() calls and reduced polling
+- **Better Multitasking**: Improved ESP32 task scheduling with strategic delays
+- **Enhanced Debug Info**: Added WiFi status and connection info to debug output
+- **Memory Efficiency**: Maintained stable memory usage at 15.9% RAM, 87.5% Flash
+
+### 📋 New Serial Commands
+- **'w' Command**: Restart WiFi and WebServer manually
+- **Enhanced Help**: Updated help system with all available commands
+- **Improved Debug**: Better debug information display
+
+---
+
 ### 💡 Highlights
 This version represents a major leap forward in functionality and user experience. The modular architecture makes the code more maintainable, while the web-based configuration system gives users unprecedented control over their display layout.
 

src/CANHandler.cpp

@@ -1,12 +1,13 @@
 #include "CANHandler.h"
+#include "DisplayConfig.h"
 #include "Config.h"
 #include "DataTypes.h"
 #include <esp32_can.h>
 #include "Arduino.h"
 
 void setupCAN() {
   CAN0.setCANPins(GPIO_NUM_17, GPIO_NUM_16); // RX, TX
-  CAN0.begin(500000);                       // 500Kbps
+  CAN0.begin(getCanSpeed());                // Use configurable CAN speed
   CAN0.watchFor(0x360);                      // RPM, MAP, TPS
   CAN0.watchFor(0x361);                      // Fuel Pressure
   CAN0.watchFor(0x362);                      // Ignition Angle (Leading)
@@ -18,7 +19,7 @@ void setupCAN() {
   CAN0.watchFor(0x3E4);                      // Indicator
 
   isCANMode = true;  // Set communication mode indicator
-  Serial.println("CAN mode aktif.");
+  Serial.printf("CAN mode aktif. Speed: %u bps\n", getCanSpeed());
 }
 
 void canTask(void *pvParameters) {

src/DisplayConfig.cpp

@@ -31,7 +31,8 @@ DisplayConfiguration defaultDisplayConfig = {
   8, // activePanelCount
   8, // activeIndicatorCount
   0, // rpmDisplayMode (bar)
-  true // showSystemIndicators
+  true, // showSystemIndicators
+  500000 // canSpeed default 500Kbps
 };
 
 DisplayConfiguration currentDisplayConfig;
@@ -167,3 +168,17 @@ uint16_t getDataSourceColor(uint8_t dataSource, float value) {
       return TFT_WHITE;
   }
 }
+
+uint32_t getCanSpeed() {
+  if (currentDisplayConfig.canSpeed == 500000 || currentDisplayConfig.canSpeed == 1000000) {
+    return currentDisplayConfig.canSpeed;
+  } else {
+    // Jika belum pernah di-set atau nilai tidak valid, pakai default 500000
+    return 500000;
+  }
+}
+
+void setCanSpeed(uint32_t speed) {
+  currentDisplayConfig.canSpeed = speed;
+  saveDisplayConfig();
+}

src/DisplayConfig.h

@@ -68,6 +68,7 @@ struct DisplayConfiguration {
   uint8_t activeIndicatorCount;     // Number of active indicators
   uint8_t rpmDisplayMode;           // RPM display mode (0=bar, 1=digital)
   bool showSystemIndicators;        // Show CAN/SER, DEBUG, SIM
+  uint32_t canSpeed;                // CAN speed in bps (e.g. 500000, 1000000)
 };
 
 // Default configuration
@@ -84,5 +85,8 @@ bool getIndicatorValue(uint8_t indicator);
 const char* getDataSourceName(uint8_t dataSource);
 const char* getIndicatorName(uint8_t indicator);
 uint16_t getDataSourceColor(uint8_t dataSource, float value);
+// New CAN speed accessors
+uint32_t getCanSpeed();
+void setCanSpeed(uint32_t speed);
 
 #endif // DISPLAY_CONFIG_H

src/DisplayManager.cpp

@@ -3,6 +3,7 @@
 #include "DataTypes.h"
 #include "DisplayConfig.h"
 #include "drawing_utils.h"
+#include "SplashScreen.h"
 #include "NotoSansBold15.h"
 #include "NotoSansBold36.h"
 #include <EEPROM.h>
@@ -21,20 +22,8 @@ void setupDisplay() {
 }
 
 void drawSplashScreenWithImage() {
-  display.fillScreen(TFT_BLACK);
-  display.loadFont(AA_FONT_LARGE);
-  display.setTextColor(TFT_WHITE, TFT_BLACK);
-
-  display.setTextDatum(TC_DATUM);
-  int centerX = display.width() / 2;
-  int centerY = (display.height() / 2) - 35;
-
-  display.drawString("MAZDUINO Display", centerX, centerY);
-  display.loadFont(AA_FONT_SMALL);
-  display.drawString("Firmware version: " + String(version), centerX, centerY + 50);
-  display.drawString("www.mazduino.com", centerX, 300);
-
-  delay(5000);
+  // Use the new modular animated splash screen
+  showAnimatedSplashScreen();
 }
 
 void drawConfigurablePanels(bool setup) {
@@ -43,14 +32,14 @@ void drawConfigurablePanels(bool setup) {
   // RPM bar occupies roughly Y=40 to Y=150, so panels moved to avoid collision
   // Each panel is 80px tall, fitting 2 main panels per column + 1 bottom panel each
   int panelPositions[8][2] = {
-    {5, 10},   // Position 0: Left-Top (AFR) - Y=160 to Y=240
-    {5, 100},   // Position 1: Left-Middle (TPS) - Y=245 to Y=325
-    {5, 190},   // Position 2: Left-Bottom (IAT) - Y=280 to Y=360, will be clipped but user requested
-    {365, 10}, // Position 3: Right-Top (MAP) - Y=160 to Y=240
-    {365, 100}, // Position 4: Right-Middle (ADV) - Y=245 to Y=325
-    {365, 190}, // Position 5: Right-Bottom (FP) - Y=280 to Y=360, will be clipped but user requested
-    {120, 190}, // Position 6: Center-Left (Coolant) - moved to center to avoid overlap
-    {240, 190}  // Position 7: Center-Right (Voltage) - moved to center to avoid overlap
+    {5, 20},   // Position 0: Left-Top (AFR) - Y=160 to Y=240
+    {5, 110},   // Position 1: Left-Middle (TPS) - Y=245 to Y=325
+    {5, 200},   // Position 2: Left-Bottom (IAT) - Y=280 to Y=360, will be clipped but user requested
+    {365, 20}, // Position 3: Right-Top (MAP) - Y=160 to Y=240
+    {365, 110}, // Position 4: Right-Middle (ADV) - Y=245 to Y=325
+    {365, 200}, // Position 5: Right-Bottom (FP) - Y=280 to Y=360, will be clipped but user requested
+    {120, 200}, // Position 6: Center-Left (Coolant) - moved to center to avoid overlap
+    {240, 200}  // Position 7: Center-Right (Voltage) - moved to center to avoid overlap
   };
 
   // Draw each enabled panel
@@ -67,14 +56,14 @@ void drawModularDataPanel(const DisplayPanel &panel, bool setup) {
   // RPM bar occupies roughly Y=40 to Y=150, so panels moved to avoid collision
   // Each panel is 80px tall, fitting 2 main panels per column + 1 bottom panel each
   int panelPositions[8][2] = {
-    {5, 10},   // Position 0: Left-Top (AFR) - Y=160 to Y=240
-    {5, 100},   // Position 1: Left-Middle (TPS) - Y=245 to Y=325
-    {5, 190},   // Position 2: Left-Bottom (IAT) - Y=280 to Y=360, will be clipped but user requested
-    {365, 10}, // Position 3: Right-Top (MAP) - Y=160 to Y=240
-    {365, 100}, // Position 4: Right-Middle (ADV) - Y=245 to Y=325
-    {365, 190}, // Position 5: Right-Bottom (FP) - Y=280 to Y=360, will be clipped but user requested
-    {120, 190}, // Position 6: Center-Left (Coolant) - moved to center to avoid overlap
-    {240, 190}  // Position 7: Center-Right (Voltage) - moved to center to avoid overlap
+    {5, 20},   // Position 0: Left-Top (AFR) - Y=160 to Y=240
+    {5, 110},   // Position 1: Left-Middle (TPS) - Y=245 to Y=325
+    {5, 200},   // Position 2: Left-Bottom (IAT) - Y=280 to Y=360, will be clipped but user requested
+    {365, 20}, // Position 3: Right-Top (MAP) - Y=160 to Y=240
+    {365, 110}, // Position 4: Right-Middle (ADV) - Y=245 to Y=325
+    {365, 200}, // Position 5: Right-Bottom (FP) - Y=280 to Y=360, will be clipped but user requested
+    {120, 200}, // Position 6: Center-Left (Coolant) - moved to center to avoid overlap
+    {240, 200}  // Position 7: Center-Right (Voltage) - moved to center to avoid overlap
   };
 
   if (panel.position >= 8) return;
@@ -106,19 +95,24 @@ void drawConfigurableIndicators() {
   int indicatorY = 285;  // Positioned in the middle area
   int indicatorWidth = 60; // Made slightly smaller to fit better
 
+  // Pack enabled indicators without gaps
+  int currentPosition = 0;
   for (int i = 0; i < currentDisplayConfig.activeIndicatorCount; i++) {
     IndicatorConfig &indicator = currentDisplayConfig.indicators[i];
     if (indicator.enabled && indicator.position < 8) {
       bool state = getIndicatorValue(indicator.indicator);
-      drawSmallButton(indicatorX + (indicatorWidth * indicator.position), indicatorY, indicator.label, state);
+      // Use currentPosition instead of indicator.position to pack without gaps
+      drawSmallButton(indicatorX + (indicatorWidth * currentPosition), indicatorY, indicator.label, state);
+      currentPosition++; // Increment position for next enabled indicator
     }
   }
 }
 
 // New function to replace itemDraw with configurable panels
 void drawConfigurableData(bool setup) {
-  // Draw RPM (always shown)
-  if (lastRpm != rpm || setup) {
+  // Draw RPM with reduced frequency update (only when changed or setup)
+  static uint32_t lastRpmUpdate = 0;
+  if (lastRpm != rpm || setup || (millis() - lastRpmUpdate > 100)) {
     drawRPMBarBlocks(rpm);
     spr.loadFont(AA_FONT_LARGE);
     spr.createSprite(100, 50);
@@ -129,13 +123,22 @@ void drawConfigurableData(bool setup) {
     spr.pushSprite(190, 140);
     spr.deleteSprite();
     lastRpm = rpm;
+    lastRpmUpdate = millis();
   }
 
-  // Draw configurable panels
-  drawConfigurablePanels(setup);
+  // Draw configurable panels with reduced frequency
+  static uint32_t lastPanelUpdate = 0;
+  if (setup || (millis() - lastPanelUpdate > 50)) { // Update panels every 50ms max
+    drawConfigurablePanels(setup);
+    lastPanelUpdate = millis();
+  }
 
-  // Draw configurable indicators
-  drawConfigurableIndicators();
+  // Draw configurable indicators with reduced frequency
+  static uint32_t lastIndicatorUpdate = 0;
+  if (setup || (millis() - lastIndicatorUpdate > 100)) { // Update indicators every 100ms max
+    drawConfigurableIndicators();
+    lastIndicatorUpdate = millis();
+  }
 }
 
 void startUpDisplay() {
@@ -167,21 +170,27 @@ void drawDataBox(int x, int y, const char *label, const float value, uint16_t la
   const int LABEL_HEIGHT = BOX_HEIGHT / 2;
 
   if (setup) {
+    // Clear the entire data box area first only during setup
+    display.fillRect(x, y, BOX_WIDTH, BOX_HEIGHT, TFT_BLACK);
+    
     spr.loadFont(AA_FONT_SMALL);
     spr.createSprite(BOX_WIDTH, LABEL_HEIGHT);
+    spr.fillSprite(TFT_BLACK);  // Clear sprite background
     spr.setTextColor(labelColor, TFT_BLACK, true);
-    spr.drawString(label, 50, 5);
     spr.setTextDatum(TC_DATUM);
+    spr.drawString(label, 50, 5);
     if (label == "AFR") {
       spr.pushSprite(x - 10, y);
     } else {
       spr.pushSprite(x, y);
     }
+    spr.deleteSprite();
   }
 
-  if (valueToCompare != value) {
+  if (setup || valueToCompare != value) {
     spr.loadFont(AA_FONT_LARGE);
     spr.createSprite(BOX_WIDTH, LABEL_HEIGHT);
+    spr.fillSprite(TFT_BLACK);  // Clear sprite background
     spr.setTextDatum(TC_DATUM);
     spr_width = spr.textWidth("333");
     spr.setTextColor(labelColor, TFT_BLACK, true);
@@ -196,16 +205,17 @@ void drawDataBox(int x, int y, const char *label, const float value, uint16_t la
 }
 
 void drawData() {
-  // Use configurable display system
+  // Use configurable display system with performance optimizations
   drawConfigurableData(false);
 
 #if ENABLE_SIMULATOR
-  // Draw simulator indicator if simulator is active
+  // Draw simulator indicator if simulator is active (with reduced update frequency)
   static uint8_t lastSimMode = SIMULATOR_MODE_OFF;
+  static uint32_t lastSimUpdate = 0;
   uint8_t currentSimMode = getSimulatorMode();
 
-  // Only redraw if simulator mode has changed
-  if (currentSimMode != lastSimMode) {
+  // Only redraw if simulator mode has changed or every 500ms
+  if (currentSimMode != lastSimMode || (millis() - lastSimUpdate > 500)) {
     if (currentSimMode != SIMULATOR_MODE_OFF) {
       // Clear the SIM area first
       display.fillRect(display.width() - 30, 5, 25, 15, TFT_BLACK);
@@ -221,17 +231,19 @@ void drawData() {
     }
 
     lastSimMode = currentSimMode;
+    lastSimUpdate = millis();
   }
 #endif
 
-  // Draw communication mode indicator (top left)
+  // Draw communication mode indicator (top left) with reduced update frequency
   static bool lastCommMode = true;  // Track changes
   static String lastCommText = "";
+  static uint32_t lastCommUpdate = 0;
 
   String currentCommText = isCANMode ? "CAN" : "SER";
 
-  // Only redraw if communication mode has changed
-  if (isCANMode != lastCommMode || currentCommText != lastCommText) {
+  // Only redraw if communication mode has changed or every 1000ms
+  if (isCANMode != lastCommMode || currentCommText != lastCommText || (millis() - lastCommUpdate > 1000)) {
     // Clear the comm mode area first
     display.fillRect(5, 5, 40, 15, TFT_BLACK);
 
@@ -243,18 +255,17 @@ void drawData() {
 
     lastCommMode = isCANMode;
     lastCommText = currentCommText;
+    lastCommUpdate = millis();
   }
 
 #if ENABLE_DEBUG_MODE
-  // Draw debug information at center top if debug mode is active
   static bool lastDebugMode = false;
   static String lastDebugInfo = "";
 
   if (debugMode) {
     // Create debug info string - show only essential info in one line
     String debugInfo = "CPU:" + String(cpuUsage, 1) + "% FPS:" + String(fps, 1) + " Heap:" + String(ESP.getFreeHeap()/1024) + "K";
 
-    // Only redraw if debug info has changed or we just entered debug mode
     if (debugInfo != lastDebugInfo || !lastDebugMode) {
       int centerX = display.width() / 2;
 

src/GlobalVariables.cpp

@@ -2,7 +2,7 @@
 #include "Config.h"
 
 // Configuration variables from Config.h
-const char *version = "1.2.0";
+const char *version = "1.2.1";
 const char *ssid = "MAZDUINO_Display";
 const char *password = "12345678";