Technology behind these drawing apps [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Can anyone please tell me what could be the technology behind http://realtimeboard.com/ and http://draw.io/? I am interested in learning that and develop such a software for as my project?

I'm pretty sure they use Canvas 2d (HTML5 API).
There are a ton of tutorials about drawing oncanvas:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial
http://www.html5canvastutorials.com/
Here are some libraries about canvas drawing:
http://www.jquery4u.com/javascript/10-cool-javascript-drawing-canvas-libraries/
http://fabricjs.com/ - Fabric.js is a powerful and simple Javascript
HTML5 canvas library
http://kineticjs.com/ - Enterprise class interactive web graphics
Don't rush when you pick your drawing library.
UPDATE:
realtimeboard.com seems to be based on Shockwave Flash only, see this piece of code:
<div id="realtimeboardApp"><object type="application/x-shockwave-flash" id="rtbLoader"></object></div>. I wont discuss this much further.
draw.io source code:
<div class="geDiagramContainer"><svg shape-rendering="optimizeSpeed" >[...]</svg></div>
<div class="geOutlineContainer"><svg style="[....] min-width: 3251px; min-height: 2768px;">...</svg></div> Seems to be based on SVG only, however, it still contains some SWF flash object, perhaps as a fallback mechanisms for older browsers and Internet Explorer.
On draw.io site I could identify the following libraries:
http://www.jgraph.com/mxgraph.html (just as Yuryi says), a proprietary JavaScript drawing library, a license costs between 3800€ - 25000€;
http://www.mathjax.org/, open source library for displaying math formulae.
I don't know much about Flash, except that it's obsolete, good for working with older browsers and that Adobe has discontinued its development in favor of HTML.
Updated:
MxGraph is open source now. It is now an option
Conclusion:
Although SVG seems a good technological solution, however mxGraph would not be an option for me, considering the costs and licensing restrictions on my code.
If you want a drawing library look at my earlier recommendations, or look for a SVG drawing library at http://www.farinspace.com/top-svg-javascript-libraries-worth-looking-at/.

Unfamiliar with realtimeboard, but draw.io is made via workflow library MXGRAPH: http://www.jgraph.com/mxgraph.html you can request a trial version, there's documentation, forums, sample projects etc. We're using it in our applications and it's pretty awesome.

Related

Double lines chart, generate by user [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I want a double line chart with a fill between both like this:
But the two lines will be generated by user (He will select by tap or click on the chart). I'm working on HTML/Javascript/CSS.
What are the chart libraries (free) that you recommend to me?
There is a growing number of Open Source and commercial solutions for pure JavaScript charting that do not require Flash. In this response I will only present Open Source options.
There are 2 main classes of JavaScript solutions for graphics that do not require Flash:
Canvas-based, rendered in IE using ExplorerCanvas that in turns relies on VML
SVG on standard-based browsers, rendered as VML in IE
There are pros and cons of both approaches but for a charting library I would recommend the later because it is well integrated with DOM, allowing to manipulate charts elements with the DOM, and most importantly setting DOM events. By contrast Canvas charting libraries must reinvent the DOM wheel to manage events. So unless you intend to build static graphs with no event handling, SVG/VML solutions should be better.
For SVG/VML solutions there are many options, including:
Dojox Charting, good if you use the Dojo toolkit already
Raphael-based solutions
Raphael is a very active, well maintained, and mature, open-source graphic library with very good cross-browser support including IE 6 to 8, Firefox, Opera, Safari, Chrome, and Konqueror. Raphael does not depend on any JavaScript framework and therefore can be used with Prototype, jQuery, Dojo, Mootools, etc...
There are a number of charting libraries based on Raphael, including (but not limited to):
gRaphael, an extension of the Raphael graphic library
Ico, with an intuitive API based on a single function call to create complex charts
Try this also:
http://www.highcharts.com !
Creds Jean

Best way to port c++ game to web [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I realize the above question is rather broad so I will narrow it down. I have a simple opengl c++ game engine that lives in a static library (could be converted to a dynamic lib).
I have been thinking of ways of getting it to run in web. From what I can see I could use ActiveX or Google NaCl to run the c++ code in browser. But these technologies do not seem easily cross platform? Or maybe I have misunderstood.
Another option I have seen is converting the engine to javascript and WebGL and running in an HTML5 canvas. Would this be slower than c++? It would be very cross platform though.
What do you think is the best option, or better yet is there any other option I have missed?
EDIT: what about a custom plugin similar to the unity webplayer?
There is a library created by #kripken which is still under development. It takes LLVM bitcode and convert into Javascript.
You can see the project page here, with working examples.
https://github.com/kripken/emscripten/
I would strongly suggest porting to NaCl.
Advantages:
Performance: You can use the full power of the CPU to render your game. If your game uses good 3d graphics or physics, you can make it look smooth even on old system configs. The performance of NaCl is comparable to Native OS applications, it only looses nearly 5 to 10% of FPS when I compared the same game to Win32 version.
There are a lot of already ported examples, games for NaCl that can help you do it easily.
It is already cross-platform. Chrome runs on Windows, Linux, Mac OSX.
Disadvantages:
Might take you around a week to port. You have to port to OpenGL ES 2.0 (However, it should be the same with any browser based methods, especially HTML5)
Runs only on Chrome.
If you want something portable in a browser, then it has to rely on Javascript (and likely WebGL, although IE does not support that).
ActiveX and NaCL are just not portable in any way, shape or form.
I can't say which is easier, but you have an option of rewriting your game in Javascript, or using a tool like Emscripten to compile your C++ to JavaScript.
Note that if you use the latter, it's still not a silver bullet. You'll likely have to make lots of changes to your code (for example because the libraries and APIs used in your C++ game won't be available on the browser)

Audio/Video live streaming between two browsers, which technologies? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm searching for the best open source technologies to use to implement a bidirectional audio/video communication between two browsers.
For now I have unearthed these tracks:
WebRTC W3C spec and an Ericsson's implementation
Red5 and the BigBlueButton implementation as an example
Cumulus A Red5 implementation of Cirrus
HTML5 and his many new features (but not before 2014-2015 aparently)
Maybe some Jabber/Speex kind of implementation that I'm missing
Is there something I'm missing ?
What can be the best solution to use ?
Also (to be more precise), I'd like to implement this feature in my application developped using Django/Python.
The hardest question is what you should use on the client side to capture and stream video from the user's webcam. For that, you have relatively few options, since whatever you use has to be widely supported by modern browsers, whereas you can do whatever you want on your own servers.
There are three general approaches you can take: use HTML5, use an existing plugin technology, or create your own plugin.
The third is probably the most difficult, and I don't recommend it. You'd need to maintain at least five different versions of your plugin (one for each major browser), and users would have to install it.
For the second option, there are three major plugin techologies now that ActiveX is dead: Flash, Silverlight, and Java applets. I'd advise you away from Silverlight, as it's not exactly portable.
That leaves you with Flash, applets, and HTML5 as your choices. Of these, Flash is the most widely used—but it has its disadvantages and the world is moving away from it. HTML5 is the wave of the future, and although the standard won't be finished until 2014, it's not expected to change (Last Call was in May 2011) and the major browsers already support much of it—though apparently not yet the WebRTC API, though I'm sure it'll be in Firefox and Chrome soon.
Are you trying to build something similar to Chatroulette? They support bi-directional video streaming and microphones. They use Flash Player 10's peer-to-peer ability and Wowza Media Server to power their site.
Unfortunately, the realistic answer for where we're at today is Flash. Fortunately, there is haxe, an open source compiler for the Flash SWF format. You could use it to make all kinds of stuff.
The server in the linked example is written in haxe (basically AS3) and compiled to instructions for NekoVM (an apache module) but it should provide a pretty good example if nothing else.

How to use the javascript and Cascading Style Sheet (CSS) for both IE(Internet Explorer) and Firefox? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
WE are Medium based product Company,Now our product using javascript and CSS (Cascading Style Sheet)are supported only the IE compatible browser(IE 6,7),but some of the script aren't supported the FireFox.
What WE need ?
I need the javascript and Cascading Style Sheet(CSS) to use both the IE and especially the Mozilla FireFox.
Can you clarify the doubts ?
We are fully migrate our product to support with Mozilla FireFox.
Suppose did you know any new technology to overcome the issue. Please recommend it.
I need anybody help..........
By targeting "Firefox" you are simply repeating a past mistake. You need to target HTML / ECMA / CSS standards and make adjustments only where an obvious browser limitation or bug prevents standards compliance. There are numerous tools to ensure compliance.
As a general rule any code that does IsBrowser(browserName) is fundamentally broken and should be replaced by DoesBrowserHaveFeature(featureName) <- Note that these are not real Javascript functions, see references for how to detect features.
There are libraries like jQuery that can handle some browser differences for you. You will still need to update your code.
References:
http://en.wikipedia.org/wiki/Cross-browser
http://www.webdevelopersjournal.com/articles/cross_browser/javascript.html
http://friendlybit.com/css/cross-browser-strategies-for-css/
http://en.wikipedia.org/wiki/ECMAScript
http://www.w3.org/QA/Tools/ (HTML/CSS Validation Tools)
You need to follow the Web Standards. Your site must be using code that is proprietary to microsoft at some moments and thats something that must be avoided, as the world is walking forward to a fully open web. Its not just that your website wont open in firefox. It wont open in safari, chrome, opera, TVs, Mobiles, iPhones, iPads, Androids, BlackBerries and so on. And also will not be as catchable by search engine crawlers as your concorrents website.
What I suggest you to do is to start trying http://validator.w3.org/ in all your website pages and make it totally valid. So then, you may have issues with internet explorer 6, 7, 8, because is a browser that constantly avoid following the w3c rules. Thats when the exceptions will come in your code and i personally like to tune then with jquery, because it has a lot of good functions for it.
I hope my answer helps.

Web-based Music and Sound synthesis - Survey [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
My question is threefold
What cool web-based examples have you seen that generate music dynamically by the user? Either based on samples with an interesting interface, by sound synthesis or similar methods.
Example: http://acko.net/blog/javascript-audio-synthesis-with-html-5
Has any serious web-based dynamical sound synthesis been done yet (e.g. generating sine waves dynamically and similar), or are there still inherent technological boundaries to do so?
What are your general thoughts about generating music dynamically on the web? Is any form of more involved generation still too CPU-intense? Be it using Flash, JavaScript or audio-tag. (Sadly all my efforts have been far too CPU-intense, and not a very satisfying experience for the user.)
If you've never seen Andre Michelle's Tone Matrix, prepare to be absorbed: http://lab.andre-michelle.com/tonematrix
Also, Sonoflash is apparently providing 100% generated sounds - all of their samples are basically AS3 code, manipulating sound data and then creating the sound. If I understand correctly. Check them out here: http://blog.digitalbackcountry.com/2009/09/sonoflash-easily-add-sound-to-your-flash-apps/
Adding to the Flash examples: AudioTool
(source: thecoolist.com)
I created a drum machine in Silverlight: http://www.dontcodetired.com/live/thunder which runs better (i.e in time) on some hardware\browsers, and i've seen some examples of actual synthesis (oscillator wave gen) also in SL.
I guess the problem is audio synthesis (oscillators, filters, effects, etc) can be quite CPU intensive, as opposed to sample playback which is more ram\disk laden. If browsers\plug-ins could be given full access to low level hardware then I guess it would be more viable - but would introduce security concerns... As we scale out over more cores and all move to 64 bit I suppose will continue to be able to do more of this cpu intensive stuff in-browser.
Interesting question though...
While this isn't the primary point of novelty for it, I think it still qualifies...
JSNES is a NES emulator written entirely in JavaScript. What makes this interesting for this discussion is that it also emulates the sound, by communicating with a Flash applet to actually play back the sound.
On my machine (using Google Chrome for testing), I get noticeable lag in the sound, so I don't think it's really "ready for primetime" yet - I wouldn't consider it really playable with the issues I'm seeing, but I think this is a great sign that it's getting more and more feasible, and if you didn't have the overhead of emulating everything else about the system, I think it would be possible to get a perfectly decent result.
Gibber is by far the most impressive thing I've seen. It's a complete interactive audio synthesis environment reminiscent of SuperCollider, but also includes a decent editor (CodeMirror) and social features too.

Categories

Resources