MIT APP Inventor 2 Esp32 App with Dynamic Distance & RSSI Highcharts Graph using Live Data Implementation Help

[SteveJG]

What have you tried?

To calculate distance between a transmitter and a receiver, normally you need the coordinates of each. If you expect the Android to calculate the distance, you may need one of these two examples to determine distance between two geocoordinates using a point to point distance calculation. They depend on having access to the location coordinates.

• use the Map component and a Marker you can use these two Blocks to calculate
  
  the distance between them in meters. Convert to whatever units you require.

• use a Great Circle distance algorithm

The Blocks with 6371 provides a result in metric units, the Blocks using 3959 results in English units.

Your first step to plotting RSSI vs. Distance might be to create a Table of RSSI vs distance from the signal source; possibly a list of pairs or a csv to use with your graph, and use it to create a static graph display. There are also ways to graph in real time using various techniques. While you learn to construct a basic graph, ignore filtering, get the basic app to work. There are complex ways to possibly 'filter' your data you can 'add' later. The filter would probably something like Help on mathematics of filters - #4 by ABG

Here are some resources Search results for 'graph' - MIT App Inventor Community

@MelodyApril

I guess the accuray will be off by aprox. 2 meters, based on my tests.

I guess this depends on how you test. If you use the LocationSensor and the device built in GPS receiver, the best you can ever achieve is 2 meter resolution and more often then not, your Accuracy will on the order of 10 meters (dependent on the number of satellite fixes that are obtained and the location of those satellites in the constellation. Read about 'Accuracy' in Using the Location Sensor

[MelodyApril]

Hmm, thank you very much my dear but what about the graphical side of things? What do I need to use to create that graph and how do I animate it for MIT 2?

I can make all the required parts of it in Photoshop but I ain't sure if that's how it's done.

How exacly do you create the visuals for the graph and animate them?

I am confused a bit on the visual aspect of the problem, is the graph made entireley out of code or some kind of xml file or is it made in parts in software like gimp/photoshop etc. ?

[SteveJG]

See the resources in the above link.
Graphs can be made entirely out of code using the Canvas or using javascript or an extension. There are examples in the resources. See this too Charts and Graphs

• Plotly JS file to display real time data - Giriraj Pawar

• ChartMaker Extension - Kager & Manning

• ChartMaker extension decoded - TimAI2

• Scrolling Graph of potentiometer via BlueTooth - kio4.com

• Scrolling graph - Martyn_HK

• Donut/Pie/Radar graphs - Alejo Arué Ocampo

• Plotting sin, cos, tan - Scott Ferguson

• Line Graphs using Blocks - Ryan Cheung

• Chart..js examples / Spanish / Juan Antonio

• How to generate an animated Pie Chart using the Chart.js library

• Gauge Charts

• Torus charts using Draw Arc block - TimAI2

[MelodyApril]

Does anyone having any experience with Highcharts?
Can I take the Bluetooth RSSI values sent by my esp32 to the app and have the app to output a .js file that my highcharts constantly reads and updates the chart?

If then how to?

Is there an easier alternative to achieve the same outcome?

[MelodyApril]

This is the graph that I currently use which is a default graph with no input added because I don't know how to make it do what I've said above, but it looks so cool and much more informative than simple lines of text with the signal values.

So please, if anyone can assist me I am waiting for some help because I've read alot of resources and I still don't understand what I am supposed to do to have my graph working.

[SteveJG]

@MelodyApril

the graph that I currently use which is a default graph with no input added

That means the graph has 'fake' data I guess.

@MelodyApril

it looks so cool and much more informative

Perhaps. You could make a simple Bar graph that shows RSSI strength versus distance.

What you do depends on what your data stream from your esp32 looks like and what you are doing with it and how you calculate distance. If you have all that solvedconsider using a ChartMaker solution using the free extension at GitHub - MillsCS215AppInventorProj/chartmaker: An extension for MIT App Inventor that adds graphing capability (for pie, bar, and line graphs) through Google Charts.. I don't have any experience with HighCharts.

To graph your data with ChartMaker, the data needs to be in the form of a List of Lists . The the first value is distance and the second is the RSSI value (for example 432 meters and an RSSI of 80).

["432,80", "620,89", "962,77", "1395,4", "1825,78", "2282,79", "2871,30", "3427,72", "4009,15", "4558,9", "5167,51", "5771,18", "6412,22"]

Do you have your data like that? If so, you can make a graph something like

You should be able to update the Chart with a Button or Clock event handler, depending on how you capture your data. This discussion might help you figure out what you want to do Chart Maker help please - #6 by Sirous_Nekooei

[MelodyApril]

My dear,

At the moment my Esp32 Sends this following Data once every second to my App:

Through the following Label:

Through the following blocks:

I have no distance intel sent by my Esp32.

My first question is, for the start, how do I export this data that I currently have right now (the rssi value to a list of lists like you said)

And also, let me know if I need to modify my esp to only give number values without the text "RSSI:" and "vibration motor on/off" or can I leave those in there?

I am asking that because I want to see if the chart that I implemented will respond and update accordingly to the RSSI Data received.

Thank you!

[MelodyApril]

Update: I am done with the basic Highcharts Implementation inside my App, it works and it's setup to display random data for the moment.

Now I need to make my App output the RSSI values for now in a format that the Chart can read.

[MelodyApril]

I do not use any GPS data my dear. Do those examples work with the RSSI signal value strength information that the app currently receives only?

Also I can't use the gps data hence the esp32 doesn't have a gps module and from what I know it is possible to approximate point to point precision through Bluetooth Signal Intel only.

If so, is there is anything else I need to setup in Arduino prior to using the example blocks please let me know.

[MelodyApril]

Nevermind, sadly I just realised those examples use GPS coordinates data in order to calculate the aproximate location, which I don't use so I don't think that I can make use of the examples.

Oof.

[MelodyApril]

Any idea how to serialise the RSSI values so that my chart can use them?

How does this work? Do I serialise them to a text document through blocks or can I input them directly into the index.htm somehow?

I am following the documentation here but I don't get how to adapt it to my needs:

Series | Highcharts

[MelodyApril]

Also I don't get it, based on their examples, it seems like the series are written inside the highcharts.js file, not in the index.htm.

Where exacly do I need to write the series for my project?

See: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/chart/reflow-true/

And also:

https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/dynamic-update

It seems that all their example use data input from the .js file series data set.

I am supposed to have it read whatever rssi data my app is sending to the chart and have it updating accordingly so I don't know how to make the app output those values into the series data set constantly so that the chart can read it.

[MelodyApril]

Update:

I've made some progress in terms of workflow, i've included the data.js module in order to be able to work with live data with the following supporting formats:

data.csv, data.rows, data.columns or data.googleSpreadsheetKey

Now the question is, which one to use from these options..

[MelodyApril]

Update:

Made a huge progress managing to find a way to read data from a data.csv file from a url that I can specify, meaning that there is a huge chance I can program the app to constantly update the .csv file with whatever I need to.

This means that I can use something like "list to csv table through the blocks" via MIT 2

[SteveJG]

OK, have fun.

Until you learn to download the RSSI data stream as a List or a csv, everything you do might be for naught.

BLE ESP32. Bluetooth. Send. Receive. Arduino IDE might help you. There are several examples shown; use one of the examples to generate a List or a csv.

To create any chart you need two paired values. In your case you need an RSSI value (which appears your Esp32 provides) AND a distance value. You say you cannot use gps values. You expect to generate (calculate) corresponding distance values. The science is a bit uncertain. " Can Bluetooth work out distance? Using bluetooth for localization is a very well known research field (ref.). The short answer is: you can 't. ... Using bluetooth you can at best obtain a distance resolution of few meters," from cocoa touch - How to measure distance between two iphone devices using bluetooth? - Stack Overflow. Similar articles show other ways to derive a distance based on the strength of the bluetooth signal at the receiver. See
https://community.estimote.com/hc/en-us/articles/201636913-What-are-Broadcasting-Power-RSSI-and-other-characteristics-of-a-beacon-s-signal-#:~:text=At%20maximum%20Broadcasting%20Power%20(%2B,Measured%20Power%20(see%20below).

https://medium.com/personaldata-io/inferring-distance-from-bluetooth-signal-strength-a-deep-dive-fe7badc2bb6d

How to Calculate Distance from the RSSI value of the BLE Beacon

Take you pick of method to capture the received signal level and calculate a distance. Include the 'distance' you calculate in a List of pairs along with your corresponding RSSI. How you include the derived 'distance' in the List of pairs is accomplished exactly the same way one would input a gps derived distance. Your challenge will be to create a List of pairs before you create your graph and actually do the complex distance determinations the above articles allude to.

@MelodyApril

I don't know how to make the app output those values into the series data set constantly so that the chart can read it.

Create a List of pairs on your Android of the RSSI/distance data.

Someone might be able to help you with Highcharts after you can download the RSSI values and calculate the 'distance'. They need to know how your data List is constructed and someone then might be able to help.

[MelodyApril]

My dear Steve,

Is this what you meant by "two paired values" ?

Because if so, I may've had solved this problem as well. The first value is the strength of the RSSI signal and the second value is the Distance.

[MelodyApril]

Now, I'd like to know how to make the text also go into the data.csv block.

The big blocks that I have output the text into my list device, I'd like to do the same for the file device (in the red rectangle)

I did it like this but not sure if this is how it's supposed to be done like:

[MelodyApril]

Update:

I am met with an error at testing the code:

The rest of the app has no problems, it also gets the paired values just fine:

[MelodyApril]

I think I managed to fix the error by removing and adding some new blocks

But the graph is still empty.. did I messed up with the data.csv link formatting ?

I tried formating the code like they did show in the documentation, here:

Live data | Highcharts

Data module | Highcharts

and here:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/data/csv/

[SteveJG]

@MelodyApril

Is this what you meant by " two paired values " ?

Yes. Congratulations. Now instead of printing this to a Label, convert it to a List and you can use it with ChartMaker. Sorry, I have no idea how to use it with HighCharts.