OK, the text and images from your exercise in Part 1 are up and ready to go in the Axeda Platform, so the next step is creating a custom object, coded in Groovy, which will provide the data to the HTML front-end. This example checks for the first picture uploaded for any devices created on the model “connexus_user_model.”
This tutorial assumes you will be using Axeda Artisan and Maven to develop your custom object. Instructions on setting up Axeda Artisan and Maven are available at http://developer.axeda.com/learn/by-type/technical-article/developing-axeda-artisan. The source for this example as an artisan project is attached in a zip file at the end of the article.
The Groovy Scaffold
Create a new Axeda Artisan project and name your Groovy script “BUG_JSON.groovy”.
Add the following imports to the beginning of the script:
import com.axeda.drm.sdk.Context
import com.axeda.drm.sdk.device.*
import groovy.xml.MarkupBuilder
import com.axeda.drm.sdk.data.UploadedFile
import com.axeda.drm.sdk.data.UploadedFileFinder
import com.axeda.drm.sdk.data.CurrentDataFinder
import com.axeda.drm.sdk.data.DataValue
import net.sf.json.JSONArray
Create a try … catch to start off:
try {
}
catch (Exception ex) {
}
Declare the model specified in the BUG script, “connexus_user_model”, and a File variable, then set the context.
def modelname = "connexus_user_model";
File f = null
Context ctx = Context.create();
The DeviceFinder
Within the try block, use DeviceFinder to produce a list of all devices based on the model.
The JSON Encoding
Next, create the output as a JSON collection.
The Catch Statement
Write the catch statement in case of any errors:
This will output an xml-formatted Groovy Exception.
The Image Data
Paste in the following code to get the image bytes for the base 64 encoding:
The Payload
And now, return the content:
return ['Content-Type': 'application/json', 'Content': jsonstring]
Your output should look like this:
{
"serial": "connexus_user<<timestamp>>",
"dataitem": "Excited!",
"image": "<<image base 64 source>>"
},The HTML Frontend
The last part is creating an HTML frontend to display the images. Create this file in the webapp directory of your Artisan project. The Scripto call is accomplished using an XMLHttpRequest in Javascript. W3 Schools has a tutorial explaining the XMLHttpRequest at http://www.w3schools.com/XML/xml_http.asp.
The HTML Scaffold
Start off with a bare bones html page with a login form and an unordered list:
The Scripto Call
This form will require your Axeda login credentials. Add in a “Go” button above the </form> tag that calls the custom object via Scripto:
<input value="Go" type="button" onclick='JavaScript: callScripto()'/>
Next, create the callScripto() function in the head section.
First, add the javascript opening script headers and declare the variables. We'll also add in a script to help IE 8 render the JSON object, which it doesn't do natively. The json2.js script is available at https://github.com/douglascrockford/JSON-js/blob/master/json2.js .
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/json2.js"></script>
<script language="Javascript" type="text/javascript">
var scriptoURL = "http://dev6.axeda.com/services/v1/rest/Scripto/execute/"; // please note the attached demo uses m2m.axeda.com
var scriptName1 = " BUG_JSON ";
Notice we’re including the jQuery library. This is useful for the display of the images and is NOT needed for the Scripto call.
Create the callScripto() function itself.
The JSON Parsing
The callScripto() function calls another function to process its output. The function getjson() takes the XMLHttpRequest response object and parses it as a JSON Array Object. If you are using Firebug, take a look at the raw response produced by console.log(strjson[obj]).
The Image Insertion
From here, we have the image data available and can display it however we like. Notice that only pure Javascript has been used up until this point. For the rendering of the images, let’s take advantage of the jQuery library, documentation available at http://jquery.com/.
This section completes the for loop:
That’s it! You’re free to add styling to your page and images. A live demo is available at http://m2m.axeda.com/apps/bugjsondemo/index.html .
Download the source for this tutorial from the link below:
The Java, Groovy, HTML files, plus the tutorial as a PDF and a screenshot .................................. bugjsondemo.zip
The Groovy and HTML files as an artisan project .......................................................................... bugconnexus-project.zip
