Example : Added a pnacl example
authorDjomanix <johan.kayser@viacesi.fr>
Mon, 5 May 2014 19:02:53 +0000 (15:02 -0400)
committerDjomanix <johan.kayser@viacesi.fr>
Tue, 6 May 2014 18:26:12 +0000 (14:26 -0400)
Signed-off-by: Djomanix <johan.kayser@viacesi.fr>

examples/pnacl/converter/Makefile [new file with mode: 0644]
examples/pnacl/converter/README [new file with mode: 0644]
examples/pnacl/converter/converter.nit [new file with mode: 0644]
examples/pnacl/converter/converter/index.html [new file with mode: 0644]
examples/pnacl/converter/converter/js/functions.js [new file with mode: 0644]
examples/pnacl/converter/converter/js/pnacl_js.js [new file with mode: 0644]

diff --git a/examples/pnacl/converter/Makefile b/examples/pnacl/converter/Makefile
new file mode 100644 (file)
index 0000000..f8d2ca3
--- /dev/null
@@ -0,0 +1,2 @@
+default: 
+       ../../../bin/nitg --global --stacktrace none --no-main converter.nit
diff --git a/examples/pnacl/converter/README b/examples/pnacl/converter/README
new file mode 100644 (file)
index 0000000..220bc8d
--- /dev/null
@@ -0,0 +1,22 @@
+Steps to make the example work :
+
+1. Install the native client SDK (https://developer.chrome.com/native-client/sdk/download).
+
+2. Declare the environment variable NACL_SDK_ROOT as the root of the target platform within the SDK (ex: ~/nacl_sdk/pepper_34/) :
+       $ export NACL_SDK_ROOT=/path/to/nacl_sdk/pepper_[your_version]
+
+3. Compile the Nit code with: `nitg --global converter.nit` or `make`.
+
+You must use the '--global' option. Some features in the standard library are not supported by the NaCL platform, the global compiler do not try to compile them.
+
+4. Start a local server using: `make serve`.
+
+5. Set up the Chrome browser :
+ - PNaCl is enabled by default in Chrome version 31 and later.
+ - For a better development experience, it’s also recommended to disable the Chrome cache : 
+       - Open Chrome’s developer tools by clicking the menu icon menu-icon and choosing Tools > Developer tools.
+       - Click the gear icon gear-icon in the bottom right corner of the Chrome window.
+       - Under the “General” settings, check the box next to “Disable cache (while DevTools is open)”.
+       - Keep the Developer Tools pane open while developing Native Client applications.
+
+6. You can now access the application in Chrome at the address `http://localhost:5103/`.
diff --git a/examples/pnacl/converter/converter.nit b/examples/pnacl/converter/converter.nit
new file mode 100644 (file)
index 0000000..4cbf103
--- /dev/null
@@ -0,0 +1,127 @@
+# This file is part of NIT ( http://www.nitlanguage.org )
+#
+# Copyright 2014 Johan Kayser <kayser.johan@gmail.com>
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+# Example of a currency converter using PNaCl with Nit
+#
+# First imports the pnacl module
+# Then redefines the 'handle_dictionary' method
+# Finally creates a converter and initializes it
+
+import pnacl
+
+class Converter
+       super PnaclApp
+
+       # We have to redefine the method to do what we want when receiving a dictionary from JS
+       redef fun handle_dictionary(dictionary: PepperDictionary)
+       do
+               # Getting values from the dictionary
+               var from = dictionary["from"]
+               var to = dictionary["to"]
+               var value = dictionary["value"]
+
+               # If conversion to the same currency return the same value
+               if from isa String and to isa String then
+                       if from == "EUR" and to == "EUR" then
+                               if value isa String then
+                                       var rez = value.to_f
+                                       var d = new PepperDictionary
+                                       d["value"] = rez
+                                       post_dictionary d
+                               end
+                       end
+               end
+               # If conversion to the same currency return the same value
+               if from isa String and to isa String then
+                       if from == "CAD" and to == "CAD" then
+                               if value isa String then
+                                       var rez = value.to_f
+                                       var d = new PepperDictionary
+                                       d["value"] = rez
+                                       post_dictionary d
+                               end
+                       end
+               end
+               # If conversion to the same currency return the same value
+               if from isa String and to isa String then
+                       if from == "USD" and to == "USD" then
+                               if value isa String then
+                                       var rez = value.to_f
+                                       var d = new PepperDictionary
+                                       d["value"] = rez
+                                       post_dictionary d
+                               end
+                       end
+               end
+               # Converts EUR to CAD
+               if from == "EUR" and to == "CAD" then
+                       if value isa String then
+                               var rez = (value.to_f * 1.52) # April 30 2014
+                               var d = new PepperDictionary
+                               d["value"] = rez
+                               post_dictionary d
+                       end
+               end
+               # Converts EUR to USD
+               if from == "EUR" and to == "USD" then
+                       if value isa String then
+                               var rez = (value.to_f * 1.38640) # April 30 2014
+                               var d = new PepperDictionary
+                               d["value"] = rez
+                               post_dictionary d
+                       end
+               end
+               # Converts CAD to EUR
+               if from == "CAD" and to == "EUR" then
+                       if value isa String then
+                               var rez = (value.to_f * 0.65840) # April 30 2014
+                               var d = new PepperDictionary
+                               d["value"] = rez
+                               post_dictionary d
+                       end
+               end
+               # Converts CAD to USD
+               if from == "CAD" and to == "USD" then
+                       if value isa String then
+                               var rez = (value.to_f * 0.91240) # April 30 2014
+                               var d = new PepperDictionary
+                               d["value"] = rez
+                               post_dictionary d
+                       end
+               end
+               # Converts USD to EUR
+               if from == "USD" and to == "EUR" then
+                       if value isa String then
+                               var rez = (value.to_f * 0.721) # April 30 2014
+                               var d = new PepperDictionary
+                               d["value"] = rez
+                               post_dictionary d
+                       end
+               end
+               # Converts USD to CAD
+               if from == "USD" and to == "CAD" then
+                       if value isa String then
+                               var rez = (value.to_f * 1.095) # April 30 2014
+                               var d = new PepperDictionary
+                               d["value"] = rez
+                               post_dictionary d
+                       end
+               end
+       end
+end
+
+var converter = new Converter
+converter.initialize # Needed to correctly set up Nit control over the Pepper API
diff --git a/examples/pnacl/converter/converter/index.html b/examples/pnacl/converter/converter/index.html
new file mode 100644 (file)
index 0000000..539e4a9
--- /dev/null
@@ -0,0 +1,89 @@
+<!--# This file is part of NIT ( http://www.nitlanguage.org )
+#
+# Copyright 2014 Johan Kayser <kayser.johan@gmail.com>
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License. 
+-->
+<!DOCTYPE html>
+<html>
+<head>
+       <title>Converter</title>
+       <script src="js/pnacl_js.js"></script>
+       <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
+</head>
+<body>
+       <h1>Currency converter<small> with PNaCl and Nit</small></h1>
+       <form class="form-horizontal bg-success" role="form" style="padding-top:15px;padding-bottom:1px;">
+         <div class="form-group">
+           <label for="inputConvert" class="col-sm-2 control-label">Convert</label>
+           <div class="col-sm-9">
+               <div class="row">
+                 <div id="pre-input" class="col-xs-2">
+                   <input id="input" type="text" class="form-control" placeholder="ex: 300" required>
+                 </div>
+                 <div class="col-xs-3">
+                   <select id="from" class="form-control" required>
+                         <option selected="selected" disabled="disabled">Currency</option>
+                         <option>EUR</option>
+                         <option>CAD</option>
+                         <option>USD</option>
+                   </select>
+                 </div>
+               </div>
+           </div>
+         </div>
+         <div class="form-group">
+           <label for="inputTo" class="col-sm-2 control-label">to</label>
+           <div class="col-sm-9">
+                   <div class="row">
+                         <div class="col-xs-2">
+                           <input id="rez" type="text" class="form-control" placeholder=".col-xs-2" disabled="disabled" style="visibility: hidden">
+                         </div>
+                         <div class="col-xs-3">
+                           <select id="to" class="form-control" required>
+                               <option selected="selected" disabled="disabled">Currency</option>
+                               <option>EUR</option>
+                               <option>CAD</option>
+                               <option>USD</option>
+                           </select>
+                         </div>
+                       </div>
+                   </div>
+           </div>
+         </div>
+         <div class="form-group">
+           <div class="col-sm-offset-2 col-sm-10">
+             <button id="button" type="button" class="btn btn-success">Convert</button>
+           </div>
+         </div>
+       </form>
+       <p>
+               <div id="listener">
+                       <!-- Listeners calling functions in pnacl_js.js -->
+                       <script type="text/javascript">
+                               var listener = document.getElementById('listener');
+                               listener.addEventListener('load', moduleDidLoad, true);
+                               listener.addEventListener('message', handleMessage, true);
+                       </script>
+                       <!-- Embed bloc referencing to the manifest -->
+                       <embed id="converter"
+                               width=0 height=0
+                               src="converter.nmf"
+                               type="application/x-pnacl" />
+               </div>
+       </p>
+       <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+       <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
+       <script src="js/functions.js"></script>
+</body>
+</html>
diff --git a/examples/pnacl/converter/converter/js/functions.js b/examples/pnacl/converter/converter/js/functions.js
new file mode 100644 (file)
index 0000000..86f44a9
--- /dev/null
@@ -0,0 +1,35 @@
+// This file is part of NIT ( http://www.nitlanguage.org )
+//
+// Copyright 2014 Johan Kayser <kayser.johan@gmail.com>
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Checks that the text in the input is numeric and not null
+// and then if two currencies where chosen sends a dictionary to Nit.
+$( "#button" ).click(function() {
+  $("#pre-input").removeClass("has-error");
+  if (($('#input').val() == "")||($.isNumeric($('#input').val()) == false)) {
+       $("#pre-input").addClass("has-error");
+  }
+  else
+  {
+       if (($('#from').val() != null) && ($('#to').val() != null)) {
+               var dictionary = {
+                       value: parseFloat($('#input').val()).toFixed(2),
+                       from: $('#from').val(),
+                       to: $('#to').val(),
+               }
+               converterModule.postMessage(dictionary);
+       }
+  }
+});
diff --git a/examples/pnacl/converter/converter/js/pnacl_js.js b/examples/pnacl/converter/converter/js/pnacl_js.js
new file mode 100644 (file)
index 0000000..ee3a184
--- /dev/null
@@ -0,0 +1,36 @@
+// This file is part of NIT ( http://www.nitlanguage.org )
+//
+// Copyright 2014 Johan Kayser <kayser.johan@gmail.com>
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+converterModule = null;  // Global application object.
+
+// Indicate load success.
+function moduleDidLoad() {
+       converterModule = document.getElementById('converter');
+       // Send a message to the Native Client module.
+       if (converterModule != null) {
+               console.log('converterModule loaded.');
+       }
+}
+
+// The 'message' event handler. This handler is fired when the NaCl module
+// posts a message to the browser by calling PPB_Messaging.PostMessage()
+// (in C) or pp::Instance.PostMessage() (in C++).  This implementation
+// displays the result in the JS console, puts the result in the '#rez' input and make it visible.
+function handleMessage(message_event) {
+       console.log(message_event.data.value.valueOf());
+       $('#rez').val(message_event.data.value.valueOf().toFixed(2));
+       $('#rez').css('visibility', 'visible');
+}