So you're a Noob? Post your questions here until you graduate! Don't be shy.

User avatar
By szevlin
#86710 i want to make the temperature update button bigger on the web server, the code is working but the button is small, when i uploaded the new code where i tried to make it bigger, the button just disappeared and i dont know how to change it so that it would work, any advice?
Code: Select all#include <OneWire.h>
#include <DallasTemperature.h>
#include <ESP8266WiFi.h>
#define ONE_WIRE_BUS 5
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
const char* ssid = "ssid";
const char* password = "password";
int Celsius1=0;
int Celsius2=0;
int Celsius3=0;
int Celsius4=0;
int Celsius5=0;
int Celsius6=0;
int Celsius7=0;
int Celsius8=0;
int Celsius9=0;
int Celsius10=0;
int Celsius11=0;
int Celsius12=0;
WiFiServer server(80); 
void setup(){
  Serial.begin(115200);
  delay(10);
  sensors.begin();
  delay(10);
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");
  server.begin();
  Serial.println("Server started");
  Serial.print("Use this URL to connect: ");
  Serial.print("http://");
  Serial.print(WiFi.localIP());
  Serial.println("/");
}
void loop(){
sensors.requestTemperatures();
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
  Serial.println("new client");
  while(!client.available()){
    delay(10);
  }
  String request = client.readStringUntil('\r');
  Serial.println(request);
  client.flush();
  if (request.indexOf("/Tem=ON") != -1)  {
  Celsius1=sensors.getTempCByIndex(0);
  Celsius2=sensors.getTempCByIndex(1);
  Celsius3=sensors.getTempCByIndex(2);
  Celsius4=sensors.getTempCByIndex(3);
  Celsius5=sensors.getTempCByIndex(4);
  Celsius6=sensors.getTempCByIndex(5);
  Celsius7=sensors.getTempCByIndex(6);
  Celsius8=sensors.getTempCByIndex(7);
  Celsius9=sensors.getTempCByIndex(8);
  Celsius10=sensors.getTempCByIndex(9);
  Celsius11=sensors.getTempCByIndex(10);
  Celsius12=sensors.getTempCByIndex(11);
  }
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println("");
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<h1>DS18B20 with ESP8266</h1>");
  client.println("<br><br>");
  client.print("<br> Sensor 1 Temperature= ");
  client.print(Celsius1);
  client.print(" C");
  client.print("<br> Sensor 2 Temperature = ");
  client.print(Celsius2);
  client.print(" C");
  client.print("<br> Sensor 3 Temperature = ");
  client.print(Celsius3);
  client.print(" C");
  client.print("<br> Sensor 4 Temperature = ");
  client.print(Celsius4);
  client.print(" C");
  client.print("<br> Sensor 5 Temperature = ");
  client.print(Celsius5);
  client.print(" C");
  client.print("<br> Sensor 6 Temperature = ");
  client.print(Celsius6);
  client.print(" C");
  client.print("<br> Sensor 7 Temperature = ");
  client.print(Celsius7);
  client.print(" C");
  client.print("<br> Sensor 8 Temperature = ");
  client.print(Celsius8);
  client.print(" C");
  client.print("<br> Sensor 9 Temperature = ");
  client.print(Celsius9);
  client.print(" C");
  client.print("<br>Sensor 10 Temperature = ");
  client.print(Celsius10);
  client.print(" C");
  client.print("<br>Sensor 11 Temperature = ");
  client.print(Celsius11);
  client.print(" C");
  client.print("<br>Sensor 12 Temperature = ");
  client.print(Celsius12);
  client.print(" C");
  client.println("<br><br>");
  client.println("<br><br>");
  client.println("<a href=\"/Tem=ON\"\"><button>Update Temperature</button></a><br />");
  client.println("</html>");
  delay(10);
  Serial.println("Client disonnected");
  Serial.println("");
     
}
User avatar
By quackmore
#86711 do you mean something like this?

answer copied from here:
https://stackoverflow.com/questions/25014849/how-to-set-the-size-of-button-in-html

HTML
Code: Select all<button class="test"></button>


and CSS
Code: Select all.test{
    height:200px;
    width:200px;
}


or inline CSS
Code: Select all<button style="height:200px;width:200px"></button>
User avatar
By szevlin
#86718 yes thank you it works, but now the text is really small and i wanted to make it bigger but it didnt change anything when i tried to change it, what am i doing wrong?

Code: Select allclient.print("<input type=submit value=Update style=width:300px;height:100px;font-size:4em; onClick=location.href='/Tem=ON'>");     //font-size:4em works here

  client.print("<br><font-size:4em> Sensor 1 Temperature= ");     // but it doesnt work here
  client.print(<font-size:4em>Celsius1);     //or here
User avatar
By quackmore
#86723 Font-size is a CSS property, you have to use it with 'style=', like you did where it's working fine

Try something like this:
Code: Select all<p style="font-size:4em">Celsius1</p>