Go Down

Topic: Where to Learn HTML (Read 16545 times) previous topic - next topic

Babar_Latif

The point I was trying to get you to appreciate is that you did not provide enough information with the question in Reply #11

...R
Yeah ... that's another problem. how good an answer is, depends on how good the question was !! ... Sorry about that.
.
At least please guide me to the study I should take, for interfacing C++ (server side) with html (client side), so that whatever data client sends back could be used for further actions in C++ by the server.


Robin2

At least please guide me to the study I should take, for interfacing C++ (server side) with html (client side), so that whatever data client sends back could be used for further actions in C++ by the server.
What will the server code be running on?

I have never written server code with C/C++ - life is too short. If you are running the server on a PC I suggest you have a look at the Python Bottle web framework. You can have a simple server working in 10 or 15 minutes.


...R
Two or three hours spent thinking and reading documentation solves most programming problems.

xl97

You can always look into stalling WAMP server (Windows) or LAMP (Linux/MAC)..

and then use some PHP as the server side scripting language.

php is pretty easy to learn the basics of.. lots of tutorials and community support as well.

Myself, I'm not 100% clear on what your trying to do/achieve in your project?

You mentioned HTML basics.. but how is this being used?  What is the bigger picture of the project (technical stuff aside)


Babar_Latif

What will the server code be running on?

I have never written server code with C/C++ - life is too short. If you are running the server on a PC I suggest you have a look at the Python Bottle web framework. You can have a simple server working in 10 or 15 minutes.


...R
I had written a detailed post on what I am trying to achieve but don't know how it got lost .... anyway ignore if you find a similar other post.

I am struggling with ESP8266 WiFi module running with Arduino C as server to toggle an LED from browser on my laptop as client running html.

For this I copied a public domain Arduino sketch for ESP8266 and everything is running OK.

However, for learning sake, I tweaked the C Sketch to add buttons in GUI which shows good on laptop browser. But I am failing to get the desired action for toggling the LED.

I am trying to get outputs from client button onclick or href=" inputs as server-client communication ??

Where this part of server - client communication is covered in C ?? .... I will study that.

travis_farmer

#19
Mar 18, 2017, 08:35 pm Last Edit: Mar 18, 2017, 11:11 pm by travis_farmer
Shouldn't this thread be moved to an on-topic board? ;)

~Travis
Current Obsession: My server rack cooler, and my CNC Router
Check out my website, i have my own under-used forum on my hobby server.

Robin2

I am struggling with ESP8266 WiFi module running with Arduino C as server to toggle an LED from browser on my laptop as client running html.
I can't help with that. But I wonder if the end justifies the means. Building a web server on a cheap laptop is sooo much easier. I know you can buy a lot of ESP8266s for the price of a cheap laptop - but even so ...

...R
Two or three hours spent thinking and reading documentation solves most programming problems.

travis_farmer

#21
Mar 18, 2017, 11:10 pm Last Edit: Mar 18, 2017, 11:11 pm by travis_farmer
I think the point that @DrAzzy made, having the Arduino "serve" JSON data to a bigger server is likely and overall easier option. the bigger server uses PHP to read the JSON data from the Arduino "server", and displays output as needed.

My server rack monitor is working toward that sort of setup, though at the moment it doesn't handle data coming back to the arduino, yet. but it will, for configuration changes.

~Travis
Current Obsession: My server rack cooler, and my CNC Router
Check out my website, i have my own under-used forum on my hobby server.

JMeller

Hello Babar.
I am also new to the protocols of the web and have an interest in this topic. 

For testing purposes, html code is loaded from my 2560 via SD card and pushed via serial to the esp8266; once received, it is stored in the EEPROM so that it is available after reboot.  Like yourself, I have trolled the internet for information which appears to only have simple button control or info related to the Ethernet library.
I can load the page using the IP address of the esp8266.  However, passing info from the web page to the esp8266 has unsuccessful due to my lack of knowledge.

esp8266 Facts: #include <EEPROM.h>
                     #include <ESP8266WiFi.h>
                     #include <ESP8266WebServer.h>

esp8266 library- 2.3.0

Arduino IDE - 1.8.1



Goal: Enter IP, submask & gateway into webpage; press webpage button and pass info to esp8266; store in EEPROM.

html code (page loads - however, no info passed to esp8266):

Code: [Select]

<html lang="en">
<head>
<meta charset="utf-8">
<title>My Test Page - IoT</title>
<script>
strLine1 = "";
strLine2 = "";
function SendText()
  {
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
  strLine1 = "&L1=" + document.getElementById("txt_form").line1LCD.value;
strLine2 = "&L2=" + document.getElementById("txt_form").line2LCD.value;
request.open("GET", "ajax_inputs" + strLine1 + strLine2 + nocache, true);
request.send(null);
}
</script>
</head>
<body onload="GetArduinoIO()">
<p><b>My Test Page</b></p>
<p>Your Wifi Host IP Adress is:</p>
<p>Your Wifi Host IP Submask is:</p>
<p>Your Wifi Host IP Gateway is:</p>
<p></p>
<p><b>Enter text to send to TFT TouchScreen:</b></p>
<form id="txt_form" name="frmText">
<label>Line 1: <input type="text" name="line1LCD" size="16" maxlength="16" /></label><br /><br />
  <label>Line 2: <input type="text" name="line2LCD" size="16" maxlength="16" /></label>
</form>
<br />
<input type="submit" value="Update IP Settings" onclick="SendText()" />
</body>
</html>



Recommended links to info in this thread have been noted.
As I learn more of the esp8266 & html, I will add to this thread; I hope you'll do the same -information has become so fragmented and time consuming.

A working example from our peers would be greatly appreciated.


Babar_Latif

Hi JMeller,

Thanks for your understanding my problem, that is, how to receive data in ESP8266 from laptop once the button is clicked on the page received from ESP8266.

Question: How you read the data back in ESP8266 with onclick on the page ??

Ref: the relevant line from your code;

<input type="submit" value="Update IP Settings" onclick="SendText()" />

Robin2

#24
Mar 19, 2017, 10:25 am Last Edit: Mar 19, 2017, 10:26 am by Robin2
Thanks for your understanding my problem, that is, how to receive data in ESP8266 from laptop once the button is clicked on the page received from ESP8266.
This suggests to me you have a general lack of knowledge about web programming. If so IMHO it will be much easier to learn about it using a simple web server program on a PC because there is a huge amount of online help about PC web programming. When you know how to do it on a PC you will be able to use that knowledge to make it work on your ESP8266.

...R
Two or three hours spent thinking and reading documentation solves most programming problems.

xl97

what I get from this is:

* You want the ESP8266 module to act as an AP (Access point)... yes?
- meaning you want the PC to connect to the ESP8266 module itself, as it broadcasts as its own SSID/wifi network

* You want this ESP8266 module to also host and serve up an HTML page...
- this HTML page the ESP8266 module serves up/displays if the 'interface' (gui) used to toggle the locally connected (to this ESP8266 module) LED......correct?


I have done this before, and actually think its a GREAT project/use of these ESP8266 modules.

Basically they are standalone, controllable interfaces for the connected device(s)...  which I think has its place.

If you were going with many 'connected' controllable devices.. I would suggest using a Raspberry Pi set as an MQTT broker/server and have a publish/subscribe type of protocol going..

but for this single, standalone device..  this should be no problem.


What you want to do (more or less) is have your ESP8266  module set up as a Captive Portal..
- Think when you are in a hotel room, and you want to use their 'wifi'...  you need to check for their wifi network on your phone/laptop... (connect).. then you open a browser to navigate to some website...  and OOPS...  the only webpage you can seem to get is the hotels 'sign-in' page..

and until you agree, enter in a password (or whatever the required steps are)...  that is the ONLY page your browser will serve up..


It is the same concept here..

When the ESP8266 module is configured as an AP (access Point) and as a Captive Portal.. the user can:

* connect to it using any SID name you give it  (ie: led-wifi-network, or led-interface.....whatever)..

once you have connected to this newly found wifi network...

if you open a browser, ... and try to load a page (example: www.aaa.com)..  the ONLY HTML page that will be displayed in your won HTML/page...

with some CSS/HTML buttons/links on it..etc

once a button is pressed, the page is 'submitted' (to itself).. and the link/data is parsed in the code and behaves as it is coded to behave.

I have an old project, where I created a 'prank device'.. (although this could EASILY be used to do malicious behavior, and used an exploit to execute a nasty payload).....

that used an ESP8266 device as an AP/Captive Portal.. to serve up/display some HTML page with many links/buttons on the page.

each link/button set some 'prankster behavior' in motion when clicked.

The ESP8266 module was paired with a Pro-Micro (not Pro-Mini) that can act as an HID device...

So the Pro-mini was plugged into the target machine/pc..  and the ESP connected to the Pro-Micro...

Whenever someone in the office would use their phone to connected to the 'operation_prankster' wifi network.. and opened a browser they would see many options to execute on the connected target computer.

I limited it to minmizing to the desktop, opening a new browser tab and going to a Rock-Roll YouTube video...

moving the mouse

being able to dynamically send text to the machine to be typed out in whatever app was current open/in focus..etc.

Its all the same thing..  I had my ESP8266 connected to a Pro-Micro... to parse and send commands to.. you'll just be parsing the 'commands' and toggling an LED instead..

As Robin2 states though.. if your focus is on the HTML/CSS side of things...  then setting up a local WAMP server or something to play around would be beneficial in your learning.


Here is a stock example of providing a CSS/HTML gui to toggle some leds:

Code: [Select]

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <DNSServer.h>
 
const char* ssid     = "esp8266";
boolean LEDstate[] = {LOW, false, LOW};

const char* html = "<html><head><title>Success</title><style>.bt{display:block;width:250px;height:100px;padding:10px;margin:10px;"
                    "text-align:center;border-radius:5px;color:white;font-weight:bold;font-size:70px;text-decoration:none;} "
                    "body{background:#000;} .r{background:#933;} .g{background:#363;} .y{background:#EE0;height:100px;"
                    "width:100px;border-radius:50px;} .b{background:#000;height:100px;width:100px;border-radius:50px;} "
                    ".a{font-size:35px;} td{vertical-align:middle;}</style>"
                    "</head><body><table><tr><td><div class='TGT0'></div></td><td><a class='bt g' href='/L0?v=1'>ON</a></td>"
                    "<td><a class='bt r' href='/L0?v=0'>OFF</a></td></tr><tr><td><div class='TGT2'></div></td><td>"
                    "<a class='bt g' href='/L2?v=1'>ON</a></td><td><a class='bt r' href='/L2?v=0'>OFF</a></td></tr>"
                    "<tr><td>&nbsp;</td><td><a class='bt g a' href='/ALL?v=1'><br/>ALL ON</a></td><td>"
                    "<a class='bt r a' href='/ALL?v=0'><br/>ALL OFF</a></td></tr></body></html>";

const byte DNS_PORT = 53;
IPAddress apIP(192, 168, 1, 34);
IPAddress netMsk(255, 255, 255, 0);
DNSServer dnsServer;
ESP8266WebServer server(80);

void setup() {
  pinMode(0, OUTPUT);
  pinMode(2, OUTPUT);
  digitalWrite(2, LEDstate[0]);
  digitalWrite(2, LEDstate[2]);
  Serial.begin(115200);
  Serial.setDebugOutput(true);
  WiFi.mode(WIFI_AP);
  WiFi.softAPConfig(apIP, apIP, netMsk);
  WiFi.softAP(ssid);
  Serial.print("SSID: ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.softAPIP());
  dnsServer.setErrorReplyCode(DNSReplyCode::NoError);
  dnsServer.start(DNS_PORT, "*", apIP);
  Serial.println("USP Server started");
  server.on("/", handle_root);
  server.on("/generate_204", handle_root);  //Android captive portal
  server.on("/L0", handle_L0);
  server.on("/L2", handle_L2);
  server.on("/ALL", handle_ALL);
  server.onNotFound(handleNotFound);
  server.begin();
  Serial.println("HTTP server started");

}

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

void handleNotFound() {
  Serial.print("\t\t\t\t URI Not Found: ");
  Serial.println(server.uri());
  server.send ( 200, "text/plain", "URI Not Found" );
}

void handle_root() {
  Serial.println("Page served");
  String toSend = html;
  toSend.replace("TGT0", LEDstate[0] ? "y" : "b");
  toSend.replace("TGT2", LEDstate[2] ? "y" : "b");
  server.send(200, "text/html", toSend);
  delay(100);
}

void handle_L0() {
  change_states(0);
  handle_root();
}

void handle_L2() {
  change_states(2);
  handle_root();
}

void handle_ALL() {
  change_states(0);
  change_states(2);
  handle_root();
}

void change_states(int tgt) {
  if (server.hasArg("v")) {
    int state = server.arg("v").toInt() == 1;
    Serial.print("LED");
    Serial.print(tgt);
    Serial.print("=");
    Serial.println(state);
    LEDstate[tgt] = state ? HIGH : LOW;
    digitalWrite(tgt, LEDstate[tgt]);
  }
}



JMeller

xl97,
Thank you for taking the time write a detailed explanation along with a GREAT code example.  I uploaded the code and will dissect it so as learn from it.

Many thanks,
JM

xl97

Not my code..  I believe it is an example from -Ray Burnette-?  (sorry if I incorrectly giving credit, going off memory!)  :)

Mine is based of the above, it just does different 'stuff'..

You'll need to do some updates to get it to work reliably with many difference devices.

tip: debug/output all device requests, and make a handler for each unique on you come across.

I would actually dump all the code into a rich text editor, like Notepad++ for example.

and start by replacing all the HTML class names/css with meaningful names, so it is easier to learn.

also as Robin2 mentions..  go online and search some basic HTML/CSS tutorials so what you read/look at makes sense.


codecademy.com has a nice little lesson based learning system.... but really there are 100's out there, pick one. :)



JMeller


JMeller

Ok, gentleman.  I did my homework and completed the 16 modules on www.codeacademy.com and grabbed some info from www.w3schools.com to learn some scripting methods.  Code is posted below and the ESP8266 responds accordingly to the commands (in the bland web page w/o the css).

Note: buttons are not set to send info for page testing purposes.
HTML:
Code: [Select]

<!DOCTYPE html>
<html>

  <head>
    <link href="C:\Users\jmeller\Desktop\HOSTindex\style.css" type="text/css" rel="stylesheet" >
    <!-- https://fonts.google.com/ -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:100" type="text/css" rel="stylesheet"> <!-- get fonts from google -->
    <title>My IoT</title>
    <header>
      <headRunner>
        <h1 id="HDR"><p align="center" >Welcome, admin!</p></h1><br><br>          <!-- Heading H1 to H6 (H1=Largest Text) -->

        <div class="ipaddr">
          <h4><p align="left">IP Address: 192.168.1.100</br></h4>
        </div>

        <div class="instr">
          <p>Step 1.) Join Household Network (via ComboBox)<br>
            Step 2.) Change Computer WiFi to Home Network (via OS)  <br>
            Step 3.) Once on Home Network, change device to static IP served up by DHCP Home Network (via "Change IP Config)"<br>
            Step 4.) Assign device to be HOST or SLAVE (future radiobuttons)
          </p>
        </div>
      </headRunner>
    </header>
  </head>

  <body style=background-color:lightblue>
    <form id="txt_form">
      <script>
           function changeIP() {
             document.getElementById("HDR").style.color = "red";
             document.getElementById("wifipass").placeholder = "changeIP";
             document.getElementById("wifipass").value = "changeIP";
             document.getElementById("join").disabled = true;
             document.getElementById("wifipass").disabled = true;
             document.getElementById("IPchange").disabled = false;
             document.getElementById("ComboBox").disabled = true;
           }

          function joinNET() {
             document.getElementById("HDR").style.color = "blue";
             document.getElementById("wifipass").placeholder = "WiFi Password";
             document.getElementById("wifipass").value = "";
             document.getElementById("IPchange").disabled = true;
             document.getElementById("join").disabled = false;
             document.getElementById("wifipass").disabled = false;
             document.getElementById("ComboBox").disabled = false;
             
          }
          function joinNETclick(){
             document.getElementById("joining").innerHTML = "Standby ... attempting to join network.  Don't forget to change computer WiFi access point when returning!!";
         }
   </script>

    <form  action="/changeSSID" method="POST"> <!--used when button input type ="submit" -->
     

      <div class="btn1">
        <input type="button"  id="IPchange" name="IP" value="Change IP Configuration" disabled><br>
      </div>

      <div class="radios">
        <input type="radio"name= "network" value="join"  onclick="changeIP()">Change IP<br>
        <input type="radio" name="network" value="change" checked onclick="joinNET()" >Join Network<br>
      </div>
      <div class="wifi">
        <div class="btn2">
          <input type="button" id="join" name="JOIN" value="JOIN" onclick="joinNETclick()" >
        </div>

        <div class="tbox">
          <input type="text" id="wifipass" name="password" placeholder="Wifi Password">
        </div>
     
        <select id="ComboBox" name="SSID">
          <option value="ssid">Choose Access Point ...</option>
          <option value="ssid">myWifi</option>
          <option value="ssid">neighb1Wifi</option>
          <option value="ssid">neighb2Wifi</option>
          <option value="ssid">neighb3Wifi</option>
        </select>
      </div>

      <div class="msg">
        <p id="joining"></p>
      </div>

    </form>
  </body>
</html>   


Style.css:
Code: [Select]

* {
  box-sizing: border-box; /* resets box model to avoid dimensional issues*/
  margin: 0;   /* Resets user agent default values */
  padding: 0; /* Resets user agent default values */
   /* border: 1px solid rgba(0, 0, 0, 0.3); /*find all borders */  */
   position: relative;

}

h3 {
text-shadow: 0 0 5px #FF00FF, 0 0 4px #00AFFF;
}

.instr {
font-size: 12px;
font-style: italic;
font-family:Georgia;

align:left;
line-height: 1.5em;
word-spacing: 0.05em;
letter-spacing: 0.05em;
margin: 1px 10px 1px 10px ;
padding: 5px 0px 15px 0px ;
}

.ipaddr {
color: darkred;
margin: 0px 0px 0px 10px ;
}

.tbox {
margin: 2px 0px 1px 0px ;
padding: 5px 2px 5px 2px ;

width: 174px;
text-color:blue;
/*box-shadow: 2px 2px grey; */
display: inline;
postion: absolute;
}

.btn1 {
margin: 1px 10px 1px 10px ;
padding: 2px 4px 2px 2px ;
width: 151px;
/*box-shadow: 2px 2px grey; */

}

.btn2 {
align:center;
margin: 1px 0px 1px 10px ;
padding: 2px 0px 3px 3px ;
width: 40px;
/* box-shadow: 2px 2px grey; */
display: inline;
}
.btn1:hover, .btn2:hover {
background: #000FFF;

}

.radios{
margin: 10px;
padding: 1px 4px 1px 2px ;
width: 151px;
}


.msg {
color:darkblue;
font-size: 18px;
font-family: Georgia;
font-style: bold;
}



Please feel free to offer constructive criticism.  I do have one question- how do I reference the css style if the css code is loaded in the ESP8266 EEPROM?  I realize the webpage cannot find the css file because it doesn't exist; is there a work around?  I have read some 3-4year old links; I am hoping someone may have some updated info.  If not, thanks for journey to learn to hard code html!


Go Up