I need your great help on how to create a Simple Flow based UI in JS.
For my simple structure I will have 3 node groups that will connect like so :
Input -> Process -> output
For the below example I would like to just start of with a static input value of x=65 that can be connected via a connector to a process of either x+10 or x+10000 and depending on which ever is selected the out put is shown.
So its basically a function:
function input(){
x=65;
return x;
}
function processadd10(x){
x=x+10;
return x;
}
function processadd10000(x){
x=x+10000;
return x;
}
function output(x){
return "after processing the value of X is".X;
}
The part I need help with is how can I implement a flow based User interface where I can drag and connect the relevant boxes to create an output..
I would appreciate any help in building a simple UI to do the below .
You can use the jsplumb toolkit for the same.
It allows you to build application with visual connectivity fast. It has support for drag n drop, connecting two nodes, pan and zoom feature, mini map etc
Jsplumb toolkit website is at link.
Go through their demos and you will be convinced that you are looking for the same
JSPlumb seems to cost $3000 for one developer license! Here's a free, open-source library that I found that's only 10kb gzipped: https://github.com/shamansir/rpd
And Total.js seems to have a library for flow-based stuff (also free):
Related
The question is quite simple, but I seriously couldn't find any sample that would demonstrate something I'm trying to achieve, maybe it's me who is didn't get the concept of background tasks in uwp applications (or windows / windows phone 8).
I'm creating an application that is polling some data (traffic incidents) and would like to be able to notify the user about the closes ones even if he is not using the application. So I reckon I would use the background task. (I hope I get that part right).
So in the background task, which I've set to run on timer of 15 minutes, under the condition of "InternetAvailable", I fetch the data asynchronously and once it's done, I'm completing the deferral object as it's required. All works ok.
The question is, what object shall I use in order to persist the data so I could read the data once the application is opened?
I've tried the WinJS.Application.sessionState but that gets lost once the application is ready (opened).
I've tried the Windows.Storage.ApplicationData.current.localSettings but it says there is a type mismatch, apparently I'm trying to put in there the object, if String is expected (I reckon)...
So does anyone know what is the best practice here ?
Thank you
You have full acess to the WinRT API, so you can write a file (and read the same file once the application is opened):
function saveData(dataObj) {
var applicationData = Windows.Storage.ApplicationData.current;
var localFolder = applicationData.localFolder;
return localFolder.createFileAsync("dataFile.txt", Windows.Storage.CreationCollisionOption.replaceExisting).then(function (sampleFile) {
return Windows.Storage.FileIO.writeTextAsync(sampleFile, JSON.stringify(dataObj));
});
}
I am using webkit2gtk-4.0 in my Vala appication to display Google Maps. And I need to get marker coordinates on button click. How can I manage it?
I figured out how to run javascript using run_javascript(), but I can't understand hot to get the results of it.
Ordinarily you would need to use Vala's async functions to do this, I believe like so:
var result = yield webview.run_javascript(...);
This is equivalent to the C function webkit_web_view_run_javascript_finish().
Unfortunately you can't take the next step shown at that link in Vala, as you need to use the JavaScriptCore API to get at the return value and that API isn't available in Vala.
There are a couple of dirty tricks that you can resort to in this case. One such trick is setting the window title at the end of your Javascript script, and watching for notifications on the webview's title property in Vala.
However, you may be better off writing a small bit of code in C that you compile into your Vala application.
I am currently working on a calculator that will run as a packaged (desktop) chrome app. I am using the math.js library to parse math input. This is my old code:
evaluate.js:
var parser = math.parser();
function evaluate(input){
$("#output").text(parser.eval(input));
}
However, if the input is something unreasonable like 6234523412368492857483928!, the app just freezes, because it is trying to evaluate the input. I know that math.js is still in beta so eventually there might be a fix (overflow errors), but I couldn't find any other library that parses raw input the way math.js does.
To fix this, I am trying to fix this using web workers to run it asynchronously. Here is the code that I have right now:
main.js
var evaluator = new Worker('evaluate.js');
evaluator.addEventListener('message', function(e){
$("#output").text(e.data);
}, false);
function evaluate(input){
evaluator.postMessage(input);
}
evaluate.js
var parser = math.parser();
function mathEval(input){
return parser.eval(input);
}
self.addEventListener('message', function(e){
self.postMessage(mathEval(e.data));
});
However, this doesn't work when I run it. Also, I noticed that when I use web workers, it throws the error Uncaught ReferenceError: math is not defined - evaluate.js:1, but it didn't throw this error with the old code.
Questions: Why doesn't this code work to evaluate the input? Is it possible to use multiple workers to speed it up? If I wanted to implement some sort of overflow error for when the worker takes more than 2 seconds, what would be the best way to go about doing it? Finally, is there a better way to do this?
Web Workers are run in totally separate context. They don't have access to the objects from parent web page. If you want to use math.js you have to import it into the worker using importScript.
I recommend to read Using Web Workers guide, part "Importing Scripts And Libraries" which describes how to do it, and how it works in detail.
So, there is a WebRTC inside Firefox and there is a convenient class for making RTC communication possible called RTCPeerConnection which can be instantiated and used from the JavaScript app. You can find some decent example of it on [1].
And here am I with my custom transport (if you're interested - [2]) would like to use it for RTC communication. Briefly, I need to "substitute" the transport layer of WebRTC engine by my custom transport while providing the same RTCPeerConnection-like JavaScript interface for the user. And preferably, it should not look like custom build of Firefox (no patches).
So I've come up with the idea of extension, which will be written in C++ (since it need to be linked with WebRTC library and my custom transport library) and somehow will expose its interface to Javascript. And I've found XPCOM which, as I thought, can provide me this.
So I've started to fight with out-dated and sparsed info on this topic and after 3 days of struggling finally ended up with builded add-on. Unfortunately, I can't access it from Javascript, because of Javascript's "Components.classes is undefined" error. And it seems that there is no way to access it at all. Or I'm wrong on that?
Here is Javascript:
function check()
{
console.debug("checking...");
const {Cc,Ci,Cu} = require("chrome");
var rtc = Components.classes["#named-data.net/ndnrtc;1"].createInstance();
rtc = rtc.QueryInterface(Ci.ndINrtc);
console.debug("rtc: "+rtc);
}
My component is visible with XPCOM Viewer addon and the code above I can execute in the console while empty page is open in Firefox.
Given all that, I would like to ask Firefox experts regarding possible approaches which I can take in order to implement my idea.
Thank you in advance
1 https://apprtc.appspot.com/
2 http://named-data.net
Finally, I've figured out one possible solution for that and describe it in my post
Is there any way to access accelerometer data using Javascript on Android's browser? I know it supports "onorientationchange", but I'd like to get everything.
Clarification: I'm asking how to do this in a website, not a native app.
As of ICS, Android 4.0, you can use the 'devicemotion' event via a JavaScript event listener to access the accelerometer data. See the W3C documentation on how to access it - http://dev.w3.org/geo/api/spec-source-orientation.html.
Note - The W3C documentation title is named with 'device orientation', but the spec does indeed include 'devicemotion' event documentation.
Making an update to this thread.
HTML5 lets someone do this. Detecting whether or not an accelerometer is present is easy.
if (window.DeviceMotionEvent == undefined) {
//No accelerometer is present. Use buttons.
alert("no accelerometer");
}
else {
alert("accelerometer found");
window.addEventListener("devicemotion", accelerometerUpdate, true);
}
In the function that you define to receive the accelerometer events, you can look at the accelerationIncludingGravity member.
function accelerometerUpdate(e) {
var aX = event.accelerationIncludingGravity.x*1;
var aY = event.accelerationIncludingGravity.y*1;
var aZ = event.accelerationIncludingGravity.z*1;
//The following two lines are just to calculate a
// tilt. Not really needed.
xPosition = Math.atan2(aY, aZ);
yPosition = Math.atan2(aX, aZ);
}
More information can be found here: http://dev.w3.org/geo/api/spec-source-orientation.html
You could try with PhoneGap that provides API to access the accelerometer from javascript.
Here the documentation.
If you are trying to access the accelerometer from a webpage hosted on a server (verus one integrated into a native application through WebView), than the accelerometer data does not appear to be available as of now for Android. You can find a more detailed assessment here: http://www.mobilexweb.com/blog/android-froyo-html5-accelerometer-flash-player .
You might also want to check out this SO post: Detect rotation of Android phone in the browser with JavaScript
If I'm reading the docs correctly, you could set up a class (within Java/Android) that provides the accelerometer functionality you need in public functions.
Then setup a javascript interface for the webview using the addJavascriptInterface call, which makes the public functions in that class available to be called from within javascript.
Looking at this post flash.sensors.Accelerometer on Android within web browser it seems accelerometer data is available to flash. So a possible workaround (at least for devices which have flash) would be a small flash applet which grabbed the data for you.
Sounds like a hack, but still sounds better than making the whole thing in flash