Update: 2020-05-22

Die Anzahl der Schaltprogramme muss im Sketch analog der Anzahl im Html Dokument eingestellt sein!

Die Lokalzeit.ino ist zum ausführen der Zeitschaltuhr einzubinden.

Esp8266 Zeitschaltuhr Dual als Arduino Tab.

Zeitschaltuhr.ino

// ****************************************************************
// Sketch Esp8266 Zeitschaltuhr Dual Modular(Tab)
// created: Jens Fleischer, 2019-02-24
// last mod: Jens Fleischer, 2020-04-15
// For more information visit: https://fipsok.de
// ****************************************************************
// Hardware: Esp8266, Relais Modul o. Mosfet IRF3708 o. Fotek SSR-40 DA
// für Relais Modul
// GND an GND
// IN1 an D5 = GPIO14
// IN2 an D6 = GPIO12
// VCC an VIN -> je nach verwendeten Esp.. möglich
// Jumper JD-VCC VCC
// alternativ ext. 5V Netzteil verwenden
//
// für Mosfet IRF3708
// Source an GND
// Mosfet1 Gate an D5 = GPIO14
// Mosfet2 Gate an D6 = GPIO12
//
// für 3V Solid State Relais
// GND an GND
// SSR1 Input + an D5 = GPIO14
// SSR2 Input + an D6 = GPIO12
//
// Software: Esp8266 Arduino Core 2.4.2 / 2.5.2 /2.6.3
// Getestet auf: Nodemcu, Wemos D1 Mini Pro
/******************************************************************
  Copyright (c) 2018 Jens Fleischer. All rights reserved.

  This file is free software; you can redistribute it and/or
  modify it under the terms of the GNU Lesser General Public
  License as published by the Free Software Foundation; either
  version 2.1 of the License, or (at your option) any later version.
  This file is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  Lesser General Public License for more details.
*******************************************************************/
// Diese Version von Zeitschaltuhr sollte als Tab eingebunden werden.
// #include <FS.h> #include <ESP8266WebServer.h> müssen im Haupttab aufgerufen werden
// Die Funktionalität des ESP8266 Webservers ist erforderlich.
// Der Lokalzeit Tab ist zum ausführen der Zeitschaltuhr einzubinden.
// Die Funktion "setupTimerSwitch();" muss im Setup aufgerufen werden.
// Zum schalten muss die Funktion "dualTimerSwitch();" im loop(); aufgerufen werden.
/**************************************************************************************/

const auto active = LOW;                   // LOW für LOW aktive Relais oder HIGH für HIGH aktive (zB. SSR, Mosfet) einstellen
const uint8_t devicePin[] = {D5, D6};      // Pin für Relais einstellen
const auto count = 10;                     // Anzahl Schaltzeiten (analog Html Dokument) einstellen 2 bis 16
char switchTime[count * 2][6];
uint8_t switchActive[count];
bool relState[] {!active, !active};

void setupTimerSwitch() {
  for (auto pin : devicePin) digitalWrite(pin, !active), pinMode(pin, OUTPUT);
  File file = SPIFFS.open("/szeit.txt", "r");
  if (file) {
    for (auto i = 0; i < count * 2; i++) {
      file.readBytesUntil('\n', switchTime[i], sizeof(switchTime[i]));
    }
    for (auto i = 0; i < count; i++) {
      switchActive[i] = file.parseInt();
    }
    file.close();
  }
  server.on("/timer", HTTP_POST, []() {
    if (server.args() == 1) {
      switchActive[server.argName(0).toInt()] = server.arg(0).toInt();
      printer();
    }
    if (server.hasArg("sz0")) {
      for (auto i = 0; i < server.args(); i++) {
        strcpy (switchTime[i], server.arg(i).c_str());
      }
      printer();
    }
    String temp = "[";
    for (auto i = 0; i < count * 2; i++) {
      if (temp != "[") temp += ',';
      temp += (String)"\"" + switchTime[i] + "\"";
    }
    for (auto i = 0; i < count; i++) {
      temp += (String)",\"" + switchActive[i] + "\"";
    }
    temp += "]";
    server.send(200, "application/json", temp);
  });
  server.on("/timer", HTTP_GET, []() {
    char buf[9];
    strftime (buf, sizeof(buf), "%T ", &tm);
    if (server.hasArg("tog1")) relState[0] = !relState[0];    // Relais1 manuell schalten
    if (server.hasArg("tog2")) relState[1] = !relState[1];    // Relais2 manuell schalten
    server.send(200, "application/json", (String)"[\"" + buf + "\",\"" + (relState[0] == active) + "\",\"" + (relState[1] == active) + "\"]");
  });
}
void printer() {
  File file = SPIFFS.open("/szeit.txt", "w");
  if (file) {
    for (auto i = 0; i < count * 2; i++) {
      file.printf("%s\n", switchTime[i]);
    }
    for (auto i = 0; i < count; i++) {
      file.printf("%d\n", switchActive[i]);
    }
    file.close();
  }
}

void dualTimerSwitch() {
  static uint8_t lastmin {CHAR_MAX};
  static uint8_t lastState[] {active, active};
  localTime();
  if (tm.tm_min != lastmin) {
    lastmin = tm.tm_min;
    char buf[6];
    snprintf(buf, sizeof(buf), "%.2d:%.2d", tm.tm_hour, tm.tm_min);
    for (auto i = 0; i < count * 2; i++) {
      if (i < (count % 2 ? count + 1 : count)) {
        if (switchActive[i / 2] && !strcmp(switchTime[i], buf)) i % 2 ? relState[0] = !active : relState[0] = active; // Relais1 nach Zeit schalten
      }
      else {
        if (switchActive[i / 2] && !strcmp(switchTime[i], buf)) i % 2 ? relState[1] = !active : relState[1] = active; // Relais2 nach Zeit schalten
      }
    }
  }
  if (relState[0] != lastState[0] || relState[1] != lastState[1]) {
    for (auto i = 0; i < 2; i++) {
      lastState[i] = relState[i];
      digitalWrite(devicePin[i], relState[i]);
      Serial.println((String)"Relais" + (1 + i) + (digitalRead(devicePin[i]) == active ? " an" : " aus"));
    }
  }
}

Die Anzahl der Schaltprogramme muss im Html Dokument analog der Anzahl im Sketch eingestellt sein!

Die Webseite zur Esp8266 Zeitschaltuhr dual.

zeitschaltuhrdual.html

<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Dual Zeitschaltuhr</title>
    <style>
	  body {
      color: #15dfdf;
	  }
      div {
      display: flex;
      }
      span {
      padding: 0.5em;
      }
      #tog1,#tog2 {
      padding: .7em 1.2em;
      cursor: pointer;
	  color: #777;
      }
      time {
      text-shadow: 2px 2px 2px black;
      font-size: 1.3em;
      font-weight: bold;
      margin: auto;
      }
      input {
      height: auto;
      font-weight: bold;
      }
      .note:after {
      content: "Schaltzeiten gespeichert";
	  color: #777;
      }
      form {
      box-shadow: 5px 3px 10px #4e4d4d;
      }
      svg {
      height: 4em;
      }
      #bu {
      background-color: #333;
	  color: #33cccc;
	  border: outset #555;
      }
      .tab {
      overflow: hidden;
      }
      .tab button {
      background-color: #999;
	  color: #33cccc;
      border: none;
	  margin-top: 0em;
      transition: 0.8s;
      border-top-right-radius: .5em;
      border-top-left-radius: .5em;
      }
      .tab button:hover {
      background-color: #666;
      }
      .tab button.active {
      background-color: #333;
      }
      .tabcontent {
      display: none;
      padding: .5em .7em .5em .1em;
      background-color: #333;
      }
      .tabcontent input {
      background-color: inherit;
      font-size: 3em;
	  color: inherit;
	  border: solid #555;
      }
	  .tabcontent [name^=bu] {
      width: 2em;
	  cursor: pointer;
	  }
	  .none {
	  color: #777;
	  }
      @media only screen and (max-width: 600px) {
      .tabcontent input,input {
      font-size: 2em;
      width: auto;
      border: none;
	  }
	  .tab button,#bu,#tog1,#tog2 {
	  width: auto;
	  }
	  svg {
	  height: 3em;
	  }
      }	
    </style>
    <script>    
      var item = 10;					<!-- Anzahl Schaltzeiten (analog Sketch) einstellen 2 bis 16 -->
      document.addEventListener('DOMContentLoaded', () => {
        dom(), renew();
        document.querySelector('#bu').addEventListener('click', () => {
          send(new FormData(document.querySelector('form')));
        });
        document.querySelector('#tab1').addEventListener('click', openTab);
        document.querySelector('#tab2').addEventListener('click', openTab);
        document.querySelector('#tog1').addEventListener('click', renew);
        document.querySelector('#tog2').addEventListener('click', renew);
		for (var i = 0; i < item; i++) document.querySelector(`[name=bu${i}]`).addEventListener('click', active);
      },send(), setInterval(renew, 1000));
	  function dom() {
        var buf = '';
        for (var i = 0; i < item*2; i++) {
          buf += `${i%2 ? `<span> -- </span>` : `<div id="ak${i/2}"><span name="bu${i/2}"></span>`}<input type="time" name="sz${i}" value="">${i%2 ? '</div>' : ''}`;
          if (i == (item%2 ? item  : item-1)) {
            document.querySelector('#ctab1').insertAdjacentHTML('beforeend', buf);
            buf = '';
          }
          if (i == item*2-1) document.querySelector('#ctab2').insertAdjacentHTML('beforeend', buf);
        }
      }
	  function active() {
	    let formData = new FormData();
        formData.append(this.parentNode.id.substr(2, 4), this.textContent == 'ON' ? '0' : '1');
	    send(formData);
      }
      function send(arg) {
        fetch('/timer', {
          method: 'post',
          body: arg
        }).then(resp => {
          if(arg && arg.has('sz0'))  {
            var el = document.querySelector('p');
            el.classList.add('note');
            setTimeout(() => {
              el.classList.remove('note');
            }, 5000);
          }
          return resp.json();
        }).then(array => {
          array.forEach((x, i) => {
		    if (i < item*2) document.querySelector(`[name=sz${i}]`).value = x;
			if (i >= item*2) {
			  document.querySelector(`[name=bu${i-item*2}]`).textContent = x%2 ? 'ON' : 'OFF';
			  let el = document.getElementById(`ak${i-item*2}`).classList;
              x%2 ? el.remove("none") : el.add("none");
			}
          });
        });
      }
      function openTab(event) {
        var a = event.target.id.charAt(3)%2+1;
        document.getElementById(`ctab${a}`).style.display = "none";
        document.getElementById(`tab${a}`).classList.remove("active");
        document.getElementById('c' + event.target.id).style.display = "block";
        event.target.classList.add("active")
      }
      function renew(event) {
        fetch(`timer?${event ? event.currentTarget.id : ''}=`).then(resp => {
          return resp.json();
        }).then(array => {
		  document.querySelector('time').innerHTML = array[0];
		  for (var i = 1; i < array.length; i++) {
		    document.getElementById(`color${i}`).style.fill=array[i] == 0 ? '' : '#ff0';
            document.getElementById(`on${i}`).style.visibility=array[i] == 0 ? 'hidden' : 'visible';
		  }
        });
      }
    </script>
  </head>
  <body>
    <h2>Zeitschaltuhr</h2>
	<main>
      <div class="tab">
        <button class="button active" id="tab1">&#9203; Relais 1</button>
        <button class="button" id="tab2">&#9203; Relais 2</button>
		<time>00:00:00</time>
      </div>
      <form>
        <div id="ctab1" class="tabcontent" style="display: block;">
        </div>
        <div id="ctab2" class="tabcontent">
        </div>
      </form>
	</main>
    <div>
      <button class="button" id="bu">&#9200; Speichern</button>
      <div id="tog1">
        R1
        <svg viewBox="0 0 486 486">
          <g id="color1">
            <use xlink:href="#body"/>
            <use id="on1" xlink:href="#beam"/>
		  </g>	
        </svg>
      </div>
      <div id="tog2">
        R2
        <svg viewBox="0 0 486 486">
		<g id="color2">
          <use xlink:href="#body"/>
          <use id="on2" xlink:href="#beam"/>
		  </g>
        </svg>
      </div>
    </div>
    <p></p>
	<svg style="display: none;">
      <path id="body" d="m256.5 160.8c0-7.4-6-13.5-13.5-13.5-47.6 0-86.4 38.7-86.4 86.4 0 7.4 6 13.5 13.5 13.5 7.4 0 13.5-6 13.5-13.5 0-32.8 26.7-59.4 59.4-59.4 7.5 0 13.5-6 13.5-13.5zm106.2 72.5c0 32.3-12.8 61.6-33.6 83.1-15.8 16.4-26 37.3-29.4 59.6-1.5 9.6-9.8 16.7-19.6 16.7h-74.3c-9.7 0-18.1-7-19.5-16.6-3.5-22.3-13.8-43.5-29.6-59.8-20.4-21.2-33.1-50-33.4-81.7-0.7-66.6 52.3-120.5 118.9-121 66.5-0.5 120.5 53.3 120.5 119.7zm-64.3 191.4v14.2c0 11.3-8.3 20.7-19.1 22.3l-3.5 12.9c-1.9 7-8.2 11.9-15.5 11.9h-34.7c-7.3 0-13.6-4.9-15.5-11.9l-3.4-12.9c-10.9-1.7-19.2-11-19.2-22.4v-14.2c0-7.6 6.1-13.7 13.7-13.7h83.5c7.6 0.1 13.7 6.2 13.7 13.8z"/>
      <path id="beam" d="m376.57 341.98c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l33.5 33.5c2.6 2.6 6.1 3.9 9.5 3.9s6.9-1.3 9.5-3.9c5.3-5.3 5.3-13.8 0-19.1zm-262.8-224.8c2.6 2.6 6.1 3.9 9.5 3.9s6.9-1.3 9.5-3.9c5.3-5.3 5.3-13.8 0-19.1l-33.5-33.5c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1zm253.3 4c3.4 0 6.9-1.3 9.5-3.9l33.5-33.5c5.3-5.3 5.3-13.8 0-19.1s-13.8-5.3-19.1 0l-33.5 33.5c-5.3 5.3-5.3 13.8 0 19.1 2.7 2.6 6.1 3.9 9.6 3.9zm-253.3 220.8-33.5 33.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 3.9 9.5 3.9s6.9-1.3 9.5-3.9l33.5-33.5c5.3-5.3 5.3-13.8 0-19.1-5.2-5.3-13.8-5.3-19 0zm351.1-125.9h-47.3c-7.4 0-13.5 6-13.5 13.5 0 7.4 6 13.5 13.5 13.5h47.3c7.4 0 13.5-6 13.5-13.5 0-7.4-6-13.5-13.5-13.5zm-378.6 13.5c0-7.4-6-13.5-13.5-13.5h-47.3c-7.4 0-13.5 6-13.5 13.5 0 7.4 6 13.5 13.5 13.5h47.3c7.5 0 13.5-6 13.5-13.5zm158.9-158.9c7.4 0 13.5-6 13.5-13.5v-47.3c0-7.4-6-13.5-13.5-13.5s-13.5 6-13.5 13.5v47.3c0 7.5 6.1 13.5 13.5 13.5z"/>
    </svg>
  </body>
</html>