newLISP in a browser
newLISP in a browser
newLISP can now be compiled to JavaScript using the Emscripten SDK (1) and it runs fastest in a Chrome browser but also runs in the Firefox browser (turns out Firefox is faster edited: 2014-1-4)
The default newlisp-js.html generated has different windows for input and output with the input popup-box only about 25 characters wide. So a better front end would have to be written in JavaScript and HTML to either simulate a console REPL or make the input box bigger and integrated into the page (2). The newlisp-js.js has a size of about 2.3 MB and is loaded by newlisp-js.html of 4K size.
For bandwidth reasons and because it’s not yet a finished product, I don’t want to install the file on the newlisp.org website. But if some JavaScript expert here on the board wants to take this up as a project, I can send the files to that person by email.
A 'makefile_emscripten_utf8' with more info in the header section can be found in the source distribution here:
http://www.newlisp.org/downloads/develo ... nprogress/
(1) https://github.com/kripken/emscripten/wiki/Tutorial
(2) I wonder if there is JS code from other applications, which could be used.
The default newlisp-js.html generated has different windows for input and output with the input popup-box only about 25 characters wide. So a better front end would have to be written in JavaScript and HTML to either simulate a console REPL or make the input box bigger and integrated into the page (2). The newlisp-js.js has a size of about 2.3 MB and is loaded by newlisp-js.html of 4K size.
For bandwidth reasons and because it’s not yet a finished product, I don’t want to install the file on the newlisp.org website. But if some JavaScript expert here on the board wants to take this up as a project, I can send the files to that person by email.
A 'makefile_emscripten_utf8' with more info in the header section can be found in the source distribution here:
http://www.newlisp.org/downloads/develo ... nprogress/
(1) https://github.com/kripken/emscripten/wiki/Tutorial
(2) I wonder if there is JS code from other applications, which could be used.
Re: newLISP in a browser
You're tireless, Lutz! Awesome.
newLISP deserves a lot more attention; perhaps this move to the browser will help?
One thought I just had for this is to convert the newLISP manual example code segments into embedded, runable, modifiable, interactive learning tools.
newLISP deserves a lot more attention; perhaps this move to the browser will help?
One thought I just had for this is to convert the newLISP manual example code segments into embedded, runable, modifiable, interactive learning tools.
Re: newLISP in a browser
newlisp-js.js, newlisp-js.html and newlisp-js.html.map are zipped together here:
http://www.newlisp.org/downloads/develo ... isp-js.zip
See README.txt inside
http://www.newlisp.org/downloads/develo ... isp-js.zip
See README.txt inside
Re: newLISP in a browser
Hello Lutz,
Thanks for creating this interesting new option.
I wonder why the Emscripten-generator/auhor decided to make a popup-promt as the input-element.
Not easy to understand the HTML and js logik and interaction.
I wonder that there are reference to a imageplugin and webgl in the javascript code.
It would be nice if more browsers would be supported. (IE etc.)
Regards
Thanks for creating this interesting new option.
I wonder why the Emscripten-generator/auhor decided to make a popup-promt as the input-element.
Not easy to understand the HTML and js logik and interaction.
I wonder that there are reference to a imageplugin and webgl in the javascript code.
It would be nice if more browsers would be supported. (IE etc.)
Regards
Hans-Peter
Re: newLISP in a browser
Hello,
Interesting read about emscripten:
https://github.com/kripken/emscripten/wiki/FAQ
Also the list of demo is quite impressive:
https://github.com/kripken/emscripten/wiki
Seems other programming languages are also ported to emscripten.
Regards
Interesting read about emscripten:
https://github.com/kripken/emscripten/wiki/FAQ
Also the list of demo is quite impressive:
https://github.com/kripken/emscripten/wiki
Seems other programming languages are also ported to emscripten.
Regards
Hans-Peter
Re: newLISP in a browser
Hello,
In a second step it would be nice to get a clean and easy javascript integration.
Something like this:
And callback's into javascript.
Regards
In a second step it would be nice to get a clean and easy javascript integration.
Something like this:
Code: Select all
<input type="button" name="eval" value="Evaluate" onclick="newLispEvalString(this.form.inputbox.value);
Regards
Hans-Peter
Re: newLISP in a browser
To have synchronous input behavior should be the reason; see:HPW wrote: I wonder why the Emscripten-generator/auhor decided to make a popup-promt as the input-element.
https://github.com/replit/jsrepl#standard-input-hacks
(reached from https://github.com/replit/repl.it#replit).
Re: newLISP in a browser
Just a few thoughts:
http://www.evolgo.de/RYT/
some time ago.
For user interaction this heavily uses jQuery and jQueryUI as tools for reaching browser compatibility (and many other libs for e.g. SVG stuff). It runs in almost all browsers (Firefox, Safari, Chrome; but probably not IE (due to SVG stuff)).
From my experiences (some time ago) I can recommend using jQuery stuff for reaching browser compatibility (instead of trying to build such a thing yourself).
For a newLISP repl a light-weight editor is needed.
Question is, how to proceed: to implement such a thing by using browser side newLISP - enriched by some Javascript interface - or choosing some free Javascript one? As more will be used from the Javascript world, as more dependencies have to be managed...
Possibly first using a free one and then going a newLISP way?
Another question is how to proceed organizationally: browser side newLISP outside the newLISP core could well be a community project; e.g. for:
Why? Because this could be too much for a single person doing much other stuff ;-)
I can say something about experiences I've made with development ofLutz wrote: (2) I wonder if there is JS code from other applications, which could be used.
http://www.evolgo.de/RYT/
some time ago.
For user interaction this heavily uses jQuery and jQueryUI as tools for reaching browser compatibility (and many other libs for e.g. SVG stuff). It runs in almost all browsers (Firefox, Safari, Chrome; but probably not IE (due to SVG stuff)).
From my experiences (some time ago) I can recommend using jQuery stuff for reaching browser compatibility (instead of trying to build such a thing yourself).
For a newLISP repl a light-weight editor is needed.
Question is, how to proceed: to implement such a thing by using browser side newLISP - enriched by some Javascript interface - or choosing some free Javascript one? As more will be used from the Javascript world, as more dependencies have to be managed...
Possibly first using a free one and then going a newLISP way?
Another question is how to proceed organizationally: browser side newLISP outside the newLISP core could well be a community project; e.g. for:
- Javascript/DOM bindings,
- accessing browser storage,
- UI widgets;
Why? Because this could be too much for a single person doing much other stuff ;-)
Re: newLISP in a browser
Initially, the goal would be a simple learning, tutoring and development environment for newLISP. We should go by little steps and start with the minimum possible:
- Implement a simple HTML editable text field for input and another HTML text field for output. Both fields stacked on top of each other or side by side. The default newlisp-js.html is only 95 lines long and 80% of it isn’t even needed and could be thrown out, for this first phase.
- Make a facility to display manual or tutoring text for a specific topic or function
- Improve the editor using JavaScript from other projects which do editor syntax highlighting like http://jsfiddle.net/ , http://ace.c9.io/#nav=about (comes with embedding instructions!) and many others. JavaScript is the only language builtin to the browser and with Document Object Model integration. So using jQuery, Bootstrap, etc. would be a natural thing.
Ps: http://www.evolgo.de/RYT/ this is incredible, wow! There is tons of stuff here, which could be used in a more advanced complex browser-based newLISP IDE.
- Implement a simple HTML editable text field for input and another HTML text field for output. Both fields stacked on top of each other or side by side. The default newlisp-js.html is only 95 lines long and 80% of it isn’t even needed and could be thrown out, for this first phase.
- Make a facility to display manual or tutoring text for a specific topic or function
- Improve the editor using JavaScript from other projects which do editor syntax highlighting like http://jsfiddle.net/ , http://ace.c9.io/#nav=about (comes with embedding instructions!) and many others. JavaScript is the only language builtin to the browser and with Document Object Model integration. So using jQuery, Bootstrap, etc. would be a natural thing.
Ps: http://www.evolgo.de/RYT/ this is incredible, wow! There is tons of stuff here, which could be used in a more advanced complex browser-based newLISP IDE.
Re: newLISP in a browser
a much faster, optimized version, now best on Firefox with almost native speed:
http://www.newlisp.org/downloads/develo ... isp-js.zip
load index.html ino the browser which is a streamlined newlisp-js.html - but still with popup window input.
http://www.newlisp.org/downloads/develo ... isp-js.zip
load index.html ino the browser which is a streamlined newlisp-js.html - but still with popup window input.
Re: newLISP in a browser
Now with two windows, one for input and one for output:
http://www.newlisp.org/downloads/develo ... isp-js.zip
unzipping newlisp-js.zip creates a newlisp-js directory with the necessary files. See the README.txt file in the package.
Ps: now also works on Safari on OSX and IOS
http://www.newlisp.org/downloads/develo ... isp-js.zip
unzipping newlisp-js.zip creates a newlisp-js directory with the necessary files. See the README.txt file in the package.
Ps: now also works on Safari on OSX and IOS
Re: newLISP in a browser
Great, getting better and better. Exactly like my wish.
(Maybe you sould exchange the Position of Input and Output)
>>In this sandboxed JavaScript environment, File and network I/O functions
will not work.
Does any function for web access work? Like javascrpt Ajax etc.?
(Maybe (load "url") can internally use XMLHttpRequest in js to load the string from thr url and then evalstring in newlisp)
It seems also to work on IE 11 (Tested on my Win 7 tablet)!!
Is it possible to Gzip the js-lib?
I tried it but I am struggling with the gzip-support-configuration on my test-Server.
When it would work the lib would get under 500kb.
Regards
(Maybe you sould exchange the Position of Input and Output)
>>In this sandboxed JavaScript environment, File and network I/O functions
will not work.
Does any function for web access work? Like javascrpt Ajax etc.?
(Maybe (load "url") can internally use XMLHttpRequest in js to load the string from thr url and then evalstring in newlisp)
It seems also to work on IE 11 (Tested on my Win 7 tablet)!!
Is it possible to Gzip the js-lib?
I tried it but I am struggling with the gzip-support-configuration on my test-Server.
When it would work the lib would get under 500kb.
Regards
Last edited by HPW on Sat Jan 04, 2014 11:02 am, edited 1 time in total.
Hans-Peter
Re: newLISP in a browser
I changes the layout to:
So the flow is: input=>eval=>output
Test on WIN Xp IE 8 does not work. Keeps endless downloading.
WIN XP with current chrome does work.
Regards
Code: Select all
<p>Input
<textarea class="emscripten" id="input" rows="15">(println "Hello World")</textarea></p>
<input type="button" value="eval"
onclick="newlispEvalStr(document.getElementById('input').value.trim())">
<p>Output
<textarea class="emscripten" id="output" rows="15"></textarea></p>
Test on WIN Xp IE 8 does not work. Keeps endless downloading.
WIN XP with current chrome does work.
Regards
Hans-Peter
Re: newLISP in a browser
Is it possible to add a newlisp function to call javascript 'eval?
(jsEvalString "A valid javascript call")
https://developer.mozilla.org/en-US/doc ... jects/eval
Then we could build the javascript-call dynamicly in newlisp and do a callback to whatever is needed.
PS: Just tested the demo-html successfully on my daughters Samsung Galaxy S3 Android Handy!!
Seems that 'newlisp everyware' comes true! So great!
I had a projekt to build another xlisp-interpreter in javascript. Seems that it is no more needed. ;-)
Regards
(jsEvalString "A valid javascript call")
https://developer.mozilla.org/en-US/doc ... jects/eval
Then we could build the javascript-call dynamicly in newlisp and do a callback to whatever is needed.
PS: Just tested the demo-html successfully on my daughters Samsung Galaxy S3 Android Handy!!
Seems that 'newlisp everyware' comes true! So great!
I had a projekt to build another xlisp-interpreter in javascript. Seems that it is no more needed. ;-)
Regards
Hans-Peter
Re: newLISP in a browser
Lutz wrote: - Improve the editor using JavaScript from other projects which do editor syntax highlighting like http://jsfiddle.net/ , http://ace.c9.io/#nav=about (comes with embedding instructions!) and many others. JavaScript is the only language builtin to the browser and with Document Object Model integration. So using jQuery, Bootstrap, etc. would be a natural thing.
OK...this result was one hour of work :-) -> http://newlisp.neocortex.io/
If my kids would let me do some more hacking, this IDE could be very nice.
I just combined Bootstrap, some custom CSS and CodeMirror.
Cheers
Marc
--()o Dragonfly web framework for newLISP
http://dragonfly.apptruck.de
http://dragonfly.apptruck.de
Re: newLISP in a browser
Hello Marc,
Nice Editor, maybe you should link the indexed doc:
http://www.newlisp.org/downloads/manual_frame.html
You may also choose better Colors. It is difficult to see selected text and the Output area.
Edit: Also tested on the Android Handy of my kids. Works fine
Regards
Nice Editor, maybe you should link the indexed doc:
http://www.newlisp.org/downloads/manual_frame.html
You may also choose better Colors. It is difficult to see selected text and the Output area.
Edit: Also tested on the Android Handy of my kids. Works fine
Regards
Hans-Peter
Re: newLISP in a browser
Marc's editor looks great! When all is done, I will try to deliver a compressed version of newlisp-js-lib.js which loads faster and decompresses client-side. It should be around 500K.
newlisp-js now has a eval-string-js function. Enter any JavaScript call or statement to evaluate in the parent browser:
The statement would pop up a dialog and return the string entered.
http://www.newlisp.org/downloads/develo ... nprogress/
So now with eval-string-js anything is possible in a browser for newLISP :)
newlisp-js now has a eval-string-js function. Enter any JavaScript call or statement to evaluate in the parent browser:
Code: Select all
(eval-string-js "window.prompt('Enter some text:')")
(eval-string-js "6 * 7") => "42
http://www.newlisp.org/downloads/develo ... nprogress/
So now with eval-string-js anything is possible in a browser for newLISP :)
Re: newLISP in a browser
Hello Lutz,
Thanks again for the improvements!
You may change the sample to avoid the 'undefined' in the promp-window:
Is there a max length for the return of the js-call?
If so, it would be difficult to use it for loading Lisp-sources from the web-Server.
(As long it is not supported directly in newlisp-js)
Regards
Thanks again for the improvements!
You may change the sample to avoid the 'undefined' in the promp-window:
Code: Select all
(eval-string-js "window.prompt('Enter some text:','')")
If so, it would be difficult to use it for loading Lisp-sources from the web-Server.
(As long it is not supported directly in newlisp-js)
Regards
Hans-Peter
Re: newLISP in a browser
(eval-string-js) is very cool!
Just played around with it:
Getting the browser window height or width is easy now.
I do my best in making the Browser-IDE more advanced.
Just played around with it:
Code: Select all
(setq number (eval-string-js "window.prompt('Enter a number to divide by 2:','')"))
(setq result (div (int number) 2))
(setq alert (append "alert(" (string result) ")"))
(eval-string-js alert)
Code: Select all
(eval-string-js "$(window).height();")
(eval-string-js "$(window).width();")
--()o Dragonfly web framework for newLISP
http://dragonfly.apptruck.de
http://dragonfly.apptruck.de
Re: newLISP in a browser
What browser and version are you using? I don't get any "undefined" messages when using only one parameter for the window.prompt call. I am using:
Firefox 26.0
Chrome 31.0
Safari 7.01
Also, all the code from Emscripten uses windows.prompt() with only one string argument.
Regarding the the size of the returned string from eval-string-js:
It seems that JavaScript is allocating the memory for the returned string and then is also managing it for GC. newLISP makes a copy of it and manages that copy. I tested for memory leaks when invoking eval-string-js and it seems that memory is managed well by JavaScript and newLISP for this call. I haven't tested for the max memory allowed as return value but believe, there will be no problems loading code source.
Talking about memory in general:
At this moment newlis-js-lib.js is limited to about 16MB of heap memory, which is the default Emscripten allocates and probably a sensible (conservative) choice for browser based applications. This value can be changed in a configuration file and perhaps I will bump it up to 32MB or even more. There are many other limits which can be configured before compilation and as things move along, I will experiment. At the moment I go with the defaults until we know more.
Ps: thanks for the great examples Marc. Do you also get this “undefined” message HPW is talking about? And what browser version do you run?
Ps2: I am getting a "undefined" as return value from (eval-string-js "alert(6)"), but believe this is Ok, "undefined" is simply the return value from the JavaScript alert() function in this case, perhaps in JavaScript alert is "void alert()".
Ps3: Note, that using $(window).width(); also would need jQuery installed.
Firefox 26.0
Chrome 31.0
Safari 7.01
Also, all the code from Emscripten uses windows.prompt() with only one string argument.
Regarding the the size of the returned string from eval-string-js:
It seems that JavaScript is allocating the memory for the returned string and then is also managing it for GC. newLISP makes a copy of it and manages that copy. I tested for memory leaks when invoking eval-string-js and it seems that memory is managed well by JavaScript and newLISP for this call. I haven't tested for the max memory allowed as return value but believe, there will be no problems loading code source.
Talking about memory in general:
At this moment newlis-js-lib.js is limited to about 16MB of heap memory, which is the default Emscripten allocates and probably a sensible (conservative) choice for browser based applications. This value can be changed in a configuration file and perhaps I will bump it up to 32MB or even more. There are many other limits which can be configured before compilation and as things move along, I will experiment. At the moment I go with the defaults until we know more.
Ps: thanks for the great examples Marc. Do you also get this “undefined” message HPW is talking about? And what browser version do you run?
Ps2: I am getting a "undefined" as return value from (eval-string-js "alert(6)"), but believe this is Ok, "undefined" is simply the return value from the JavaScript alert() function in this case, perhaps in JavaScript alert is "void alert()".
Ps3: Note, that using $(window).width(); also would need jQuery installed.
Re: newLISP in a browser
Ok, it is only on IE 11.What browser and version are you using? I don't get any "undefined" messages when using only one parameter for the window.prompt call.
Chrome 31 is also Ok for me without the second parameter.
But when you use it it does not hurt and you can set a default-text into the promt-window.
Regards
Hans-Peter
Re: newLISP in a browser
Hello,
sys-info on newlisp-js shows 203 for me.
Does it mean UTF-8 and what else?
Regards
sys-info on newlisp-js shows 203 for me.
Does it mean UTF-8 and what else?
Regards
Hans-Peter
Re: newLISP in a browser
Yes, I do.Ps: thanks for the great examples Marc. Do you also get this “undefined” message HPW is talking about? And what browser version do you run?
I'm running on OSX Mavericks
1. Safari 7.01
2. Chrome 31.0.1650.63
P.S. Reddit seems to be interested, because I get some load on my server ...
http://www.reddit.com/r/lisp
--()o Dragonfly web framework for newLISP
http://dragonfly.apptruck.de
http://dragonfly.apptruck.de
Re: newLISP in a browser
The second argument is now included in the example together with some other cleanup in index.html and some more instructions in README.txt:
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
I am very excited about Marc's editor, which looks better each time I load it. Fortunately once the same newlisp-js-lib.js is loaded it goes pretty quick as it is cached by the browser, but there seems to be some load on your site at times.
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
I am very excited about Marc's editor, which looks better each time I load it. Fortunately once the same newlisp-js-lib.js is loaded it goes pretty quick as it is cached by the browser, but there seems to be some load on your site at times.
Re: newLISP in a browser
Here is a quick way to compress newlisp-js-lib.js for faster deliever, but this is only usable for delivery on HTTP 1.1 compliant web servers like Apache. It will not work when loading locally from a file or with newLISP in server mode, which only implements HTTP 1.1 partially.
On Unix compress doing:
Now edit index.html replacing instances of newlisp-js-lib.js with newlisp-js-lib.js.gz:
On Unix compress doing:
Code: Select all
gzip newlisp-js-lib.js # this produces a newlisp-js-lib.js.gz
Code: Select all
// replace
<script async type="text/javascript" src="newlisp-js-lib.js"></script>
// with
<script async type="text/javascript" src="newlisp-js-lib.js.gz"></script>