# HG changeset patch # User bgo-osimis # Date 1551010994 -3600 # Node ID 6d62fc8a6988cff65ed4ce248adce13d410d9993 # Parent d79f78971fae5a47a011899a25365496a9e747e8 Web demonstrator for codegen ongoing work diff -r d79f78971fae -r 6d62fc8a6988 Resources/CodeGeneration/testWasmIntegrated/DefaultLibrary.js --- a/Resources/CodeGeneration/testWasmIntegrated/DefaultLibrary.js Sun Feb 24 10:11:38 2019 +0100 +++ b/Resources/CodeGeneration/testWasmIntegrated/DefaultLibrary.js Sun Feb 24 13:23:14 2019 +0100 @@ -3,9 +3,12 @@ mergeInto(LibraryManager.library, { // each time the Application updates its status, it may signal it through this method. i.e, to change the status of a button in the web interface // It needs to be put in this file so that the emscripten SDK linker knows where to find it. - UpdateApplicationStatusFromCpp: function(statusUpdateMessage) { + SendFreeTextFromCppJS: function(statusUpdateMessage) { var statusUpdateMessage_ = UTF8ToString(statusUpdateMessage); - UpdateWebApplication(statusUpdateMessage_); + SendFreeTextFromCpp(statusUpdateMessage_); + }, + SendMessageFromCppJS: function(statusUpdateMessage) { + var statusUpdateMessage_ = UTF8ToString(statusUpdateMessage); + SendMessageFromCpp(statusUpdateMessage_); } }); - \ No newline at end of file diff -r d79f78971fae -r 6d62fc8a6988 Resources/CodeGeneration/testWasmIntegrated/build-web.sh --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/Resources/CodeGeneration/testWasmIntegrated/build-web.sh Sun Feb 24 13:23:14 2019 +0100 @@ -0,0 +1,22 @@ +#!/bin/bash +set -e + +mkdir -p build-final + +# compile TS to JS +tsc --module commonjs --sourceMap -t ES2015 --outDir "build-tsc/" build-wasm/testWasmIntegratedCpp_generated.ts testWasmIntegrated.ts + +# bundle all JS files to final build dir +browserify "build-wasm/testWasmIntegratedCpp.js" "build-tsc/build-wasm/testWasmIntegratedCpp_generated.js" "build-tsc/testWasmIntegrated.js" -o "build-final/testWasmIntegratedApp.js" + +# copy HTML start page to output dir +cp testWasmIntegrated.html build-final/ + +# copy styles to output dir +cp styles.css build-final/ + +# copy WASM binary to output dir +cp build-wasm/testWasmIntegratedCpp.wasm build-final/ + +sudo python3 serve.py + diff -r d79f78971fae -r 6d62fc8a6988 Resources/CodeGeneration/testWasmIntegrated/build.sh --- a/Resources/CodeGeneration/testWasmIntegrated/build.sh Sun Feb 24 10:11:38 2019 +0100 +++ b/Resources/CodeGeneration/testWasmIntegrated/build.sh Sun Feb 24 13:23:14 2019 +0100 @@ -11,23 +11,7 @@ ninja -echo - cd .. -mkdir -p build-final - -# compile TS to JS -tsc --module commonjs --sourceMap -t ES2015 --outDir "build-tsc/" build-wasm/testWasmIntegratedCpp_generated.ts testWasmIntegrated.ts - -# bundle all JS files to final build dir -browserify "build-wasm/testWasmIntegratedCpp.js" "build-tsc/build-wasm/testWasmIntegratedCpp_generated.js" "build-tsc/testWasmIntegrated.js" -o "build-final/testWasmIntegratedApp.js" +./build-web.sh -# copy HTML start page to output dir -cp testWasmIntegrated.html build-final/ - -# copy WASM binary to output dir -cp build-wasm/testWasmIntegratedCpp.wasm build-final/ - - - diff -r d79f78971fae -r 6d62fc8a6988 Resources/CodeGeneration/testWasmIntegrated/main.cpp --- a/Resources/CodeGeneration/testWasmIntegrated/main.cpp Sun Feb 24 10:11:38 2019 +0100 +++ b/Resources/CodeGeneration/testWasmIntegrated/main.cpp Sun Feb 24 13:23:14 2019 +0100 @@ -3,12 +3,15 @@ int main() { - std::cout << "Hello world from testWasmIntegrated!" << std::endl; + std::cout << "Hello world from testWasmIntegrated! (this is sent from C++)" << std::endl; } +extern "C" void SendMessageFromCppJS(std::string message); +extern "C" void SendFreeTextFromCppJS(std::string message); + void EMSCRIPTEN_KEEPALIVE StartWasmApplication(const char* baseUri) { - printf("StartWasmApplication\n"); + printf("Hello! (this is sent from C++)\n"); // // recreate a command line from uri arguments and parse it // boost::program_options::variables_map parameters; @@ -26,5 +29,5 @@ // // viewport->SetSize(width_, height_); // printf("StartWasmApplication - completed\n"); - } - + SendFreeTextFromCppJS("Hello world from C++!"); +} diff -r d79f78971fae -r 6d62fc8a6988 Resources/CodeGeneration/testWasmIntegrated/serve.py --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/Resources/CodeGeneration/testWasmIntegrated/serve.py Sun Feb 24 13:23:14 2019 +0100 @@ -0,0 +1,27 @@ +# -*- coding: utf-8 -*- +# tested on python 3.4 ,python of lower version has different module organization. +# from https://gist.github.com/HaiyangXu/ec88cbdce3cdbac7b8d5 +import http.server +from http.server import HTTPServer, BaseHTTPRequestHandler +import socketserver + +PORT = 8080 + +Handler = http.server.SimpleHTTPRequestHandler + +Handler.extensions_map = { + '.manifest': 'text/cache-manifest', + '.html': 'text/html', + '.png': 'image/png', + '.jpg': 'image/jpg', + '.svg': 'image/svg+xml', + '.wasm': 'application/wasm', + '.css': 'text/css', + '.js': 'application/x-javascript', + '': 'application/octet-stream', # Default +} + +httpd = socketserver.TCPServer(("", PORT), Handler) + +print("serving at port", PORT) +httpd.serve_forever() diff -r d79f78971fae -r 6d62fc8a6988 Resources/CodeGeneration/testWasmIntegrated/styles.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/Resources/CodeGeneration/testWasmIntegrated/styles.css Sun Feb 24 13:23:14 2019 +0100 @@ -0,0 +1,46 @@ +.TestWasm-grid-container { + display: grid; + grid-template-columns: 0.55fr 0.55fr 0.55fr 0.55fr 0.6fr 1.1fr 1.1fr; + grid-template-rows: 1.1fr 0.9fr 0.2fr 0.3fr 0.1fr 0.3fr 0.1fr; + grid-template-areas: + "SerializedInput SerializedInput SerializedInput SerializedInput Trigger CppOutput CppOutput" + "SerializedInput SerializedInput SerializedInput SerializedInput Trigger CppOutput CppOutput" + ". . . . . . ." + "Test1 Test2 Test3 Test4 . . ." + ". . . . . . ." + "Test5 Test6 Test7 Test8 . . ." + ". . . . . . ." + ". . . . . . ." + ; + height: 480px; + } + +.TestWasm-SerializedInput { grid-area: SerializedInput; } + +.TestWasm-CppOutput { grid-area: CppOutput; } + +.TestWasm-Trigger { + grid-area: Trigger; + align-items: center; + text-align: center; +} + +.TestWasm-Test1 { grid-area: Test1; } + +.TestWasm-Test2 { grid-area: Test2; } + +.TestWasm-Test3 { grid-area: Test3; } + +.TestWasm-Test4 { grid-area: Test4; } + +.TestWasm-Test5 { grid-area: Test5; } + +.TestWasm-Test6 { grid-area: Test6; } + +.TestWasm-Test7 { grid-area: Test7; } + +.TestWasm-Test8 { grid-area: Test8; } + +.TestWasm-button { + width:80px; +} diff -r d79f78971fae -r 6d62fc8a6988 Resources/CodeGeneration/testWasmIntegrated/testWasmIntegrated.html --- a/Resources/CodeGeneration/testWasmIntegrated/testWasmIntegrated.html Sun Feb 24 10:11:38 2019 +0100 +++ b/Resources/CodeGeneration/testWasmIntegrated/testWasmIntegrated.html Sun Feb 24 13:23:14 2019 +0100 @@ -5,17 +5,65 @@ - - - - - Simple Viewer + Javascript to WASM message passing + + + +
+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + - -
+ + + +
+ + diff -r d79f78971fae -r 6d62fc8a6988 Resources/CodeGeneration/testWasmIntegrated/testWasmIntegrated.ts --- a/Resources/CodeGeneration/testWasmIntegrated/testWasmIntegrated.ts Sun Feb 24 10:11:38 2019 +0100 +++ b/Resources/CodeGeneration/testWasmIntegrated/testWasmIntegrated.ts Sun Feb 24 13:23:14 2019 +0100 @@ -1,13 +1,32 @@ export var SendMessageToStoneApplication: Function = null; -function SelectTool(toolName: string) { - var command = { - command: "selectTool:" + toolName, - commandType: "generic-no-arg-command", - args: { - } - }; - SendMessageToStoneApplication(JSON.stringify(command)); +// install handlers +document.querySelectorAll(".TestWasm-button").forEach((e) => { + (e as HTMLButtonElement).addEventListener("click", () => { + ButtonClick(e.attributes["tool-selector"].value); + }); +}); + +let stockSerializedMessages = new Map(); + +stockSerializedMessages["Test 1"] = "Test 1 stock message fgdgg"; +stockSerializedMessages["Test 2"] = "Test 2 stock message bccbbbbbb"; +stockSerializedMessages["Test 3"] = "Test 3 stock message sdfsfsdfsdf"; +stockSerializedMessages["Test 4"] = "Test 4 stock message 355345345"; +stockSerializedMessages["Test 5"] = "Test 5 stock message 34535"; +stockSerializedMessages["Test 6"] = "Test 6 stock message xcvcxvx"; +stockSerializedMessages["Test 7"] = "Test 7 stock message fgwqewqdgg"; +stockSerializedMessages["Test 8"] = "Test 8 stock message fgfsdfsdgg"; + +function ButtonClick(buttonName: string) { + if (buttonName.startsWith('Test ')) { + let e : HTMLTextAreaElement = document.getElementById('TestWasm-SerializedInput') as HTMLTextAreaElement; + e.value = stockSerializedMessages[buttonName]; + } + else if(buttonName == 'Trigger') + { + console.error('Not implemented!') + } } ( window).StoneFrameworkModule = { @@ -34,12 +53,7 @@ totalDependencies: 0 }; -// install "SelectTool" handlers -document.querySelectorAll("[tool-selector]").forEach((e) => { - (e as HTMLButtonElement).addEventListener("click", () => { - SelectTool(e.attributes["tool-selector"].value); - }); -}); + // this method is called "from the C++ code" when the StoneApplication is updated. // it can be used to update the UI of the application