Getting Values out of Websocket Functions - javascript

I am working on a project which needs to get communication from C++ code to JavaScript on a webserver. Currently, I have data sending properly and it's being received but the issue is that I cant use the data outside of the inner(onmessage) function. This still works fine to overwrite elements of the webpage, but the charts I'm trying to build cant get the live data. If I put the code for the chart inside the inner function the entire program freezes and I can't get the variable out of the function for me to use it in the parent either. Right now, I just want to get the data out of the inner function so I can use it. So, is there any way for me to pull that data out of the inner function and use it in the parent function?
Here is my code:
{
var x;
var ws = new WebSocket('ws://localhost:10011/');
ws.onmessage = function(event)
{
x = event.data;
var testing = document.getElementById('InnerFunctionOutput');
testing.innerHTML = "Run Time: " + x;
}
var testing = document.getElementById('ParentFunctionOutput');
testing.innerHTML = "Run Time: " + x;
}
When I run this code the output from the inner function is the constant stream of data and the output from the parent is a constant 1. If anyone could help me find a solution, it would be greatly appreciated.
One alternative solution is to put the functions for the charts inside the websocket function. That way, I wouldn't have to get data out of the function. however, this solution has its own set of problems. I will put a link below to a thread where I ask about this alternate solution if you are interested in that part.
Plotly and Websockets
Any help would be greatly appreciated.
Thanks,
Luke

I found a solution to the problem. To get the data out of the websocket function I overwrote a text element on the page and simply made that element invisible. After that, just read the text element in order to get it into the rest of the code. However, there could be a better way of doing this so please let me knw if there is.
Also, there is one issue I ran into with this solution. When I originally tried this with normal formatting document.getElementById('some id').innerHTML = some data; it didn't work. But when with adding "window" to the beginning window.document.getElementById('some id').innerHTML = some data; it just worked.

Related

Display message Google Sheets from Apps Script

I want to display a message on a google sheet. But I don't get it, and, after research here, in documentation, I don't get the answer.
I think that the problem is in "activate" the spreadsheet, where i need to display.
var SEGUIMIENTO = SpreadsheetApp.openById("MyTestediD");
var INF = SEGUIMIENTO.getSheetByName("NameOfSheet");
function TestMessage() {
INF.activate();
Browser.msgBox("Hello")
}
When i run.. nothing happen
I need the definition of Spreadsheet outside the function because I'm working in 2 Spreadsheet's by ID in more that one function.
i only need the correction in my code for display a simple message in the spreadsheet.
PD. i really cant find a simple example of that,
Update
This code it's part of a macro recorder of a Spreadsheet, the same "SpreadsheetApp.openById("MyTestediD");"
I don't know why you try to 'activate' a sheet. If you want display a message I assume you want to do it in the user's current sheet, so:
SpreadsheetApp.getUi().alert('Confirmation received.');
From https://developers.google.com/apps-script/reference/base/browser
The methods in this class are only available for use in the context of a Google Spreadsheet. Please use G Suite dialogs instead.
As you can see, Google is nicely asking you to use G Suite dialogs instead of Class Browser, so be nice too and follow their request.
When you say you want a message in a spreeadsheet, do you mean an alert message? If so, the answer is to use the code SpreadsheetApp.getUi().alert('Hello.'); when the TestMessage function is executed
var SEGUIMIENTO = SpreadsheetApp.openById("My TestediD");
var INF = SEGUIMIENTO.getSheetByName("NameOfSheet");
function TestMessage() {
INF.activate();
SpreadsheetApp.getUi().alert('Hello.');
}

Alert Javascript Variable outside function after reading csv

i´m reading a text-file with jquery/ajax and convert it via the jquery/csv plugin.
This is my code:
var gotData;
function read() {
$.get('text.txt', function(data) {
var options = {"separator" : ";"};
gotData = $.csv.toArrays(data, options);
alert(gotData); //1
}, 'text');
alert(gotData); //2
}
Why is the data shown in alert 1 but not in alert 2? As I know the definition of the variable is global and should be shown, am I right?
This leads to a even bigger problem because I want to access that data from my html-page (the .js is another file). So basically i want to get the variable which holds the data from my txt-file outside this function.
Hope anyone can help. For further information please comment.
Thank you in Advance.
Edit: The market duplicate doesn´t help me with my next problem, that I want to use that data in another .html-file to show it on my website.

using jint to call javascript using d3 from c#

I am currently working on a project where we need to generate some SVG based on some input data. Currently all this SVG generation is implemented in javascript using the d3 library. Note that my goal is to be able to reuse this logic and not implement it all over.
My problem is that I would like to be able to call this javascript from C#.
I have tried using PhantomJS and I am able to generate the SVG but I am not satisfied because
Each time I want to call the javascript it starts a new process and I
have noticed that it uses a lot of memory (In my case I saw 100 mb
which is too much in my case)
It seems a little unstable. I have
had some cases where the process just hangs
Development (On the javascript side) is pretty frustrating because it is hard to debug
Because I was not satisfied with PhantomJS I have also tried using jint and this seems really nice to work with. Unfortunately I haven't quite managed to get a working example up and running. Currently I am using AngleSharp to supply the DOM so that D3 has a place to write its data. This gives me the following example:
static void TestJint()
{
//We require a custom configuration with JavaScript and CSS
var config = Configuration.Default.WithJavaScript().WithCss();
//Let's create a new parser using this configuration
var parser = new HtmlParser(config);
//This is our sample source, we will do some DOM manipulation
var source = "<!doctype html> <html><head></head> <body> </body></html>";
var document = parser.Parse(source);
var jintEngine = new Engine();
jintEngine.SetValue("document", document.Implementation);
jintEngine = jintEngine.Execute(File.ReadAllText("d3.min.js"));
jintEngine = jintEngine.Execute("function testFunc() { d3.select(\"body\").append(\"span\").text(\"Hello, world!\"); return 42;}");
var res = jintEngine.Invoke("testFunc").ToObject();
}
The problem is that the line var res = jintEngine.Invoke("testFunc").ToObject(); throws an exception.
Exception screenshot
If I try replacing the line
jintEngine = jintEngine.Execute("function testFunc() { d3.select(\"body\").append(\"span\").text(\"Hello, world!\"); return 42;}");
with
jintEngine = jintEngine.Execute("function testFunc() { d3.select(\"body\"); return 42;}");
then the function is able to run without any exceptions. By playing a little with the logic I have concluded that it is the .append(\"span\") that causes the exception.
I am a little stuck so I was hoping that someone might have an idea that could point me in the right direction.
I have figured out the problems.
1) The document returned by parser.Parse(source); does not implement the function createElementNS which d3 uses. I solved this by using a wrapper that delegates the call.
2) d3 uses the variable ownerDocument which I havn't set. So I also had to add the following
jintEngine.SetValue("ownerDocument", new MyDocumentWrapper(document));
Note that this doesn't make the entire d3 library work. I have also noticed some problems with d3.geopath() but with these fixes I am able to execute my initial example.

How to retrieve data from spreadsheet for chart google script. (Using HTML Service)

Hey good morning/afternoon/evening depending where you guys are at!
Just have a quick question for you guys. I've been stuck on this for a bit, and I've tried looking around, but i can't seem to find the answer for this specific issue.
So I'm in the process of trying to create a column chart using google scripts with the html service (since they UIApp service is depreciated now). I'm trying to retrieve the data from a spreadsheet have already created. But when i use this code, the page comes up blank as if there is some error in the background.
var sheet = SpreadsheetApp.openById("1gdRB6FFV426bAj95C0xJlqSucnnX0Z5ATVQdC2");
So here are some specifics:
1) I put this line in my Index.html file within a function I have called
drawChart();
2) I do have them wrapped in this tag.
<script type="text/javascript">
3) I know that this line of code is the cause of the issue because as soon as i comment it out my temp graph with temp data pops up, and page runs fine. But as soon as uncommented it blanks out the whole page.
Any ideas?
I'm wondering if I have to actually place this line of code within the "Code.gs" file, then some how transfer the data from Code.gs to my Index.html file. If that's the case can anyone point me in the direction to where I can follow the direction on how to do it?
Thank you guys in advance.
Sincerely,
Sicariuxs
You must use a withSuccessHandler(functionNameToReceiveData).
<script>
function getData() {
google.script.run
.withSuccessHandler(functionNameToReceiveData)
getData();
};
function functionNameToReceiveData(theDateReceivedHere) {
Logger.log('theDateReceivedHere: ' + theDateReceivedHere;
};
</script>
You can't use: var data = google.script.run.getData(); You must use a withSuccessHandler(functionNameToReceiveData).
#Sandy Good
Hey man I want to thank you for all your help. you're answer was actually great. But there was an additional mistake on top of the ones that you corrected me on. In my actual spreadsheet I had it as a "Date" value. But the format was not matching the data type in my "dataTable". It's working now though. I made all the changes you told me, but in addition I changed the value type from "Date" to "Text". Then in my for loop I wrote a "new Date()" function using the text as the format, and that worked here is some screenshots to show my end result.
link
link

Assigning json to variable

Ok, some explanation. Even though I don't think it has anything to do with the problem itself. I have a small django project that maps some data using leaflet. On a mouseover some ajax functionality is added, using the dajax(which is a "lightweight library to implement AJAX inside django projects") framework. The call itself looks like this:
dajax.add_data(simplejson.dumps(series), 'my_test_flot')
My js function receives json data which looks like this (using alert)
[{"color": "#dddd00",
"data": [[-0.5, -20.5]],
"label": "Tweede Zandlaag"}]
The object has more data to it but the problem is not with the object. When I copy/paste the data directly into the function var series = [] the behaviour is as aspected. As aspected means, the graph I'm drawing with flot is actually being drawn. Otherwise the graph remains empty.
function my_test_flot(dat) {
function MyFormatter(v, xaxis) {
return " ";
}
$(function () {
alert(dat)
var series = dat; // here lies the problem, but why?
...
Can anyone help?
Ok, problem solved. Apparently you have to use JSON.parse(). How it's done is explained here.
This does not copy the data - it just makes series a reference to the same object as dat. Therefore, if you later modify the object, all users retaining references to it see the changes. This is probably what causes your trouble.

Categories