Reverse engineer to Desmos calculator for add some functionality
For a client web application I need add a mathematical expression graphic, I found desmos samples, this gays give the possibility to include that in your web application, but I need control a little more, first I pass as parameter to the HTML page and after I coming with the idea to communicate directly to the graphics windows.
I create a small Web page that Open the local Desmos sample, I add some more stuff testing too. I make a small modification to the “calculator_desktop.js” file for get access to his model and I crate a “Grapher.ts” that receive the command from the another windows page,. I this case is the Gtalk.html.
This how look the desmos calculator
I create a series of command that can be send to the windows, this windows have to be in your web site for the Cross Browser Problems :) using the windows.postMessage() function.
The command you can see in the code on “Grapher.ts” but here is a resume.
- exp -> for a list of expression to the Calculator.
exp:<Folder 01;'Sample 01;x^2;'Sample 02;x+5*y^2=0;> - gst -> get state of the calculator
- sst -> set a state to the calculator
- cx -> Check if I have connection, I use before send any command on my application and I way if I didn't receive response then I open a new tab.
- nFld -> Create a new Folder, I prefer to use exp command
- exp:<My folder;x^2;*
- nTx -> Create a new Text, I prefer to use exp command
- exp:'my test with a expression;x^2
- nEx -> new expression
- nTbl -> new table, I have to Finnish this on another moment
- gexps -> list all the expressions
- gsel -> Get the selected item on the expression list
- cls -> Clear all the expression
- sopt -> Set the option sopt:{ "solutions":"false", "settingsMenu":"false", "border":"false", "branding":"false", "expressionsTopbar":"false", "graphpaper":"false", "zoomButtons":"false", "expressionsCollapsed":"true" }
I use Microsoft Visual Code with "Open Live Server" for work on this...
has fun :)
/Roberto Alonso G'omez.