s00500 / ESPUI

A simple web user interface library for ESP32 and ESP8266
https://valencia.lbsfilm.at/midterm-presentation/
Other
895 stars 166 forks source link

trying to understand library #223

Closed Atorcha closed 1 year ago

Atorcha commented 1 year ago

Hello, I am trying to understand the library but I cann´t. I have two problems that I can solve.

1) Try to make a group with a TITLE, and inside introduce two values Humidity and Temperature that are read from my DHT22 sensor

auto tab1 = ESPUI.addControl(Tab, "", "Status");

// grupo de datos habitacion
auto grouplabel_1 = 
ESPUI.addControl(Label, "Habitacion", "",  Turquoise, tab1, generalCallback);
tempHBLabelId = ESPUI.addControl(Label, "", "", ControlColor::Turquoise, grouplabel_1); // temp habitacion
humedadHBLabelId = ESPUI.addControl(Label, "", "", ControlColor::Turquoise, grouplabel_1); //humedad habitacion
ESPUI.setElementStyle(grouplabel_1, "font-size: x-large; font-family: serif;");

hab1

2) Try to make a group to enter de TIME that a timer will be ON and another time to enter the time that will be OFF

auto grouplabel_3 = 
ESPUI.addControl(Label, "Luz", "",  Turquoise, tab2);
text_time1 = 
ESPUI.text("Time 1", time1_Callback, ControlColor::Dark, "01:00"); // INPUT ON DEL PRIMER TIMER
ESPUI.setInputType(text_time1, "time");

text_time2 = 
ESPUI.text("Time 2", time2_Callback, ControlColor::Dark, "02:00"); // INPUT OFF DEL PRIMER TIMER
ESPUI.setInputType(text_time2, "time");

ESPUI.setElementStyle(grouplabel_3, "font-size: x-large; font-family: serif;");

hab2

thanks

iangray001 commented 1 year ago

You've not actually explained what your problems are.

Atorcha commented 1 year ago

1) The first problem is show better the information without gray lines between the tittle and the numbers EA0A8194-A4CE-42CE-A9A1-C2AA2B5703AE

2) The Second problem is show the two cards in only one card. Tittle: “ INPUT TIMER 1” Down: time On Time OFF

iangray001 commented 1 year ago

For 1, you're adding 3 labels. grouplabel_1 creates the card and the first label. Then you add tempHBLabelId and humedadHBLabelId to it. That is why you see three labels in the Habitacion card.

You should only create tempHBLabelId (with title "Habitacion") and then create humedadHBLabelId with tempHBLabelId as its parent.

For 2, the basic functions to add controls like ESPUI.button() and ESPUI.text() are only for simple use. As you saw with 1. you need to use ESPUI.addControl() if you want to set the parent. So instead of ESPUI.text() use ESPUI.addControl(Text,...). That will let you create text_time2 with text_time1 as its parent. Again, you don't need grouplabel_3 at all.

Atorcha commented 1 year ago

OK.

Thanks it works now, but, how it save the time input? string, int?

I need to compare time input with real time to trigger an action.

iangray001 commented 1 year ago

That question is too vague for me to answer.

I presume that you want the user to input time as a string. Entering "23:21" is a lot easier than 1462836372. You will need to work out a suitable format that you want to use, parse and validate it when it is submitted, and then convert it into something that is compatible with whatever time source use are using.

Atorcha commented 1 year ago

sorry I try to explain me better. I obtein the real time in this way: I have the hour in ine int, and minute in other int, so I have this operation: realtime =(hour*60)+minute Then I will like to compare with the time input to trigger a relay.

This qquestion is because I dont understand what is the variable of timeinput. I have this in my SETU.ino

// INTRODUCCION HORA ENCENDIDA APAGADA text_time1 = ESPUI.addControl(Text, "Luz", "ON", Turquoise, tab2, generalCallback); // INPUT ON DEL PRIMER TIMER ESPUI.setInputType(text_time1, "time"); text_time2 = ESPUI.addControl(Text,"OFF", "", Turquoise, text_time1, generalCallback); // INPUT OFF DEL PRIMER TIMER ESPUI.setInputType(text_time2, "time");

An then this:

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);

switch (sender->id) { case 5: Serial.println("rele 1"); break; case 6: Serial.println("rele 2"); break;

case 19: // caso de hora luz ON
{
int luz_on = sender->value.toInt() * 100;
Serial.print("Luz ON: ");
Serial.println(luz_on);
break;
}
case 20:  // caso de hora Luz OFF
Serial.println("Luz OFF");
break;

case 21:  // caso de temperatura del agua deseada
temp_agua_des = sender->value.toInt();
Serial.print("Temp agua deseada: ");
Serial.println(temp_agua_des);
break;

} }

And when I watch my serial port if I input 23:40 for example I obtein:

CB: id(19) Type(10) 'Luz' = 23:40 Luz ON: 2300

I would like to change (sender->value) to hour and minute.

iangray001 commented 1 year ago

sender->value is a string with two numbers separated by a colon :, toInt() is only expecting a string representation of a single number. If we look at the documentation for toInt() we read:

If the String contains non-integer numbers, the function will stop performing the conversion.

This is why it converts "23:40" into 23. It gets to the : and stops.

What we need to do is first search for where in the string the : is, and then convert the first half into hours and the second half into minutes. There are lots of ways of doing it but you could do something like this.

Bear in mind I am currently travelling so I haven't been able to compile or test any of this. It should give you the idea though.

//Convert the hours. Rely on the fact that it will stop converting when it hits the :
int hours = sender->value.toInt();
//Look for the : 
char *mins_str = strstr(sender->value.c_str(), ":");
//strstr returns a pointer to where the : was found. Increment past it.
mins_str += 1;
//And finally convert the rest of the string.
int mins = String(mins_str).toInt();

Please note this code is unsafe, as it makes assumptions. If the user types the wrong thing, or forgets to include a : then it might crash. You should program defensively, check the input, check the return value of strstr, etc.

Atorcha commented 1 year ago

it works!!!!

Thanks