From f31de20039e2cfc232ca7d0d26bdcd64f4b4b7a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9a=20Saviot?= Date: Mon, 23 Mar 2020 17:32:29 +0100 Subject: [PATCH 01/26] [ion/android] Hide the status bar and navigation buttons This is a hack, we should find why this was broken after v12. --- .../java/com/numworks/calculator/EpsilonActivity.java | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/ion/src/simulator/android/src/java/com/numworks/calculator/EpsilonActivity.java b/ion/src/simulator/android/src/java/com/numworks/calculator/EpsilonActivity.java index 23301615e..e9e41f874 100644 --- a/ion/src/simulator/android/src/java/com/numworks/calculator/EpsilonActivity.java +++ b/ion/src/simulator/android/src/java/com/numworks/calculator/EpsilonActivity.java @@ -62,4 +62,13 @@ public class EpsilonActivity extends SDLActivity { ); } + @Override + protected void onCreate(Bundle savedInstanceState) { + /* This is done to hide the status bar and the bottom navigation buttons. + * TODO: This was not needed for v12 of Epsilon, find out why and make a + * proper fix? */ + super.onCreate(savedInstanceState); + setWindowStyle(true); + } + } From 05d24e0c61686712cb1f9e31fc005d65543c6670 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?L=C3=A9a=20Saviot?= Date: Tue, 24 Mar 2020 09:42:25 +0100 Subject: [PATCH 02/26] [ion/android] Longer comment on Home button hiding fix --- .../java/com/numworks/calculator/EpsilonActivity.java | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/ion/src/simulator/android/src/java/com/numworks/calculator/EpsilonActivity.java b/ion/src/simulator/android/src/java/com/numworks/calculator/EpsilonActivity.java index e9e41f874..6a1c4f159 100644 --- a/ion/src/simulator/android/src/java/com/numworks/calculator/EpsilonActivity.java +++ b/ion/src/simulator/android/src/java/com/numworks/calculator/EpsilonActivity.java @@ -65,8 +65,14 @@ public class EpsilonActivity extends SDLActivity { @Override protected void onCreate(Bundle savedInstanceState) { /* This is done to hide the status bar and the bottom navigation buttons. - * TODO: This was not needed for v12 of Epsilon, find out why and make a - * proper fix? */ + * + * In SDLActivity::onCreate, setWindowStyle(false) is called, which means + * the fullscreen mode is put to false. We call again the method here with + * true, in order not to modify the external sources. + * + * TODO: This was not needed for v12 of Epsilon, even though + * setWindowStyle(false) was already called in SDLActivity::onCreate. Find + * out why and make a proper fix? */ super.onCreate(savedInstanceState); setWindowStyle(true); } From edbd879b4bdb549538fe00bee872f381d4c2fd1c Mon Sep 17 00:00:00 2001 From: Romain Goyet Date: Sat, 21 Mar 2020 21:30:34 -0400 Subject: [PATCH 03/26] [ion] Modularize the HTML simulator --- build/rules.mk | 5 + build/toolchain.emscripten.mak | 1 + ion/src/simulator/web/Makefile | 6 +- ion/src/simulator/web/simulator-keyboard.html | 54 +++++++ ion/src/simulator/web/simulator-setup.js | 47 +++++++ .../{simulator.html => simulator.html.inc} | 133 ++++-------------- 6 files changed, 135 insertions(+), 111 deletions(-) create mode 100644 ion/src/simulator/web/simulator-keyboard.html create mode 100644 ion/src/simulator/web/simulator-setup.js rename ion/src/simulator/web/{simulator.html => simulator.html.inc} (56%) diff --git a/build/rules.mk b/build/rules.mk index f1296d00a..d356225d0 100644 --- a/build/rules.mk +++ b/build/rules.mk @@ -31,6 +31,11 @@ $(eval $(call rule_for, \ $$(CXX) $$(CXXFLAGS) $$(SFLAGS) -c $$< -o $$@ \ )) +$(eval $(call rule_for, \ + CPP, %, %.inc, \ + $$(CPP) -P $$< $$@ \ +)) + ifeq ($(OS),Windows_NT) # Work around command-line length limit # On Msys2 the max command line is 32 000 characters. Our standard LD command diff --git a/build/toolchain.emscripten.mak b/build/toolchain.emscripten.mak index 10f39df5c..1fb096fd0 100644 --- a/build/toolchain.emscripten.mak +++ b/build/toolchain.emscripten.mak @@ -1,6 +1,7 @@ CC = emcc CXX = emcc LD = emcc +CPP = cpp EMSCRIPTEN_ASYNC_SYMBOLS = \ SAFE_HEAP_LOAD \ diff --git a/ion/src/simulator/web/Makefile b/ion/src/simulator/web/Makefile index b31be6f0b..4ae2c8882 100644 --- a/ion/src/simulator/web/Makefile +++ b/ion/src/simulator/web/Makefile @@ -26,12 +26,12 @@ endif DEFAULT = $(BUILD_DIR)/simulator.zip -$(BUILD_DIR)/simulator%zip: $(BUILD_DIR)/epsilon%packed.js +$(BUILD_DIR)/simulator%zip: $(BUILD_DIR)/epsilon%packed.js $(BUILD_DIR)/ion/src/simulator/web/simulator.html @rm -rf $(basename $@) @mkdir -p $(basename $@) - @cp $^ $(basename $@)/epsilon.js + @cp $< $(basename $@)/epsilon.js @cp ion/src/simulator/assets/background.jpg $(basename $@)/ - @cp ion/src/simulator/web/simulator.html $(basename $@)/ + @cp $(BUILD_DIR)/ion/src/simulator/web/simulator.html $(basename $@)/ $(call rule_label,ZIP) @zip -r -9 -j $@ $(basename $@) > /dev/null @rm -rf $(basename $@) diff --git a/ion/src/simulator/web/simulator-keyboard.html b/ion/src/simulator/web/simulator-keyboard.html new file mode 100644 index 000000000..86425fc37 --- /dev/null +++ b/ion/src/simulator/web/simulator-keyboard.html @@ -0,0 +1,54 @@ +
+
+ + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + +
+
diff --git a/ion/src/simulator/web/simulator-setup.js b/ion/src/simulator/web/simulator-setup.js new file mode 100644 index 000000000..04f16adfb --- /dev/null +++ b/ion/src/simulator/web/simulator-setup.js @@ -0,0 +1,47 @@ +/* To use this file you should adhere to the following conventions: + * - Main canvas has id #canvas + * - Secondary canvas (fullscreen on the side) has id #secondary-canvas + * - Calculator keyboard has id #keyboard */ + +var Module; + +(function () { + var mainCanvas = document.getElementById('canvas'); + var secondaryCanvasContext = document.getElementById('secondary-canvas').getContext('2d'); + var epsilonLanguage = document.documentElement.lang || window.navigator.language.split('-')[0]; + Module = { + canvas: mainCanvas, + arguments: ['--language', epsilonLanguage], + onDisplayRefresh: function() { + secondaryCanvasContext.drawImage(mainCanvas, 0, 0); + } + } + + Epsilon(Module); + + var spans = document.querySelectorAll('#keyboard span'); + for (var i=0; i< spans.length; i++) { + var span = spans[i]; + span.addEventListener('mousedown', function(e) { + Module._IonSimulatorKeyboardKeyDown(this.getAttribute('data-key')); + }); + span.addEventListener('mouseup', function(e) { + Module._IonSimulatorKeyboardKeyUp(this.getAttribute('data-key')); + }); + } +}()); + +function screenshot() { + // toDataURL needs the canvas to be refreshed + Module._IonDisplayForceRefresh(); + + var canvas = document.getElementById('canvas'); + var link = document.createElement('a'); + link.download = 'screenshot.png'; + link.href = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); + // TODO: Fixme??? + /* The following used to be "link.click()" but this doesn't work on Firefox. + * See https://stackoverflow.com/questions/32225904/programmatical-click-on-a-tag-not-working-in-firefox */ + // link.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window})); + link.click(); +} diff --git a/ion/src/simulator/web/simulator.html b/ion/src/simulator/web/simulator.html.inc similarity index 56% rename from ion/src/simulator/web/simulator.html rename to ion/src/simulator/web/simulator.html.inc index 6b25e7b52..0c3d93440 100644 --- a/ion/src/simulator/web/simulator.html +++ b/ion/src/simulator/web/simulator.html.inc @@ -1,3 +1,5 @@ +#define KEYBOARD #keyboard + @@ -65,7 +67,7 @@ a.action svg { max-height: 92.0vh; max-width: 100%; display: block; } - .calculator .screen { + .calculator #canvas { position: absolute; top: 8.5%; left: 16.25%; @@ -84,84 +86,84 @@ a.action svg { display: inline-block; margin-right: 10px; } - .calculator .keyboard { + KEYBOARD { position: absolute; top: 38.5%; left: 10%; width: 81%; bottom: 5%; } - .calculator .keyboard span { + KEYBOARD span { cursor: pointer; border-radius: 40%; display: block; float: left; } - .calculator .keyboard span:hover { + KEYBOARD span:hover { background-color: rgba(0, 0, 0, 0.1); } - .calculator .keyboard span:active { + KEYBOARD span:active { background-color: rgba(0, 0, 0, 0.2); } - .calculator .keyboard .nav { + KEYBOARD .nav { position: absolute; top: 0; height: 27%; width: 100%; } - .calculator .keyboard .nav span { + KEYBOARD .nav span { position: absolute; } - .calculator .keyboard .nav .left { + KEYBOARD .nav .left { top: 36%; left: 2%; width: 15%; height: 28%; } - .calculator .keyboard .nav .right { + KEYBOARD .nav .right { top: 36%; left: 17%; width: 15%; height: 28%; } - .calculator .keyboard .nav .top { + KEYBOARD .nav .top { top: 7%; left: 12%; width: 10%; height: 40%; } - .calculator .keyboard .nav .bottom { + KEYBOARD .nav .bottom { top: 53%; left: 12%; width: 10%; height: 40%; } - .calculator .keyboard .nav .home { + KEYBOARD .nav .home { top: 15%; left: 41%; width: 16%; height: 33%; } - .calculator .keyboard .nav .power { + KEYBOARD .nav .power { top: 54%; left: 42%; width: 16%; height: 33%; } - .calculator .keyboard .nav .ok { + KEYBOARD .nav .ok { top: 31%; left: 67%; width: 13%; height: 38%; } - .calculator .keyboard .nav .back { + KEYBOARD .nav .back { top: 31%; left: 84%; width: 13%; height: 38%; } - .calculator .keyboard .functions { + KEYBOARD .functions { position: absolute; top: 26.75%; left: 0.5%; width: 98%; } - .calculator .keyboard .functions span { + KEYBOARD .functions span { margin: 1.7% 1%; width: 14.65%; height: 0; padding-top: 10%; } - .calculator .keyboard .digits { + KEYBOARD .digits { position: absolute; top: 56.5%; left: 0.5%; width: 98%; } - .calculator .keyboard .digits span { + KEYBOARD .digits span { margin: 1.8% 2%; width: 16%; height: 0; @@ -173,61 +175,8 @@ a.action svg {
NumWorks Calculator - -
-
- - - - - - - - -
-
- - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - - - -
-
+ +#include "simulator-keyboard.html"
@@ -239,46 +188,14 @@ a.action svg {
- +