ESP8266 IOT Webserver with data and graph
Moderator: Benj
-
- Valued Contributor
- Posts: 654
- Joined: Fri Aug 19, 2016 2:09 pm
- Location: switzerland
- Has thanked: 182 times
- Been thanked: 179 times
- Contact:
ESP8266 IOT Webserver with data and graph
Hi
I use the component ESP8266 and it's working very nice
I insert few line in the HTML index1 and the Internet Explorer shows me a graph. I used simulated data .
But how can I set the ouput value in the graph? I think I have to write some %% in the table?
And how can I to a autorefresh every 2 seconds?
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(20,15);
ctx.lineTo(30,20);
ctx.lineTo(40,30);
ctx.lineTo(50,15);
ctx.lineTo(60,14);
ctx.lineTo(70,10);
ctx.lineTo(80,12);
ctx.lineTo(90,95);
ctx.lineTo(100,95);
ctx.lineTo(100,95);
ctx.lineTo(120,80);
ctx.stroke();
</script>
I use the component ESP8266 and it's working very nice
I insert few line in the HTML index1 and the Internet Explorer shows me a graph. I used simulated data .
But how can I set the ouput value in the graph? I think I have to write some %% in the table?
And how can I to a autorefresh every 2 seconds?
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(20,15);
ctx.lineTo(30,20);
ctx.lineTo(40,30);
ctx.lineTo(50,15);
ctx.lineTo(60,14);
ctx.lineTo(70,10);
ctx.lineTo(80,12);
ctx.lineTo(90,95);
ctx.lineTo(100,95);
ctx.lineTo(100,95);
ctx.lineTo(120,80);
ctx.stroke();
</script>
- LeighM
- Matrix Staff
- Posts: 2178
- Joined: Tue Jan 17, 2012 10:07 am
- Has thanked: 481 times
- Been thanked: 699 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Hi,
Auto refresh can be done in script ...
or
For the graph data you could use an array.
So in Flowcode, use SetOutValue(0,"[16, 23, 46]")
Then in your script...
I think the out string might be limited to 20 characters, if so, you could concatenate a few %0%1%2 etc
Auto refresh can be done in script ...
Code: Select all
function reFresh()
{
location.reload(true)
}
window.setInterval("reFresh()",2000);
Code: Select all
function reFresh()
{
location.href='index.htm'
}
window.setInterval('reFresh()',2000);
So in Flowcode, use SetOutValue(0,"[16, 23, 46]")
Then in your script...
Code: Select all
var points = %0;
ctx.moveTo(10, points[0]);
ctx.moveTo(20, points[1]);
-
- Valued Contributor
- Posts: 654
- Joined: Fri Aug 19, 2016 2:09 pm
- Location: switzerland
- Has thanked: 182 times
- Been thanked: 179 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Hi LeighM
Perfect! It's working.
And you're right, it's limited to 20.
But I need about 400. I could still make 256 with a compromise. How can I get more infos?
Perfect! It's working.
And you're right, it's limited to 20.
But I need about 400. I could still make 256 with a compromise. How can I get more infos?
- LeighM
- Matrix Staff
- Posts: 2178
- Joined: Tue Jan 17, 2012 10:07 am
- Has thanked: 481 times
- Been thanked: 699 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
If you are using the WLAN ESP8266 component, then with the latest version you can increase the Outgoing string length,
have a look in the component properties, under Substitutions->Outgoing
have a look in the component properties, under Substitutions->Outgoing
-
- Valued Contributor
- Posts: 654
- Joined: Fri Aug 19, 2016 2:09 pm
- Location: switzerland
- Has thanked: 182 times
- Been thanked: 179 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Hi LeighM
OK very good. I saw I can build 12 outgoing string. It looks as if any length is possible.
I have increased it to 1024. I'll test whether that goes.
I will still somehow convert an array into a string list. I guess FC has unfortunately no commands for it.
OK very good. I saw I can build 12 outgoing string. It looks as if any length is possible.
I have increased it to 1024. I'll test whether that goes.
I will still somehow convert an array into a string list. I guess FC has unfortunately no commands for it.
-
- Valued Contributor
- Posts: 654
- Joined: Fri Aug 19, 2016 2:09 pm
- Location: switzerland
- Has thanked: 182 times
- Been thanked: 179 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Hi LeighM
Two small Things
1.)
How does FC switch with the command getintValue ? Why data is ones =1 and ones =0
I think it's in this line, but I need a little help to understand...
<body class='%2'>Output is %2<p><a href='process.htm?0=%1'>Switch %3</a></body>
2.)
Just an Info, It's working with a lot of data. I divided the data in String with 256 Byte length.
******************************************
var pointsa= %7;
var pointsb= %8;
for (var i = 0; i < 60; i++) {
ctx.lineTo(i,pointsa);
}
for (var i = 0; i < 60; i++) {
ctx.lineTo(60+i,pointsb);
}
*******************************************************
Two small Things
1.)
How does FC switch with the command getintValue ? Why data is ones =1 and ones =0
I think it's in this line, but I need a little help to understand...
<body class='%2'>Output is %2<p><a href='process.htm?0=%1'>Switch %3</a></body>
2.)
Just an Info, It's working with a lot of data. I divided the data in String with 256 Byte length.
******************************************
var pointsa= %7;
var pointsb= %8;
for (var i = 0; i < 60; i++) {
ctx.lineTo(i,pointsa);
}
for (var i = 0; i < 60; i++) {
ctx.lineTo(60+i,pointsb);
}
*******************************************************
- LeighM
- Matrix Staff
- Posts: 2178
- Joined: Tue Jan 17, 2012 10:07 am
- Has thanked: 481 times
- Been thanked: 699 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Hi,
Thanks for the update on progress
All the %x are substituted by the Out Values.
The In Values are read from the GET request.
e.g. process.htm?0=myvalue
In Value 0 will have myvalue
So the
process.htm?0=%1
Is just sending back data to the server,
A bit of REST, to use a currently cool word
Thanks for the update on progress
All the %x are substituted by the Out Values.
The In Values are read from the GET request.
e.g. process.htm?0=myvalue
In Value 0 will have myvalue
So the
process.htm?0=%1
Is just sending back data to the server,
A bit of REST, to use a currently cool word
-
- Valued Contributor
- Posts: 654
- Joined: Fri Aug 19, 2016 2:09 pm
- Location: switzerland
- Has thanked: 182 times
- Been thanked: 179 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Hi LeighM
Thank You for all the infos. I adjusted the code a little and it's nice working.
Then later, I created 2 button and I tried code to insert by the onclick" "
the "href"
but nothing is working. Do You have an Idea?
***************************************************************
<body class='%2'>Output is %2</body>
<body <p><a href='process.htm?0=0'>Switch Stop</a></body>
<body <p><a href='process.htm?0=1'>Switch REC</a></body>
<button onclick=" "> STOP </button>
<button onclick=" "> RECORD </button>
*****************************************************************
Thank You for all the infos. I adjusted the code a little and it's nice working.
Then later, I created 2 button and I tried code to insert by the onclick" "
the "href"
but nothing is working. Do You have an Idea?
***************************************************************
<body class='%2'>Output is %2</body>
<body <p><a href='process.htm?0=0'>Switch Stop</a></body>
<body <p><a href='process.htm?0=1'>Switch REC</a></body>
<button onclick=" "> STOP </button>
<button onclick=" "> RECORD </button>
*****************************************************************
- LeighM
- Matrix Staff
- Posts: 2178
- Joined: Tue Jan 17, 2012 10:07 am
- Has thanked: 481 times
- Been thanked: 699 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Hi,
Probably best if you do some reading about html, w3schools is good.
There is quite a lot wrong with your code, which I don't currently have time to comment on, sorry,
I'll be back in the office on Monday.
Probably best if you do some reading about html, w3schools is good.
There is quite a lot wrong with your code, which I don't currently have time to comment on, sorry,
I'll be back in the office on Monday.
-
- Valued Contributor
- Posts: 654
- Joined: Fri Aug 19, 2016 2:09 pm
- Location: switzerland
- Has thanked: 182 times
- Been thanked: 179 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Hi LeighM
This really is a good side these w3schools.
I would like to read this page on the weekend and hope I find a solution.
Also this possibility to integrate an HTML page into one component is a very good idea of you.
Maybe I need to describe a bit better.
I have connected a STM32F469 disco board and an ESP8266 board
This works quite well Even if is to much wrong in my code....It's working in a win7 pc, win10 pc ,win10 mobile (nokia), iphone, surface tablet, android tablet.
It's shows me simulated data in the graph and the graph refresh every 2 seconds.
If I press the violet link "switch STOP" or "switch REC", the explorer is switching and the STM board switch to.
But the another button looks much nice, but they have no function at the moment.I have not found a solution yet to use this button to send back a 0 or 1 in the "onclick=" " of the button ...But just that would be very handy for further functions
result is : I also have a different variant for the switch.This two switch are working
But I have to make this text window...
********************************************
</form>
<form action="process.htm">
Send_Back:<br>
<input type="text" name="0" value="0">
<br><br>
<input type="submit" value="STOP">
</form>
<form action="process.htm">
Send_Back:<br>
<input type="text" name="0" value="1">
<br><br>
<input type="submit" value="RECORD">
</form>
****************************************************************
You're certainly right, HTML is "not yet" my language.But maybe soon....
This really is a good side these w3schools.
I would like to read this page on the weekend and hope I find a solution.
Also this possibility to integrate an HTML page into one component is a very good idea of you.
Maybe I need to describe a bit better.
I have connected a STM32F469 disco board and an ESP8266 board
This works quite well Even if is to much wrong in my code....It's working in a win7 pc, win10 pc ,win10 mobile (nokia), iphone, surface tablet, android tablet.
It's shows me simulated data in the graph and the graph refresh every 2 seconds.
If I press the violet link "switch STOP" or "switch REC", the explorer is switching and the STM board switch to.
But the another button looks much nice, but they have no function at the moment.I have not found a solution yet to use this button to send back a 0 or 1 in the "onclick=" " of the button ...But just that would be very handy for further functions
result is : I also have a different variant for the switch.This two switch are working
But I have to make this text window...
********************************************
</form>
<form action="process.htm">
Send_Back:<br>
<input type="text" name="0" value="0">
<br><br>
<input type="submit" value="STOP">
</form>
<form action="process.htm">
Send_Back:<br>
<input type="text" name="0" value="1">
<br><br>
<input type="submit" value="RECORD">
</form>
****************************************************************
You're certainly right, HTML is "not yet" my language.But maybe soon....
- LeighM
- Matrix Staff
- Posts: 2178
- Joined: Tue Jan 17, 2012 10:07 am
- Has thanked: 481 times
- Been thanked: 699 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Very good, looking good.
Glad you found the <form> tag information
Sorry, what I meant was that I was going to find it difficult to explain all the changes you needed as I didn't have the time and also too much to type in on my tablet Much easier from keyboard and mouse
Looks like you have made very good progress
Glad you found the <form> tag information
Sorry, what I meant was that I was going to find it difficult to explain all the changes you needed as I didn't have the time and also too much to type in on my tablet Much easier from keyboard and mouse
Looks like you have made very good progress
-
- Valued Contributor
- Posts: 654
- Joined: Fri Aug 19, 2016 2:09 pm
- Location: switzerland
- Has thanked: 182 times
- Been thanked: 179 times
- Contact:
Re: ESP8266 IOT Webserver with data and graph
Hi Leigh
The ESP8266 is working now in an another (PIC)board.
I can set the SSID.. No problem
A littel problem is the IP adress.
The adress is for the html page is always 192.168.4.1
I have no idea where I can change this address
The ESP8266 is working now in an another (PIC)board.
I can set the SSID.. No problem
A littel problem is the IP adress.
The adress is for the html page is always 192.168.4.1
I have no idea where I can change this address