Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

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.jsp

    But 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&lt\/h1&gt",
                   "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":"",
                   &quot;script&quot;:&quot;var s = \&quot;Toronto (YYZ) weather\&quot;;\ns += \&quot;<img \/>\";\nreturn s;",
                   "type":"SCRIPT",
                   "settableOverride":false,
                   "y":149,
                   "x":95
                },
                {
                   "content":"&lt;h1&gt;Human Activity&lt\/h1&gt&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:243,
                   &quot;x&quot;:20
                },
                {
                   &quot;content&quot;:&quot;Mango downloads:&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:285,
                   &quot;x&quot;:22
                },
                {
                   &quot;displayControls&quot;:true,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;DP_974536&quot;,
                   &quot;displayPointName&quot;:false,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;type&quot;:&quot;SIMPLE&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:283,
                   &quot;x&quot;:138
                },
                {
                   &quot;content&quot;:&quot;Last download time:&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:302,
                   &quot;x&quot;:13
                },
                {
                   &quot;displayControls&quot;:false,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;DP_336313&quot;,
                   &quot;displayPointName&quot;:false,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;type&quot;:&quot;SIMPLE&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:300,
                   &quot;x&quot;:138
                },
                {
                   &quot;content&quot;:&quot;Dow Jones Industrial:&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:333,
                   &quot;x&quot;:4
                },
                {
                   &quot;displayControls&quot;:true,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;DP_526324&quot;,
                   &quot;displayPointName&quot;:false,
                   &quot;nameOverride&quot;:&quot;Yahoo finance DJI&quot;,
                   &quot;type&quot;:&quot;SIMPLE&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:331,
                   &quot;x&quot;:138
                },
                {
                   &quot;content&quot;:&quot;<b>Google trends&lt\/b&gt&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:384,
                   &quot;x&quot;:76
                },
                {
                   &quot;content&quot;:&quot;1:&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:400,
                   &quot;x&quot;:60
                },
                {
                   &quot;displayControls&quot;:false,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend1&quot;,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;script&quot;:&quot;var s = \&quot;\&quot;;\ns += '<a  value +'\" target=\"_blank\">';\ns += '<img  >&lt\/a&gt';\nreturn s;&quot;,
                   &quot;type&quot;:&quot;SCRIPT&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:402,
                   &quot;x&quot;:80
                },
                {
                   &quot;displayControls&quot;:true,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend1&quot;,
                   &quot;displayPointName&quot;:false,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;type&quot;:&quot;SIMPLE&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:400,
                   &quot;x&quot;:100
                },
                {
                   &quot;content&quot;:&quot;2:&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:420,
                   &quot;x&quot;:60
                },
                {
                   &quot;displayControls&quot;:false,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend2&quot;,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;script&quot;:&quot;var s = \&quot;\&quot;;\ns += '<a  value +'\" target=\"_blank\">';\ns += '<img  >&lt\/a&gt';\nreturn s;&quot;,
                   &quot;type&quot;:&quot;SCRIPT&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:422,
                   &quot;x&quot;:80
                },
                {
                   &quot;displayControls&quot;:true,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend2&quot;,
                   &quot;displayPointName&quot;:false,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;type&quot;:&quot;SIMPLE&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:420,
                   &quot;x&quot;:100
                },
                {
                   &quot;content&quot;:&quot;3:&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:440,
                   &quot;x&quot;:60
                },
                {
                   &quot;displayControls&quot;:false,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend3&quot;,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;script&quot;:&quot;var s = \&quot;\&quot;;\ns += '<a  value +'\" target=\"_blank\">';\ns += '<img  >&lt\/a&gt';\nreturn s;&quot;,
                   &quot;type&quot;:&quot;SCRIPT&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:442,
                   &quot;x&quot;:80
                },
                {
                   &quot;displayControls&quot;:true,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend3&quot;,
                   &quot;displayPointName&quot;:false,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;type&quot;:&quot;SIMPLE&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:440,
                   &quot;x&quot;:100
                },
                {
                   &quot;content&quot;:&quot;4:&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:460,
                   &quot;x&quot;:60
                },
                {
                   &quot;displayControls&quot;:false,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend4&quot;,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;script&quot;:&quot;var s = \&quot;\&quot;;\ns += '<a  value +'\" target=\"_blank\">';\ns += '<img  >&lt\/a&gt';\nreturn s;&quot;,
                   &quot;type&quot;:&quot;SCRIPT&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:462,
                   &quot;x&quot;:80
                },
                {
                   &quot;displayControls&quot;:true,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend4&quot;,
                   &quot;displayPointName&quot;:false,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;type&quot;:&quot;SIMPLE&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:460,
                   &quot;x&quot;:100
                },
                {
                   &quot;content&quot;:&quot;5:&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:480,
                   &quot;x&quot;:60
                },
                {
                   &quot;displayControls&quot;:false,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend5&quot;,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;script&quot;:&quot;var s = \&quot;\&quot;;\ns += '<a  value +'\" target=\"_blank\">';\ns += '<img  >&lt\/a&gt';\nreturn s;&quot;,
                   &quot;type&quot;:&quot;SCRIPT&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:482,
                   &quot;x&quot;:80
                },
                {
                   &quot;displayControls&quot;:true,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;googleTrend5&quot;,
                   &quot;displayPointName&quot;:false,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;type&quot;:&quot;SIMPLE&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:480,
                   &quot;x&quot;:100
                },
                {
                   &quot;content&quot;:&quot;&lt;h1&gt;Control&lt\/h1&gt&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:0,
                   &quot;x&quot;:392
                },
                {
                   &quot;zeroImageIndex&quot;:3,
                   &quot;displayControls&quot;:true,
                   &quot;oneImageIndex&quot;:0,
                   &quot;imageSet&quot;:&quot;BlinkingLights&quot;,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;DP_844147&quot;,
                   &quot;displayText&quot;:false,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;type&quot;:&quot;BINARY_GRAPHIC&quot;,
                   &quot;settableOverride&quot;:true,
                   &quot;y&quot;:52,
                   &quot;x&quot;:414
                },
                {
                   &quot;content&quot;:&quot;Use the standard Mango controls to change this light's value. Hover your mouse over the image.&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:52,
                   &quot;x&quot;:449
                },
                {
                   &quot;displayControls&quot;:false,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;DP_844147&quot;,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;script&quot;:&quot;var s = \&quot;\&quot;;\ns += \&quot;Or, use these scripted controls to turn the light \&quot;;\ns += \&quot;<a  >\";\ns += value ? \"Off\" : \"<b>Off&lt\/b&gt\&quot;;\ns += \&quot;&lt\/a&gt, \&quot;;\ns += \&quot;<a  >\";\ns += value ? \"<b>On&lt\/b&gt\&quot; : \&quot;On\&quot;;\ns += \&quot;&lt\/a&gt, or to \&quot;;\ns += \&quot;<a  >Toggle&lt\/a&gt\&quot;;\ns += \&quot; its state.\&quot;;\nreturn s;\n&quot;,
                   &quot;type&quot;:&quot;SCRIPT&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:92,
                   &quot;x&quot;:414
                },
                {
                   &quot;displayControls&quot;:false,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;DP_114580&quot;,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;script&quot;:&quot;var s = \&quot;\&quot;;\nif (value)\n    s += \&quot;<img   \/>\";\nelse\n    s += \"<img \/>\";\nreturn s;",
                   "type":"SCRIPT",
                   "settableOverride":false,
                   "y":142,
                   "x":426
                },
                {
                   "content":"<b>Have a drink!&lt\/b&gt (Click on the image.) The&lt;br\/&gt;\nglass will refill itself after 30 seconds.",
                   "type":"HTML",
                   "y":141,
                   "x":449
                },
                {
                   "content":"&lt;h1&gt;Webcams&lt\/h1&gt\nA webcam in Amalfi, Italy (click image to see the live feed)&quot;,
                   &quot;type&quot;:&quot;HTML&quot;,
                   &quot;y&quot;:184,
                   &quot;x&quot;:398
                },
                {
                   &quot;displayControls&quot;:true,
                   &quot;bkgdColorOverride&quot;:&quot;&quot;,
                   &quot;dataPointXid&quot;:&quot;DP_033746&quot;,
                   &quot;nameOverride&quot;:&quot;&quot;,
                   &quot;type&quot;:&quot;SIMPLE_IMAGE&quot;,
                   &quot;settableOverride&quot;:false,
                   &quot;y&quot;:260,
                   &quot;x&quot;: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.