Помогите в написании и оформлении Web Serverа

AlexJV · 15 Мар 2018

Всем доброго времени суток.
Помогите в оформлении внешнего вида Web servera.
Не знаю как сделать круглые кнопки и как поменять фон?
И хорошо бы избавится от кнопки Refresh, что бы сам через определенное время обновлял страницу,
если это возможно
Программа ниже

сама программа

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

/* Set these to your desired credentials. */
const char *ssid = "Zefire";
const char *password = "1234567890"; //

unsigned int Ticks; //

ESP8266WebServer server(80);

/* Just a little test message. Go to http://192.168.4.1 in a web browser
* connected to this access point to see it.
*/
void handleRoot() {
server.send(200, "text/html", "<h1>You are connected</h1>");
}

int D0_pin = 16;
int D2_pin = 4;
int D1_pin = 5;
int D3_pin = 2; // 0
int D5_pin = 14;
int D4_pin = 0; // 2

String webPage()
{
String web;

web += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/> <meta charset=\"utf-8\"><title>ZeFire</title><style>button{color:red;padding: 10px 27px;}</style></head>";

web += "<h1 style=\"text-align: center;font-family: Open sans;font-weight: 51;font-size: 31px;\">ZeFire</h1><div>";
//--------
web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 5px;\">----Power----</p>";

if (digitalRead(D5_pin) == 1 ) // || digitalRead(D0_pin) == 1)
{
web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #43a209;margin: 0 auto;\">ON</div>";
}
if (digitalRead(D5_pin) == 0 ) // || digitalRead(D1_pin) == 1) // else
{
web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #ec1212;margin: 0 auto;\">OFF</div>";
}
web += "<div style=\"text-align: center;margin: 5px 0px;\"> <a href=\"socket1On\"><button>ON</button></a> <a href=\"socket1Off\"><button>OFF</button></a></div>";
// -------------------

//-----------------------
web += "<p style=\"text-align: center;margin-top: 0px;margin-bottom: 5px;\">---Power fire---</p>";
if (digitalRead(D2_pin) == 1)
{
web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #546cd6;margin: 0 auto;\">MIN</div>";
}
else
{
web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #ec9d12;margin: 0 auto;\">MAX</div>";
}
web += "<div style=\"text-align: center;margin: 5px 0px;\"> <a href=\"socket2On\"><button> 30%</button></a> <a href=\"socket2Off\"><button> 50%</button></a> <a href=\"socket2max\"><button>100%</button></a></div>";

// ------REFRESH-----------
web += "<div style=\"text-align:center;margin-top: 20px;\"><a href=\"/\"><button style=\"width:158px;\">REFRESH</button></a></div>";
// -----------------------------------

web += "</div>";
return(web);
}

void setup() {
pinMode(D0_pin, OUTPUT);
digitalWrite(D0_pin, LOW);
pinMode(D2_pin, OUTPUT);
digitalWrite(D2_pin, LOW);
pinMode(D1_pin, OUTPUT);
digitalWrite(D1_pin, LOW);
pinMode(D3_pin, OUTPUT);
digitalWrite(D3_pin, LOW);
pinMode(D4_pin, OUTPUT);
digitalWrite(D4_pin, LOW);
pinMode(D5_pin, INPUT);
digitalWrite(D5_pin, HIGH);

delay(1000);
Serial.begin(115200);
Serial.println();
Serial.print("Configuring access point...");
/* You can remove the password parameter if you want the AP to be open. */
WiFi.softAP(ssid, password);

IPAddress myIP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(myIP);

//---------------------------------
server.on("/", [](){
server.send(200, "text/html", webPage());
});
server.on("/socket1On", [](){
digitalWrite(D0_pin, HIGH);
server.send(200, "text/html", webPage());
delay(100);
Ticks = 5001; //

});
server.on("/socket1Off", [](){
digitalWrite(D1_pin, HIGH);
server.send(200, "text/html", webPage());
delay(100);
Ticks = 5001; //

});
server.on("/socket2On", [](){
digitalWrite(D2_pin, HIGH);
server.send(200, "text/html", webPage());
delay(100);
Ticks = 3001; //
});
server.on("/socket2Off", [](){
digitalWrite(D3_pin, HIGH);
server.send(200, "text/html", webPage());
delay(100);
Ticks = 3001; //
});
server.on("/socket2max", [](){
digitalWrite(D4_pin, HIGH);
server.send(200, "text/html", webPage());
delay(100);
Ticks = 3001; //

});
/* server.on("/socket3On", [](){
digitalWrite(D1_pin, HIGH);
server.send(200, "text/html", webPage());
delay(100);
Ticks = 5001; //
});
server.on("/socket3Off", [](){
digitalWrite(D1_pin, LOW);
server.send(200, "text/html", webPage());
delay(100);
Ticks = 5001; //

});
*/
server.begin();
Serial.println("HTTP server started");
// server.begin();
// Serial.println("HTTP server started");
}

void loop() {
server.handleClient();
delay (1); //
if (Ticks) Ticks--; //
if (Ticks == 0) {digitalWrite(D0_pin, LOW); digitalWrite(D1_pin, LOW); digitalWrite(D2_pin, LOW); digitalWrite(D3_pin, LOW); digitalWrite(D4_pin, LOW); } //
}

enjoynering · 15 Мар 2018

вас в гугле забанили?
- html background color - Поиск в Google

AlexJV · 15 Мар 2018

enjoynering написал(а):
вас в гугле забанили?
- html background color - Поиск в Google
А как это вписать в программу? Нужно писать web+= ....? Я просто в вэб станицах не очень понимаю

andrik_zp · 15 Мар 2018

Попробуйте поменять это

Код:

web += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/> <meta charset=\"utf-8\"><title>ZeFire</title><style>button{color:red;padding: 10px 27px;}</style></head>";

на вот это

Код:

web += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/> <meta charset=\"utf-8\"><title>ZeFire</title><style>background-color: #000088; button{color:red;padding: 10px 27px;}</style></head>";

если ничего не путаю фон должен стать синим background-color: #000088

AlexJV · 15 Мар 2018

andrik_zp написал(а):
Попробуйте поменять это

Код:

web += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/> <meta charset=\"utf-8\"><title>ZeFire</title><style>button{color:red;padding: 10px 27px;}</style></head>";

на вот это

Код:

web += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/> <meta charset=\"utf-8\"><title>ZeFire</title><style>background-color: #000088; button{color:red;padding: 10px 27px;}</style></head>";

если ничего не путаю фон должен стать синим background-color: #000088

Не помогло, как был белый фон так и остался

andrik_zp · 15 Мар 2018

Получилось (проверил у себя), та-же строка

Код:

web += "<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/> <style> body{background-color: #000088;} </style> <meta charset=\"utf-8\"><title>ZeFire</title><style> button{color:red;padding: 10px 27px;}</style></head>";

andrik_zp · 15 Мар 2018

Для скругления кнопок используйте border-radius: 20px; с указанием величины скругления в пикселях. Вот так будет выглядеть код самой верхней кнопки

Код:

if (digitalRead(D5_pin) == 1 ) // || digitalRead(D0_pin) == 1)
{
web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #43a209;margin: 0 auto; border-radius: 20px;\">ON</div>";
}
if (digitalRead(D5_pin) == 0 ) // || digitalRead(D1_pin) == 1) // else
{
web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #ec1212;margin: 0 auto; border-radius: 20px;\">OFF</div>";
}

AlexJV · 15 Мар 2018

andrik_zp написал(а):
Для скругления кнопок используйте border-radius: 20px; с указанием величины скругления в пикселях. Вот так будет выглядеть код самой верхней кнопки

Код:

if (digitalRead(D5_pin) == 1 ) // || digitalRead(D0_pin) == 1) { web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #43a209;margin: 0 auto; border-radius: 20px;\">ON</div>"; } if (digitalRead(D5_pin) == 0 ) // || digitalRead(D1_pin) == 1) // else { web += "<div style=\"text-align: center;width: 98px;color:white ;padding: 10px 30px;background-color: #ec1212;margin: 0 auto; border-radius: 20px;\">OFF</div>"; }

Спасибо. С фоном получилось, а вот с кнопкой не получается. Закругляет не кнопку, а прямоугольник над ними и цвет кнопки не могу поменять

enjoynering · 15 Мар 2018

вам принцип показали. учите разметку HTML - HTML Tutorial.

поверьте она вам пригодится если и дальше собираетесь писать под ESP8266

andrik_zp · 15 Мар 2018

Это был пример, который нужно применить ко всем кнопкам, и они станут круглыми. Для изменения цвета кнопки иземените значение в background-color: #546cd6; в строке с кнопкой

AlexJV · 15 Мар 2018

andrik_zp написал(а):
Это был пример, который нужно применить ко всем кнопкам, и они станут круглыми. Для изменения цвета кнопки иземените значение в background-color: #546cd6; в строке с кнопкой

Спасибо. Разобрался.
А с кнопкой Refresh можно что-то сделать, убрать что бы страница сама обновлялась?

Помогите в написании и оформлении Web Serverа

AlexJV

New member

enjoynering

Well-known member

AlexJV

New member

andrik_zp

Member

AlexJV

New member

andrik_zp

Member

andrik_zp

Member

AlexJV

New member

enjoynering

Well-known member

andrik_zp

Member

AlexJV

New member