Version with web page interface

This commit is contained in:
Jens Noack 2020-10-03 16:06:25 +02:00
parent 24ad614e84
commit 98a548fd86
5 changed files with 656 additions and 56 deletions

View file

@ -0,0 +1,5 @@
{
"files.associations": {
"functional": "cpp"
}
}

View file

@ -0,0 +1,2 @@

View file

@ -15,3 +15,5 @@ framework = arduino
lib_deps =
Wire
SPI
adafruit/Adafruit GFX Library@^1.10.1
adafruit/Adafruit BusIO@1.4.1

View file

@ -0,0 +1,323 @@
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h2 { font-size: 2.0rem; }
p { font-size: 3.0rem; }
.units { font-size: 1.2rem; }
.dht-labels{
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
.h2{
border: 0px solid black;
}
.settings{
border: 1px solid black;
}
.settings tr:nth-child(even) {
background-color: #eee
}
.settings tr:nth-child(odd) {
background-color: #fff;
}
.settings th {
color: white;
background-color: black;
padding: 4px 4px 2px 4px;
}
.settings td {
border: 1px solid black;
padding: 2px;
}
.settings tr:last-of-type td {
background-color: fffb99;
text-align: center;
}
</style>
<script type="text/javascript">
var Url = "/";
var maxSettings = 5;
window.onload = start;
function addListener(element, eventName, handler) {
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
}
else if (element.attachEvent) {
element.attachEvent('on' + eventName, handler);
}
else {
element['on' + eventName] = handler;
}
}
function start()
{
tableCreate(maxSettings);
omobiAjx = new XMLHttpRequest();
omobiAjx.onreadystatechange= readResp;
httpGet ();
}
function httpGet ()
{
var querystr = "";
omobiAjx.open ( "GET", Url + "loadcurrent", true ) ;
omobiAjx.send() ;
}
function httpSet ()
{
var querystr = "?";
for(var set = 0; set < maxSettings; set++)
{
querystr = querystr.concat("&text_"+set, "=",encodeURIComponent(document.getElementById("text_"+set).value));
querystr = querystr.concat("&time_"+set, "=",encodeURIComponent(document.getElementById("time_"+set).value));
querystr = querystr.concat("&scroll_runs_"+set, "=",encodeURIComponent(document.getElementById("scroll_runs_"+set).value));
querystr = querystr.concat("&color_"+set, "=",encodeURIComponent(document.getElementById("color_"+set).value));
querystr = querystr.concat("&align_"+set, "=",encodeURIComponent(document.getElementById("align_"+set).value));
querystr = querystr.concat("&scroll_"+set, "=",encodeURIComponent(document.getElementById("scroll_"+set).checked));
querystr = querystr.concat("&active_"+set, "=",encodeURIComponent(document.getElementById("active_"+set).checked));
}
console.log("Send to Display:",querystr);
omobiAjx.open ( "GET", Url + "setcurrent" + querystr, true ) ;
omobiAjx.send() ;
}
function readResp()
{
if (omobiAjx.readyState==4 && omobiAjx.status==200)
{
var datenstr=omobiAjx.responseText;
console.log(datenstr);
var params = new URLSearchParams(datenstr)
for(var [key, value] of params.entries()) {
if(key.includes("text_") || key.includes("time_") || key.includes("scroll_runs_") || key.includes("color_") || key.includes("align_"))
{
document.getElementById(key).value = value;
}
else
{
if(key.includes("scroll_") || key.includes("active_"))
{
if(value == 1)
{
document.getElementById(key).checked = true;
}
else
{
document.getElementById(key).checked = false;
}
}
}
}
}
}
function clear_list()
{
console.log("reset");
for(var set = 0; set < maxSettings; set++)
{
document.getElementById("text_"+set).value = "";
document.getElementById("time_"+set).value = "";
document.getElementById("scroll_runs_"+set).value = "";
document.getElementById("color_"+set).value = "0";
document.getElementById("align_"+set).value = "0";
document.getElementById("scroll_"+set).checked = false;
document.getElementById("active_"+set).checked = false;
}
}
function tableCreate(nrsets) {
console.log("create table");
var body = document.body;
var toptbl = document.createElement("table");
toptbl.setAttribute("class", "h2");
var toptr = document.createElement('tr');
var toptd = document.createElement("td");
var h2 = document.createElement("h2");
h2.appendChild(document.createTextNode("Omobi LED Display Server"));
toptd.appendChild(h2);
toptr.appendChild(toptd);
toptbl.appendChild(toptr);
toptr = document.createElement('tr');
toptd = document.createElement("td");
var tbl = document.createElement("table");
tbl.setAttribute("class", "settings");
var nrheads = ["ACTIVE", "TEXT (max 256)", "RUNTIME (in s)", "COLOR", "ALIGN", "SCROLL", "# SCROLLS"];
var header= document.createElement('thead');
tr = document.createElement('tr');
for(var nrhead = 0; nrhead < nrheads.length; nrhead++)
{
var th = document.createElement('th');
console.log((nrheads[nrhead]));
th.appendChild(document.createTextNode(nrheads[nrhead]));
tr.appendChild(th);
}
header.appendChild(tr);
tbl.appendChild(header);
for (var nrset = 0; nrset < nrsets; nrset++) {
tr = document.createElement("tr");
td = document.createElement("td");
elem = document.createElement("input");
elem.type = "checkbox";
elem.min = 0;
elem.id = "active_" + (nrset);
elem.value = "0";
elem.checked = false;
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
td = document.createElement("td");
var elem = document.createElement("input");
elem.type = "text";
elem.id = "text_" + (nrset);
elem.placeholder = "Text (max 256)";
elem.value = "";
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("input");
elem.type = "number";
elem.min = 0;
elem.id = "time_" + (nrset);
elem.placeholder = "[sec]";
elem.value = "";
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("select");
elem.id = "color_" + (nrset);
elem.size = "1";
elem.name = "color";
elem.value = "-1";
elem.required;
var subelem = document.createElement("option");
subelem.value = "0";
subelem.appendChild(document.createTextNode("red"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "1";
subelem.appendChild(document.createTextNode("green"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "2";
subelem.appendChild(document.createTextNode("blue"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "3";
subelem.appendChild(document.createTextNode("white"));
elem.appendChild(subelem);
td.appendChild(elem);
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("select");
elem.id = "align_" + (nrset);
elem.size = "1";
elem.name = "align";
elem.value = "-1";
elem.required;
var subelem = document.createElement("option");
subelem.value = "0";
subelem.appendChild(document.createTextNode("left"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "1";
subelem.appendChild(document.createTextNode("center"));
elem.appendChild(subelem);
subelem = document.createElement("option");
subelem.value = "2";
subelem.appendChild(document.createTextNode("right"));
elem.appendChild(subelem);
td.appendChild(elem);
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("input");
elem.type = "checkbox";
elem.min = 0;
elem.id = "scroll_" + (nrset);
elem.value = "0";
elem.checked = false;
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
td = document.createElement("td");
elem = document.createElement("input");
elem.type = "number";
elem.min = 0;
elem.id = "scroll_runs_" + (nrset);
elem.placeholder = "#";
elem.value = "0";
td.appendChild(elem);
td.appendChild(document.createTextNode(""));
tr.appendChild(td);
//row added to end of table body
tbl.appendChild(tr);
}
toptd.appendChild(tbl);
toptr.appendChild(toptd);
toptbl.appendChild(toptr);
toptr = document.createElement("tr");
toptd = document.createElement("td");
toptd.colSpan = 6;
elem = document.createElement("input");
elem.type = "button";
elem.value = "Load current values from display";
addListener(elem, 'click', httpGet);
toptd.appendChild(elem);
elem = document.createElement("input");
elem.type = "button";
elem.value = "Write values to display";
addListener(elem, 'click', httpSet);
toptd.appendChild(elem);
elem = document.createElement("input");
elem.type = "button";
elem.value = "Reset table (not display)";
addListener(elem, 'click', clear_list);
toptd.appendChild(elem);
toptr.appendChild(toptd);
toptbl.appendChild(toptr);
body.appendChild(toptbl);
}
</script>
</head>
<body>
</body>
</html>
)rawliteral";

View file

@ -2,85 +2,353 @@
// 'Howdy' across three 10x8 NeoPixel grids that were created using
// NeoPixel 60 LEDs per meter flex strip.
#include <Arduino.h>
#include <Adafruit_GFX.h>
#include <Adafruit_NeoMatrix.h>
#include <Adafruit_NeoPixel.h>
#ifndef PSTR
#define PSTR // Make Arduino Due happy
#endif
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <EEPROM.h>
#include "omobi_html.h"
#define PIN D8
// MATRIX DECLARATION:
// Parameter 1 = width of EACH NEOPIXEL MATRIX (not total display)
// Parameter 2 = height of each matrix
// Parameter 3 = number of matrices arranged horizontally
// Parameter 4 = number of matrices arranged vertically
// Parameter 5 = pin number (most are valid)
// Parameter 6 = matrix layout flags, add together as needed:
// NEO_MATRIX_TOP, NEO_MATRIX_BOTTOM, NEO_MATRIX_LEFT, NEO_MATRIX_RIGHT:
// Position of the FIRST LED in the FIRST MATRIX; pick two, e.g.
// NEO_MATRIX_TOP + NEO_MATRIX_LEFT for the top-left corner.
// NEO_MATRIX_ROWS, NEO_MATRIX_COLUMNS: LEDs WITHIN EACH MATRIX are
// arranged in horizontal rows or in vertical columns, respectively;
// pick one or the other.
// NEO_MATRIX_PROGRESSIVE, NEO_MATRIX_ZIGZAG: all rows/columns WITHIN
// EACH MATRIX proceed in the same order, or alternate lines reverse
// direction; pick one.
// NEO_TILE_TOP, NEO_TILE_BOTTOM, NEO_TILE_LEFT, NEO_TILE_RIGHT:
// Position of the FIRST MATRIX (tile) in the OVERALL DISPLAY; pick
// two, e.g. NEO_TILE_TOP + NEO_TILE_LEFT for the top-left corner.
// NEO_TILE_ROWS, NEO_TILE_COLUMNS: the matrices in the OVERALL DISPLAY
// are arranged in horizontal rows or in vertical columns, respectively;
// pick one or the other.
// NEO_TILE_PROGRESSIVE, NEO_TILE_ZIGZAG: the ROWS/COLUMS OF MATRICES
// (tiles) in the OVERALL DISPLAY proceed in the same order for every
// line, or alternate lines reverse direction; pick one. When using
// zig-zag order, the orientation of the matrices in alternate rows
// will be rotated 180 degrees (this is normal -- simplifies wiring).
// See example below for these values in action.
// Parameter 7 = pixel type flags, add together as needed:
// NEO_RGB Pixels are wired for RGB bitstream (v1 pixels)
// NEO_GRB Pixels are wired for GRB bitstream (v2 pixels)
// NEO_KHZ400 400 KHz bitstream (e.g. FLORA v1 pixels)
// NEO_KHZ800 800 KHz bitstream (e.g. High Density LED strip)
#include "index.html"
// Example with three 10x8 matrices (created using NeoPixel flex strip --
// these grids are not a ready-made product). In this application we'd
// like to arrange the three matrices side-by-side in a wide display.
// The first matrix (tile) will be at the left, and the first pixel within
// that matrix is at the top left. The matrices use zig-zag line ordering.
// There's only one row here, so it doesn't matter if we declare it in row
// or column order. The matrices use 800 KHz (v2) pixels that expect GRB
// color data.
Adafruit_NeoMatrix matrix = Adafruit_NeoMatrix(8, 8, 6, 1, PIN,
NEO_TILE_TOP + NEO_TILE_LEFT + NEO_TILE_ROWS + NEO_TILE_PROGRESSIVE +
NEO_MATRIX_TOP + NEO_MATRIX_LEFT + NEO_MATRIX_ROWS + NEO_TILE_PROGRESSIVE,
NEO_GRB + NEO_KHZ800);
const uint16_t colors[] = {
matrix.Color(255, 0, 0), matrix.Color(0, 255, 0), matrix.Color(0, 0, 255) };
matrix.Color(255, 0, 0), matrix.Color(0, 255, 0), matrix.Color(0, 0, 255), matrix.Color(255, 255, 255) };
enum text_align_t {TEXTLEFT, TEXTCENTER, TEXTRIGHT};
enum color_t {RED, GREEN, BLUE, WHITE};
const uint16_t text_nr_sets = 5;
const uint16_t MAX_TXT_LENGTH = 256;
typedef struct text_set_t {
const char text[MAX_TXT_LENGTH];
uint16_t time_ms;
color_t color;
text_align_t align;
bool text_scroll;
uint16_t text_scroll_pass;
bool active;
} text_set_t;
typedef struct sets_t {
text_set_t sets[text_nr_sets];
char valid[3];
} sets_t;
const int nr_param_names = 7;
const String set_param_name[nr_param_names] = {"text_", "time_", "color_", "align_", "scroll_", "scroll_runs_", "active_"};
enum set_param_index_t {PTEXT, PTIME, PCOLOR, PALIGN, PSCROLL, PSCROLL_RUNS, PACTIVE};
const uint16_t DISP_STRUCT_SIZE = sizeof(sets_t);
sets_t text_sets =
{
{
// TEXT , SHOWTIME, COLOR, ALIGNMENT, SCROLL, SCROLLNR, ACTIVE
{"itsblue",5000, BLUE, TEXTCENTER, false, 0, true},
{"",0, RED, TEXTCENTER, false, 4, false},
{"",0, RED, TEXTCENTER, false, 8, false},
{"",0, RED, TEXTCENTER, false, 1, false},
{"",0, RED, TEXTCENTER, false, 0, false},
},
"OK"
};
uint16_t text_curr_nr = 0;
uint32_t text_set_starttime = 0;
int text_pos = matrix.width();
unsigned int text_pass = 0;
unsigned int textpixel = 0;
bool disp_show = false;
AsyncWebServer server(80);
const char* ssid = "OmobiLeds";
const char* password = "OmobiLeds";
void notFound(AsyncWebServerRequest *request) {
request->send(404, "text/plain", "URL not found");
}
void disp_scroll_text();
void disp_switch_text();
void disp_start_set();
void disp_init();
void show_matrix(const char* text, int pos, uint16_t color);
String get_paramstring_from_struct(String name);
void set_param_to_struct(String name, String value);
String getset_param_at_struct(String name, String value, bool set);
void storeDisplaySet();
bool loadDisplaySet();
void setup() {
//ESP.eraseConfig();
//ESP.reset();
Serial.begin(9600);
matrix.begin();
matrix.setTextWrap(false);
matrix.setBrightness(40);
matrix.setTextColor(colors[0]);
loadDisplaySet();
Serial.printf("Los\n");
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(200, "text/html",index_html);
Serial.println("webpage sent");
});
server.on("/loadcurrent", HTTP_GET, [] (AsyncWebServerRequest *request) {
String message = "nrsets=" + String(text_nr_sets);
for(uint16_t set = 0; set < text_nr_sets; set++)
{
for(uint16_t parm = 0; parm < nr_param_names; parm++ )
{
message += "&" + get_paramstring_from_struct(set_param_name[parm]+String(set));
}
}
Serial.printf("Got load currentvalues request.\n");
request->send(200, "text/plain", message);
});
server.on("/setcurrent", HTTP_GET, [] (AsyncWebServerRequest *request) {
int paramsNr = request->params();
Serial.printf("Got set currentvalues request.\n");
for(int i=0;i<paramsNr;i++){
AsyncWebParameter* p = request->getParam(i);
set_param_to_struct(String(p->name()), String(p->value()));
}
request->send(200, "text/plain", "OK");
storeDisplaySet();
disp_init();
});
server.onNotFound(notFound);
server.begin();
disp_init();
}
int x = matrix.width();
int pass = 0;
String scroll_text = "OMOBI-Ortsbus ... ab Juni 2020 EINFACH einsteigen!!!";
void loop() {
matrix.fillScreen(0);
matrix.setCursor(x, 0);
matrix.print(scroll_text.c_str());
if(--x < (int)(-6*scroll_text.length())) {
x = matrix.width();
if(++pass >= 3) pass = 0;
matrix.setTextColor(colors[pass]);
if(true == disp_show)
{
disp_start_set();
if(true == text_sets.sets[text_curr_nr].active)
{
if(text_sets.sets[text_curr_nr].text !='\0')
{
if(text_sets.sets[text_curr_nr].text_scroll)
{
disp_scroll_text();
}
}
}
}
}
void disp_init()
{
text_curr_nr = 0;
text_set_starttime = 0;
text_pass = 0;
disp_show = true;
}
void disp_scroll_text()
{
matrix.fillScreen(0);
show_matrix(text_sets.sets[text_curr_nr].text, text_pos, text_sets.sets[text_curr_nr].color);
(int)text_pos--;
if(int(text_pos + textpixel) < 0) {
text_pos = matrix.width();
text_pass++;
Serial.printf("Pass[%d] - set nr %d, Text: '%s' \n", text_pass, text_curr_nr, text_sets.sets[text_curr_nr].text);
}
matrix.show();
delay(100);
}
}
void disp_start_set()
{
if( (0 == text_set_starttime) ||
(text_sets.sets[text_curr_nr].text =='\0') || text_sets.sets[text_curr_nr].active == false ||
((text_sets.sets[text_curr_nr].text_scroll == false) && (text_sets.sets[text_curr_nr].time_ms > 0) && ((millis() - text_set_starttime ) >= text_sets.sets[text_curr_nr].time_ms)) ||
((text_sets.sets[text_curr_nr].text_scroll == true) && (text_sets.sets[text_curr_nr].text_scroll_pass > 0) && ( text_pass >= text_sets.sets[text_curr_nr].text_scroll_pass)) ||
(((text_sets.sets[text_curr_nr].text_scroll_pass == 0) || text_sets.sets[text_curr_nr].text_scroll == false) && (text_sets.sets[text_curr_nr].time_ms == 0) && ((millis() - text_set_starttime ) >= 10000))
)
{
//Serial.printf("[%lu] Meet start set condition. Curr set is %d. \n", millis(), text_curr_nr);
if(0 < text_set_starttime || text_sets.sets[text_curr_nr].text =='\0' || text_sets.sets[text_curr_nr].active == false ) text_curr_nr++;
if(text_curr_nr == text_nr_sets) text_curr_nr = 0;
text_pass = 0;
if(text_sets.sets[text_curr_nr].text !='\0' && text_sets.sets[text_curr_nr].active == true)
{
Serial.printf("[%lu] Set %d. Runtime %lu. Text:'%s'\n", millis(), text_curr_nr, text_sets.sets[text_curr_nr].time_ms, text_sets.sets[text_curr_nr].text);
matrix.fillScreen(0);
textpixel = 6*strlen(text_sets.sets[text_curr_nr].text);
switch(text_sets.sets[text_curr_nr].align)
{
case TEXTLEFT:
text_pos = 0;
break;
case TEXTRIGHT:
text_pos = matrix.width();
break;
case TEXTCENTER:
text_pos = matrix.width() - textpixel;
text_pos = text_pos / 2;
break;
}
show_matrix(text_sets.sets[text_curr_nr].text, text_pos, text_sets.sets[text_curr_nr].color);
text_set_starttime = millis();
}
}
}
void show_matrix(const char* text, int pos, uint16_t color)
{
//Serial.printf("TEXT: %s (pos=%d, color=%d)\n", text, pos, color);
matrix.setTextColor(color);
matrix.setCursor(pos, 0);
matrix.print(text);
matrix.show();
}
void storeDisplaySet()
{
// write conf to EEPROM
EEPROM.begin(DISP_STRUCT_SIZE);
//for (size_t i = 0 ; i < DISP_STRUCT_SIZE ; i++)
//{
// EEPROM.write(i, 0);
//}
strncpy( text_sets.valid , "OK", sizeof(text_sets.valid) );
EEPROM.put(0, text_sets);
EEPROM.commit();
EEPROM.end();
}
bool loadDisplaySet()
{
bool rc = false;
sets_t buf = {};
// read conf from EEPROM
EEPROM.begin(DISP_STRUCT_SIZE);
EEPROM.get(0, buf);
EEPROM.end();
if (strcmp(buf.valid, "OK") == 0)
{
rc = true;
memcpy(&text_sets,&buf,sizeof(text_sets));
}
else
{
memset(&text_sets,0,sizeof(text_sets));
}
return rc;
}
String get_paramstring_from_struct(String name)
{
return(getset_param_at_struct(name, "", false));
}
void set_param_to_struct(String name, String value)
{
getset_param_at_struct(name, value, true);
}
String getset_param_at_struct(String name, String value, bool set)
{
String name_value = "";
int name_setnr_index = name.lastIndexOf("_");
int name_setnr = -1;
int name_index = -1;
String name_name = "unknown";
if(name_setnr_index > 0)
{
name_setnr = name.substring(name_setnr_index+1).toInt();
name_name = name.substring(0, name_setnr_index+1);
for(int pnr = 0; pnr < nr_param_names; pnr++)
{
if(name_name == set_param_name[pnr])
{
name_index = pnr;
break;
}
}
//Serial.printf("Param: (name=%s,set=%d, index=%d) %s = %s \n", name_name.c_str(), name_setnr, name_index, name.c_str(), value.c_str());
if(name_index != -1 && name_setnr != -1 && name_name != "unknown")
{
name_value += name_name + String(name_setnr) + "=";
switch(name_index)
{
case PCOLOR:
if(true == set)
text_sets.sets[name_setnr].color = (color_t)value.toInt();
name_value += String(text_sets.sets[name_setnr].color);
break;
case PTEXT:
if(true == set)
snprintf((char*)text_sets.sets[name_setnr].text, MAX_TXT_LENGTH, value.c_str());
name_value += String(text_sets.sets[name_setnr].text);
break;
case PTIME:
if(true == set)
text_sets.sets[name_setnr].time_ms = value.toInt()*1000;
name_value += String(text_sets.sets[name_setnr].time_ms /1000);
break;
case PSCROLL:
if(true == set)
text_sets.sets[name_setnr].text_scroll = (value=="true")?true:false;
name_value += String(text_sets.sets[name_setnr].text_scroll);
break;
case PACTIVE:
if(true == set)
text_sets.sets[name_setnr].active = (value=="true")?true:false;
name_value += String(text_sets.sets[name_setnr].active);
break;
case PALIGN:
if(true == set)
text_sets.sets[name_setnr].align = (text_align_t)value.toInt();
name_value += String(text_sets.sets[name_setnr].align);
break;
case PSCROLL_RUNS:
if(true == set)
text_sets.sets[name_setnr].text_scroll_pass = value.toInt();
name_value += String(text_sets.sets[name_setnr].text_scroll_pass);
break;
}
//Serial.printf("get/set %s\n", name_value.c_str());
}
}
return(name_value);
}