{"_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:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Get Device Token For Debugging\"\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:api-header] { "type": "basic", "title": "Get Device Token For Debugging" } [/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]