I am actually searching for a javascript / jquery library where I can pass a function equation, such as sin(x^2), and it plots the graph. Example link:
http://www.greatgraphing.me/?plot=sin(x^2)
Furthermore, I would like to scan my website for function equations and replace them with this function graph embed. It should have navigation features (scrolling, dragging the stage etc).
Over the last 4 hours I have searched the net without satisfactory result. Even the popular plot.ly, fooplot.com and jsxgraph do not offer this kind of features. The only thing that comes close to what I need is www.graph.tk. You can pass 1 equation by URL but it has no embed feature (widget or alike).
Wolframalpha offers a widget but it seems to be just an embed without the option to pass the equation.
Update: Found out that desmos.com offers an embed feature, if you purchase one of their API keys. Price is not stated.
I also considered using Google's geometry calculator but there seems to be no embed features.
Before starting to build such a "graph embed" myself, I would like to ask if such a project exists already. Maybe it is hidden in some github repo and I just can't find it.
Thank you.
PS: If the question is too offtopic (saw the first close flag), even though it is related to js/jquery, where should I ask it? On Superuser? Please advice me. I am sure this is an important question for many math developers.
All right, I took the time to write a first prototype based on jquery, math.js and easeljs (about 300 KB with v0.0.1):
graphobed
Demo: http://www.matheretter.de/tools/graphobed.html
Source: http://www.matheretter.de/tools/graphobed.html or here: https://raw.githubusercontent.com/echteinfachtv/graphobed/master/graphobed.js
Github repo: https://github.com/echteinfachtv/graphobed
Disclaimer: The code is a bit messy but worked in my tests. You just have to embed the js file, the script runs over all elements on your site and parses only if an enclosed equation has been found, the characters for enclosing are: *# x^2*sin(x) #*
I also added the possibility to change the graph later on by simply providing an input field. So after the embed you can change the graph as you wish:
Enjoy and improve the source code if you like :)
Related
I've recently updated a website that uses the Instafeed.js plugin from the old version to the new one. In the previous version the 'sortBy' option worked with a few possible strings e.g. number of likes ("likes.count"), number of comments ("comments.count") etc.
In the new version, the 'sortBy' option has been replaced by a 'sort' option, and as you can see on this page, it says that it 'uses a function' instead of the simple preset options as in the previous version.
https://github.com/stevenschobert/instafeed.js/wiki/Version-2-migration-guide
My Javascript knowledge is basic, and I've not come across something like this in a js plugin before. I don't really understand how I can write a function to sort the posts from the feed by the number of likes, since I can't see where the number of likes is made available from the Instagram API. If you'd like me to share the live website as it currently is, I'm happy to do so.
If anyone could point me in the right direction it would be really appreciated.
Thanks
I've done quite a bit of snooping around the internet.
Right now I'm using the ResponsiveVoice library for which I pay ~$25/month.
https://code.responsivevoice.org/responsivevoice.js
The problem is that it seems to insert long breaks into text. The text is user generated, so it is out of my control (I can't optimize the sentence structure to sound good).
I'm assuming it's a problem with ResponsieVoice. They acknowledged the issue, but say they can't do anything about it. It's how text-to-speech behaves.
Here are some examples of text that's causing issues (inserts a pause).
A psychologist that takes a cross-cultural approach might consider
which of the |pause| following influences?
Who of the following first used scientific research methods to investigate
reaction |pause| times?
a method of investigation of thought processes and the |pause| mind
The ego uses defense mechanisms indirectly and |pause| unconsciously.
I'm not sure if text-to-speech has to insert random pauses, these sites seem to be able to handle text-to-speech without "strange" pauses.
I can't insert their links... because of my sucky reputation.
naturalreaders
acapela-box
oddcast
ttsreader
ivona
ispeech
It could also be an implementation issue, but ResponsiveVoice support said it's normal to get these long pauses.
Here is a screenshot from the console, which shows the "break" that is causing a pause.
screenshot of console in chrome
It would be great to get some insight from you guys (who understand the technology better).
I had the exact same problem and found the cause in my case. On our site the text to read out was generated by jQuery like so:
$('#text-to-read').text().trim().replace(/(?:\r\n|\r|\n)/g, '');
The regex at the end actually created tabs and spaces. I simply had to adjust the regex:
$('#text-to-read').text().trim().replace(/\s\s+/g, ' ');
I know this is a very rare cause maybe, but it might help others out there!
Is anybody aware of any javascript tool (compatible with jQuery, tinymce or any other clientside library) able to manage the following requirements?
I need to show translation forms in which every field (either input or textarea) could contain some segment variables or code sections (mostly HTML).
For example:
"Hello {{firstname}}, this is your personal page."
or
"You improved your personal score of <strong>{{n}} points</strong>."
Of course I obtain these segments from a template parser and I need to show them to a set of translators that will perform localization towards many languages. I know that in many cases I can (and should!) avoid variables and code inside translation segments, but in many other cases I really can't.
The problem is: I would like to manage coherence about variables and code directly on the browser (I trust my translators but a bit more of UI/UX help is always a good thing!).
A nice approach could be providing the set of variables and code tags, ready to be inserted by means of a single click (in order to avoid mispelled variables or incorrect code syntax) and a bit of pre-submit validation to be sure everything was inserted.
I've seen this approach in other websites, such as Facebook or Freelancer.com (who have the power and the ability to reimplement the whole thing from scratch!).
Do you know about any almost-ready tool/library for this purpose?
Thank you all in advance for any suggestion.
If you are asking for a library to translate text - here is Google Translate API: https://developers.google.com/translate/?csw=1
If you are asking for a library which can take user input, perform validation, and insert into the DOM - then Jquery has everything you need.
If you are asking for something else, let me know and I'll edit my question.
I am just a newcomer developing an app with html/css/js via phonegap. I've been searching info on how to make my app be displayed in different languages and Google doesn't understand me.
So the idea is to have a button on index.html that let the user choose the language in which the app will be displayed, in this case Spanish/English, nothing strange like arabic blablabla....
So I guess that the solution must be related to transform all the text that I load in html to variables and then depending on the language selected display the correct one. I have no idea how to make this, and Im not able to find examples. So that's what Im asking for... if someone could give some code snipet to see how html variables works and how should I save user language selection...
Appreciated guys!
This can be done by internationalization (such as i18N). To do this you need separate file for each language and put all your text in it. Search Google for internationalization.
Otherwise you can look into embeding Google Translate.
This depends on the complexity of language-dependencies in the application. If you have just a handful of short texts in a strongly graphic application, you can just store the texts in JavaScript variables or, better, in properties of an object, with one object per language.
But if you expect to encounter deeper language-dependencies as well (e.g., displaying dynamically computed decimal numbers, which should be e.g. 1.5 in English and 1,5 in Spanish), then it’s probably better to use a library like Globalize.js (described in some detail in my book Going Global with JavaScript and Globalize.js). That way you could use a unified approach, writing e.g. a string using Globalize.localize('greeting') and a number using Globalize.format(x, 'n1') and a date using Globalize.format(date, 'MMM d').
For my web front end I have to implement subsets of the wiki-syntax in my system. Do I need to manually specify rules and reinvent the wheel? Is there an existing javascript library or jquery plugin that could help out with it?
For example a user enters == Header == Since this needs to get converted to a medium header for example (assuming medium is defined in this context as a span as below)
<span class="mediumHeader" id = "Header">Header</span>
Now when the user edits the above text I'm guessing it'll involve replacing the
<span...> ... </span> with ==...==
Now for every system I design this will be as per 'my rules' and will almost always have to reinvent the wheel. Is there something that I could use to ease this wiki to/from HTML transformation using Jquery/Javascript? I'm sure it's a problem with a known solution.
I would prefer to customize what's acceptable and what isn't i.e. I don't everything to be translated into wiki syntax (or HTML) only subsets of it. Should I just roll my own for my application?
It's been long enough that you may not need this, but yours was the top SO hit when I started looking into it.
There are a couple javascript options - you're probably looking at instaview (check out test/test.js), or maybe Wiky.js (the less fully documented).
If you aren't limited to Javascript, check out the exhaustive list of MediaWiki parsers at http://www.mediawiki.org/wiki/Alternative_parsers - lots of tools for C++, Java, Perl, ruby, and more. That's the link to watch for new developments.
At the time of writing, Parsoid seems to be the only one which translates in both directions. This one also powers the visual editor on Wikipedia. But this is no handy client-site lib to include in your app, but a full-blown parsing and transformation server suite. A production version of Parsoid on the Wikimedia cluster can be accessed at http://parsoid-lb.eqiad.wikimedia.org/.
Other JavaScript Libraries, which are translating from WikiText to HTML only (ordered by popularity), are:
Wiky.js - doesn't support full WikiText syntax. (by tanin47, not to be confused with Wiki.js from Requarks - a different project completely)
wtf_wikipedia - isn't directly translating to HTML but JSON, which results in much more powerful possiblities (e.g. info-boxes as key-value pairs). This is the most up-to-date library and "its a combination of instaview, txtwiki, and uses the inter-language data from Parsoid javascript parser."
instaview - no updates in the last 2 years.
Also checkout the current and full list of alternative MediaWiki parsers.