Material Web running on a NodeMCU ESP8266! (FOR REAL)

[arduino_uno534]

Screenshots!

(the blank circle is actually no icon placecd to it)

Code:

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

// Wi-Fi credentials
const char* ssid = "x"; // where x is your network, for security i hided
const char* password = "x"; // these

// Motor pins (D1–D4 on NodeMCU)
#define motorPin1 D1
#define motorPin2 D2
#define motorPin3 D3
#define motorPin4 D4

ESP8266WebServer server(80);

void setup() {
  Serial.begin(115200);
  
  // Motor pin setup
  pinMode(motorPin1, OUTPUT);
  pinMode(motorPin2, OUTPUT);
  pinMode(motorPin3, OUTPUT);
  pinMode(motorPin4, OUTPUT);

  // Connect to Wi-Fi
  Serial.print("WiFi bağlantısı kuruluyor: ");
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi bağlı!");
  Serial.print("IP adresi: ");
  Serial.println(WiFi.localIP());

  // HTTP server routes
  server.on("/", []() {
  String html = "<link href=\"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap\" rel=\"stylesheet\">"
              "<script type=\"importmap\">{\"imports\":{\"@material/web/\":\"https://esm.run/@material/web/\"}}</script>"
              "<script type=\"module\">import '@material/web/all.js'; import {styles as typescaleStyles} from '@material/web/typography/md-typescale-styles.js';"
              "document.adoptedStyleSheets.push(typescaleStyles.styleSheet);</script>"
              "<h1>Step Motor Kontrol</h1><br>";

    html += "<br><a href=\"/ileri\"><md-filled-button><h1>Ileri</h1></md-filled-button></a>";
    html += "<br><br><a href=\"/geri\"><md-filled-button><h1>Geri</h1></md-filled-button></a><br><br><md-linear-progress indeterminate></md-linear-progress><br><br><md-dialog id=\"dialog\"><div slot=\"headline\">Dialog title</div><form slot=\"content\" id=\"form-id\" method=\"dialog\">A simple dialog with free-form content.</form><div slot=\"actions\"><md-text-button form=\"form-id\">Ok</md-text-button></div></md-dialog><md-filled-icon-button id=\"openDialog\" onClick=\"openDialog()\"></md-filled-icon-button><script>const dialog = document.getElementById('dialog');function openDialog() {dialog.show()}</script>";
    server.send(200, "text/html", html);
  });

  server.on("/ileri", []() {
    for(int i = 0; i < 5; i++) {
      stepIleri(50);
    }
    server.sendHeader("Location", "/");
    server.send(303);
  });

  server.on("/geri", []() {
    for(int i = 0; i < 5; i++) {
      stepGeri(50);
    }
    server.sendHeader("Location", "/");
    server.send(303);
  });

  // Start server
  server.begin();
  Serial.println("HTTP server başlatıldı.");
}

void loop() {
  server.handleClient();
}

// Step motor ileri adım
void stepIleri(int beklemeSuresi){
  digitalWrite(motorPin1, HIGH);
  digitalWrite(motorPin2, LOW);
  digitalWrite(motorPin3, LOW);
  digitalWrite(motorPin4, LOW);
  delay(beklemeSuresi);

  digitalWrite(motorPin1, LOW);
  digitalWrite(motorPin2, HIGH);
  digitalWrite(motorPin3, LOW);
  digitalWrite(motorPin4, LOW);
  delay(beklemeSuresi);

  digitalWrite(motorPin1, LOW);
  digitalWrite(motorPin2, LOW);
  digitalWrite(motorPin3, HIGH);
  digitalWrite(motorPin4, LOW);
  delay(beklemeSuresi);

  digitalWrite(motorPin1, LOW);
  digitalWrite(motorPin2, LOW);
  digitalWrite(motorPin3, LOW);
  digitalWrite(motorPin4, HIGH);
  delay(beklemeSuresi);
}

// Step motor geri adım
void stepGeri(int beklemeSuresi){
  digitalWrite(motorPin1, LOW);
  digitalWrite(motorPin2, LOW);
  digitalWrite(motorPin3, LOW);
  digitalWrite(motorPin4, HIGH);
  delay(beklemeSuresi);

  digitalWrite(motorPin1, LOW);
  digitalWrite(motorPin2, LOW);
  digitalWrite(motorPin3, HIGH);
  digitalWrite(motorPin4, LOW);
  delay(beklemeSuresi);

  digitalWrite(motorPin1, LOW);
  digitalWrite(motorPin2, HIGH);
  digitalWrite(motorPin3, LOW);
  digitalWrite(motorPin4, LOW);
  delay(beklemeSuresi);

  digitalWrite(motorPin1, HIGH);
  digitalWrite(motorPin2, LOW);
  digitalWrite(motorPin3, LOW);
  digitalWrite(motorPin4, LOW);
  delay(beklemeSuresi);
}