ESP8266 IOT Webserver with data and graph

For Flowcode users to discuss projects, flowcharts, and any other issues related to Flowcode 7.

Moderator: Benj

Post Reply
stefan.erni
Valued Contributor
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

Post by stefan.erni »

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>

ie_test.PNG
(44.78 KiB) Downloaded 4449 times

User avatar
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

Post by LeighM »

Hi,
Auto refresh can be done in script ...

Code: Select all

function reFresh()
{
  location.reload(true)
}
window.setInterval("reFresh()",2000);
or

Code: Select all

function reFresh()
{
  location.href='index.htm'
}
window.setInterval('reFresh()',2000);
For the graph data you could use an array.
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]);
I think the out string might be limited to 20 characters, if so, you could concatenate a few %0%1%2 etc

stefan.erni
Valued Contributor
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

Post by stefan.erni »

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?

User avatar
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

Post by LeighM »

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

stefan.erni
Valued Contributor
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

Post by stefan.erni »

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.

stefan.erni
Valued Contributor
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

Post by stefan.erni »

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);
}
*******************************************************

User avatar
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

Post by LeighM »

Hi,
Thanks for the update on progress 8)
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 :wink:

stefan.erni
Valued Contributor
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

Post by stefan.erni »

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>
*****************************************************************

User avatar
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

Post by LeighM »

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.

stefan.erni
Valued Contributor
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

Post by stefan.erni »

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
STM_wifi.PNG
(746.32 KiB) Downloaded 4349 times
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 :
screen12.PNG
(357.53 KiB) Downloaded 4349 times
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>
****************************************************************
sendback.PNG
(30.67 KiB) Downloaded 4349 times
You're certainly right, HTML is "not yet" my language.But maybe soon....

User avatar
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

Post by LeighM »

Very good, looking good.
Glad you found the <form> tag information :D
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 :D
Looks like you have made very good progress

stefan.erni
Valued Contributor
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

Post by stefan.erni »

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

Post Reply