Page 2 of 5
Re: newLISP in a browser
Posted: Sun Jan 05, 2014 7:50 am
by HPW
Slightly modified html with disabled Gui until downloading is finished:
Code: Select all
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>newLISP 10.5.7 compiled to JavaScript</title>
<style type="text/css" media="screen">
.emscripten {
padding-right: 0; margin-left: auto; margin-right: auto; display: block;
}
.button {
color: #AA0000;
font-size: 110%;
}
textarea {
font-family: Andale Mono, "Bitstream Vera Sans Mono", Monaco, Courier;
font-size: 15px;
width: 100%;
}
body, p {
font-family: Lucida Sans, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
</div>
<p>Input <input type="button" value="eval" class="button" id="evalinput"
onclick="newlispEvalStr(document.getElementById('input').value.trim())" disabled>
<input type="button" value="clear" id="clearinput" class="button"
onclick="document.getElementById('input').value = '';" disabled><br><br>
<textarea class="emscripten" id="input" rows="14" disabled>;
; wait for "Downloading ..." to finish, then click eval
;
(println "Hello World")
;; up to 1023 characters can be passed to string in eval-string-js
;; no limit on size of returned string
(eval-string-js "window.prompt('Enter some text:','')")
</textarea></p>
<p>Output <input type="button" value="clear" class="button" id="clearoutput"
onclick="document.getElementById('output').value = '';" disabled><br><br>
<textarea class="emscripten" id="output" rows="12" disabled></textarea></p>
<script type='text/javascript'>
// download newlisp-js-lib.js and show progress of downloading
var Module = {
preRun: [],
postRun: [(function() {
newlispEvalStr = Module.cwrap('newlispEvalStr', 'number', ['string']); })],
print: (function() {
var element = document.getElementById('output');
element.value = ''; // clear browser cache
return function(text) {
text = Array.prototype.slice.call(arguments).join(' ');
element.value += text + "\n";
element.scrollTop = 99999; // focus on bottom
};
})(),
printErr: function(text) {
text = Array.prototype.slice.call(arguments).join(' ');
if (0) { // XXX disabled for safety typeof dump == 'function') {
dump(text + '\n'); // fast, straight to the real console
} else {
console.log(text);
}
},
setStatus: function(text) {
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
if (text === Module.setStatus.text) return;
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
var now = Date.now();
if (m && now - Date.now() < 30) return; // if progress update, skip it if too soon
var statusElement = document.getElementById('status');
var progressElement = document.getElementById('progress');
if (m) {
text = m[1];
progressElement.value = parseInt(m[2])*100;
progressElement.max = parseInt(m[4])*100;
progressElement.hidden = false;
} else {
progressElement.value = null;
progressElement.max = null;
progressElement.hidden = true;
document.getElementById('evalinput').disabled = false;
document.getElementById('clearinput').disabled = false;
document.getElementById('clearoutput').disabled = false;
document.getElementById('input').disabled = false;
document.getElementById('output').disabled = false;
}
statusElement.innerHTML = text;
},
totalDependencies: 0,
monitorRunDependencies: function(left) {
this.totalDependencies = Math.max(this.totalDependencies, left);
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) +
'/' + this.totalDependencies + ')' : 'All downloads complete.');
}
};
Module.setStatus('Downloading...');
</script>
<script async type="text/javascript" src="newlisp-js-lib.js"></script>
<center>
<font size="-1">Copyright © 2014, <a href="http://newlisp.org">newlisp.org</a></font>
</center>
</body>
</html>
<!-- eof -->
Re: newLISP in a browser
Posted: Mon Jan 06, 2014 12:35 am
by Lutz
The latest update adds automatic row-sizing of input and output windows on load and a button to switch layout from horizontal two-column to a vertical one-column layout.
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
Ps: This also has HPW's addition of disabling the GUI while downloading.
Re: newLISP in a browser
Posted: Mon Jan 06, 2014 7:06 pm
by Lutz
Now files can be loaded from the local file system into the edit box. Also JavaScript code can be evaluated directly without using the (eval-string-js ...) expression but using the JS button.
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
Re: newLISP in a browser
Posted: Tue Jan 07, 2014 1:11 am
by Lutz
A better layout on mobile devices and an
info button for a help page:
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
Re: newLISP in a browser
Posted: Tue Jan 07, 2014 6:59 am
by HPW
Modified html with additional doc button with keyword-input.
(Selection of a keyword in one of the textareas put it into the keyword-input)
Opens either the indexed doc or context-sensitive doc for the keyword.
Code: Select all
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>newLISP in a browser</title>
<style type="text/css" media="screen">
.emscripten {
padding-right: 0; margin-left: auto; margin-right: auto; display: block;
}
.button {
color: #000000;
font-size: 1.0em;
right: 0px;
margin-bottom: 3px;
margin-top: 3px;
}
.red-button {
color: #AA0000;
font-size: 1.0em;
margin-bottom: 3px;
margin-top: 3px;
}
.two-column {
position: relative;
margin: 1%;
float: left;
width: 48%;
}
.one-column {
position: relative;
margin: 1%;
width: 98%;
}
textarea {
font-family: Andale Mono, Monaco, Courier;
font-size: 1.00em;
width: 100%;
resize: none;
}
body, p {
font-family: Lucida Sans, Helvetica, sans-serif;
}
body {
background-color: #EEEEEE;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<output id="list"></output>
<body onmouseup="GetSelectedText ()">
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
</div>
<div class="two-column" id="editor">
Editor <input type="button" value="eval" class="red-button" id="evalinput"
onclick="newlispEvalStr(document.getElementById('input').value.trim())" disabled />
<input type="button" value="JS" id="evalinputjs" class="red-button"
onclick="newlispEvalStr('(eval-string-js {' + document.getElementById('input').value.trim() + '})' )" disabled />
<input type="button" value="clear" id="clearinput" class="button"
onclick="document.getElementById('input').value = '';" disabled /><br/>
<textarea id="input" disabled>;
; wait for "Downloading ..." to finish
; then click eval
;
(println "Hello World")
(eval-string-js
"window.prompt('Enter some text:','')")
</textarea><br/>
<input type="file" class="button" id="files" name="load" disabled /><br/>
</div>
<div class="two-column" id="eval-out">
Console <input type="button" value="clear" class="button" id="clearoutput"
onclick="document.getElementById('output').value = '';" disabled />
<input type="button" value="layout" class="button" onclick="switchLayout();" />
<input type="button" value="info" id="info" class="button"
onclick="window.open('README.html','MsgWindow');" disabled />
<input type="button" value="doc" id="doc" class="button"
onclick="OpenDoc();"/>
<input type="text" id="keywordtext">
<textarea id="output" disabled></textarea><br/>
<center><font size="-1">Copyright © 2014, <a href="http://newlisp.org">newlisp.org</a>
</font></center>
</div>
<script type='text/javascript'>
<!--
function resizeTextarea(mode) {
var nrows;
if(mode == "two-column") {
nrows = ((window.innerHeight || document.body.clientHeight) - 130) / 18;
} else {
nrows = ((window.innerHeight || document.body.clientHeight) - 180) / 36;
}
document.getElementById('input').rows = nrows;
document.getElementById('output').rows = nrows;
}
function switchLayout() {
if(document.getElementById('editor').className == "two-column") {
document.getElementById('editor').className = "one-column";
document.getElementById('eval-out').className = "one-column";
resizeTextarea("one-column");
} else {
document.getElementById('editor').className = "two-column";
document.getElementById('eval-out').className = "two-column";
resizeTextarea("two-column");
}
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var textFile = files[0]
// file info:
// textFile.name
// textFile.type
// textFile.size
// textFile.lastModifiedDate[.toLocaleDateString()]
//Only process text files.
if (textFile.type.match('image.*')) {
alert(textFile.type + 'is an invalid file type');
return;
}
var reader = new FileReader();
// read file asynchronous and fill editor box
reader.onload = (function(theFile) {
return function(e) {
var editBox = document.getElementById('input');
editBox.value = ''; // clear editbox
editBox.value = e.target.result;
};
})(textFile);
// Read in the text file
reader.readAsText(textFile);
Module.print('loading: ' + textFile.name + ' - size:', textFile.size + ' bytes');
}
function GetSelectedText () {
var selText = "";
if (window.getSelection) { // all browsers, except IE before version 9
if (document.activeElement &&
document.activeElement.tagName.toLowerCase () == "textarea")
{
var text = document.activeElement.value;
selText = text.substring (document.activeElement.selectionStart,
document.activeElement.selectionEnd);
}
else {
var selRange = window.getSelection ();
selText = selRange.toString ();
}
}
else {
if (document.selection.createRange) { // Internet Explorer
var range = document.selection.createRange ();
selText = range.text;
}
}
if (selText !== "") {
document.getElementById('keywordtext').value = selText;
// alert(selText);
}
}
function OpenDoc () {
if (document.getElementById('keywordtext').value.trim() !== "") {
window.open('http://www.newlisp.org/downloads/newlisp_manual.html#'+document.getElementById('keywordtext').value.trim(),'MsgWindow');
}
else {
window.open('http://www.newlisp.org/downloads/manual_frame.html','MsgWindow');
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
// EMSCRIPTEN loading newlisp-js-lib.js showing progress of downloading
// importing newlispEvaklStr and output to the console
var Module = {
preRun: [],
postRun: [(function() {
newlispEvalStr = Module.cwrap('newlispEvalStr', 'number', ['string']); })],
print: (function() {
var element = document.getElementById('output');
element.value = ''; // clear browser cache
return function(text) {
text = Array.prototype.slice.call(arguments).join(' ');
element.value += text + "\n";
element.scrollTop = 99999; // focus on bottom
};
})(),
printErr: function(text) {
text = Array.prototype.slice.call(arguments).join(' ');
console.log(text);
},
setStatus: function(text) {
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
if (text === Module.setStatus.text) return;
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
var now = Date.now();
if (m && now - Date.now() < 30) return; // if progress update, skip it if too soon
var statusElement = document.getElementById('status');
var progressElement = document.getElementById('progress');
if (m) {
text = m[1];
progressElement.value = parseInt(m[2])*100;
progressElement.max = parseInt(m[4])*100;
progressElement.hidden = false;
} else {
progressElement.value = null;
progressElement.max = null;
progressElement.hidden = true;
document.getElementById('evalinput').disabled = false;
document.getElementById('evalinputjs').disabled = false;
document.getElementById('clearinput').disabled = false;
document.getElementById('clearoutput').disabled = false;
document.getElementById('input').disabled = false;
document.getElementById('output').disabled = false;
document.getElementById('files').disabled = false;
document.getElementById('info').disabled = false;
resizeTextarea("two-column");
}
statusElement.innerHTML = text;
},
totalDependencies: 0,
monitorRunDependencies: function(left) {
this.totalDependencies = Math.max(this.totalDependencies, left);
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) +
'/' + this.totalDependencies + ')' : 'All downloads complete.');
}
};
Module.setStatus('Downloading...');
-->
</script>
<script async type="text/javascript" src="newlisp-js-lib.js"></script>
</body>
</html>
<!-- eof -->
Re: newLISP in a browser
Posted: Tue Jan 07, 2014 4:55 pm
by HPW
Hello,
When I eval this code nothing appear in the Output pane
When I add a \n then all pevious print Outputs appear including the last eval:
Regards
Re: newLISP in a browser
Posted: Tue Jan 07, 2014 6:24 pm
by Lutz
This happens on all browsers. They - the Emscripten folks - seem not to flush the output buffer until they find a line feed. Nothing we can do about it, adding a line feed to
silent would undo it's purpose.
I added your keyword manual search, great that it also works on selections!
Also added replacing trailing "?" with "p" e.g.:
protectedp instead of
protected? in search keywords to make it work for the manual when searching property functions. Made the text box a bit smaller to not overflow to the next line when working on the iPad.
Also added more mobile specific stuff to get max possible rows on iPad, the browse button will stay disabled on most mobile devices.
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
ps: to your licensing question: yes, it's the same as for the DLL
ps: enter key now also works for the keyword search
ps: keyboard shortcuts for buttons: Ctrl-L for <clear>, Ctrl-X for <eval>, Ctrl-J for <JS>
ps: Ctrl-O to open the file browser
Re: newLISP in a browser
Posted: Wed Jan 08, 2014 12:44 pm
by HPW
ps: keyboard shortcuts for buttons: Ctrl-L for <clear>, Ctrl-X for <eval>, Ctrl-J for <JS>
ps: Ctrl-O to open the file browser
In IE 11 (win 7) the hotkeys Ctrl-X and Ctrl-J and Ctrl-O appear as letters in the textarea after executing.
Chrome works fine.
Regards
Re: newLISP in a browser
Posted: Wed Jan 08, 2014 3:57 pm
by HPW
Hello,
CTRL-X is not so good since it is yet the cut to clipboard command for the textarea.
So whne I hit CTRL-X in chrome when a word is selected, it starts first the eval and then cutout the word.
Regards
Re: newLISP in a browser
Posted: Wed Jan 08, 2014 10:24 pm
by Lutz
Meanwhile I could test on a Windows 8 machine. The result is, all but two keyboard shortcuts have been thrown out. But the most important ones stayed with a different key for eval:
Ctrl-enter - eval button - evaluate newLISP source
Ctrl-L - clear button - clear editor box
These two keyboard shortcuts seem to work on Windows and Mac OSX platforms and browsers including IE-11 on Windows 8. Have not tested any older IE's.
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
Also added +,- buttons to make the editor box bigger or smaller. The console box will then change accordingly.
Re: newLISP in a browser
Posted: Thu Jan 09, 2014 7:39 pm
by Lutz
More tweaking to accomodate an additional button and still make everything fit into 1024x768 pixels on a standard iPad or iPad mini.
A new button to replace the current page with an HTML page, contents of the editbox. All three components of a an app: newLISP, JavaScript and HTML or any mix of it can now be developed in this IDE clientside.
A second function - specific to newLISP compiled to a JavaScript lib - has been added
display-html. This function does a similar thing as the HTML button. It replaces the current page with a new page from the HTML string parameter in
display-html.
As an example of how to make an application for 'newLISP in a web browser' the file
app.html has been added to the package. There is also a link to it on README.html page.
http://www.newlisp.org/downloads/develo ... nprogress/
There are still minor issues when using single ' in JavaScript in some situation. Use double quotes instead. The file
app.html has some comments about it.
Re: newLISP in a browser
Posted: Thu Jan 09, 2014 8:15 pm
by HPW
display-html
Cool, interesting and powerfull.
Re: newLISP in a browser
Posted: Thu Jan 09, 2014 8:33 pm
by Lutz
Just solved the single quote
' problem. It is now safe to use single quotes with strings in JavaScript also with JavaScript inside HTML. It was already safe when using JavaScript with
eval-string-js
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
both functions
eval-string-js and
display-html are also documented in the reference.
Re: newLISP in a browser
Posted: Fri Jan 10, 2014 8:59 am
by HPW
Just downloaded the latest zip from development.
The output-area gets placed below the open-file button outside the screen (Chrome 31 on WIN XP)
Colors are a matter of taste, but I do not like the dark background.
The colors before did better fit to the doc.
Regards
Re: newLISP in a browser
Posted: Fri Jan 10, 2014 1:27 pm
by Lutz
I cannot test on Windows until next week. When the log window snaps below the edit window, widen the browser window a little bit and it will snap back. Or make the font size smaller with Ctrl- , then click the layout button twice.
Re: newLISP in a browser
Posted: Sat Jan 11, 2014 1:52 am
by Lutz
More tweaks and a new button
c to switch the colors between a light and a dark theme.
Tested on:
Windows 8.0 with IE, Firefox, Chrome
Mac OSX with Safari, Firefox, Chrome
iOS iPad mini (1024x768) Safari
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
ps: the HTML button now will open a new browser tab
Re: newLISP in a browser
Posted: Sat Jan 11, 2014 10:44 am
by HPW
Hello,
Looks good now and works perfectly.
Tested on:
Windows 7.0 with IE, Chrome
Windows XP with Chrome (IE 8 does not work)
Android Handy Samsung Galaxy S3 mini
One little problem on the Android: When select code in the input area the selected text gets not placed into the keyword-input. (texted with native browser and chrome)
Edit: Here is a link with some code for the Android select problem. Maybe usable.
http://stackoverflow.com/questions/1142 ... ke-mouseup
Does it work on IOS?
Regards
Re: newLISP in a browser
Posted: Sun Jan 12, 2014 4:42 am
by Lutz
Thanks for doing all the testing on different devices and browsers.
What you are seeing on Android is the same on iOS. But the fact that you have to copy-paste the keyword selection for the doc search into the text input, instead of it happening on mouse-up, is not a problem. On a touch device it may be even faster to input the keyword with the keyboard.
The JavaScript
newlispEvalStr(...) function now returns a string, just like the original newlisp.dylib/so/dll would do.
Now you can write applications where client-side newLISP code, HTML and JavaScript are all integrated into one HTML page. This is the new demo app demonstrating this (1):
http://www.newlisp.org/newlisp-js/app.html
and the whole package:
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
(1) do 'view source' on your browser to see how it is done in a small page plus newlisp-js-lib.js
ps: there are no length restrictions of JavaScript anymore in
eval-string-js
Re: newLISP in a browser
Posted: Wed Jan 15, 2014 5:57 pm
by Lutz
Some UI changes to accommodate the new
save button. It does save the current editor content to the browser local storage. This is a storage area on your local device offered by all mayor browsers. After save, you can shut down the browser. When you load the editor again it automatically retrieves the last editor content.
The size of newlisp-js-lib.js and it's compressed version have also been reduced and there are some changes to the README page accessible with
info button and app.html accessible from the README page.
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
You can now develop in all three languages: newLISP, JavaScript and HTML and any mixture of the three on the desktop/laptop or a mobile device (currently optimized for iOS with 1024x768 pixels). Have not tried on an retina iPad which has more pixels but the same screen proportions.
Re: newLISP in a browser
Posted: Fri Jan 17, 2014 12:41 am
by Lutz
Eliminated errant behavior when using cleaned out browser or using a browser for the first time with the editor/IDE.
The
eval button now only prints the return values of the
last expression, more working like the newLISP ‘load’ function or the
JS button when evaluating JavaScript.
The TAB key now works inside the editor area inserting 4 spaces. Before, it would leave the editor text box jumping to the next HTML control on the page.
A better visible cursor when the editor area has a dark background.
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
Re: newLISP in a browser
Posted: Fri Jan 17, 2014 4:51 pm
by Lutz
A fix for the save button on non-mobile platforms in the last version.
The
+ and
- button now hit limits to avoid flipping to the bottom by the log column.
http://www.newlisp.org/downloads/develo ... 10.5.7.zip
Ps: If any layout problems persists, it is because of saved layout settings. Worst case clear browsing data in 'Privacy Settings'
Re: newLISP in a browser
Posted: Fri Jan 17, 2014 5:32 pm
by HPW
Hello,
Not sure which Version did work, but the last 2 Versions does not work for me on IE11 on Win 7.
But it is only index.html which does not return from downloading.
Layout stays small.
app.html does work.
On Chrome both work.
Edit: Just test a online Version and there it works with IE11. So it does not work on local file-System and answering the security question to allow blocked Content.
Regards
Hans-Peter
Re: newLISP in a browser
Posted: Fri Jan 17, 2014 11:14 pm
by Lutz
I see the same with IE on windows local filesystem, it refuses to load the newlisp-js-lib.js and stays in "Downloading..". Chrome and Firefox do fine on Windows and local file system. I wonder if there are some settings inside IE which can be changed by the user. It seems not to be some inherent capability of IE, because it works on web installations.
At the moment, I am not putting too much work into making IE work under all circumstances, but will guarantee for Chrome and Firefox always to work on Windows local and web and for OSX Safari, Chrome and Firefox local filesystem and web.
When the the boxes appear stacked or else wrong, the font is either to big (do a Ctrl minus) or switch layout a couple of times, then do save to remember the new settings. For really big fonts you need certain minimum browser window size, which may not be available due to screen size restrictions. It should work for bigger fonts often used by older people.
Also, my online installation changes frequently, as it is the only way for me to test the iPad. So sometimes I am editing the files or imnstall a new newlisp-jz-10.5.7.zip. Then things may not work for a few minutes.
Re: newLISP in a browser
Posted: Sat Jan 18, 2014 6:09 am
by HPW
I only wonder that it works before and that app.html still works.
Of cource not a real problem as Long we have alternatives. ;-)
Regards
Re: newLISP in a browser
Posted: Sat Jan 18, 2014 6:38 am
by Lutz
app.html doesn't access the local file-system or local browser storage.