Skip to content
Snippets Groups Projects
Commit dadccaee authored by Malaurie Bernard's avatar Malaurie Bernard
Browse files

New Web interface with a lot of new features.

parent 54411d17
No related branches found
No related tags found
1 merge request!17Malaurie's work on UI + CLI interface + AccelStepper interface
Hide whitespace changes
Inline Side-by-side
Showing
with 450 additions and 127 deletions
web.cpp
+ 450
− 127
View file @ dadccaee
......@@ -2,170 +2,493 @@
// This is the ESPUI example
// it does nothing more yet and is not connected with the stepper motor code
#include <DNSServer.h>
#include <ESPUI.h> // https://github.com/s00500/ESPUI
#include "common.h"
#include "syringe.h"
#include <EEPROM.h>
int lengthSyringePump = 50; //Length of syringe pump in mm
int statusLabelId1;
int statusLabelId2;
int graphId;
int millisLabelId;
int testSwitchId;
uint16_t status;
uint16_t button1;
uint16_t millisLabelId;
uint16_t switchOne;
extern Syringe syringe;
uint16_t activation;
uint16_t EtatButtonSeringue;
uint16_t bouton1, bouton2, bouton3, bouton4, bouton5, bouton6, bouton7, bouton8, bouton9, bouton10, bouton11, bouton12, bouton13, bouton14, bouton15, bouton16, bouton17, bouton18, bouton19, bouton20, bouton21, bouton22, bouton23, bouton24, bouton25, bouton26, bouton27, bouton28, bouton29, bouton30, bouton31, bouton32, bouton33, bouton34, bouton35, bouton36, bouton37, bouton38, bouton39, bouton40, bouton41, bouton42, bouton43, bouton44, bouton45, bouton46, bouton47, bouton48, bouton49, bouton50, bouton51, bouton52, bouton53, bouton54, bouton55, bouton56, bouton57, bouton58, bouton59, bouton60, bouton61, bouton62, bouton63, bouton64, bouton65, bouton66, bouton67, bouton68, bouton69, bouton70, bouton71, bouton72, bouton73, bouton74, bouton75, bouton76, bouton77, bouton78, bouton79, bouton80, bouton81, bouton82, bouton83, bouton84, bouton85, bouton86, bouton87, bouton88, bouton89, bouton90, bouton91, bouton92, bouton93, bouton94, bouton95, bouton96, bouton97, bouton98;
uint16_t zero;
uint16_t styleButton, styleLabel, styleSwitcher, styleSlider, styleButton2, styleLabel2, styleSlider2;
uint16_t nvBoutonCtrl, nvBouton;
uint16_t slider;
char couleur1[30], couleur2[30], couleur3[30], couleur4[30], couleur5[30], couleur6[30], couleur7[30], couleur8[30], couleur9[30], couleur10[30];
bool test = true;
long unsigned lastTime = 0;
// Couleurs à utiliser
const char* couleurs[] = {
couleur1,
couleur2,
couleur3,
couleur4,
couleur5,
couleur6,
couleur7,
couleur8,
couleur9,
couleur10
};
uint8_t mock_read_uart(void);
void numberCallBack(Control* sender, int type);
void textCallBack(Control* sender, int type);
void sliderCallBack(Control* sender, int type);
void buttonStatusCallBack1(Control* sender, int type, void* param);
void buttonStatusCallBack2(Control* sender, int type, void* param);
void buttonCallback(Control* sender, int type);
void padCallBack(Control* sender, int value);
void switchStatusCallBack1(Control* sender, int value, void* param);
void switchStatusCallBack2(Control* sender, int value, void* param);
void selectCallBack(Control* sender, int value);
void otherSwitchCallBack(Control* sender, int value);
void buttonSeringue(Control* sender, int type);
void generalCallback(Control *sender, int type);
void nvBoutonCtrlCallback(Control *sender, int type);
void nvBoutonCallback(Control *sender, int type);
void positionChoice (Control *sender, int type);
void goToZero (Control *sender, int type);
void onOff();
void webSetup ()
{
//Creation des différents styles
//Les verts pour la mise en mrche de la seringue
sprintf(couleur1, "background-color: #%06X;", (unsigned int) 0xb2dbbf);
sprintf(couleur2, "background-color: #%06X;", (unsigned int) 0x5a8668);
//Le rouge pour la seringue a l'arrêt
sprintf(couleur3, "background-color: #%06X;", (unsigned int) 0xc97064);
sprintf(couleur4, "background-color: #%06X;", (unsigned int) 0x762419);
//Les marrons pour la config des seringues
sprintf(couleur5, "background-color: #%06X;", (unsigned int) 0xce9f6f);
sprintf(couleur6, "background-color: #%06X;", (unsigned int) 0x926448);
sprintf(couleur7, "background-color: #%06X;", (unsigned int) 0x0a7477);
sprintf(couleur8, "background-color: #%06X;", (unsigned int) 0x052a38);
sprintf(couleur9, "background-color: #%06X;", (unsigned int) 0x044365);
sprintf(couleur10, "background-color: #%06X;", (unsigned int) 0x58b8c3);
//Création des différents onglets
uint16_t tab1 = ESPUI.addControl(ControlType::Tab, "Configurations", "Configurations");
uint16_t tab2 = ESPUI.addControl(ControlType::Tab, "Mise en marche", "Mise en marche");
uint16_t tab3 = ESPUI.addControl(ControlType::Tab, "Nouvelle Seringue", "Nouvelle seringue");
uint16_t tab4 = ESPUI.addControl(ControlType::Tab, "Paramètres avancés", "Paramètres avancés");
uint16_t tab5 = ESPUI.addControl(Tab, "", "Styled controls");
//Au dessus des tables
statusLabelId1 = ESPUI.label("Etat du pousse-seringue 1 :", ControlColor::None, "A l'arrêt");
void numberCall( Control* sender, int type ) {
Serial.println( sender->value );
//Mettre en route le pousse-seringue
activation = ESPUI.addControl(ControlType::Switcher, "Mise en marche", "Arrêt", ControlColor::None, statusLabelId1, &switchStatusCallBack1, (void*)19);
//Style
ESPUI.setPanelStyle(statusLabelId1, couleurs[2]);
ESPUI.setElementStyle(statusLabelId1, couleurs[3]);
//Deplacement demandé du pousse-seringue
uint16_t mainNumber = ESPUI.number("Positions finale et possitionnement du pousse-seringue", positionChoice, ControlColor::None, 0, 0, 50);
ESPUI.addControl(Min, "", "0", None, mainNumber);
ESPUI.addControl(Max, "", "50", None, mainNumber);
//Visualisation de l'avancement
slider = ESPUI.addControl(ControlType::Slider, "Distance", "0", ControlColor::None, mainNumber, sliderCallBack);
//Style
ESPUI.setPanelStyle(mainNumber, couleurs[4]);
ESPUI.setElementStyle(mainNumber, couleurs[5]);
zero = ESPUI.button("Initialisation", goToZero , ControlColor::None, "Allez en butée");
ESPUI.setPanelStyle(zero, couleurs[4]);
ESPUI.setElementStyle(zero, couleurs[5]);
//TAB1 = Configurations
//Choix de la seringue 1
ESPUI.addControl(ControlType::Separator, "Seringue 1", "", ControlColor::None, tab1);
uint16_t select1
= ESPUI.addControl(ControlType::Select, "Choix de la seringue :", "", ControlColor::None, tab1, &selectCallBack);
ESPUI.addControl(ControlType::Option, "Seringue A", "Opt1", ControlColor::None, select1);
ESPUI.addControl(ControlType::Option, "Seringue B", "Opt2", ControlColor::None, select1);
ESPUI.addControl(ControlType::Option, "Seringue C", "Opt3", ControlColor::None, select1);
ESPUI.setPanelStyle(select1, couleurs[4]);
ESPUI.setElementStyle(select1, couleurs[5]);
uint16_t carac1 = ESPUI.addControl( ControlType::Label, "Caractéristiques de la seringue 1 : ", "D = 4mm, V = 10µL", ControlColor::None, tab1);
ESPUI.setPanelStyle(carac1, couleurs[4]);
ESPUI.setElementStyle(carac1, couleurs[5]);
//TAB2 : Mise en marche
//TAB3 : Nouvelle seringue
ESPUI.addControl(ControlType::Text, "Nom de la seringue :", "", ControlColor::Alizarin, tab3, &textCallBack);
ESPUI.addControl(ControlType::Number, "Diamètre interne de la seringue en mm", "5", ControlColor::Alizarin, tab3, &numberCallBack);
ESPUI.addControl(ControlType::Number, "Volume total de la seringue en µL", "5", ControlColor::Alizarin, tab3, &numberCallBack);
EtatButtonSeringue = ESPUI.addControl(
ControlType::Button, "Ajouter la seringue", "Valider", ControlColor::Peterriver, tab3, &buttonSeringue);
//TAB4 : Configurations avancées
//Diamètre de la vis
ESPUI.addControl(ControlType::Number, "Diamètre de la vis sans fin", "5", ControlColor::None, tab4, &numberCallBack);
//Sens de rotation du moteur
ESPUI.addControl(ControlType::Switcher, "Sens de rotation du moteur", "Horaire", ControlColor::None, tab4, &otherSwitchCallBack);
//TAB5 : Test de style
nvBoutonCtrl = ESPUI.addControl(ControlType::Button, "Nouveau Bouton", "Let magic happen", ControlColor::None, tab5, nvBoutonCtrlCallback);
ESPUI.setPanelStyle(nvBoutonCtrl, couleurs[0]);
ESPUI.setElementStyle(nvBoutonCtrl, couleurs[1]);
nvBouton = ESPUI.addControl(ControlType::Button, "Abra", "Cadabra", ControlColor::None, tab5, nvBoutonCallback);
syringe.isRunning();
//Lancement
ESPUI.begin("ESPUI Control");
}
void slider(Control *sender, int type) {
Serial.print("Slider: ID: ");
Serial.print(sender->id);
Serial.print(", Value: ");
Serial.println(sender->value);
/************ Les fonctions callbacks ****************/
void numberCallBack(Control* sender, int type)
{
Serial.println(sender->value);
}
void buttonCallback(Control *sender, int type) {
switch (type) {
case B_DOWN:
Serial.println("Button DOWN");
//syringe.push(1, 1);
break;
case B_UP:
Serial.println("Button UP");
break;
}
void textCallBack(Control* sender, int type)
{
Serial.print("Text: ID: ");
Serial.print(sender->id);
Serial.print(", Value: ");
Serial.println(sender->value);
}
void buttonExample(Control *sender, int type) {
switch (type) {
case B_DOWN:
Serial.println("Status: Start");
ESPUI.updateControlValue(status, "Start");
void sliderCallBack(Control* sender, int type)
{
Serial.print("Slider: ID: ");
Serial.print(sender->id);
Serial.print(", Value: ");
Serial.println(sender->value);
// Like all Control Values in ESPUI slider values are Strings. To use them as int simply do this:
int sliderValueWithOffset = sender->value.toInt() + 100;
Serial.print("SliderValue with offset");
Serial.println(sliderValueWithOffset);
}
ESPUI.getControl(button1)->color = ControlColor::Carrot;
ESPUI.updateControl(button1);
break;
void buttonStatusCallBack1(Control* sender, int type, void* param)
{
Serial.println(String("param: ") + String(long(param)));
switch (type)
{
case B_DOWN:
Serial.println("Status: Start");
ESPUI.print(statusLabelId1, "En marche");
break;
case B_UP:
Serial.println("Status: Stop");
ESPUI.print(statusLabelId1, "A l'arrêt");
break;
}
}
case B_UP:
Serial.println("Status: Stop");
ESPUI.updateControlValue(status, "Stop");
void buttonStatusCallBack2(Control* sender, int type, void* param)
{
Serial.println(String("param: ") + String(long(param)));
switch (type)
{
case B_DOWN:
Serial.println("Status: Start");
ESPUI.print(statusLabelId2, "En marche");
break;
case B_UP:
Serial.println("Status: Stop");
ESPUI.print(statusLabelId2, "A l'arrêt");
break;
}
}
void buttonCallback(Control* sender, int type)
{
switch (type)
{
case B_DOWN:
Serial.println("Button DOWN");
break;
ESPUI.getControl(button1)->color = ControlColor::Peterriver;
ESPUI.updateControl(button1);
break;
}
case B_UP:
Serial.println("Button UP");
break;
}
}
void padCallBack(Control* sender, int value)
{
switch (value)
{
case P_LEFT_DOWN:
Serial.print("left down");
break;
case P_LEFT_UP:
Serial.print("left up");
break;
case P_RIGHT_DOWN:
Serial.print("right down");
break;
case P_RIGHT_UP:
Serial.print("right up");
break;
case P_FOR_DOWN:
Serial.print("for down");
break;
case P_FOR_UP:
Serial.print("for up");
break;
case P_BACK_DOWN:
Serial.print("back down");
break;
void switchExample(Control *sender, int value) {
switch (value) {
case S_ACTIVE:
Serial.print("Tirer:");
break;
case P_BACK_UP:
Serial.print("back up");
break;
case S_INACTIVE:
Serial.print("Pousser");
break;
}
case P_CENTER_DOWN:
Serial.print("center down");
break;
Serial.print(" ");
Serial.println(sender->id);
case P_CENTER_UP:
Serial.print("center up");
break;
}
Serial.print(" ");
Serial.println(sender->id);
}
void selectExample(Control *sender, int value) {
Serial.print("Select: ID: ");
Serial.print(sender->id);
Serial.print(", Value: ");
Serial.println(sender->value);
void switchStatusCallBack2(Control* sender, int value, void* param)
{
Serial.println(String("param: ") + String(long(param)));
switch (value)
{
case S_ACTIVE:
Serial.print("Active:");
ESPUI.print(statusLabelId2, "En marche");
break;
case S_INACTIVE:
Serial.print("Inactive");
ESPUI.print(statusLabelId2, "A l'arrêt");
break;
}
Serial.print(" ");
Serial.println(sender->id);
}
uint8_t mock_read_uart(void);
void webSetup ()
void selectCallBack(Control* sender, int value)
{
//ESPUI.setVerbosity(Verbosity::VerboseJSON);
status = ESPUI.addControl(ControlType::Label, "Status:", "Stop", ControlColor::Turquoise);
uint16_t select1 = ESPUI.addControl(ControlType::Select, "Select the seringe volume:", "", ControlColor::Alizarin, Control::noParent, &selectExample);
ESPUI.addControl(ControlType::Option, "1mL", "Opt1", ControlColor::Alizarin, select1);
ESPUI.addControl(ControlType::Option, "2mL", "Opt2", ControlColor::Alizarin, select1);
ESPUI.addControl(ControlType::Option, "5mL", "Opt3", ControlColor::Alizarin, select1);
ESPUI.addControl(ControlType::Option, "10mL", "Opt3", ControlColor::Alizarin, select1);
ESPUI.addControl(ControlType::Option, "20mL", "Opt3", ControlColor::Alizarin, select1);
ESPUI.addControl(ControlType::Slider, "Select seringe diameter (mm)", "30", ControlColor::Alizarin, Control::noParent, &slider);
millisLabelId = ESPUI.addControl(ControlType::Label, "Millis:", "0", ControlColor::Emerald, Control::noParent);
switchOne = ESPUI.addControl(ControlType::Switcher, "Switch one", "", ControlColor::Alizarin, Control::noParent, &switchExample);
uint16_t constantFlow = ESPUI.addControl(ControlType::Slider, "Select a constant flow (mL/s)", "30", ControlColor::Alizarin, Control::noParent, &slider);
ESPUI.addControl(ControlType::Min, "", "0", ControlColor::None, constantFlow);
ESPUI.addControl(ControlType::Max, "", "30", ControlColor::None, constantFlow);
//uint16_t displacementDistance = ESPUI.addControl(ControlType::Slider, "Select a seringe displacement distance (mm)", "100", ControlColor::Alizarin, Control::noParent, &slider);
uint16_t displacementDistance = ESPUI.addControl(ControlType::Slider, "Select a seringe displacement distance (mm)", "100", ControlColor::Alizarin, Control::noParent,
[](Control *sender, int type)
{
Serial.printf("val=%s\n", sender->value.c_str());
Syringe::Syringe_configuration_t conf = syringe.configuration();
conf.volume_value = syringe.mmToMm3(atof(sender->value.c_str()));
syringe.configureSyringe(conf);
});
ESPUI.addControl(ControlType::Min, "", "0", ControlColor::None, displacementDistance);
ESPUI.addControl(ControlType::Max, "", "100", ControlColor::None, displacementDistance);
uint16_t displacementTime = ESPUI.addControl(ControlType::Slider, "Select a seringe displacement time (s)", "100", ControlColor::Alizarin, Control::noParent, &slider);
ESPUI.addControl(ControlType::Min, "", "0", ControlColor::None, displacementTime);
ESPUI.addControl(ControlType::Max, "", "100", ControlColor::None, displacementTime);
//button1 = ESPUI.addControl(ControlType::Button, "Actuate", "Press", ControlColor::Peterriver, Control::noParent, &buttonCallback);
button1 = ESPUI.addControl(ControlType::Button, "Actuate", "Press", ControlColor::Peterriver, Control::noParent,
[](Control *sender, int type)
{
if (type == B_UP)
syringe.fill();
});
/*
* .begin loads and serves all files from PROGMEM directly.
* If you want to serve the files from SPIFFS use ESPUI.beginSPIFFS
* (.prepareFileSystem has to be run in an empty sketch before)
*/
// Enable this option if you want sliders to be continuous (update during move) and not discrete (update on stop)
// ESPUI.sliderContinuous = true;
/*
* Optionally you can use HTTP BasicAuth. Keep in mind that this is NOT a
* SECURE way of limiting access.
* Anyone who is able to sniff traffic will be able to intercept your password
* since it is transmitted in cleartext. Just add a string as username and
* password, for example begin("ESPUI Control", "username", "password")
*/
Serial.print("Select: ID: ");
Serial.print(sender->id);
Serial.print(", Value: ");
Serial.println(sender->value);
}
ESPUI.begin("ESPUI Control");
void otherSwitchCallBack(Control* sender, int value)
{
switch (value)
{
case S_ACTIVE:
Serial.print("Active:");
break;
case S_INACTIVE:
Serial.print("Inactive");
break;
}
Serial.print(" ");
Serial.println(sender->id);
}
void webLoop ()
void buttonSeringue(Control* sender, int type)
{
///////////////////
// ESPUI management
switch (type)
{
case B_DOWN:
Serial.println("Button DOWN");
break;
case B_UP:
Serial.println("Button UP");
break;
}
}
//Most elements in this test UI are assigned this generic callback which prints some
//basic information. Event types are defined in ESPUI.h
void generalCallback(Control *sender, int type) {
Serial.print("CB: id(");
Serial.print(sender->id);
Serial.print(") Type(");
Serial.print(type);
Serial.print(") '");
Serial.print(sender->label);
Serial.print("' = ");
Serial.println(sender->value);
}
void nvBoutonCtrlCallback(Control *sender, int type) {
if(type == B_UP) {
test = !test;
ESPUI.updateVisibility(nvBouton, test);
}
}
void nvBoutonCallback(Control *sender, int type) {
if(type == B_DOWN) {
ESPUI.setPanelStyle(nvBouton, couleurs[2]);
ESPUI.setElementStyle(nvBouton, couleurs[3]);
}
}
void positionChoice (Control *sender, int type) {
Serial.printf("val=%s\n", sender->value.c_str());
Syringe::Syringe_configuration_t conf = syringe.configuration();
conf.volume_value = syringe.mmToMm3(atof(sender->value.c_str()));
syringe.configureSyringe(conf);
}
void goToZero (Control *sender, int type) {
if(type == B_UP) {
syringe.findZero();
ESPUI.print(statusLabelId1, "En marche");
ESPUI.setPanelStyle(statusLabelId1, couleurs[0]);
ESPUI.setElementStyle(statusLabelId1, couleurs[1]);
static decltype(millis()) oldTime = 0;
static bool testSwitchState = false;
if (millis() - oldTime > 5000)
}
}
void switchStatusCallBack1(Control* sender, int value, void* param)
{
Serial.println(String("param: ") + String(long(param)));
switch (value)
{
ESPUI.updateControlValue(millisLabelId, String(millis()));
testSwitchState = !testSwitchState;
ESPUI.updateControlValue(switchOne, testSwitchState ? "1" : "0");
oldTime = millis();
case S_ACTIVE:
Serial.print("Active:");
ESPUI.print(statusLabelId1, "En marche");
ESPUI.setPanelStyle(statusLabelId1, couleurs[0]);
ESPUI.setElementStyle(statusLabelId1, couleurs[1]);
syringe.fill();
break;
case S_INACTIVE:
Serial.print("Inactive");
ESPUI.print(statusLabelId1, "A l'arrêt");
ESPUI.setPanelStyle(statusLabelId1, couleurs[2]);
ESPUI.setElementStyle(statusLabelId1, couleurs[3]);
syringe.stayHere();
break;
}
Serial.print(" ");
Serial.println(sender->id);
}
void webLoop ()
{
//bool switchi = syringe.isRunning();
bool a = syringe.isRunning();
if(millis() > lastTime + 500) {
//ESPUI.updateSlider(slider, syringe.currentPosition()*100/lengthSyringePump);
lastTime = millis();
if (syringe.isRunning())
ESPUI.updateControlValue(activation, "1");
else
ESPUI.updateControlValue(activation, "0");
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment