MIT App Inventor 2 & Highcharts data.csv configuration with RSSI and Distance Variables

MelodyApril · November 21, 2020, 9:09pm

The indication is good but it is clearly aimed towards someone with a pretty soldid html coding experience which I don't have.

Could you please let me know what do I write in the index.htm and what would the code and the path look like when using your method?

I am asking because there isn't any documentation for this, I keep reading hundreds of pages with no success in finding the right path to make this work.

Just a glimpse on how my tabs look like for the last 3 days, I really struggle to find a way to make it work and it's so frustrating it that doesn't want to work after trying what I've read in the documentation and here.

And the irony is that if I only knew what few lines of code to add I would have this work but those few lines of code seem nowhere to be found.

Taifun · November 21, 2020, 9:12pm

see the lastest tutorial by @ABG here, which also uses the new path to the html file, which is http://localhost/yourFile.html

Taifun

MelodyApril · November 21, 2020, 9:19pm

I just want to make a data.csv file from the input the app gets from my esp32 and have it updated with that input.

I do not need and I do not want another javascript because I have all the javascript I need already offered by Highcharts.

I already did the blocks and it's not working for whatever reason and I'd like to know what is wrong in my blocks that's all and what I need to modify. If there is a way to share my entire project in here let me know, maybe someone can look at it and let me know where I messed up.

The app only needs to create a file named data.csv and update it live each second with new data that it gets as text input from my esp32 so that my highcharts graph can read the contents of the data.csv file and update live based on the values.

My values inside the csv file should look like this:

-4,2
-12,4
-7,3

First one representing the RSSI value and the second being the estimated Distance value, these are already being sent exacly like that from my esp32 to the Mit 2 App, I just need to put them inside a csv file called data.csv and have that file being updated with whatever new values it gets from the esp32 constantly.

After that I need the right filepath and code for the filepath so that I can add it into the index.htm file that highcharts use.

Example: get.data.csv from x/y location in Mit App 2, wth x being used before compiling the app into an apk and y being used ater the apk is compiled.

Taifun · November 21, 2020, 9:33pm

as already mentioned earlier I'm not sure, if the webviewer is able to access the file system to read your csv file, therefore I suggested to follow the other method...
probably someone else can confirm this...

Taifun

Taifun · November 21, 2020, 9:35pm

Taifun

Taifun · November 21, 2020, 9:38pm

probably the custom webviewer extension is able to read your csv file?

the author of that extension @vknow360 might be able to answer that question...

Taifun

MelodyApril · November 21, 2020, 9:46pm

I simply created a new text document, named it data, added those values inside and saved it with the .csv file format.

My questions are:

-Is that Chart animated?
-Can it display spline instead of line?
-Does it support zoom function via touch pitch with fingers?
-Does it support a button for saving screenshots?

Can it be made to look like this? (in terms of theme colors only) because your arrangement is perfect.

https://www.highcharts.com/demo/live-data/dark-unica

I also HATE the way it animates itself for a second then it stops, it feels like it's lagging so I want continuous animation.

If ChartMaker can do all of that out of the box like you showned via those blocks, then I see no reason to continue venturing on implementing highcharts which is a nightmare.

The only reason I wanted to use highcharts was because I don't know if ChartMaker is animated and dynamic and has themes.

I need a Dark theme and a normal theme like the one you used because my app will have a dark mode that when used will switch the chart to that look from the link I sent.

I also need to have it work on a second screen that turns into landscape mode that you get redirected to automatically after connecting to the other bluetooth device.

The chart will then be in full screen and in landscape mode in that second screen until the user goes back to the first screen, where the connect button will now turn into a "Disconnect" button.

After that I'd like to have the entire App capable of running into a "minimised mode" if the upper arrow is pressed, the upper arrow will appear after connection.

When minimised at the bottom, the app will display the distance and rssi strength in text.

Animation will look something like this (but that is for after I'm done with this):

But that is a subject for another thread

SteveJG · November 21, 2020, 10:20pm

Is that Chart animated? What does animated mean to you? The ChartMaker app can be updated every 500 ms or less with a little flicker using a Clock. No app that relies on an Internet connection can update a chart in real time without some flicker.
Can it display spline instead of line? No. If data points are close enough and many, who cares?
Does it support zoom function via touch pitch with fingers? No
Does it support a button for saving screenshots? No. There is an extension that will do that.
Can it be made to look like this? (in terms of theme colors only) because your arrangement is perfect. No. It looks like it looks.
I need a Dark theme and a normal theme like the one you used because my app will have a dark mode that when used will switch the chart to that look from the link I sent. You can have a dark theme, however the chart itself will look like it looks.
I also need to have it work on a second screen that turns into landscape mode that you get redirected to automatically after connecting to the other bluetooth device. Using existing extensions, you lose the BT connection when switching screens.
The chart will then be in full screen and in landscape mode in that second screen until the user goes back to the first screen, where the connect button will now turn into a "Disconnect" button. You probably can code that.

ChartMaker makes some parts of your app very simple to code.

This means is if you require all those features, you need to use Highcharts and learn to code html in order to code your perfect app.

At the present, you cannot apparently get even a example app to work with Highcharts. Dream about what you want but the reality is you need to get the basic app to work. Isn't that true? Create an example showing how you are trying to use Highcharts and enclose a data.csv file and aia. Someone might experiment and provide advice.

Can you demonstrate the the data.csv you capture is a csv? see Live Development, Testing, and Debugging Tools

You probably do NOT need to save a csv file. You can create a List or csv from your data flow and use that without using the File component to save it since you are creating the chart live.

You asked about sharing your code with the forum. Do that by posting an image of all your blocks or posting an aia file. Someone with a wsp32 might be able to test it.

MelodyApril · November 21, 2020, 10:26pm

I was able to get both examples working inside my app for both Highcharts and Chart.js my dear.

Chart.js example running inside my app:

Highcharts example running inside my app:

I decided to use Highcharts because of their accesibility in terms of source files. The problem is the example is not using a local data.csv. It's using a math functions that generates random values. The other examples they provide are using csv either from inside the javascript or html either from a url.

Their documentation does not provide any examples using a local dynamic data.csv file.
They only mention that it can do that but not showing how to exactly.

My app does not require an internet connection, neither the chart itself., that is the reason I want to use a local dynamic data.csv so that it works offline as it should.
I see no purpose in running such an app online other than comparing stored data with others or using Google maps api to show the locations of the devices on map, which would be pointless considering the distance the devices operate at is aprx. under 20 meters away from each other due to Bluetooth's low signal range.

I don't plan to implement any of these possible online features at this time simply because I don't need them, neither do I need any user database or accounts storage at this very moment.

SteveJG · November 21, 2020, 10:52pm

but not with a dataset generated by your esp32. So learn to code html and access it with a WebViewer.

TIMAI2 · November 21, 2020, 11:14pm

You can probably use the webviewstring to feed the data into your script in the html file.

MelodyApril · November 22, 2020, 12:01am

I managed to modify the code a bit but I get this error when pressing the button to show the generated CSV text:

SteveJG · November 22, 2020, 12:16am

try list from csv table

MelodyApril · November 22, 2020, 12:16am

Won't you look at this, I've managed to make something happen here, I think it is starting to work.

I have no idea if the list is generated right but it looks like it's working!

I got my code like this now :

MelodyApril · November 22, 2020, 12:24am

I have a problem, currently it only gets the values when I press a button, I tried automating it by moving the call function of reading from the csv when pressing a button to make it by default after the appending is done

and it gives the following error now:

Screenshot_55

Also, the returned values from the csv have no "," delimiter in-between them.

They are supposed to look like this:

xx,xx
-xx,xx
xx,xx

not like this:

(xx xx)
(-xx xx) 
(-xx xx)

etc

SteveJG · November 22, 2020, 12:31am

A partial solution may be to add the text output to a new variable.... totalData that is a List using the
add items to list totalData
with the item socket set to text

You may have to use a Clock to periodically send totalData to your Label or Chart routine to read the totalData List.

MelodyApril · November 22, 2020, 1:09am

I do not know what happened but I tried switching back to pressing the button in order to make it work again and now it returns the same Runtime Error, also it's like the esp32 doesn't send data anymore.

Edit: well, I had to restart my esp32.

I think it somehow bugged itself after so many connects without disconnects to it (since I don't have a disconnect button at the moment).

MelodyApril · November 22, 2020, 1:24am

Okay so I managed to solve it by simply adding a clock and calling the read function with it and
it works but I still ain't sure if this format is good, I wonder why are there these "( )" on each line and why isn't a comma in between the listed values.

Also there is a strange symbol "["] above the button for the list picker. I wonder what that means.

Also, the values aren't getting updated while I am in the list picker. For some reason, they only update once I go back and click on the button again.

vknow360 · November 22, 2020, 1:32am

Yes, it can read the files only when:

FileAccess property is enabled
App has READ permission

ABG · November 22, 2020, 2:17am

Assigning a table (list of lists) into a .Elements list forces each row into a text value for an Element. The ( ) or is AI2's way of telling you that it was forced to squeeze a list into a text value.

You can avoid this by taking the original CSV table text format datum,datum\ndatum,datum\ndatum,datum through a split at \n block, producing a one dimensional list of text items "datum,datum", "datum,datum", "datum,datum" suitable for assignment into a .Elements list.