About the example "Have a drink!"
-
Hello everyone,
I am newbie on Mango. I have installed Mango and getting it running. I saw the examples "Have a drink!" at :
http://mango.serotoninsoftware.com/exampleRemoteView.jspBut I don't know how to built it by myself. I have checked this forum and can't find clues. Does anyone can help me? Thanks ahead.
-
Here is the JSON export of the view. This will likely not import into your instance due to differences in point XIDs and such, but it should point you in the right direction.
{ "graphicalViews":[ { "name":"My remote view", "sharingUsers":[ ], "xid":"GV_530389", "anonymousAccess":"SET", "user":"mlohbihler", "viewComponents":[ { "content":"<h1>Sensors<\/h1>", "type":"HTML", "y":0, "x":14 }, { "min":0.0, "displayControls":false, "dynamicImage":"SmallDial", "max":100.0, "bkgdColorOverride":"", "dataPointXid":"DP_705279", "displayText":true, "nameOverride":"", "type":"DYNAMIC_GRAPHIC", "settableOverride":false, "y":47, "x":6 }, { "content":"Host server CPU idle and memory", "type":"HTML", "y":50, "x":105 }, { "min":0.0, "displayControls":true, "dynamicImage":"HorizontalLevel", "max":100.0, "bkgdColorOverride":"", "dataPointXid":"DP_705279", "displayText":false, "nameOverride":"", "type":"DYNAMIC_GRAPHIC", "settableOverride":false, "y":70, "x":105 }, { "min":0.0, "displayControls":false, "dynamicImage":"HorizontalLevel", "max":100.0, "bkgdColorOverride":"", "dataPointXid":"DP_483662", "displayText":true, "nameOverride":"", "type":"DYNAMIC_GRAPHIC", "settableOverride":false, "y":93, "x":105 }, { "min":-10.0, "displayControls":true, "dynamicImage":"SmallDial", "max":40.0, "bkgdColorOverride":"", "dataPointXid":"DP_688784", "displayText":true, "nameOverride":"", "type":"DYNAMIC_GRAPHIC", "settableOverride":false, "y":141, "x":6 }, { "displayControls":false, "bkgdColorOverride":"", "dataPointXid":"DP_089009", "nameOverride":"", "script":"var s = \"Toronto (YYZ) weather\";\ns += \"<img \/>\";\nreturn s;", "type":"SCRIPT", "settableOverride":false, "y":149, "x":95 }, { "content":"<h1>Human Activity<\/h1>", "type":"HTML", "y":243, "x":20 }, { "content":"Mango downloads:", "type":"HTML", "y":285, "x":22 }, { "displayControls":true, "bkgdColorOverride":"", "dataPointXid":"DP_974536", "displayPointName":false, "nameOverride":"", "type":"SIMPLE", "settableOverride":false, "y":283, "x":138 }, { "content":"Last download time:", "type":"HTML", "y":302, "x":13 }, { "displayControls":false, "bkgdColorOverride":"", "dataPointXid":"DP_336313", "displayPointName":false, "nameOverride":"", "type":"SIMPLE", "settableOverride":false, "y":300, "x":138 }, { "content":"Dow Jones Industrial:", "type":"HTML", "y":333, "x":4 }, { "displayControls":true, "bkgdColorOverride":"", "dataPointXid":"DP_526324", "displayPointName":false, "nameOverride":"Yahoo finance DJI", "type":"SIMPLE", "settableOverride":false, "y":331, "x":138 }, { "content":"<b>Google trends<\/b>", "type":"HTML", "y":384, "x":76 }, { "content":"1:", "type":"HTML", "y":400, "x":60 }, { "displayControls":false, "bkgdColorOverride":"", "dataPointXid":"googleTrend1", "nameOverride":"", "script":"var s = \"\";\ns += '<a value +'\" target=\"_blank\">';\ns += '<img ><\/a>';\nreturn s;", "type":"SCRIPT", "settableOverride":false, "y":402, "x":80 }, { "displayControls":true, "bkgdColorOverride":"", "dataPointXid":"googleTrend1", "displayPointName":false, "nameOverride":"", "type":"SIMPLE", "settableOverride":false, "y":400, "x":100 }, { "content":"2:", "type":"HTML", "y":420, "x":60 }, { "displayControls":false, "bkgdColorOverride":"", "dataPointXid":"googleTrend2", "nameOverride":"", "script":"var s = \"\";\ns += '<a value +'\" target=\"_blank\">';\ns += '<img ><\/a>';\nreturn s;", "type":"SCRIPT", "settableOverride":false, "y":422, "x":80 }, { "displayControls":true, "bkgdColorOverride":"", "dataPointXid":"googleTrend2", "displayPointName":false, "nameOverride":"", "type":"SIMPLE", "settableOverride":false, "y":420, "x":100 }, { "content":"3:", "type":"HTML", "y":440, "x":60 }, { "displayControls":false, "bkgdColorOverride":"", "dataPointXid":"googleTrend3", "nameOverride":"", "script":"var s = \"\";\ns += '<a value +'\" target=\"_blank\">';\ns += '<img ><\/a>';\nreturn s;", "type":"SCRIPT", "settableOverride":false, "y":442, "x":80 }, { "displayControls":true, "bkgdColorOverride":"", "dataPointXid":"googleTrend3", "displayPointName":false, "nameOverride":"", "type":"SIMPLE", "settableOverride":false, "y":440, "x":100 }, { "content":"4:", "type":"HTML", "y":460, "x":60 }, { "displayControls":false, "bkgdColorOverride":"", "dataPointXid":"googleTrend4", "nameOverride":"", "script":"var s = \"\";\ns += '<a value +'\" target=\"_blank\">';\ns += '<img ><\/a>';\nreturn s;", "type":"SCRIPT", "settableOverride":false, "y":462, "x":80 }, { "displayControls":true, "bkgdColorOverride":"", "dataPointXid":"googleTrend4", "displayPointName":false, "nameOverride":"", "type":"SIMPLE", "settableOverride":false, "y":460, "x":100 }, { "content":"5:", "type":"HTML", "y":480, "x":60 }, { "displayControls":false, "bkgdColorOverride":"", "dataPointXid":"googleTrend5", "nameOverride":"", "script":"var s = \"\";\ns += '<a value +'\" target=\"_blank\">';\ns += '<img ><\/a>';\nreturn s;", "type":"SCRIPT", "settableOverride":false, "y":482, "x":80 }, { "displayControls":true, "bkgdColorOverride":"", "dataPointXid":"googleTrend5", "displayPointName":false, "nameOverride":"", "type":"SIMPLE", "settableOverride":false, "y":480, "x":100 }, { "content":"<h1>Control<\/h1>", "type":"HTML", "y":0, "x":392 }, { "zeroImageIndex":3, "displayControls":true, "oneImageIndex":0, "imageSet":"BlinkingLights", "bkgdColorOverride":"", "dataPointXid":"DP_844147", "displayText":false, "nameOverride":"", "type":"BINARY_GRAPHIC", "settableOverride":true, "y":52, "x":414 }, { "content":"Use the standard Mango controls to change this light's value. Hover your mouse over the image.", "type":"HTML", "y":52, "x":449 }, { "displayControls":false, "bkgdColorOverride":"", "dataPointXid":"DP_844147", "nameOverride":"", "script":"var s = \"\";\ns += \"Or, use these scripted controls to turn the light \";\ns += \"<a >\";\ns += value ? \"Off\" : \"<b>Off<\/b>\";\ns += \"<\/a>, \";\ns += \"<a >\";\ns += value ? \"<b>On<\/b>\" : \"On\";\ns += \"<\/a>, or to \";\ns += \"<a >Toggle<\/a>\";\ns += \" its state.\";\nreturn s;\n", "type":"SCRIPT", "settableOverride":false, "y":92, "x":414 }, { "displayControls":false, "bkgdColorOverride":"", "dataPointXid":"DP_114580", "nameOverride":"", "script":"var s = \"\";\nif (value)\n s += \"<img \/>\";\nelse\n s += \"<img \/>\";\nreturn s;", "type":"SCRIPT", "settableOverride":false, "y":142, "x":426 }, { "content":"<b>Have a drink!<\/b> (Click on the image.) The<br\/>\nglass will refill itself after 30 seconds.", "type":"HTML", "y":141, "x":449 }, { "content":"<h1>Webcams<\/h1>\nA webcam in Amalfi, Italy (click image to see the live feed)", "type":"HTML", "y":184, "x":398 }, { "displayControls":true, "bkgdColorOverride":"", "dataPointXid":"DP_033746", "nameOverride":"", "type":"SIMPLE_IMAGE", "settableOverride":false, "y":260, "x":420 } ] } ] }
-
Hi,
I have been trying to reproduce the light bulb and drink glass parts of the demo page using a piece of this json file and two binary data points from a virtual source. I can import the graphical view file, but can't get the links to work on the view page.
Can you please post the data point/data source json files for this part of the demo?
Thanks
-
The display of the code (at least on my browser) leaves a few things out. Check the page source. This appears to be a more complete rendition.