config page rework: regroup items, unify layout with CSS, Add wide clock formats (now 8), ...

Add display width configurability (will restart ESP to effectuate)

Author: rob040

TODO.txt

@@ -19,8 +19,8 @@ TODO items
 4.1 Add MQTT server username and password authentication and configuration
    => DONE v3.1.23
 4.2 Add MQTT control of display brightness, display on/off,
-4.3 publish some weather info, 
-4.4 pub statistical data, 
+4.3 publish some weather info,
+4.4 pub statistical data,
 4.5 pub debug help, like free heap, max allocatable block; to monitor memory fragmentation and memory leaks
 5. Compile under PlatformIO / PIOarduino in VScode, perhaps saying goodbye to Arduino IDE (PIO provides control over used library versions, which is near impossible with Arduino IDE for different projects)
    => Done, Arduino IDE still supported
@@ -39,39 +39,51 @@ TODO items
     may be provide PR's to Original repo, though the changes might be too large to be acceptable/merge-able
     => ongoing
 11. make it compile and run on ESP32 variants
-    => future (though it shouldnt be that hard, been there done that...
+    => future (though it shouldnt be that hard, been there done that...) For me this is 'easy' reuse of some older HW.
 12. Adaptive brightness option; add LDR on ADC input and heavily filter for slow changes
 13. make it possible to show alternate display (temperature) statically (without scrolling), alternating with time, like 10s temperature, 50s time
     => DONE v1.3.19 (disable all display options will leave temperature, which is statically shown for 10s, which is quite long)
 13.1 make display functions showing time, scrolling message, static temperature display re-entrant from loop,
     e.g. call scroll message for every pixel shift, call show time for every 1/2 second to blink center colon when enabled, etc
     This allows the webserver and OTA to be serviced within the loop, iso at 3-4 places, and should increase web service responsiveness.
-14. Change from OWM city-ID to city/[state/]country or lat/lon coordinates or allow them all for maximum flexibility. 
+14. Change from OWM city-ID to city/[state/]country or lat/lon coordinates or allow them all for maximum flexibility.
     The OWM geocoding-api will translate to lat/lon coordinates for weather requests.
 15. Check which font type/file is used.
-16. Add slider checkbox (see w3schools) (instead of oldfashioned checkboxes) to mainpage header for autorefresh and darkmode 
+16. Add slider checkbox (see w3schools) (instead of oldfashioned checkboxes) to mainpage header for autorefresh and darkmode
 16.1  How to preserve these settings in browser? cookie?
 17. Enhance display off quiet period with options like {display off, dimmed, dimmed time + temp, dimmed only time}. Should we configure dimmed level as well?
 18. Add local temperature sensor and show inside temperature. Support only a few I2C sensors. Caveat: here we might get requests like can you support this or that sensor....
-19. add Config option: "Flash System LED on Service Calls"; the blue onboard LED is quite bright, shining through the case and can be annoying.
+19. Add Config option: "Flash System LED on Service Calls"; the blue onboard LED is quite bright, shining through the case and can be annoying.
 20. config page rework; In general, create more logical order, it is a mess now.
-	group 'Display' items name 'LED display', 
-	move 'use metric' to bottom (point 9!), 
-	rename 'Minutes Between Refresh Data' to 'Clock Sync / Weather Refresh (minutes)'
-	and change NTP sync accordingly, 
-	=> NTP sync fixed in v3.1.22
-	move 'Minutes Between Scrolling Data' to display items and rename to 'Display interval', 
-	rename 'Flash : in the time' to 'Blink time colon', 
-	move 'marquee message' setting to 3rd line and name 'Scroll message', 
-	'Start time'/'End time' group in 'Quiet period' with start and end reversed + point 17, 
-
+20.1  group 'Display' items name 'LED display',
+      ==> Done v3.1.25 All config page items are now re-grouped
+20.2  move 'use metric' to bottom (point 9!),
+      -> relocated to Data Display Settings group
+20.3  rename 'Minutes Between Refresh Data' to 'Clock Sync / Weather Refresh (minutes)'
+      and change NTP sync accordingly,
+      => NTP sync fixed in v3.1.22
+      ==> DONE  v3.1.25; now called 'Data refresh interval'
+20.4  move 'Minutes Between Scrolling Data' to display items and rename to 'Display interval',
+      ==> DONE  v3.1.25; now called 'Display Scrolling Data interval'
+20.5  rename 'Flash : in the time' to 'Blink time colon',
+      ==> Done v3.1.25
+20.6  move 'marquee message' setting to 3rd line and name 'Scroll message',
+      ==> Done v3.1.25
+20.7  'Start time'/'End time' group in 'Quiet period' with start and end reversed + point 17,
+      - later
+20.8  Add config of display width (# of tiles, default 4, max 32?); rename numberOfHorizontalDisplays, add to R/W configuration,
+      ==> Done v3.1.25
+20.9  Add wide clock style config, different screen formats for 8+ tiles: HH:MM, HH:MM:SS, HH:MM *CF, HH:MM %RH, mm dd HH:MM,  HH:MM Www DD (12 chars! 8 tiles fit 10 chars! ,
+      (There are smaller fonts, but everything in this code is assuming fixed size chars.)
+      ==> Done v3.1.25; now there are 8 variants. No font change.
+21. News headlines: Do not use newsapi.org, it is NOT free but costs 450 USD per __MONTH__ (5400 USD per annum)! rediculous pricing for this Indian company!
 
 Future
 - Change to use latest Arduino json V7 library. this makes the JsonStreamingParser and json buffer size calculation unnecessary.
 - Add REST API for various controls
 - Update webpage with json data; requires JS code
 - Investigate if we can run without adafruit library
-	https://github.com/markruys/arduino-Max72xxPanel/pull/7  BitBang and no Adafruit_GFX #7 
+	https://github.com/markruys/arduino-Max72xxPanel/pull/7  BitBang and no Adafruit_GFX #7
 	who defines the character map?
 Major overhaul
 + html main page: store whole page as one big array and process it as a stream, search for $marker$. Have a table with markers matching a callable function that returns the replacement text. callback could be anon inline function. This should reduce the number of string operations and memory allocations considerably.

marquee/Settings.h

@@ -56,46 +56,82 @@ SOFTWARE.
 #include "MqttClient.h"
 
 //******************************
-// Start Settings
+// Hard(-ware related) settings
+//******************************
+// Display Settings
+// CLK -> D5 (SCK)  GPIO14 on ESP8266
+// CS  -> D6        GPIO12 on ESP8266
+// DIN -> D7 (MOSI) GPIO13 on ESP8266
+const int pinCS = D6; // Attach CS to this pin, DIN to MOSI and CLK to SCK (cf http://arduino.cc/en/Reference/SPI )
+int displayIntensity = 1;  //(This can be set from 0 - 15)
+int displayWidth = 4; // default 4 for standard 4 x 1 display Max size of 16 (FIXME: rename to displayTilesWidth)
+const int displayHeight = 1; // default 1 for a single row height (do not change, this SW does not support multiple lines, nor double hight chars)
+/* set ledRotation for LED Display panels (3 is default)
+0: no rotation
+1: 90 degrees clockwise
+2: 180 degrees
+3: 90 degrees counter clockwise (default)
+*/
+const int ledRotation = 3;
+
+// Change the LED_ONBOARD to the pin you wish to use if other than the Built-in LED
+#define LED_ONBOARD  LED_BUILTIN // LED_BUILTIN is the on-board LED on the ESP12E module on the Wemos
+#define LED_ON  LOW   // define polarity of LED_ONBOARD
+#define LED_OFF HIGH  // define polarity of LED_ONBOARD
+
+
+//******************************
+// Configuration default Settings
+// (no need to change; all can be set on configuration page)
 //******************************
 
 String APIKEY = ""; // Your API Key from http://openweathermap.org/
 // Default City Location (use http://openweathermap.org/find to find city ID)
-int CityID = 5304391;
+int CityID = 2759794;
 String marqueeMessage = "";
-boolean IS_METRIC = false; // false = Imperial and true = Metric
-boolean IS_24HOUR = false; // 23:00 military 24 hour clock
+
+// (some) Default Weather Settings
+//FIXME TODO: do not use uppercase for variables
+boolean SHOW_DATE = false;
+boolean SHOW_CITY = true;
+boolean SHOW_CONDITION = true;
+boolean SHOW_HUMIDITY = true;
+boolean SHOW_WIND = true;
+boolean SHOW_WINDDIR = true;
+boolean SHOW_PRESSURE = false;
+boolean SHOW_HIGHLOW = true;
+
+boolean IS_METRIC = true; // false = Imperial and true = Metric
+boolean IS_24HOUR = true; // 23:00 military 24 hour clock
 boolean IS_PM = true; // Show PM indicator on Clock when in AM/PM mode
 const int WEBSERVER_PORT = 80; // The port you can access this device on over HTTP
 const boolean WEBSERVER_ENABLED = true;  // Device will provide a web interface via http://[ip]:[port]/
 boolean IS_BASIC_AUTH = false;  // Use Basic Authorization for Configuration security on Web Interface
 char www_username[32] = {"admin"};  // User account for the Web Interface
 char www_password[32] = {"password"};  // Password for the Web Interface
-int minutesBetweenDataRefresh = 15;  // Time in minutes between data refresh (default 15 minutes)
-int minutesBetweenScrolling = 1; // Time in minutes between scrolling data (default 1 minutes and max is 10)
+int refreshDataInterval = 15;  // Time in minutes between data refresh (default 15 minutes)
+int displayScrollingInterval = 1; // Time in minutes between scrolling data (default 1 minutes and max is 10)
 int displayScrollSpeed = 25; // In milliseconds -- Configurable by the web UI (slow = 35, normal = 25, fast = 15, very fast = 5)
-boolean flashOnSeconds = true; // when true the : character in the time will flash on and off as a seconds indicator
-
-boolean NEWS_ENABLED = true;
+boolean flashOnSeconds = true; // when true the ':' character in the time will flash on and off as a seconds indicator
+
+// New wide clock style config, different screen formats for 8+ tiles:
+int wideClockStyle = 1; // 1=HH:MM, 2=HH:MM:SS, 3=HH:MM *CF, 4=HH:MM %RH, 5=mm dd HH:MM, 6=HH:MM mmdd, 7=HH:MM ddmm, 8=HH:MM WwwDD (or HH:MM Www DD on >= 10 tile display)
+
+#define  WIDE_CLOCK_STYLE_HHMM      1
+#define  WIDE_CLOCK_STYLE_HHMMSS    2
+#define  WIDE_CLOCK_STYLE_HHMM_CF   3
+#define  WIDE_CLOCK_STYLE_HHMM_RH   4
+#define  WIDE_CLOCK_STYLE_MMDD_HHMM 5
+#define  WIDE_CLOCK_STYLE_HHMM_MMDD 6
+#define  WIDE_CLOCK_STYLE_HHMM_DDMM 7
+#define  WIDE_CLOCK_STYLE_HHMM_WWWDD 8
+#define  WIDE_CLOCK_STYLE_LAST      WIDE_CLOCK_STYLE_HHMM_WWWDD
+#define  WIDE_CLOCK_STYLE_FIRST     WIDE_CLOCK_STYLE_HHMM
+
+boolean NEWS_ENABLED = false;
 String NEWS_API_KEY = ""; // Get your News API Key from https://newsapi.org
 String NEWS_SOURCE = "reuters";  // https://newsapi.org/sources to get full list of news sources available
 
-// Display Settings
-// CLK -> D5 (SCK)  GPIO14 on ESP8266
-// CS  -> D6        GPIO12 on ESP8266
-// DIN -> D7 (MOSI) GPIO13 on ESP8266
-const int pinCS = D6; // Attach CS to this pin, DIN to MOSI and CLK to SCK (cf http://arduino.cc/en/Reference/SPI )
-int displayIntensity = 1;  //(This can be set from 0 - 15)
-const int numberOfHorizontalDisplays = 4; // default 4 for standard 4 x 1 display Max size of 16
-const int numberOfVerticalDisplays = 1; // default 1 for a single row height
-/* set ledRotation for LED Display panels (3 is default)
-0: no rotation
-1: 90 degrees clockwise
-2: 180 degrees
-3: 90 degrees counter clockwise (default)
-*/
-int ledRotation = 3;
-
 String timeDisplayTurnsOn = "06:30";  // 24 Hour Format HH:MM -- Leave blank for always on. (ie 05:30)
 String timeDisplayTurnsOff = "23:00"; // 24 Hour Format HH:MM -- Leave blank for always on. Both must be set to work.
 
@@ -124,8 +160,9 @@ String  MqttAuthUser, MqttAuthPass;   // mqtt server authentication
 boolean ENABLE_OTA = true;    // this will allow you to load firmware to the device over WiFi (see OTA for ESP8266)
 String OTA_Password = "";     // Set an OTA password here -- leave blank if you don't want to be prompted for password
 
+//blue-grey
+String themeColor = "blue-grey"; // this can be changed later in the web interface.
+
 //******************************
 // End Settings
 //******************************
-//blue-grey
-String themeColor = "blue-grey"; // this can be changed later in the web interface.