web.cpp

#include "web.h"


void web_setup ()
{
   
    HeapSelectIram abc;
    set_theme(1);

    //Create tabs
    configurations = ESPUI.addControl(ControlType::Tab, "Configurations", "Configurations");
    new_syringe = ESPUI.addControl(ControlType::Tab, "Nouvelle Seringue", "Nouvelle seringue");
    features = ESPUI.addControl(ControlType::Tab, "Caracteristiques du pousse-seringue", "Caracteristiques du pousse-seringue");

    //***ABOVE***//
    
    //***Syringe-pump***//
    status_syringe_pump = ESPUI.label("Etat du pousse-seringue :", ControlColor::None, "A l'arrêt");

    stop_syringe_pump = ESPUI.addControl(ControlType::Button, "Mise en marche", "\u26D4", ControlColor::None, status_syringe_pump, stop_syringe_pump_callback, (void*)19);

    //***Syringe-filled***//
    status_syringe_filled = ESPUI.label("Etat de la seringue :", ControlColor::None, "Enlevée");

    syringe_filled_placement = ESPUI.addControl(ControlType::Switcher, "Mise en marche", "Arrêt", ControlColor::None, status_syringe_filled, syringe_filled_placement_callback, (void*)19);

    ESPUI.addControl(ControlType::Separator, "", "", ControlColor::None);


    //***Initialisation***//
    calibration = ESPUI.button("Callibration", calibration_callback, ControlColor::None, "\u21E4");

    fast_backward = ESPUI.button("Initialisation", fast_backward_callback, ControlColor::None, "\u2BC7 \u2BC7");
    slow_backward = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC7", ControlColor::None, fast_backward, slow_backward_callback);
    slow_forward = ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC8", ControlColor::None, fast_backward, slow_forward_callback);
    fast_forward =  ESPUI.addControl(ControlType::Button, "Initialisation", "\u2BC8 \u2BC8", ControlColor::None, fast_backward, fast_forward_callback);

    ESPUI.addControl(ControlType::Separator, "", "", ControlColor::None);

    //Remaning_volume
    label_remaining_volume_mL = ESPUI.label("Volume restant en mL", ControlColor::None, "Volume restant en mL");

    remaining_volume_mL = ESPUI.addControl(ControlType::Slider, "Distance", "0", ControlColor::None, label_remaining_volume_mL, remaining_volume_mL_callback, (void*)19);

    ESPUI.sliderContinuous = true;

    //Volume_exchange_wanted
    volume_exchange_mL_label = ESPUI.addControl(ControlType::Label, "Caractéristiques de l'échange", "Volume à échanger en mL", ControlColor::None);
    volume_exchange_mL = ESPUI.addControl(ControlType::Number,"Caractéristiques de l'échange", "", ControlColor::None, volume_exchange_mL_label, volume_exchange_mL_callback, (void*)19);
    
    exchange_throughtput_uL_per_sec_label = ESPUI.addControl(ControlType::Label, "Caractéristiques de l'échange", "Débit de l'échange en uL/sec", ControlColor::None, volume_exchange_mL_label);
    exchange_throughtput_uL_per_sec = ESPUI.addControl(ControlType::Number,"Caractéristiques de l'échange", "", ControlColor::None, volume_exchange_mL_label, exchange_throughtput_uL_per_sec_callback, (void*)19);
 

    label_push_pull_choice = ESPUI.addControl(ControlType::Label, "Injection ou Aspiration", "Injection", ControlColor::None, volume_exchange_mL_label);
    switch_push_pull_choice = ESPUI.addControl(ControlType::Switcher, "Injection ou Aspiration", "Injection", ControlColor::None, volume_exchange_mL_label, switch_push_pull_choice_callback, (void*)19);
    ESPUI.updateSwitcher(switch_push_pull_choice, true); //pour mettre a "Injection" par défaut au début


    start_exchange = ESPUI.addControl(ControlType::Button, "Start exchange", "\xF0\x9F\x8F\x81", ControlColor::None, volume_exchange_mL_label, start_exchange_callback, (void*)19);


    //Configurations

    //Choice_of_syringe_model

    syringe_selection = ESPUI.addControl(ControlType::Select, "Choix de la seringue :", "", ControlColor::None, configurations, syringe_selection_callback);
    select_syringe_maj(configurations);

    syringe_volume_mL_value = 5;
    syringe_volume_mL_string = "Volume total: " + std::to_string(syringe_volume_mL_value) + "mL";
    syringe_volume_mL =ESPUI.addControl( ControlType::Label, "Caractéristiques de la seringue : ", syringe_volume_mL_string.c_str() , ControlColor::None, configurations);

    syringe_diameter_mm_value = 5;
    syringe_diameter_mm_string = "internal diameter : " + std::to_string(syringe_volume_mL_value) + "mm";
    syringe_diameter_mm =ESPUI.addControl( ControlType::Label, "Caractéristiques de la seringue : ", syringe_diameter_mm_string.c_str(), ControlColor::None, syringe_volume_mL);

    syringe_initial_volume_mL =  ESPUI.addControl( ControlType::Number, "Volume initial contenu dans la seringue : ", "0", ControlColor::None, syringe_volume_mL, syringe_initial_volume_mL_callback, (void*)19);

    choose_syringe = ESPUI.addControl(ControlType::Button, "Choisir cette seringue", "\u2714", ControlColor::None, syringe_selection, choose_syringe_callback, (void*)19);
  



    ESPUI.addControl(ControlType::Separator, "", "", ControlColor::None, configurations);
   

    //New_syringe
    name_new_syringe_label = ESPUI.addControl(ControlType::Label, "Nouvelle seringue", "Nom de la seringue :", ControlColor::None, new_syringe);
    name_new_syringe = ESPUI.addControl(ControlType::Text, "Nouvelle seringue", "", ControlColor::None, name_new_syringe_label, name_new_syringe_callback);
    internal_diameter_mm_new_syringe_label =ESPUI.addControl(ControlType::Label, "Nouvelle seringue", "Diamètre interne de la seringue en mm :", ControlColor::None, name_new_syringe_label);
    internal_diameter_mm_new_syringe = ESPUI.addControl(ControlType::Number, "Diamètre interne de la seringue en mm", "5", ControlColor::None, name_new_syringe_label, internal_diameter_mm_new_syringe_callback);
    internal_diameter_mm_new_syringe_value = 5;
    total_volume_mL_new_syringe_label =ESPUI.addControl(ControlType::Label, "Nouvelle seringue", "Volume total de la seringue en mL :", ControlColor::None, name_new_syringe_label);
    total_volume_mL_new_syringe = ESPUI.addControl(ControlType::Number, "Volume total de la seringue en mL", "5", ControlColor::None, name_new_syringe_label, total_volume_mL_new_syringe_callback);
    total_volume_mL_new_syringe_value = 5;

    ESPUI.addControl(ControlType::Separator, "Je suis là", "", ControlColor::None, name_new_syringe_label);

    add_syringe = ESPUI.addControl(ControlType::Button, "Ajouter la seringue", "\u2714", ControlColor::None, new_syringe, add_syringe_callback, (void*)19);


    //Features
    syringe_pump_length_mm_bis  = ESPUI.addControl(ControlType::Number, "Longueur totale du pousse-seringue", "50", ControlColor::None, features, syringe_pump_length_mm_callback);
    lead_screw_pitch_mm = ESPUI.addControl(ControlType::Number, "Avance par tour", "0.7", ControlColor::None, features, number_callback);
    clockwise_equals_push_label = ESPUI.addControl(ControlType::Label, "Sens de rotation du moteur", "Horaire = Injection", ControlColor::None, features);
    clockwise_equals_push = ESPUI.addControl(ControlType::Switcher, "Sens de rotation du moteur", "Horaire =", ControlColor::None, clockwise_equals_push_label, clockwise_equals_push_callback);
    ESPUI.updateSwitcher(clockwise_equals_push, true); //set "Horaire = Injection" at the beginning

    //Begin
    set_init_style();
    ESPUI.begin("ESPUI Control");
}


/************CALLBACK_METHODS****************/

//GENERAL CALLBACKS//
void number_callback(Control* sender, int type)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Print the value of the number controller via the serial port.
***/
{
    Serial.println(sender->value);
}


//SPECIFIC CALLBACKS//

//***ABOVE***//

void stop_syringe_pump_callback (Control* sender, int value, void* param)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Linking the switch of the syringe pump status and the actions.
***/
{
    syringe_pump_off();

}

void syringe_filled_placement_callback (Control* sender, int value, void* param)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Linking the switch of the syringe filled status(placed or not) and the actions.
***/
{

    Serial.println(String("param: ") + String(long(param)));
    switch (value)
    {
    case S_ACTIVE:
        syringe_filled_placement_on();
        break;

    case S_INACTIVE:
        syringe_filled_placement_off();
        break;
    }

    Serial.print(" ");
    Serial.println(sender->id);
}

void calibration_callback (Control *sender, int type) 
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Enable the syringe-pump calibration and change the style appropriately.
***/
{
    if((type == B_UP)) {
        Serial.printf("Go to zero"); 
        syringe_filled.go_to_zero();
        Serial.print("Active:");
            
        ESPUI.print(status_syringe_pump, "En marche");
        style (status_syringe_pump, 1);
        style (stop_syringe_pump, 1);
    }
}

void fast_backward_callback (Control *sender, int type) 
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : 
***/
{
    switch (type)
    {
    case B_DOWN:

        Serial.printf("Backward 10 steps"); 
        syringe_filled.reset_position();
        syringe_filled.move_mm(-50);
        syringe_filled.set_speed_mm_per_sec(50);
        syringe_filled.set_accel_mm_per_sec_per_sec(10);

        break;

    case B_UP:
        
        syringe_filled.stop();

        break;
    }
}

void fast_forward_callback (Control *sender, int type) 
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : 
***/
{

    switch (type)
    {
    case B_DOWN:

        Serial.printf("Forward 10 steps"); 
        syringe_filled.reset_position();
        syringe_filled.move_mm(50);
        syringe_filled.set_speed_mm_per_sec(50);
        syringe_filled.set_accel_mm_per_sec_per_sec(10);

        break;

    case B_UP:
        
        syringe_filled.stop();

        break;
    }
}

void slow_backward_callback (Control *sender, int type) 
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : 
***/
{
    switch (type)
    {
    case B_DOWN:

        Serial.printf("Backward 1 step"); 
        syringe_filled.reset_position();
        syringe_filled.move_mm(-50);
        syringe_filled.set_speed_mm_per_sec(0.5);
        syringe_filled.set_accel_mm_per_sec_per_sec(0.2);

        break;

    case B_UP:
        
        syringe_filled.stop();

        break;
    }
}

void slow_forward_callback (Control *sender, int type) 
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : 
***/
{
    switch (type)
    {
    case B_DOWN:

        Serial.printf("Forward 1 step"); 
        syringe_filled.reset_position();
        syringe_filled.move_mm(50);
        syringe_filled.set_speed_mm_per_sec(0.5);
        syringe_filled.set_accel_mm_per_sec_per_sec(0.2);

        break;

    case B_UP:
        
        syringe_filled.stop();

        break;
    }
}

void volume_exchange_mL_callback (Control* sender, int value, void* param)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Enable to choose the volume that woud be exchanged.
***/
{
    Serial.printf("val=%s\n", sender->value.c_str()); 
    syringe_filled.set_exchange_volume_mL(atof(sender->value.c_str()));
    syringe_filled.write_Json ();
}

void exchange_throughtput_uL_per_sec_callback (Control* sender, int value, void* param)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Enable to choose the volume that woud be exchanged.
***/
{
    Serial.printf("val=%s\n", sender->value.c_str()); 
    syringe_filled.set_exchange_throughput_uL_per_sec(atof(sender->value.c_str()));
    syringe_filled.write_Json ();
}


void switch_push_pull_choice_callback (Control* sender, int value, void* param)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Change the label_push_pull_choice to display the choice.
            Change the style of the controller involved.
***/
{

    Serial.println(String("param: ") + String(long(param)));
    switch (value)
    {
    case S_ACTIVE:
        syringe_filled.set_push(true);
        
        ESPUI.print(label_push_pull_choice, "Injection");

        style (volume_exchange_mL_label, 1);
        style (volume_exchange_mL, 1); 
        style (exchange_throughtput_uL_per_sec_label, 1);
        style (exchange_throughtput_uL_per_sec, 1);
        style (label_push_pull_choice, 1);
        style (switch_push_pull_choice, 1);
        
        break;

    case S_INACTIVE:

        syringe_filled.set_push(false);

        ESPUI.print(label_push_pull_choice, "Aspiration");

        style (volume_exchange_mL_label, 2);
        style (volume_exchange_mL, 2); 
        style (exchange_throughtput_uL_per_sec_label, 2);
        style (exchange_throughtput_uL_per_sec, 2);
        style (label_push_pull_choice, 2);
        style (switch_push_pull_choice, 2);
        break;
    }
    syringe_filled.write_Json();
    Serial.print(" ");
    Serial.println(sender->id);
}

void remaining_volume_mL_callback (Control* sender, int value, void* param)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Linking the display with the current volume remaining.
***/
{

    ESPUI.updateSlider(remaining_volume_mL, syringe_filled.get_remaining_volume_mL());
}

void start_exchange_callback (Control* sender, int value, void* param)
{
    syringe_pump_on();
}

//configurations  = Configurations


void syringe_initial_volume_mL_callback (Control* sender, int value, void* param)
{
    syringe_filled.set_remaining_volume_mL((sender->value).toFloat());
    Serial.print("Text: ID: ");
    Serial.print(sender->id);
    Serial.print(", Value: ");
    Serial.println(sender->value);
}

void choose_syringe_callback (Control* sender, int value, void* param)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Print the value of the button state via the serial port.
***/
{
    switch (value)
    {
    case B_DOWN:
        Serial.println("Button DOWN");

        //syringe_volume_mL_value = 2; //Mettre la valeur associé au nom choisit du select
        syringe_volume_mL_value = syringe.get_syringe_database()[select_value]["total_volume_mL"];
        syringe_volume_mL_string = "Volume total: " + std::to_string(syringe_volume_mL_value) + "mL";
        ESPUI.print(syringe_volume_mL, syringe_volume_mL_string.c_str());

        //syringe_diameter_mm_value = 1; //Mettre la valeur associé au nom choisit du select
        syringe_diameter_mm_value = syringe.get_syringe_database()[select_value]["internal_diameter_mm"];
        syringe_diameter_mm_string = "internal diameter : " + std::to_string(syringe_volume_mL_value) + "mm";
        ESPUI.print(syringe_diameter_mm, syringe_diameter_mm_string.c_str());


        

        break;

    case B_UP:
        Serial.println("Button UP");
        break;
    }
    
}

void name_new_syringe_callback(Control* sender, int type)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Print the value of the new syringe name chosen via the serial port.
***/
{
    name_new_syringe_value = sender->value;
    Serial.print("Text: ID: ");
    Serial.print(sender->id);
    Serial.print(", Value: ");
    Serial.println(sender->value);
}

void total_volume_mL_new_syringe_callback(Control* sender, int type)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Print the value of the new syringe name chosen via the serial port.
***/
{
    total_volume_mL_new_syringe_value = sender->value;
    Serial.print("Text: ID: ");
    Serial.print(sender->id);
    Serial.print(", Value: ");
    Serial.println(sender->value);
}

void internal_diameter_mm_new_syringe_callback(Control* sender, int type)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Print the value of the new syringe name chosen via the serial port.
***/
{
    internal_diameter_mm_new_syringe_value = sender->value,
    Serial.print("Text: ID: ");
    Serial.print(sender->id);
    Serial.print(", Value: ");
    Serial.println(sender->value);
}

void add_syringe_callback (Control* sender, int value,  void* param)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Print the value of the button state via the serial port.
            Enable to save data in the syringe_json file.
***/
{
    switch (value)
    {
    case B_DOWN:
        Serial.println("Button DOWN");

        syringe.set_syringe(name_new_syringe_value, total_volume_mL_new_syringe_value.toFloat(), internal_diameter_mm_new_syringe_value.toFloat());
        syringe.write_Json();

        ESPUI.addControl(ControlType::Option, name_new_syringe_value.c_str(), name_new_syringe_value.c_str(), ControlColor::None, syringe_selection);

        break;

    case B_UP:
        Serial.println("Button UP");
        break;
    }
    

}



//features : Configurations avancées

void syringe_pump_length_mm_callback(Control* sender, int type)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Print the value of the number controller via the serial port.
***/
{
    Serial.println(sender->value);
}

void clockwise_equals_push_callback(Control* sender, int value)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Print the value of the convention chosen via the serial port.
            Change the clockwise_equals_push_label to display the information.
***/
{
    switch (value)
    {
    case S_ACTIVE:
        Serial.print("Clockwise equals push");
        ESPUI.print(clockwise_equals_push_label, "Horaire = Injection");
        
        break;

    case S_INACTIVE:
        Serial.print("Clockwise equals pull");
        ESPUI.print(clockwise_equals_push_label, "Horaire = Aspiration");
        break;
    }

    Serial.print(" ");
    Serial.println(sender->id);
}

//

void syringe_selection_callback(Control* sender, int value)
/***
-Argument : Pointer to the controller calling the function, integer according to the controller type.
-Return   : /
-Action   : Print the value of the syringe name chosen via the serial port.
***/
{
    Serial.print("Select: ID: ");
    Serial.print(sender->id);
    Serial.print(", Value: ");
    Serial.println(sender->value);
    select_value = sender->value;
}



//ON_OFF METHODS

void syringe_pump_on_off()
/***
-Argument : /
-Return   : /
-Action   : Update the display of the syringe-pump status to match when the motor runs or not (so when we initialize, it stop by itself)
***/
{
    if (syringe_filled.is_running())
    {
      ESPUI.updateControlValue(status_syringe_pump, "1");
    }
    ESPUI.updateControlValue(status_syringe_pump, "0");
}

void syringe_pump_on()
/***
-Argument : /
-Return   : /
-Action   : Change the status_syringe_pump label to display the information.
            Change the style of the controller involved.
            Causes the movement of the syringe pump.
***/
{
    ESPUI.print(status_syringe_pump, "En marche");
    style (status_syringe_pump, 1);
    style (stop_syringe_pump, 1);

    syringe_filled.move();
}

void syringe_pump_off()
/***
-Argument : /
-Return   : /
-Action   : Change the status_syringe_pump label to display the information.
            Change the style of the controller involved.
            Causes the stop of the syringe pump.
***/
{
    ESPUI.print(status_syringe_pump, "A l'arrêt");
    style (status_syringe_pump, 2);
    style (stop_syringe_pump, 2);

    syringe_filled.stop();
}

void syringe_filled_placement_on()
/***
-Argument : /
-Return   : /
-Action   : Change the status_syringe_filled label to display the information.
            Change the style of the controller involved.
            Disable the calibration.
***/
{
    ESPUI.print(status_syringe_filled, "En place");
    style (status_syringe_filled, 1);
    style (syringe_filled_placement, 1);
    
    ESPUI.setEnabled(calibration, false);
    style (calibration, 2);
    syringe_pump_on();
}

void syringe_filled_placement_off()
/***
-Argument : /
-Return   : /
-Action   : Change the status_syringe_filled label to display the information.
            Change the style of the controller involved.
            Enable the calibration.
***/
{
    ESPUI.print(status_syringe_filled, "Enlevée");
    style (status_syringe_filled, 2);
    style (syringe_filled_placement, 2);

    ESPUI.setEnabled(calibration, true);
    style (calibration, 1);
}


/*************OTHER_METHODS****************/



void style (uint16_t id, int style)
/***
-Argument : The controller id and the style wanted.
-Return   : /
-Action   : Change style (1 is active, green; 2 is inactive, red; 3 is neutral, brown)
***/
{

    switch (style)
    {
    case 1:
        ESPUI.setPanelStyle(id, couleurs[0]);
        ESPUI.setElementStyle(id, couleurs[1]);
        break;

    case 2:
        ESPUI.setPanelStyle(id, couleurs[2]);
        ESPUI.setElementStyle(id, couleurs[3]);
        break;

    case 3:
        ESPUI.setPanelStyle(id, couleurs[4]);
        ESPUI.setElementStyle(id, couleurs[5]);
        break;

    }

}

void set_init_style()
/***
-Argument : /
-Return   : /
-Action   : Set up the initial style of every controller.
***/
{
    //***ABOVE***//
    
    style (status_syringe_pump, 2);
    style (stop_syringe_pump, 2);

    style (status_syringe_filled, 2);
    style (syringe_filled_placement, 2);

    style (calibration, 1);
    style (fast_forward, 3);
    style (fast_backward, 3);
    style (slow_forward, 3);
    style (slow_backward, 3);


    style (volume_exchange_mL_label, 1);
    style (volume_exchange_mL, 1); 
    style (exchange_throughtput_uL_per_sec_label, 1);
    style (exchange_throughtput_uL_per_sec, 1);
    style (label_push_pull_choice, 1);
    style (switch_push_pull_choice, 1);
    style (start_exchange, 1);


    style (label_remaining_volume_mL, 3);
    style (remaining_volume_mL, 3);
    

    //configurations
    style (syringe_volume_mL, 3);
    style (syringe_diameter_mm, 3);
    style (choose_syringe, 3);

    style (name_new_syringe, 3);
    style (internal_diameter_mm_new_syringe, 3);
    style (total_volume_mL_new_syringe, 3);
    style (add_syringe, 3);
    style (name_new_syringe_label, 3);
    style (internal_diameter_mm_new_syringe_label, 3);
    style (total_volume_mL_new_syringe_label, 3);
    style (add_syringe_label, 3);

    


    //features
    style (syringe_pump_length_mm_bis, 3);
    style (lead_screw_pitch_mm, 3);
    style (clockwise_equals_push_label, 3);
    style (clockwise_equals_push, 3);



    //
    style (syringe_selection, 3);

}

void set_theme(int theme)
/***
-Argument : Integer defining the theme wanted.
-Return   : /
-Action   : Change the interface theme for dark, light of colorful theme.
***/
{
    if (theme ==1)
    {
    //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);

    //Pas utilisé pour le moment
    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);


        
    }
}

void select_syringe_maj(uint16_t tab)
/***
-Argument : The page on which the info must display.
-Return   : /
-Action   : Read the syringe_json file so it get/recover all the syringe models registered.
***/
{
    JsonObject root = syringe.get_syringe_database_object();

    for (JsonPair kv : root) 
    {
        uint16_t choice = ESPUI.addControl(ControlType::Option, kv.key().c_str(), kv.key().c_str(), ControlColor::None, syringe_selection);
        style (choice, 3);
    }

    

}

//WEB_LOOP//
void web_loop ()
{

	if(millis() > last_time + 500) {
		last_time = millis();
        
        //UPDATES


        ESPUI.updateSlider(remaining_volume_mL, syringe_filled.step_to_mm(syringe_filled.where_step()*100/syringe_pump_length_mm));


        //syringe_filled.update_remaining_volume();

        if (syringe_filled.is_running())
        syringe_pump_on();
        else
        syringe_pump_off();

	}

}