Mercurial > hg > orthanc-stone
changeset 498:6d62fc8a6988 bgo-commands-codegen
Web demonstrator for codegen ongoing work
| author | bgo-osimis |
|---|---|
| date | Sun, 24 Feb 2019 13:23:14 +0100 |
| parents | d79f78971fae |
| children | baa9e1e932db |
| files | Resources/CodeGeneration/testWasmIntegrated/DefaultLibrary.js Resources/CodeGeneration/testWasmIntegrated/build-web.sh Resources/CodeGeneration/testWasmIntegrated/build.sh Resources/CodeGeneration/testWasmIntegrated/main.cpp Resources/CodeGeneration/testWasmIntegrated/serve.py Resources/CodeGeneration/testWasmIntegrated/styles.css Resources/CodeGeneration/testWasmIntegrated/testWasmIntegrated.html Resources/CodeGeneration/testWasmIntegrated/testWasmIntegrated.ts |
| diffstat | 8 files changed, 193 insertions(+), 46 deletions(-) [+] |
line wrap: on
line diff
--- 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
--- /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 +
--- 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/ - - -
--- 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++!"); +}
--- /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()
--- /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; +}
--- 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 @@ <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <!-- Disable pinch zoom on mobile devices --> - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> - <meta name="HandheldFriendly" content="true" /> - - <title>Simple Viewer</title> + <title>Javascript to WASM message passing</title> <link href="styles.css" rel="stylesheet" /> + <!-- <link href="styles2.css" rel="stylesheet" /> --> + <!-- + <link href="testwasm_bootstrap.css" rel="stylesheet" /> + --> + <body> + <div class="TestWasm-grid-container"> + <textarea id="TestWasm-SerializedInput" class="TestWasm-SerializedInput"> + Serialized data should be put here. + </textarea> + <textarea id="TestWasm-CppOutput" class="TestWasm-CppOutput"> + Free text and messages from C++ will appear here. + </textarea> + <div class="TestWasm-Trigger"> + <button class="TestWasm-button TestWasm-hvcenter" tool-selector="Trigger">Send message</button> + </div> + <div class="TestWasm-Test1"> + <button class="TestWasm-button" tool-selector="Test 1">Test 1</button> + </div> + <div class="TestWasm-Test2"> + <button class="TestWasm-button" tool-selector="Test 2">Test 2</button> + </div> + <div class="TestWasm-Test3"> + <button class="TestWasm-button" tool-selector="Test 3">Test 3</button> + </div> + <div class="TestWasm-Test4"> + <button class="TestWasm-button" tool-selector="Test 4">Test 4</button> + </div> + <div class="TestWasm-Test5"> + <button class="TestWasm-button" tool-selector="Test 5">Test 5</button> + </div> + <div class="TestWasm-Test6"> + <button class="TestWasm-button" tool-selector="Test 6">Test 6</button> + </div> + <div class="TestWasm-Test7"> + <button class="TestWasm-button" tool-selector="Test 7">Test 7</button> + </div> + <div class="TestWasm-Test8"> + <button class="TestWasm-button" tool-selector="Test 8">Test 8</button> + </div> + + <!-- <button class="TestWasm-button" class="TestWasm-Test1" tool-selector="Test 1">Test 1</button> + <button class="TestWasm-button" class="TestWasm-Test2" tool-selector="Test 2">Test 2</button> + <button class="TestWasm-button" class="TestWasm-Test3" tool-selector="Test 3">Test 3</button> + <button class="TestWasm-button" class="TestWasm-Test4" tool-selector="Test 4">Test 4</button> --> -<body> - <div id="toolbox" style="height: 50px"> + + + <!-- <div class="Trigger"></div> + <div class="Test1"></div> + <div class="Test2"></div> + <div class="Test3"></div> + <div class="Test4"></div> --> + </div> + + <!-- <div id="toolbox" style="height: 50px"> <button tool-selector="line-measure" class="tool-selector">line</button> - </div> + </div> --> <script type="text/javascript" src="testWasmIntegratedApp.js"></script> </body>
--- 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<string,string>(); + +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!') + } } (<any> 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