{"_id":"583737ea7820b43b0093ffd9","version":{"_id":"57fcc4860312b20e00ac64c0","project":"5435687035740020002a1c04","__v":1,"createdAt":"2016-10-11T10:52:54.637Z","releaseDate":"2016-10-11T10:52:54.637Z","categories":["57fcc4860312b20e00ac64c1","57fcc4860312b20e00ac64c2","57fcc4860312b20e00ac64c3","57fcc4860312b20e00ac64c4","57fcc4860312b20e00ac64c5","57fcc4860312b20e00ac64c6","57fcc4860312b20e00ac64c7","57fcc4860312b20e00ac64c8","57fcc4860312b20e00ac64c9","57fcc4860312b20e00ac64ca","57fcc4860312b20e00ac64cb"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"[APP-1265], [APP-1035]","version_clean":"5.2.0","version":"5.2"},"category":{"_id":"57fcc4860312b20e00ac64c6","version":"57fcc4860312b20e00ac64c0","project":"5435687035740020002a1c04","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-10-26T16:19:53.100Z","from_sync":false,"order":5,"slug":"advanced-features","title":"Advanced Features"},"project":"5435687035740020002a1c04","__v":1,"user":"5589fde775eaf50d004e4b0c","updates":["58472b34889b6c2d00fb85af"],"next":{"pages":[],"description":""},"createdAt":"2016-11-24T18:56:42.513Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"[block:callout]\n{\n  \"type\": \"info\",\n  \"title\": \"Invite Only\",\n  \"body\": \"This functionality is a premium feature and currently invite only.  Please contact us if you're interested in exploring this capability.\"\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Setup Your Custom App Page\"\n}\n[/block]\nIn your playlist, click `ADD PAGE` button and choose `APP`.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/7a24e5a-image01.png\",\n        \"image01.png\",\n        398,\n        524,\n        \"#63656c\"\n      ]\n    }\n  ]\n}\n[/block]\nIn the next step, input description and URL for your custom app.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/1642d0c-image00.png\",\n        \"image00.png\",\n        464,\n        246,\n        \"#eaeae9\"\n      ]\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Setup Your Devices’ tags\"\n}\n[/block]\nAfter pairing your devices, please make sure to add `Tags` so they could receive data stream in the later process.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/6179f64-image02.png\",\n        \"image02.png\",\n        473,\n        532,\n        \"#ebebea\"\n      ]\n    }\n  ]\n}\n[/block]\nIn the example above, `foobar` and `alpha` are tags of this device.\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Get Device Token (optional)\"\n}\n[/block]\nYou can skip this step if you are going to use TelemetryTV Media Player to view your custom app all the time.\n- Open Media Player with your paired device\n- Open console panel of the Media Player\n- Look for the device tag as the end portion of the wss:// link\n\nSometimes when your would like to access your custom app outside Media Player, like during app developing for example, you will need to add the device token as `token` parameter in the url. E.g.\n`https://yourappurl.com/etc/?token=yourDeviceToken`\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Embed `appdata.js`\"\n}\n[/block]\nInclude the following script in your HTML\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script src=\\\"https://custom-apps.telemetrytv.com/appdata.js\\\"></script>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Initialize Your Custom App\"\n}\n[/block]\n## Setup App with Your App Name\nIn your own scripts, call `window.Telemetry.setApp(yourAppName)` once to setup your app. For example:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"window.Telemetry.setApp('demo')\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n## Add Listener to Handle Data Flows\nCall `window.Telemetry.addListener(yourEventHandler)` once to add listener to data flows. E.g.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var yourEventHandler = function (data) {\\n    // your scripts here\\n   console.log(data)\\n}\\n\\n\\nwindow.Telemetry.addListener(yourEventHandler)\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"POST Data to Your Custom App\"\n}\n[/block]\nNow, you can start POSTing data to your custom app.\n\nURL Pattern: `https://appdata.telemetrytv.com/appdata/$APPNAME/$DATANAME`\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  \\\"schema\\\": \\\"string\\\",\\t// Any of “string”, “object”, “array”\\n  \\\"data\\\": \\\"...\\\",\\t\\t\\t// The data value\\n  \\\"tags\\\": [...]\\t\\t\\t\\t// Array of strings. At least one of the device tags you inputted in step 2\\n}\",\n      \"language\": \"json\",\n      \"name\": \"POST body format\"\n    }\n  ]\n}\n[/block]\nIn the example above, the app name is `demo`, and you want to update a data stream called `hello`, then the POST url should be: `https://appdata.telemetrytv.com/appdata/demo/hello`\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  \\\"schema\\\": \\\"string\\\",\\n  \\\"data\\\":\\\"world!\\\",\\n  \\\"tags\\\": [\\\"foobar\\\"]\\n}\",\n      \"language\": \"json\",\n      \"name\": \"Try to POST the following data\"\n    }\n  ]\n}\n[/block]\nThen in your data event handler (the `yourEventHandler` in the previous sample), you will receive the updated data:\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"var yourEventHandler = function (data) {\\n   console.log(data)\\n   // -> outputs: {app: 'demo', name: 'hello', data: 'world!'}\\n}\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n**Another quick sample:**\n\nPOST url: `https://appdata.telemetrytv.com/appdata/demo/goodbye`\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  \\\"schema\\\": \\\"string\\\",\\n  \\\"data\\\":\\\"See you later\\\",\\n  \\\"tags\\\": [\\\"alpha\\\"]\\n}\",\n      \"language\": \"json\",\n      \"name\": \"POST body\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \" {app: 'demo', name: 'goodbye', data:'See you later'}\",\n      \"language\": \"json\",\n      \"name\": \"Output\"\n    }\n  ]\n}\n[/block]","excerpt":"Getting Started with `appdata.js`","slug":"custom-apps","type":"basic","title":"Custom Apps"}

Custom Apps

Getting Started with `appdata.js`

[block:callout] { "type": "info", "title": "Invite Only", "body": "This functionality is a premium feature and currently invite only. Please contact us if you're interested in exploring this capability." } [/block] [block:api-header] { "type": "basic", "title": "Setup Your Custom App Page" } [/block] In your playlist, click `ADD PAGE` button and choose `APP`. [block:image] { "images": [ { "image": [ "https://files.readme.io/7a24e5a-image01.png", "image01.png", 398, 524, "#63656c" ] } ] } [/block] In the next step, input description and URL for your custom app. [block:image] { "images": [ { "image": [ "https://files.readme.io/1642d0c-image00.png", "image00.png", 464, 246, "#eaeae9" ] } ] } [/block] [block:api-header] { "type": "basic", "title": "Setup Your Devices’ tags" } [/block] After pairing your devices, please make sure to add `Tags` so they could receive data stream in the later process. [block:image] { "images": [ { "image": [ "https://files.readme.io/6179f64-image02.png", "image02.png", 473, 532, "#ebebea" ] } ] } [/block] In the example above, `foobar` and `alpha` are tags of this device. [block:api-header] { "type": "basic", "title": "Get Device Token (optional)" } [/block] You can skip this step if you are going to use TelemetryTV Media Player to view your custom app all the time. - Open Media Player with your paired device - Open console panel of the Media Player - Look for the device tag as the end portion of the wss:// link Sometimes when your would like to access your custom app outside Media Player, like during app developing for example, you will need to add the device token as `token` parameter in the url. E.g. `https://yourappurl.com/etc/?token=yourDeviceToken` [block:api-header] { "type": "basic", "title": "Embed `appdata.js`" } [/block] Include the following script in your HTML [block:code] { "codes": [ { "code": "<script src=\"https://custom-apps.telemetrytv.com/appdata.js\"></script>", "language": "html" } ] } [/block] [block:api-header] { "type": "basic", "title": "Initialize Your Custom App" } [/block] ## Setup App with Your App Name In your own scripts, call `window.Telemetry.setApp(yourAppName)` once to setup your app. For example: [block:code] { "codes": [ { "code": "window.Telemetry.setApp('demo')", "language": "javascript" } ] } [/block] ## Add Listener to Handle Data Flows Call `window.Telemetry.addListener(yourEventHandler)` once to add listener to data flows. E.g. [block:code] { "codes": [ { "code": "var yourEventHandler = function (data) {\n // your scripts here\n console.log(data)\n}\n\n\nwindow.Telemetry.addListener(yourEventHandler)", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "POST Data to Your Custom App" } [/block] Now, you can start POSTing data to your custom app. URL Pattern: `https://appdata.telemetrytv.com/appdata/$APPNAME/$DATANAME` [block:code] { "codes": [ { "code": "{\n \"schema\": \"string\",\t// Any of “string”, “object”, “array”\n \"data\": \"...\",\t\t\t// The data value\n \"tags\": [...]\t\t\t\t// Array of strings. At least one of the device tags you inputted in step 2\n}", "language": "json", "name": "POST body format" } ] } [/block] In the example above, the app name is `demo`, and you want to update a data stream called `hello`, then the POST url should be: `https://appdata.telemetrytv.com/appdata/demo/hello` [block:code] { "codes": [ { "code": "{\n \"schema\": \"string\",\n \"data\":\"world!\",\n \"tags\": [\"foobar\"]\n}", "language": "json", "name": "Try to POST the following data" } ] } [/block] Then in your data event handler (the `yourEventHandler` in the previous sample), you will receive the updated data: [block:code] { "codes": [ { "code": "var yourEventHandler = function (data) {\n console.log(data)\n // -> outputs: {app: 'demo', name: 'hello', data: 'world!'}\n}", "language": "javascript" } ] } [/block] **Another quick sample:** POST url: `https://appdata.telemetrytv.com/appdata/demo/goodbye` [block:code] { "codes": [ { "code": "{\n \"schema\": \"string\",\n \"data\":\"See you later\",\n \"tags\": [\"alpha\"]\n}", "language": "json", "name": "POST body" } ] } [/block] [block:code] { "codes": [ { "code": " {app: 'demo', name: 'goodbye', data:'See you later'}", "language": "json", "name": "Output" } ] } [/block]