Edit History

Noen her som er hvasse på html/CSS eller hva det nå heter? :-D

 

Jeg holder på med en liten sak for å overvåke temp og ladestrøm på 2 dynamoer samt sjalte senseledning fra batteri til dynamo B+ for å "regulere" ned litt (som en sikkerhetsforanstaltning ved innstallasjon av LiFePO4 - ref. Lithium-tråden til @Dreuf).

 

Jeg har tusket til meg litt kode her og der og lagd en soft AP webserver basert på en Wemos D1 mini. Så langt alt vel, men som screenshot under viser kunne jeg med fordel fått plassert noen av knappene ved siden av hverandre for å få plass til alt på mobilskjermen.

 

Noen som har noen enkle tips for å få til dette? Limer inn Arduino-kode nederst. Er det bare et lite triks mhp. definisjon av knappene eller når jeg kaller de som avgjør om det blir ny linje hver gang?....

 

 

 

 

Kode (work in progress...):

 

#include <ESP8266WebServer.h>
#include <OneWire.h>
#include <DallasTemperature.h>

// Data wire is plugged into port D2 on the ESP8266
#define ONE_WIRE_BUS D2

// Setup a oneWire instance to communicate with any OneWire devices
OneWire oneWire(ONE_WIRE_BUS);

// Pass our oneWire reference to Dallas Temperature.
DallasTemperature sensors(&oneWire);

float tempSensor_p, tempSensor_s;
float current_p, current_s;

char relay_state[4]; //sjekk om dette er rett definisjon

uint8_t EEPROM_count;
uint8_t EEPROM_start;

uint8_t sense_pin =D7;
uint8_t current_pin_port =D5;
uint8_t current_pin_starboard = D6;

bool sense_auto_on_off = LOW; //Remove = LOW when stored values are implemented and read back during setup

uint8_t sensor_p[8] = { 0x28, 0xFE, 0x8D, 0x2A, 0x07, 0x00, 0x00, 0x49  };
uint8_t sensor_s[8] = { 0x28, 0x4A, 0x3A, 0x1E, 0x07, 0x00, 0x00, 0xCA  };

uint8_t current_limit;
uint8_t temp_limit;

/*Put your SSID & Password*/
const char* ssid = "V39 Alternator";  // Enter SSID here
const char* password = "montebello";  //Enter Password here

/* Put IP Address details */
IPAddress local_ip(192,168,1,1);
IPAddress gateway(192,168,1,1);
IPAddress subnet(255,255,255,0);

ESP8266WebServer server(80); 
            
 
void setup() {
  
  current_p=78; //REMOVE after making EEPROM write and readback routine
  current_s=87;  //REMOVE

  pinMode(sense_pin, OUTPUT); //Pinner for styring av senserele og MUX av strømsensorer
  pinMode(current_pin_port, OUTPUT);
  pinMode(current_pin_starboard, OUTPUT);

  digitalWrite(sense_pin, LOW);
  digitalWrite(current_pin_port, LOW);
  digitalWrite(current_pin_starboard, LOW);
   
  Serial.begin(115200);
  delay(100);
  
  sensors.begin();              

  Serial.print("Setting up network: ");
  Serial.println(ssid);

  WiFi.softAP(ssid, password);
  WiFi.softAPConfig(local_ip, gateway, subnet);
  delay(100);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi Ready..!");
  Serial.print("Go to IP: ");  Serial.println("192.168.1.1");

  server.on("/", handle_OnConnect); //knytter webserver og aksjoner til funksjoner
  server.on("/sense_auto_on_off", handle_sense_auto_on_off);
  server.on("/temp_increase", handle_temp_increase);
  server.on("/temp_decrease", handle_temp_decrease);
  server.on("/current_increase", handle_current_increase);
  server.on("/current_decrease", handle_current_decrease);
  server.onNotFound(handle_NotFound);

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

void loop() {
  server.handleClient();
  if(sense_auto_on_off && (int(tempSensor_p) < temp_limit) && (int(tempSensor_s) < temp_limit) && (int(current_p + current_s) < current_limit))
  {digitalWrite(sense_pin, HIGH);}
  else
  {digitalWrite(sense_pin, LOW);} //sense_pin settes høy for å aktivere rele hvis funksjon er aktivert og temp/spenning er under satte grenser

  //  Debugging
  //  Serial.print(int(tempSensor_p) < temp_limit);
  //  Serial.print(int(tempSensor_s) < temp_limit);
  //  Serial.print(int(current_p + current_s) < current_limit);
  //  Serial.println(sense_auto_on_off);
  //  delay(1000);
}

//Funksjoner for webserver ved første connection og ved knappetrykk

 

void handle_OnConnect() {
  sensors.requestTemperatures();
  tempSensor_p = sensors.getTempC(sensor_p); // Gets the values of the temperature
  tempSensor_s = sensors.getTempC(sensor_s); // Gets the values of the temperature
  // trenger kode her for å hente current_p og current_s + kalkuler total_current
  server.send(200, "text/html", SendHTML(tempSensor_p, tempSensor_s, current_p, current_s, temp_limit, current_limit, sense_auto_on_off)); 
}

void handle_sense_auto_on_off() {
  sense_auto_on_off = !sense_auto_on_off;
  Serial.print("Endret Sense status: "); Serial.println(sense_auto_on_off);
  server.send(200, "text/html", SendHTML(tempSensor_p, tempSensor_s, current_p, current_s, temp_limit, current_limit, sense_auto_on_off));
}

void handle_temp_increase() {
  temp_limit=temp_limit+5;
  Serial.println(temp_limit);
  server.send(200, "text/html", SendHTML(tempSensor_p, tempSensor_s, current_p, current_s, temp_limit, current_limit, sense_auto_on_off));
}

void handle_temp_decrease() {
  temp_limit=temp_limit-5;
  Serial.println(temp_limit);
  server.send(200, "text/html", SendHTML(tempSensor_p, tempSensor_s, current_p, current_s, temp_limit, current_limit, sense_auto_on_off)); 
}

void handle_current_increase() {
  current_limit=current_limit+5;
  Serial.println(current_limit);
  server.send(200, "text/html", SendHTML(tempSensor_p, tempSensor_s, current_p, current_s, temp_limit, current_limit, sense_auto_on_off));
}

void handle_current_decrease() {
  current_limit=current_limit-5;
  Serial.println(current_limit);
  server.send(200, "text/html", SendHTML(tempSensor_p, tempSensor_s, current_p, current_s, temp_limit, current_limit, sense_auto_on_off));
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

//Sender verdier på html, formattering

 

String SendHTML(float tempSensor_p,float tempSensor_s, float current_p, float current_s, uint8_t temp_limit, uint8_t current_limit, bool sense_auto_on_off){
  String ptr = "<!DOCTYPE html>";
  ptr +="<html>";
  ptr +="<head>";
  ptr +="<title>V39 Alternator Monitor</title>";
  ptr +="<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
  ptr +="<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600' rel='stylesheet'>";
  ptr +="<style>";
  ptr +="html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #444444;}";
  ptr +="body{margin-top: 5px;} ";
  ptr +="h1 {margin: 5px auto 3px;} ";
  ptr +=".side-by-side{display: table-cell;vertical-align: middle;position: relative;}";
  ptr +=".text{font-weight: 600;font-size: 20px;width: 200px;}";
  ptr +=".temperature{font-weight: 400;font-size: 28px;padding-right: 10px;}";
  ptr +=".port .temperature{color: #FF0000;}";
  ptr +=".starboard .temperature{color: #26B99A;}";
  ptr +=".limits .temperature{color: #708090;}";
  ptr +=".superscript{font-size: 28px;font-weight: 400;position: absolute;right: -20px;top: 0px;}";
  ptr +=".data{padding: 10px;}";
  ptr +=".container{display: table;margin: 0 auto;}";
  ptr +=".icon{width:1px}"; //evt fjerne?

 

//Definer trykk-knapper

 

  ptr +=".button {display: block;width: 80px;background-color: #1abc9c;border: none;color: white;padding: 10px 25px;text-decoration: none;font-size: 18px;margin: 0px auto 30px;cursor: pointer;border-radius: 3px;}\n";
  ptr +=".button-on {background-color: #708090;}\n";
  ptr +=".button-on:active {background-color: #708090;}\n";
  ptr +=".button-off {background-color: #26B99A;}\n";
  ptr +=".button-off:active {background-color: #26B99A;}\n";

  ptr +=".button2 {display: block;width: 35px;background-color: #1abc9c;border: none;color: white;padding: 5px 15px;text-decoration: none;font-size: 20px;margin: 0px auto 18px;cursor: pointer;border-radius: 3px;}\n";
  ptr +=".button2-up {background-color: #FF0000;}\n";
  ptr +=".button2-down {background-color: #26B99A;}\n";
  
  ptr +="</style>";

//Refresh-funksjon for webserver

  ptr +="<script>\n";
  ptr +="setInterval(loadDoc,1000);\n";
  ptr +="function loadDoc() {\n";
  ptr +="var xhttp = new XMLHttpRequest();\n";
  ptr +="xhttp.onreadystatechange = function() {\n";
  ptr +="if (this.readyState == 4 && this.status == 200) {\n";
  ptr +="document.body.innerHTML =this.responseText}\n";
  ptr +="};\n";
  ptr +="xhttp.open(\"GET\", \"/\", true);\n";
  ptr +="xhttp.send();\n";
  ptr +="}\n";
  ptr +="</script>\n";

//Webpage innhold
 
  ptr +="</head>";
  ptr +="<body>";
  ptr +="<h1>V39 Alternator Monitor</h1>";
  ptr +="<div class='container'>";
  
  ptr +="<div class='data port'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Port Temp</div>";
  ptr +="<div class='side-by-side temperature'>";
  ptr +=(int)tempSensor_p;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  
  ptr +="<div class='data starboard'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Starboard Temp</div>";
  ptr +="<div class='side-by-side temperature'>";
  ptr +=(int)tempSensor_s;
  ptr +="<span class='superscript'>&deg;C</span></div>";

  ptr +="</div>";

  ptr +="<div class='data port'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Port Current</div>";
  ptr +="<div class='side-by-side temperature'>";
  ptr +=(int)current_p;
  ptr +=" A</span></div>";
  
  ptr +="<div class='data starboard'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Starboard Current</div>";
  ptr +="<div class='side-by-side temperature'>";
  ptr +=(int)current_s;
  ptr +=" A</span></div>";

  ptr +="<div class='data limits'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Max Temp</div>";
  ptr +="<div class='side-by-side temperature'>";
  ptr +=(int)temp_limit;
  ptr +="<span class='superscript'>&deg;C</span></div>";
  ptr +="</div>";
  ptr +="<a class=\"button2 button2-up\" href=\"/temp_increase\"> + </a>\n";
  ptr +="<a class=\"button2 button2-down\" href=\"/temp_decrease\"> - </a>\n";

  
  ptr +="<div class='data limits'>";
  ptr +="<div class='side-by-side icon'>";
  ptr +="</div>";
  ptr +="<div class='side-by-side text'>Max Total Current</div>";
  ptr +="<div class='side-by-side temperature'>";
  ptr +=(int)current_limit;
  ptr +=" A</span></div>";
  ptr +="</div>";
  ptr +="<a class=\"button2 button2-up\" href=\"/current_increase\"> + </a>\n";
  ptr +="<a class=\"button2 button2-down\" href=\"/current_decrease\"> - </a>\n";
  
  if(sense_auto_on_off)
  {ptr +="<p>Auto Sense: ON.  </p><a class=\"button button-off\" href=\"/sense_auto_on_off\">Disable</a>\n";}
  else
  {ptr +="<p>Auto Sense: OFF. </p><a class=\"button button-on\" href=\"/sense_auto_on_off\">Enable</a>\n";}

  ptr +="</body>";
  ptr +="</html>