diff --git a/demo/simple.css b/demo/simple.css index 7d31de0a..84099623 100644 --- a/demo/simple.css +++ b/demo/simple.css @@ -2,13 +2,9 @@ body { background-color: #eae6d1; font-family: sans-serif; } -progress { - vertical-align: top; -} canvas { - display: block; - margin-left: auto; - margin-right: auto; + position: absolute; + background: #000; cursor: default; -webkit-user-select: none; -moz-user-select: none; @@ -16,3 +12,19 @@ canvas { -o-user-select: none; user-select: none; } +div#sqHeader { + position: absolute; + top: 0; + left: 0; + right: 0; + padding: 10px; + border-bottom: 6px double gray; +} +div#sqFooter { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 10px; + border-top: 6px double gray; +} diff --git a/demo/simple.html b/demo/simple.html index 69924f99..a1034715 100644 --- a/demo/simple.html +++ b/demo/simple.html @@ -40,14 +40,17 @@ +

SqueakJS

- Loading image ... - +
+ +

SqueakJS is a Squeak VM written in pure JavaScript by Bert Freudenberg. It is normally developed and used in the Lively environment. This page demonstrates that SqueakJS also works outside Lively (and e.g. on an iPad). For the full interface, please visit the Lively SqueakJS page.

+
Fork me on GitHub diff --git a/demo/simple.js b/demo/simple.js index 2f08d193..01673b69 100644 --- a/demo/simple.js +++ b/demo/simple.js @@ -24,16 +24,13 @@ var fullscreen = navigator.standalone; window.onload = function() { - var canvas = document.getElementsByTagName("canvas")[0]; if (fullscreen) { document.body.style.margin = 0; document.body.style.backgroundColor = 'black'; - ['h1','p','div'].forEach(function(n){document.getElementsByTagName(n)[0].style.display="none"}); - var scale = screen.width / canvas.width; - var head = document.getElementsByTagName("head")[0]; - head.innerHTML += ''; + sqHeader.style.display = 'none'; + sqFooter.style.display = 'none'; } - var display = createSqueakDisplay(canvas, {swapButtons: true}); + var display = createSqueakDisplay(sqCanvas, {fullscreen: fullscreen, header: sqHeader, footer: sqFooter, swapButtons: true}); var loop; function runImage(buffer, name) { window.clearTimeout(loop); @@ -49,9 +46,9 @@ window.onload = function() { if (typeof ms === 'number') { // continue running loop = window.setTimeout(run, ms); } else { // quit - canvas.style.webkitTransition = "-webkit-transform 0.5s"; - canvas.style.webkitTransform = "scale(0)"; - window.setTimeout(function(){canvas.style.display = 'none'}, 500); + sqCanvas.style.webkitTransition = "-webkit-transform 0.5s"; + sqCanvas.style.webkitTransform = "scale(0)"; + window.setTimeout(function(){sqCanvas.style.display = 'none'}, 500); } }); } catch(error) { @@ -92,15 +89,13 @@ window.onload = function() { }); function downloadImage(url) { display.showBanner("Downloading " + url); - var progress = document.getElementsByTagName("progress")[0]; var rq = new XMLHttpRequest(); rq.open('GET', url); rq.responseType = 'arraybuffer'; rq.onprogress = function(e) { - if (e.lengthComputable) progress.value = 100 * e.loaded / e.total; + if (e.lengthComputable) display.showProgress(e.loaded / e.total); } rq.onload = function(e) { - progress.style.display = "none"; runImage(rq.response, url); }; rq.send(); diff --git a/etoys/etoys.css b/etoys/etoys.css index 7d31de0a..84099623 100644 --- a/etoys/etoys.css +++ b/etoys/etoys.css @@ -2,13 +2,9 @@ body { background-color: #eae6d1; font-family: sans-serif; } -progress { - vertical-align: top; -} canvas { - display: block; - margin-left: auto; - margin-right: auto; + position: absolute; + background: #000; cursor: default; -webkit-user-select: none; -moz-user-select: none; @@ -16,3 +12,19 @@ canvas { -o-user-select: none; user-select: none; } +div#sqHeader { + position: absolute; + top: 0; + left: 0; + right: 0; + padding: 10px; + border-bottom: 6px double gray; +} +div#sqFooter { + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 10px; + border-top: 6px double gray; +} diff --git a/etoys/etoys.js b/etoys/etoys.js index ed8df7ec..b29b840a 100644 --- a/etoys/etoys.js +++ b/etoys/etoys.js @@ -24,30 +24,23 @@ var fullscreen = navigator.standalone; window.onload = function() { - var canvas = document.getElementsByTagName("canvas")[0]; if (fullscreen) { document.body.style.margin = 0; document.body.style.backgroundColor = 'black'; - ['h1','p','div'].forEach(function(n){document.getElementsByTagName(n)[0].style.display="none"}); - var scale = screen.width / canvas.width; - var head = document.getElementsByTagName("head")[0]; - head.innerHTML += ''; - } else { - canvas.style.width = "80%"; + sqHeader.style.display = 'none'; + sqFooter.style.display = 'none'; } - var display = createSqueakDisplay(canvas, {fixedWidth: 1200, fixedHeight: 900}); + var display = createSqueakDisplay(sqCanvas, {fixedWidth: 1200, fixedHeight: 900, fullscreen: fullscreen, header: sqHeader, footer: sqFooter}); function loadAndRunImage(url) { var imageName = Squeak.splitFilePath(url).basename; display.showBanner("Downloading " + imageName); - var progress = document.getElementsByTagName("progress")[0]; var rq = new XMLHttpRequest(); rq.open('GET', url); rq.responseType = 'arraybuffer'; rq.onprogress = function(e) { - if (e.lengthComputable) progress.value = 100 * e.loaded / e.total; + if (e.lengthComputable) display.showProgress(e.loaded / e.total); } rq.onload = function(e) { - progress.style.display = "none"; display.showBanner("Initializing, please wait"); window.setTimeout(function(){ var image = new Squeak.Image(rq.response, imageName); @@ -59,9 +52,9 @@ window.onload = function() { if (typeof ms === 'number') { // continue running window.setTimeout(run, ms); } else { // quit - canvas.style.webkitTransition = "-webkit-transform 0.5s"; - canvas.style.webkitTransform = "scale(0)"; - window.setTimeout(function(){canvas.style.display = 'none'}, 500); + sqCanvas.style.webkitTransition = "-webkit-transform 0.5s"; + sqCanvas.style.webkitTransform = "scale(0)"; + window.setTimeout(function(){sqCanvas.style.display = 'none'}, 500); } }); } catch(error) { @@ -80,5 +73,5 @@ window.onload = function() { if (addToHomescreen.isStandalone) fullscreen = true; else addToHomescreen({ - appID: 'squeakjs.etoys.add2home', + appID: 'squeakjs.etoys.add2home', }); diff --git a/etoys/index.html b/etoys/index.html index e768994a..d111b23b 100644 --- a/etoys/index.html +++ b/etoys/index.html @@ -39,9 +39,11 @@ +

SqueakJS/Etoys

- Loading image ... - +
+ +

This is a very early version of SqueakJS running an Etoys image. Feedback and contributions welcome!

SqueakJS is a Squeak VM written in pure JavaScript by Bert Freudenberg. @@ -49,6 +51,7 @@

SqueakJS/Etoys

This page demonstrates that SqueakJS also works outside Lively (and e.g. on an iPad). For the full interface, please visit the Lively SqueakJS page.

+
Fork me on GitHub diff --git a/test/test-layout.html b/test/test-layout.html index dc424b64..34ae13f4 100644 --- a/test/test-layout.html +++ b/test/test-layout.html @@ -9,7 +9,6 @@ canvas { position: absolute; background: #000; - // positioned and sized by script } div#header { position: absolute;