openc3-cosmos-tool-docs 6.4.1 → 6.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (248) hide show
  1. checksums.yaml +4 -4
  2. data/tools/staticdocs/404.html +4 -1
  3. data/tools/staticdocs/assets/css/styles.1a361da6.css +1 -0
  4. data/tools/staticdocs/assets/images/cmd-processing-f279f2a9798a3000e07540ec5d4eaf095a84b312cd673285b595eebf901f4663.png +0 -0
  5. data/tools/staticdocs/assets/images/docker-security-bb6d4bdd60a5cd7df87a572159c6369b67bee5735be5a501b25786cabdcd4228.png +0 -0
  6. data/tools/staticdocs/assets/images/tlm-processing-ce5d4cc16e4a19d9c4f799cc8af975e93eb1c54ba0d43acbc31cc048667b223d.png +0 -0
  7. data/tools/staticdocs/assets/js/019369f3.5dd06a57.js +1 -0
  8. data/tools/staticdocs/assets/js/058ffc22.ed3ac5fa.js +1 -0
  9. data/tools/staticdocs/assets/js/0686a885.ef66a55c.js +1 -0
  10. data/tools/staticdocs/assets/js/078dbab0.43788fd9.js +1 -0
  11. data/tools/staticdocs/assets/js/0f5d161c.7aacaf90.js +1 -0
  12. data/tools/staticdocs/assets/js/0ff569c9.7aa50138.js +1 -0
  13. data/tools/staticdocs/assets/js/103cc3be.ff33b528.js +1 -0
  14. data/tools/staticdocs/assets/js/13196248.14de6ce1.js +1 -0
  15. data/tools/staticdocs/assets/js/13c1b4e4.2dafa283.js +1 -0
  16. data/tools/staticdocs/assets/js/1602.502ef9b1.js +1 -0
  17. data/tools/staticdocs/assets/js/1e02e6a3.d99a363c.js +1 -0
  18. data/tools/staticdocs/assets/js/2047b354.d91543a5.js +1 -0
  19. data/tools/staticdocs/assets/js/2124.545702e0.js +1 -0
  20. data/tools/staticdocs/assets/js/22b3ac48.5eb8d876.js +1 -0
  21. data/tools/staticdocs/assets/js/2368.fd1bb46a.js +4 -0
  22. data/tools/staticdocs/assets/js/26b8abb2.021651f5.js +1 -0
  23. data/tools/staticdocs/assets/js/2bb7bf90.1eee5bcb.js +1 -0
  24. data/tools/staticdocs/assets/js/2c15ad40.7f30b517.js +1 -0
  25. data/tools/staticdocs/assets/js/35398c5c.4f30c5da.js +1 -0
  26. data/tools/staticdocs/assets/js/3687.8bc61ef3.js +101 -0
  27. data/tools/staticdocs/assets/js/3dd7ef3b.dfbe9bb7.js +1 -0
  28. data/tools/staticdocs/assets/js/40365d27.42b05c12.js +1 -0
  29. data/tools/staticdocs/assets/js/411898ad.e55efd5d.js +1 -0
  30. data/tools/staticdocs/assets/js/42170351.2de491d4.js +1 -0
  31. data/tools/staticdocs/assets/js/43652efd.f7c95691.js +1 -0
  32. data/tools/staticdocs/assets/js/53ca7c5b.2da36c11.js +1 -0
  33. data/tools/staticdocs/assets/js/54d0d530.7cc2c5cc.js +1 -0
  34. data/tools/staticdocs/assets/js/5b233ba7.29533a03.js +1 -0
  35. data/tools/staticdocs/assets/js/5bc719f6.62d9a8b8.js +1 -0
  36. data/tools/staticdocs/assets/js/5c6ce5ec.40e0caf8.js +1 -0
  37. data/tools/staticdocs/assets/js/5e3ed378.64ea5a52.js +1 -0
  38. data/tools/staticdocs/assets/js/5fe211ef.2d29f3fb.js +1 -0
  39. data/tools/staticdocs/assets/js/6831b732.ec0009ac.js +1 -0
  40. data/tools/staticdocs/assets/js/696b4199.1c205c60.js +1 -0
  41. data/tools/staticdocs/assets/js/6b210247.32ded6d5.js +1 -0
  42. data/tools/staticdocs/assets/js/6b65133b.b2a62736.js +1 -0
  43. data/tools/staticdocs/assets/js/6f92e431.7bd2a1f1.js +1 -0
  44. data/tools/staticdocs/assets/js/72c6d8a8.21321ecc.js +1 -0
  45. data/tools/staticdocs/assets/js/75e64983.e0eb7741.js +1 -0
  46. data/tools/staticdocs/assets/js/7690.fc05b8e6.js +1 -0
  47. data/tools/staticdocs/assets/js/7719.0d312792.js +1 -0
  48. data/tools/staticdocs/assets/js/80c97f38.a0dfbdf7.js +1 -0
  49. data/tools/staticdocs/assets/js/867640d5.32ca371f.js +1 -0
  50. data/tools/staticdocs/assets/js/{89e76475.e1b0dbdb.js → 89e76475.20b3a636.js} +1 -1
  51. data/tools/staticdocs/assets/js/8f7843ee.6d7c9cd4.js +1 -0
  52. data/tools/staticdocs/assets/js/9424f0b3.75b12400.js +1 -0
  53. data/tools/staticdocs/assets/js/964eb012.0eee94ba.js +1 -0
  54. data/tools/staticdocs/assets/js/97535711.630cee4d.js +1 -0
  55. data/tools/staticdocs/assets/js/99581c43.73b5cd90.js +1 -0
  56. data/tools/staticdocs/assets/js/9d6e81d0.6b6404ff.js +1 -0
  57. data/tools/staticdocs/assets/js/9fb6059a.715fc441.js +1 -0
  58. data/tools/staticdocs/assets/js/a677c089.76d13f14.js +1 -0
  59. data/tools/staticdocs/assets/js/a9987364.3b3e7379.js +1 -0
  60. data/tools/staticdocs/assets/js/a9b2dc27.da1da6f1.js +1 -0
  61. data/tools/staticdocs/assets/js/aa6b6c1b.bc122746.js +1 -0
  62. data/tools/staticdocs/assets/js/b062d239.4e8142cb.js +1 -0
  63. data/tools/staticdocs/assets/js/b38a6d74.4a10f506.js +1 -0
  64. data/tools/staticdocs/assets/js/b4596165.08749f15.js +1 -0
  65. data/tools/staticdocs/assets/js/b6d70f94.776bc00f.js +1 -0
  66. data/tools/staticdocs/assets/js/b9f60ba6.ce400445.js +1 -0
  67. data/tools/staticdocs/assets/js/bd0034eb.a201a4a7.js +1 -0
  68. data/tools/staticdocs/assets/js/c24eae19.77326c08.js +1 -0
  69. data/tools/staticdocs/assets/js/{c2598f55.812cdcd1.js → c2598f55.85419dc8.js} +1 -1
  70. data/tools/staticdocs/assets/js/cb8c3f08.73cefada.js +1 -0
  71. data/tools/staticdocs/assets/js/cd879be4.dc2adfcc.js +1 -0
  72. data/tools/staticdocs/assets/js/d1b923aa.57f5e162.js +1 -0
  73. data/tools/staticdocs/assets/js/d1bfc316.73bb876f.js +1 -0
  74. data/tools/staticdocs/assets/js/d24bf9b6.e348c06d.js +1 -0
  75. data/tools/staticdocs/assets/js/d57a4b5d.885590b1.js +1 -0
  76. data/tools/staticdocs/assets/js/d5d77c37.1143a9d4.js +1 -0
  77. data/tools/staticdocs/assets/js/d66bf9c0.0ffb9759.js +1 -0
  78. data/tools/staticdocs/assets/js/d8ca4191.fe602968.js +1 -0
  79. data/tools/staticdocs/assets/js/d9b92eba.a115a366.js +1 -0
  80. data/tools/staticdocs/assets/js/db8fa1d0.1aefa4e7.js +1 -0
  81. data/tools/staticdocs/assets/js/dbe31111.9c957b0c.js +1 -0
  82. data/tools/staticdocs/assets/js/dc5f7beb.ddc630ca.js +1 -0
  83. data/tools/staticdocs/assets/js/e501b0d1.f9c2d1fc.js +1 -0
  84. data/tools/staticdocs/assets/js/f15615f1.a4d98d69.js +1 -0
  85. data/tools/staticdocs/assets/js/fd886806.656b4fa3.js +1 -0
  86. data/tools/staticdocs/assets/js/main.ba1fa268.js +38 -0
  87. data/tools/staticdocs/assets/js/runtime~main.ca894d1e.js +1 -0
  88. data/tools/staticdocs/docs/configuration/accessors.html +21 -18
  89. data/tools/staticdocs/docs/configuration/command.html +35 -35
  90. data/tools/staticdocs/docs/configuration/conversions.html +156 -0
  91. data/tools/staticdocs/docs/configuration/format.html +18 -15
  92. data/tools/staticdocs/docs/configuration/interfaces.html +34 -31
  93. data/tools/staticdocs/docs/configuration/plugins.html +39 -36
  94. data/tools/staticdocs/docs/configuration/protocols.html +28 -25
  95. data/tools/staticdocs/docs/configuration/ssl-tls.html +10 -6
  96. data/tools/staticdocs/docs/configuration/table.html +19 -22
  97. data/tools/staticdocs/docs/configuration/target.html +11 -8
  98. data/tools/staticdocs/docs/configuration/telemetry-screens.html +72 -69
  99. data/tools/staticdocs/docs/configuration/telemetry.html +40 -40
  100. data/tools/staticdocs/docs/configuration.html +4 -1
  101. data/tools/staticdocs/docs/development/curl.html +12 -9
  102. data/tools/staticdocs/docs/development/developing.html +15 -12
  103. data/tools/staticdocs/docs/development/json-api.html +8 -5
  104. data/tools/staticdocs/docs/development/log-structure.html +5 -2
  105. data/tools/staticdocs/docs/development/roadmap.html +5 -2
  106. data/tools/staticdocs/docs/development/streaming-api.html +13 -10
  107. data/tools/staticdocs/docs/development/testing.html +15 -12
  108. data/tools/staticdocs/docs/development.html +4 -1
  109. data/tools/staticdocs/docs/getting-started/cli.html +16 -13
  110. data/tools/staticdocs/docs/getting-started/generators.html +19 -16
  111. data/tools/staticdocs/docs/getting-started/gettingstarted.html +15 -12
  112. data/tools/staticdocs/docs/getting-started/installation.html +7 -4
  113. data/tools/staticdocs/docs/getting-started/key-concepts.html +6 -3
  114. data/tools/staticdocs/docs/getting-started/podman.html +19 -16
  115. data/tools/staticdocs/docs/getting-started/requirements.html +7 -4
  116. data/tools/staticdocs/docs/getting-started/upgrading.html +23 -15
  117. data/tools/staticdocs/docs/getting-started.html +4 -1
  118. data/tools/staticdocs/docs/guides/bridges.html +7 -4
  119. data/tools/staticdocs/docs/guides/cfs.html +19 -16
  120. data/tools/staticdocs/docs/guides/custom-widgets.html +54 -16
  121. data/tools/staticdocs/docs/guides/dynamic-packets.html +9 -6
  122. data/tools/staticdocs/docs/guides/exposing-microservices.html +9 -6
  123. data/tools/staticdocs/docs/guides/little-endian-bitfields.html +6 -3
  124. data/tools/staticdocs/docs/guides/local-mode.html +6 -3
  125. data/tools/staticdocs/docs/guides/logging.html +5 -2
  126. data/tools/staticdocs/docs/guides/monitoring.html +11 -8
  127. data/tools/staticdocs/docs/guides/performance.html +6 -3
  128. data/tools/staticdocs/docs/guides/raspberrypi.html +6 -3
  129. data/tools/staticdocs/docs/guides/reference-architectures.html +35 -0
  130. data/tools/staticdocs/docs/guides/script-writing.html +46 -43
  131. data/tools/staticdocs/docs/guides/scripting-api.html +627 -433
  132. data/tools/staticdocs/docs/guides.html +4 -1
  133. data/tools/staticdocs/docs/meta/contributing.html +10 -7
  134. data/tools/staticdocs/docs/meta/licenses.html +6 -3
  135. data/tools/staticdocs/docs/meta/philosophy.html +5 -2
  136. data/tools/staticdocs/docs/meta/xtce.html +7 -4
  137. data/tools/staticdocs/docs/meta.html +4 -1
  138. data/tools/staticdocs/docs/privacy.html +5 -2
  139. data/tools/staticdocs/docs/tools/admin.html +5 -2
  140. data/tools/staticdocs/docs/tools/autonomic.html +5 -2
  141. data/tools/staticdocs/docs/tools/bucket-explorer.html +5 -2
  142. data/tools/staticdocs/docs/tools/calendar.html +5 -2
  143. data/tools/staticdocs/docs/tools/cmd-sender.html +5 -2
  144. data/tools/staticdocs/docs/tools/cmd-tlm-server.html +5 -2
  145. data/tools/staticdocs/docs/tools/command_history.html +5 -2
  146. data/tools/staticdocs/docs/tools/data-extractor.html +5 -2
  147. data/tools/staticdocs/docs/tools/data-viewer.html +5 -2
  148. data/tools/staticdocs/docs/tools/handbooks.html +5 -2
  149. data/tools/staticdocs/docs/tools/limits-monitor.html +5 -2
  150. data/tools/staticdocs/docs/tools/packet-viewer.html +5 -2
  151. data/tools/staticdocs/docs/tools/script-runner.html +9 -6
  152. data/tools/staticdocs/docs/tools/table-manager.html +6 -3
  153. data/tools/staticdocs/docs/tools/tlm-grapher.html +5 -2
  154. data/tools/staticdocs/docs/tools/tlm-viewer.html +5 -2
  155. data/tools/staticdocs/docs/tools.html +4 -1
  156. data/tools/staticdocs/docs.html +6 -8
  157. data/tools/staticdocs/img/cmd-processing.png +0 -0
  158. data/tools/staticdocs/img/docker-local-security.png +0 -0
  159. data/tools/staticdocs/img/docker-security.png +0 -0
  160. data/tools/staticdocs/img/tlm-processing.png +0 -0
  161. data/tools/staticdocs/index.html +4 -1
  162. data/tools/staticdocs/lunr-index-1748640055686.json +1 -0
  163. data/tools/staticdocs/lunr-index.json +1 -1
  164. data/tools/staticdocs/markdown-page.html +5 -2
  165. data/tools/staticdocs/search-doc-1748640055686.json +1 -0
  166. data/tools/staticdocs/search-doc.json +1 -1
  167. data/tools/staticdocs/sitemap.xml +1 -1
  168. metadata +94 -83
  169. data/tools/staticdocs/assets/css/styles.1de6b959.css +0 -1
  170. data/tools/staticdocs/assets/js/019369f3.43fd7635.js +0 -1
  171. data/tools/staticdocs/assets/js/058ffc22.5cfabd67.js +0 -1
  172. data/tools/staticdocs/assets/js/0686a885.0e2ea47d.js +0 -1
  173. data/tools/staticdocs/assets/js/078dbab0.5515d5e3.js +0 -1
  174. data/tools/staticdocs/assets/js/0f5d161c.7697df48.js +0 -1
  175. data/tools/staticdocs/assets/js/0ff569c9.f81b787b.js +0 -1
  176. data/tools/staticdocs/assets/js/103cc3be.e7943c80.js +0 -1
  177. data/tools/staticdocs/assets/js/13196248.ea83002e.js +0 -1
  178. data/tools/staticdocs/assets/js/13c1b4e4.eb5250f4.js +0 -1
  179. data/tools/staticdocs/assets/js/1e02e6a3.12bdc98d.js +0 -1
  180. data/tools/staticdocs/assets/js/2047b354.d91f6c3e.js +0 -1
  181. data/tools/staticdocs/assets/js/22b3ac48.0df9587b.js +0 -1
  182. data/tools/staticdocs/assets/js/26b8abb2.7f8d4cb0.js +0 -1
  183. data/tools/staticdocs/assets/js/2bb7bf90.1772f030.js +0 -1
  184. data/tools/staticdocs/assets/js/35398c5c.fcf47881.js +0 -1
  185. data/tools/staticdocs/assets/js/3969.afdd070b.js +0 -1
  186. data/tools/staticdocs/assets/js/3dd7ef3b.c3455b97.js +0 -1
  187. data/tools/staticdocs/assets/js/40365d27.5ed2e9b5.js +0 -1
  188. data/tools/staticdocs/assets/js/411898ad.f7b3ff17.js +0 -1
  189. data/tools/staticdocs/assets/js/42170351.fbc05869.js +0 -1
  190. data/tools/staticdocs/assets/js/43652efd.60fa883f.js +0 -1
  191. data/tools/staticdocs/assets/js/5205.c6f31e57.js +0 -1
  192. data/tools/staticdocs/assets/js/5328.3e2a53eb.js +0 -1
  193. data/tools/staticdocs/assets/js/53ca7c5b.fe331a71.js +0 -1
  194. data/tools/staticdocs/assets/js/54d0d530.ef91ba12.js +0 -1
  195. data/tools/staticdocs/assets/js/5761.e7fabbc9.js +0 -4
  196. data/tools/staticdocs/assets/js/5b233ba7.9d6ba314.js +0 -1
  197. data/tools/staticdocs/assets/js/5bc719f6.6d27292c.js +0 -1
  198. data/tools/staticdocs/assets/js/5c6ce5ec.652b922b.js +0 -1
  199. data/tools/staticdocs/assets/js/5e3ed378.8b51f7c0.js +0 -1
  200. data/tools/staticdocs/assets/js/5fe211ef.63b46202.js +0 -1
  201. data/tools/staticdocs/assets/js/651.a043d7b1.js +0 -1
  202. data/tools/staticdocs/assets/js/6831b732.1318b398.js +0 -1
  203. data/tools/staticdocs/assets/js/696b4199.1e950fcb.js +0 -1
  204. data/tools/staticdocs/assets/js/6b210247.6a77064a.js +0 -1
  205. data/tools/staticdocs/assets/js/6b65133b.0376a397.js +0 -1
  206. data/tools/staticdocs/assets/js/6f92e431.6439052e.js +0 -1
  207. data/tools/staticdocs/assets/js/72c6d8a8.b6fcfc30.js +0 -1
  208. data/tools/staticdocs/assets/js/75e64983.324643a8.js +0 -1
  209. data/tools/staticdocs/assets/js/80c97f38.607160d3.js +0 -1
  210. data/tools/staticdocs/assets/js/867640d5.27d9d599.js +0 -1
  211. data/tools/staticdocs/assets/js/8f7843ee.abe30983.js +0 -1
  212. data/tools/staticdocs/assets/js/9357.9a7e89b5.js +0 -101
  213. data/tools/staticdocs/assets/js/9424f0b3.3683501c.js +0 -1
  214. data/tools/staticdocs/assets/js/964eb012.0e04c58d.js +0 -1
  215. data/tools/staticdocs/assets/js/97535711.e595488c.js +0 -1
  216. data/tools/staticdocs/assets/js/99581c43.841b4a2e.js +0 -1
  217. data/tools/staticdocs/assets/js/9d6e81d0.36405219.js +0 -1
  218. data/tools/staticdocs/assets/js/9fb6059a.821f7504.js +0 -1
  219. data/tools/staticdocs/assets/js/a677c089.cfa50691.js +0 -1
  220. data/tools/staticdocs/assets/js/a9987364.b418f772.js +0 -1
  221. data/tools/staticdocs/assets/js/a9b2dc27.805dc1ba.js +0 -1
  222. data/tools/staticdocs/assets/js/aa6b6c1b.ef9b0f38.js +0 -1
  223. data/tools/staticdocs/assets/js/b062d239.57d6e194.js +0 -1
  224. data/tools/staticdocs/assets/js/b4596165.c648533a.js +0 -1
  225. data/tools/staticdocs/assets/js/b6d70f94.a9228642.js +0 -1
  226. data/tools/staticdocs/assets/js/b9f60ba6.4c0bb1dd.js +0 -1
  227. data/tools/staticdocs/assets/js/bd0034eb.8ad39448.js +0 -1
  228. data/tools/staticdocs/assets/js/c24eae19.0575c394.js +0 -1
  229. data/tools/staticdocs/assets/js/cb8c3f08.07d1c9e9.js +0 -1
  230. data/tools/staticdocs/assets/js/cd879be4.59af1749.js +0 -1
  231. data/tools/staticdocs/assets/js/d1b923aa.da892cde.js +0 -1
  232. data/tools/staticdocs/assets/js/d1bfc316.a58b9bbd.js +0 -1
  233. data/tools/staticdocs/assets/js/d24bf9b6.9fef8263.js +0 -1
  234. data/tools/staticdocs/assets/js/d57a4b5d.c74b62b1.js +0 -1
  235. data/tools/staticdocs/assets/js/d5d77c37.e812e6e7.js +0 -1
  236. data/tools/staticdocs/assets/js/d66bf9c0.80a50660.js +0 -1
  237. data/tools/staticdocs/assets/js/d8ca4191.8df86c99.js +0 -1
  238. data/tools/staticdocs/assets/js/d9b92eba.5db8667e.js +0 -1
  239. data/tools/staticdocs/assets/js/db8fa1d0.f1eed806.js +0 -1
  240. data/tools/staticdocs/assets/js/dbe31111.75e9fc53.js +0 -1
  241. data/tools/staticdocs/assets/js/dc5f7beb.9e4e6681.js +0 -1
  242. data/tools/staticdocs/assets/js/e501b0d1.d3a1e4bc.js +0 -1
  243. data/tools/staticdocs/assets/js/f15615f1.49804e96.js +0 -1
  244. data/tools/staticdocs/assets/js/fd886806.124ffe26.js +0 -1
  245. data/tools/staticdocs/assets/js/main.b1edeb65.js +0 -36
  246. data/tools/staticdocs/assets/js/runtime~main.3629ffb4.js +0 -1
  247. data/tools/staticdocs/lunr-index-1747245438937.json +0 -1
  248. data/tools/staticdocs/search-doc-1747245438937.json +0 -1
data/tools/staticdocs/docs/guides/custom-widgets.html CHANGED
@@ -1,18 +1,56 @@
1
- <!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-guides/custom-widgets" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.7.0"><title data-rh=true>Custom Widgets | OpenC3 Docs</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true property=og:url content=https://docs.openc3.com/tools/staticdocs/docs/guides/custom-widgets><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true name=docusaurus_version content=current><meta data-rh=true name=docusaurus_tag content=docs-default-current><meta data-rh=true name=docsearch:version content=current><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current><meta data-rh=true property=og:title content="Custom Widgets | OpenC3 Docs"><meta data-rh=true name=description content="How to build custom widgets for use in Telemetry Viewer"><meta data-rh=true property=og:description content="How to build custom widgets for use in Telemetry Viewer"><link data-rh=true rel=icon href=/tools/staticdocs/img/favicon.png><link data-rh=true rel=canonical href=https://docs.openc3.com/tools/staticdocs/docs/guides/custom-widgets><link data-rh=true rel=alternate href=https://docs.openc3.com/tools/staticdocs/docs/guides/custom-widgets hreflang=en><link data-rh=true rel=alternate href=https://docs.openc3.com/tools/staticdocs/docs/guides/custom-widgets hreflang=x-default><link rel=stylesheet href=/tools/staticdocs/assets/css/styles.1de6b959.css><script src=/tools/staticdocs/assets/js/runtime~main.3629ffb4.js defer></script><script src=/tools/staticdocs/assets/js/main.b1edeb65.js defer></script><body class=navigation-with-keyboard><script>!function(){var t,e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t=null!==e?e:"dark",document.documentElement.setAttribute("data-theme",t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/tools/staticdocs/img/logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_G6ar href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="navbar navbar--fixed-top"><div class=navbar__inner><div class=navbar__items><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/tools/staticdocs/><div class=navbar__logo><img src=/tools/staticdocs/img/logo.svg alt="OpenC3 Logo" class="themedComponent_DHUr themedComponent--light_DIHH"><img src=/tools/staticdocs/img/logo.svg alt="OpenC3 Logo" class="themedComponent_DHUr themedComponent--dark_Bv2M"></div><b class="navbar__title text--truncate">OpenC3 Docs</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/tools/staticdocs/docs>Documentation</a><a href=https://openc3.com/enterprise/ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Enterprise</a></div><div class="navbar__items navbar__items--right"><div class=navbarSearchContainer_bmvg><div class=navbar__search><span aria-label="expand searchbar" role=button class=search-icon tabindex=0></span><input id=search_input_react type=search placeholder=Loading... aria-label=Search class="navbar__search-input search-bar" disabled></div></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="main-wrapper mainWrapper_UyTV"><div class=docsWrapper_XLvK><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_z1FD" type=button></button><div class=docRoot_HciC><aside class="theme-doc-sidebar-container docSidebarContainer_e5ai"><div class=sidebarViewport_N8x0><div class=sidebar_vJCc><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_qiME"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/tools/staticdocs/docs>Introduction</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/getting-started>Getting Started</a><button aria-label="Expand sidebar category 'Getting Started'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/configuration>Configuration</a><button aria-label="Expand sidebar category 'Configuration'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/tools>Tools</a><button aria-label="Expand sidebar category 'Tools'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--active" href=/tools/staticdocs/docs/guides>Guides</a><button aria-label="Collapse sidebar category 'Guides'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul style=display:block;overflow:visible;height:auto class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/bridges>Bridges</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/cfs>COSMOS and NASA cFS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/tools/staticdocs/docs/guides/custom-widgets>Custom Widgets</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/dynamic-packets>Dynamic Packets</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/exposing-microservices>Exposing Microservices</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/little-endian-bitfields>Little Endian Bitfields</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/local-mode>Local Mode</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/logging>Logging</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/monitoring>Monitoring</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/performance>Performance</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/raspberrypi>Raspberry Pi</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/script-writing>Script Writing Guide</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/scripting-api>Scripting API Guide</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/development>Development</a><button aria-label="Expand sidebar category 'Development'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/meta>Meta</a><button aria-label="Expand sidebar category 'Meta'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/tools/staticdocs/docs/privacy>OpenC3, Inc. Privacy Policy</a></ul></nav></div></div></aside><main class=docMainContainer_namt><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_YAwJ"><div class=docItemContainer_Rv5Z><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_zCmv" aria-label=Breadcrumbs><ul class=breadcrumbs itemscope itemtype=https://schema.org/BreadcrumbList><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/tools/staticdocs/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_JFrk><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class=breadcrumbs__item><a class=breadcrumbs__link itemprop=item href=/tools/staticdocs/docs/guides><span itemprop=name>Guides</span></a><meta itemprop=position content=1><li itemscope itemprop=itemListElement itemtype=https://schema.org/ListItem class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link itemprop=name>Custom Widgets</span><meta itemprop=position content=2></ul></nav><div class="tocCollapsible_O_Qc theme-doc-toc-mobile tocMobile_tjDr"><button type=button class="clean-btn tocCollapsibleButton_htYj">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Custom Widgets</h1></header><p>COSMOS allows you to build custom widgets which can be deployed with your <a href=/tools/staticdocs/docs/configuration/plugins>plugin</a> and used in <a href=/tools/staticdocs/docs/tools/tlm-viewer>Telemetry Viewer</a>. Building custom widgets can utilize any javascript frameworks but since COSMOS is written with Vue.js, we will use that framework in this tutorial. Please see the <a href=/tools/staticdocs/docs/getting-started/generators#widget-generator>Widget Generator</a> guide for information about generating the scaffolding for a custom widget.</p>
2
- <h2 class="anchor anchorWithStickyNavbar_fF9Z" id=custom-widgets>Custom Widgets<a href=#custom-widgets class=hash-link aria-label="Direct link to Custom Widgets" title="Direct link to Custom Widgets">​</a></h2>
3
- <p>We're basically going to follow the COSMOS <a href=https://github.com/OpenC3/cosmos/tree/main/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo target=_blank rel="noopener noreferrer">Demo</a> and explain how that custom widget was created.</p>
4
- <p>If you look at the bottom of the Demo's <a href=https://github.com/OpenC3/cosmos/blob/main/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/plugin.txt target=_blank rel="noopener noreferrer">plugin.txt</a> file you'll see we declare the widgets:</p>
5
- <div class="language-ruby codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_qZBB><pre tabindex=0 class="prism-code language-ruby codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token constant" style="color:rgb(130, 170, 255)">WIDGET</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">BIG</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token constant" style="color:rgb(130, 170, 255)">WIDGET</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">HELLOWORLD</span><br></span></code></pre><div class=buttonGroup_TNwR><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_MVhB aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_yxgH><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_QJLJ><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
6
- <p>When the plugin is deployed this causes COSMOS to look for the as-built widgets. For the BIG widget it will look for the widget at <code>tools/widgets/BigWidget/BigWidget.umd.min.js</code>. Similarly it looks for HELLOWORLD at <code>tools/widgets/HelloworldWidget/HelloworldWidget.umd.min.js</code>. These directories and file names may seem mysterious but it's all about how the widgets get built.</p>
7
- <h3 class="anchor anchorWithStickyNavbar_fF9Z" id=helloworld-widget>Helloworld Widget<a href=#helloworld-widget class=hash-link aria-label="Direct link to Helloworld Widget" title="Direct link to Helloworld Widget">​</a></h3>
8
- <p>The Helloworld Widget source code is found in the plugin's src directory and is called <a href=https://github.com/OpenC3/cosmos/blob/main/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/src/HelloworldWidget.vue target=_blank rel="noopener noreferrer">HelloworldWidget.vue</a>. The basic structure is as follows:</p>
9
- <div class="language-vue codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_qZBB><pre tabindex=0 class="prism-code language-vue codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token plain">&lt;template></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> &lt;!-- Implement widget here --></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">&lt;/template></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">&lt;script></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">import { Widget } from "@openc3/vue-common/widgets";</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">export default {</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> mixins: [Widget],</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> data() {</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> return {</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> // Reactive data items</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> };</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> },</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">};</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">&lt;/script></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">&lt;style scoped></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">/* widget specific style */</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">&lt;/style></span><br></span></code></pre><div class=buttonGroup_TNwR><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_MVhB aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_yxgH><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_QJLJ><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
1
+ <!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-guides/custom-widgets" data-has-hydrated=false><meta charset=UTF-8><meta name=generator content="Docusaurus v3.8.0"><title data-rh=true>Custom Widgets | OpenC3 Docs</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"><meta data-rh=true name=twitter:card content=summary_large_image><meta data-rh=true property=og:url content=https://docs.openc3.com/tools/staticdocs/docs/guides/custom-widgets><meta data-rh=true property=og:locale content=en><meta data-rh=true name=docusaurus_locale content=en><meta data-rh=true name=docsearch:language content=en><meta data-rh=true name=docusaurus_version content=current><meta data-rh=true name=docusaurus_tag content=docs-default-current><meta data-rh=true name=docsearch:version content=current><meta data-rh=true name=docsearch:docusaurus_tag content=docs-default-current><meta data-rh=true property=og:title content="Custom Widgets | OpenC3 Docs"><meta data-rh=true name=description content="How to build custom widgets for use in Telemetry Viewer"><meta data-rh=true property=og:description content="How to build custom widgets for use in Telemetry Viewer"><link data-rh=true rel=icon href=/tools/staticdocs/img/favicon.png><link data-rh=true rel=canonical href=https://docs.openc3.com/tools/staticdocs/docs/guides/custom-widgets><link data-rh=true rel=alternate href=https://docs.openc3.com/tools/staticdocs/docs/guides/custom-widgets hreflang=en><link data-rh=true rel=alternate href=https://docs.openc3.com/tools/staticdocs/docs/guides/custom-widgets hreflang=x-default><script data-rh=true type=application/ld+json>{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","item":"https://docs.openc3.com/tools/staticdocs/docs/guides","name":"Guides","position":1},{"@type":"ListItem","item":"https://docs.openc3.com/tools/staticdocs/docs/guides/custom-widgets","name":"Custom Widgets","position":2}]}</script><link rel=stylesheet href=/tools/staticdocs/assets/css/styles.1a361da6.css><script src=/tools/staticdocs/assets/js/runtime~main.ca894d1e.js defer></script><script src=/tools/staticdocs/assets/js/main.ba1fa268.js defer></script><body class=navigation-with-keyboard><svg xmlns=http://www.w3.org/2000/svg style="display: none;"><defs>
2
+ <symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
3
+ </defs></svg>
4
+ <script>!function(){var t="dark",e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",e||t),document.documentElement.setAttribute("data-theme-choice",e||t)}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><link rel=preload as=image href=/tools/staticdocs/img/logo.svg><div role=region aria-label="Skip to main content"><a class=skipToContent_G6ar href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/tools/staticdocs/><div class=navbar__logo><img src=/tools/staticdocs/img/logo.svg alt="OpenC3 Logo" class="themedComponent_DHUr themedComponent--light_DIHH"><img src=/tools/staticdocs/img/logo.svg alt="OpenC3 Logo" class="themedComponent_DHUr themedComponent--dark_Bv2M"></div><b class="navbar__title text--truncate">OpenC3 Docs</b></a><a aria-current=page class="navbar__item navbar__link navbar__link--active" href=/tools/staticdocs/docs>Documentation</a><a href=https://openc3.com/enterprise/ target=_blank rel="noopener noreferrer" class="navbar__item navbar__link">Enterprise</a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><div class=navbarSearchContainer_bmvg><div class=navbar__search><span aria-label="expand searchbar" role=button class=search-icon tabindex=0></span><input id=search_input_react type=search placeholder=Loading... aria-label=Search class="navbar__search-input search-bar" disabled></div></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_UyTV"><div class=docsWrapper_XLvK><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_z1FD" type=button></button><div class=docRoot_HciC><aside class="theme-doc-sidebar-container docSidebarContainer_e5ai"><div class=sidebarViewport_N8x0><div class=sidebar_vJCc><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_qiME"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/tools/staticdocs/docs>Introduction</a><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/getting-started>Getting Started</a><button aria-label="Expand sidebar category 'Getting Started'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/configuration>Configuration</a><button aria-label="Expand sidebar category 'Configuration'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/tools>Tools</a><button aria-label="Expand sidebar category 'Tools'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist menu__link--active" href=/tools/staticdocs/docs/guides>Guides</a><button aria-label="Collapse sidebar category 'Guides'" aria-expanded=true type=button class="clean-btn menu__caret"></button></div><ul class=menu__list><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/bridges>Bridges</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/cfs>COSMOS and NASA cFS</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current=page tabindex=0 href=/tools/staticdocs/docs/guides/custom-widgets>Custom Widgets</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/dynamic-packets>Dynamic Packets</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/exposing-microservices>Exposing Microservices</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/little-endian-bitfields>Little Endian Bitfields</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/local-mode>Local Mode</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/logging>Logging</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/monitoring>Monitoring</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/performance>Performance</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/raspberrypi>Raspberry Pi</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/reference-architectures>Reference Architectures</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/script-writing>Script Writing Guide</a><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class=menu__link tabindex=0 href=/tools/staticdocs/docs/guides/scripting-api>Scripting API Guide</a></ul><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/development>Development</a><button aria-label="Expand sidebar category 'Development'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class=menu__list-item-collapsible><a class="menu__link menu__link--sublist" href=/tools/staticdocs/docs/meta>Meta</a><button aria-label="Expand sidebar category 'Meta'" aria-expanded=false type=button class="clean-btn menu__caret"></button></div><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class=menu__link href=/tools/staticdocs/docs/privacy>OpenC3, Inc. Privacy Policy</a></ul></nav></div></div></aside><main class=docMainContainer_namt><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_YAwJ"><div class=docItemContainer_Rv5Z><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_zCmv" aria-label=Breadcrumbs><ul class=breadcrumbs><li class=breadcrumbs__item><a aria-label="Home page" class=breadcrumbs__link href=/tools/staticdocs/><svg viewBox="0 0 24 24" class=breadcrumbHomeIcon_JFrk><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill=currentColor /></svg></a><li class=breadcrumbs__item><a class=breadcrumbs__link href=/tools/staticdocs/docs/guides><span>Guides</span></a><li class="breadcrumbs__item breadcrumbs__item--active"><span class=breadcrumbs__link>Custom Widgets</span></ul></nav><div class="tocCollapsible_O_Qc theme-doc-toc-mobile tocMobile_tjDr"><button type=button class="clean-btn tocCollapsibleButton_htYj">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Custom Widgets</h1></header>
5
+ <p>This guide will walk you through the process of building custom widgets for use in COSMOS <a href=/tools/staticdocs/docs/tools/tlm-viewer>Telemetry Viewer</a>. While you can use any JavaScript framework, we'll use Vue.js since COSMOS is built with it. Before starting, you may want to check out the <a href=/tools/staticdocs/docs/getting-started/generators#widget-generator>Widget Generator</a> guide to create the initial scaffolding.</p>
6
+ <h2 class="anchor anchorWithStickyNavbar_fF9Z" id=step-1-set-up-your-plugin-structure>Step 1: Set Up Your Plugin Structure<a href=#step-1-set-up-your-plugin-structure class=hash-link aria-label="Direct link to Step 1: Set Up Your Plugin Structure" title="Direct link to Step 1: Set Up Your Plugin Structure">​</a></h2>
7
+ <p>If you have an existing plugin, start in the root directory for that plugin. If you do not yet have a plugin, start by using the <a href=/tools/staticdocs/docs/getting-started/generators#plugin-generator>Plugin Generator</a> to create one.</p>
8
+ <div class="theme-admonition theme-admonition-warning admonition_IZjC alert alert--warning"><div class=admonitionHeading_uVvU><span class=admonitionIcon_HiR3><svg viewBox="0 0 16 16"><path fill-rule=evenodd d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"/></svg></span>Use separate plugins for tools and widgets</div><div class=admonitionContent_bl22><p>If your existing plugin contains a custom tool, you may run into build issues. In this instance, we recommend having one plugin for your custom tool, and a second plugin for you custom custom widgets.</div></div>
9
+ <p>In your plugin's root directory, use the <a href=/tools/staticdocs/docs/getting-started/generators#widget-generator>Widget Generator</a> to scaffold the widget.</p>
10
+ <p>Ensure your plugin has the correct directory structure:</p>
11
+ <div class="language-text codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-text codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token plain">your-plugin/</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">├── LICENSE.txt</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">├── your-plugin.gemspec</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">├── package.json</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">├── plugin.txt</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">├── Rakefile</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">├── README.md</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">├── src/</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">│ └── YourcustomWidget.vue</span><br></span><span class=token-line style=color:#d6deeb><span class="token plain">└── vite.config.js</span><br></span></code></pre></div></div>
12
+ <h2 class="anchor anchorWithStickyNavbar_fF9Z" id=step-2-declare-your-widget-in-plugintxt>Step 2: Declare Your Widget in plugin.txt<a href=#step-2-declare-your-widget-in-plugintxt class=hash-link aria-label="Direct link to Step 2: Declare Your Widget in plugin.txt" title="Direct link to Step 2: Declare Your Widget in plugin.txt">​</a></h2>
13
+ <p>In your plugin's <code>plugin.txt</code> file, declare each custom widget you want to create:</p>
14
+ <div class="language-ruby codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-ruby codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token constant" style="color:rgb(130, 170, 255)">WIDGET</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">YOURCUSTOM</span><br></span></code></pre></div></div>
15
+ <p>For example, in the COSMOS Demo plugin, two widgets are declared:</p>
16
+ <div class="language-ruby codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-ruby codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token constant" style="color:rgb(130, 170, 255)">WIDGET</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">BIG</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token constant" style="color:rgb(130, 170, 255)">WIDGET</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">HELLOWORLD</span><br></span></code></pre></div></div>
17
+ <h2 class="anchor anchorWithStickyNavbar_fF9Z" id=step-3-configure-your-build-process>Step 3: Configure Your Build Process<a href=#step-3-configure-your-build-process class=hash-link aria-label="Direct link to Step 3: Configure Your Build Process" title="Direct link to Step 3: Configure Your Build Process">​</a></h2>
18
+ <h3 class="anchor anchorWithStickyNavbar_fF9Z" id=set-up-packagejson>Set Up package.json<a href=#set-up-packagejson class=hash-link aria-label="Direct link to Set Up package.json" title="Direct link to Set Up package.json">​</a></h3>
19
+ <p>Ensure your <code>package.json</code> includes the necessary build script:</p>
20
+ <div class="language-json codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-json codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">"scripts"</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">"build"</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"vite build"</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">"dependencies"</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">"@openc3/vue-common"</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"latest"</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">"devDependencies"</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">"vite"</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"latest"</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><br></span></code></pre></div></div>
21
+ <h3 class="anchor anchorWithStickyNavbar_fF9Z" id=update-your-rakefile>Update Your Rakefile<a href=#update-your-rakefile class=hash-link aria-label="Direct link to Update Your Rakefile" title="Direct link to Update Your Rakefile">​</a></h3>
22
+ <p>Ensure your <code>Rakefile</code> is configured to run the build script in its <code>:build</code> task:</p>
23
+ <p><em>(This should happen automatically if you use our code generators mentioned above.)</em></p>
24
+ <div class="language-ruby codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-ruby codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token plain">task </span><span class="token symbol">:build</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(127, 219, 202)">do</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic"># ...</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic"># Build the widget and gem using sh built into Rake:</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic"># https://rubydoc.info/gems/rake/FileUtils#sh-instance_method</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> sh</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token string-literal string" style="color:rgb(173, 219, 103)">'yarn'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string-literal string" style="color:rgb(173, 219, 103)">'run'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string-literal string" style="color:rgb(173, 219, 103)">'build'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic"># ...</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">end</span><br></span></code></pre></div></div>
25
+ <h2 class="anchor anchorWithStickyNavbar_fF9Z" id=step-4-create-your-widget-component>Step 4: Create Your Widget Component<a href=#step-4-create-your-widget-component class=hash-link aria-label="Direct link to Step 4: Create Your Widget Component" title="Direct link to Step 4: Create Your Widget Component">​</a></h2>
26
+ <p>If it doesn't exist already, create a Vue component file in the <code>src</code> directory, following this naming convention: <code>YourcustomWidget.vue</code>.</p>
27
+ <p>For example, to create a widget called "HELLOWORLD", you would create <code>HelloworldWidget.vue</code>:</p>
28
+ <div class="language-html codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-html codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">template</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">&lt;!-- Your widget's HTML structure goes here --></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">template</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">script</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:rgb(127, 219, 202)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript imports"> </span><span class="token script language-javascript imports maybe-class-name">Widget</span><span class="token script language-javascript imports"> </span><span class="token script language-javascript imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:rgb(127, 219, 202)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:rgb(173, 219, 103)">"@openc3/vue-common/widgets"</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:rgb(127, 219, 202)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:rgb(127, 219, 202)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:rgb(128, 203, 196)">mixins</span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token script language-javascript maybe-class-name">Widget</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:rgb(130, 170, 255)">data</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:rgb(127, 219, 202)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style="color:rgb(99, 119, 119);font-style:italic">// Reactive data items</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">script</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">style</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">scoped</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"> </span><span class="token style language-css comment" style="color:rgb(99, 119, 119);font-style:italic">/* Widget-specific styles */</span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">style</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><br></span></code></pre></div></div>
29
+ <h2 class="anchor anchorWithStickyNavbar_fF9Z" id=step-5-develop-your-widget>Step 5: Develop Your Widget<a href=#step-5-develop-your-widget class=hash-link aria-label="Direct link to Step 5: Develop Your Widget" title="Direct link to Step 5: Develop Your Widget">​</a></h2>
30
+ <p>This is where you'll design the actual layout and functionality of your widget. Let's expand on this using the Helloworld Widget as an example:</p>
31
+ <h3 class="anchor anchorWithStickyNavbar_fF9Z" id=designing-your-widget-layout>Designing Your Widget Layout<a href=#designing-your-widget-layout class=hash-link aria-label="Direct link to Designing Your Widget Layout" title="Direct link to Designing Your Widget Layout">​</a></h3>
32
+ <p>In the <code>&lt;template></code> section, you'll define your widget's visual structure. For a simple Hello World widget:</p>
33
+ <div class="language-html codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-html codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">template</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">div</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">class</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">hello-world-container</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">h3</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain">{{ greeting }}</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">h3</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">p</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain">This is a custom COSMOS widget</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">p</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">v-btn</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">@click</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">updateGreeting</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">color</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(199, 146, 234)">=</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag attr-value" style="color:rgb(127, 219, 202)">primary</span><span class="token tag attr-value punctuation" style="color:rgb(199, 146, 234)">"</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"> Change Greeting </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">v-btn</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">div</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">template</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><br></span></code></pre></div></div>
10
34
  <div class="theme-admonition theme-admonition-info admonition_IZjC alert alert--info"><div class=admonitionHeading_uVvU><span class=admonitionIcon_HiR3><svg viewBox="0 0 14 16"><path fill-rule=evenodd d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg></span>Vue & Vuetify</div><div class=admonitionContent_bl22><p>For more information about how the COSMOS frontend is built (including all the Widgets) please check out <a href=https://vuejs.org target=_blank rel="noopener noreferrer">Vue.js</a> and <a href=https://vuetifyjs.com target=_blank rel="noopener noreferrer">Vuetify</a>.</div></div>
11
- <p>To build this custom widget we changed the Demo <a href=https://github.com/OpenC3/cosmos/blob/main/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/Rakefile target=_blank rel="noopener noreferrer">Rakefile</a> to call <code>yarn run build</code> when the plugin is built. <code>yarn run XXX</code> looks for 'scripts' to run in the <a href=https://github.com/OpenC3/cosmos/blob/main/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/package.json target=_blank rel="noopener noreferrer">package.json</a> file. If we open package.json we find the following:</p>
12
- <div class="language-json codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_qZBB><pre tabindex=0 class="prism-code language-json codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">"scripts"</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token property" style="color:rgb(128, 203, 196)">"build"</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"vue-cli-service build --target lib --dest tools/widgets/HelloworldWidget --formats umd-min src/HelloworldWidget.vue --name HelloworldWidget && vue-cli-service build --target lib --dest tools/widgets/BigWidget --formats umd-min src/BigWidget.vue --name BigWidget"</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><br></span></code></pre><div class=buttonGroup_TNwR><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_MVhB aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_yxgH><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_QJLJ><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
13
- <p>This uses the <code>vue-cli-service</code> to build the code found at <code>src/HelloworldWidget.vue</code> and formats as <code>umd-min</code> and puts it in the <code>tools/widgets/HelloworldWidget</code> directory. So this is why the plugin looks for the plugin at <code>tools/widgets/HelloworldWidget/HelloworldWidget.umd.min.js</code>. Click <a href=https://cli.vuejs.org/guide/cli-service.html#vue-cli-service-build target=_blank rel="noopener noreferrer">here</a> for the <code>vue-cli-service build</code> documentation.</p>
14
- <p>If you look at the Demo plugin's <a href=https://github.com/OpenC3/cosmos/blob/main/openc3-cosmos-init/plugins/packages/openc3-cosmos-demo/targets/INST/screens/simple.txt target=_blank rel="noopener noreferrer">simple.txt</a> screen you'll see we're using the widgets:</p>
15
- <div class="language-ruby codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_qZBB><pre tabindex=0 class="prism-code language-ruby codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token constant" style="color:rgb(130, 170, 255)">SCREEN</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">AUTO</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">AUTO</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token constant" style="color:rgb(130, 170, 255)">LABELVALUE</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">&lt;</span><span class="token operator" style="color:rgb(127, 219, 202)">%=</span><span class="token plain"> target_name </span><span class="token string-literal string" style="color:rgb(173, 219, 103)">%> HEALTH_STATUS CCSDSSEQCNT</span><br></span><span class=token-line style=color:#d6deeb><span class="token string-literal string" style="color:rgb(173, 219, 103)">HELLOWORLD</span><br></span><span class=token-line style=color:#d6deeb><span class="token string-literal string" style="color:rgb(173, 219, 103)">BIG &lt;%= target_name %></span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">HEALTH_STATUS</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">TEMP1</span><br></span></code></pre><div class=buttonGroup_TNwR><button type=button aria-label="Copy code to clipboard" title=Copy class=clean-btn><span class=copyButtonIcons_MVhB aria-hidden=true><svg viewBox="0 0 24 24" class=copyButtonIcon_yxgH><path fill=currentColor d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg><svg viewBox="0 0 24 24" class=copyButtonSuccessIcon_QJLJ><path fill=currentColor d=M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z /></svg></span></button></div></div></div>
16
- <p>Opening this screen in Telemetry Viewer results in the following:</p>
35
+ <h3 class="anchor anchorWithStickyNavbar_fF9Z" id=adding-widget-logic>Adding Widget Logic<a href=#adding-widget-logic class=hash-link aria-label="Direct link to Adding Widget Logic" title="Direct link to Adding Widget Logic">​</a></h3>
36
+ <p>In the <code>&lt;script></code> section, define the behavior of your widget:</p>
37
+ <div class="language-html codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-html codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">script</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:rgb(127, 219, 202)">import</span><span class="token script language-javascript"> </span><span class="token script language-javascript imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript imports"> </span><span class="token script language-javascript imports maybe-class-name">Widget</span><span class="token script language-javascript imports"> </span><span class="token script language-javascript imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:rgb(127, 219, 202)">from</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:rgb(173, 219, 103)">"@openc3/vue-common/widgets"</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style="color:rgb(99, 119, 119);font-style:italic">// Make sure you import Widget</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:rgb(127, 219, 202)">export</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword module" style="color:rgb(127, 219, 202)">default</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:rgb(128, 203, 196)">mixins</span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token script language-javascript maybe-class-name">Widget</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style="color:rgb(99, 119, 119);font-style:italic">// Make sure you include Widget in the mixins here</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:rgb(130, 170, 255)">data</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript keyword control-flow" style="color:rgb(127, 219, 202)">return</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:rgb(128, 203, 196)">greeting</span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:rgb(173, 219, 103)">"Hello, COSMOS!"</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:rgb(128, 203, 196)">greetings</span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token script language-javascript string" style="color:rgb(173, 219, 103)">"Hello, COSMOS!"</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:rgb(173, 219, 103)">"Greetings, User!"</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"> </span><span class="token script language-javascript string" style="color:rgb(173, 219, 103)">"Welcome to COSMOS!"</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript literal-property property" style="color:rgb(128, 203, 196)">methods</span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">:</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript function" style="color:rgb(130, 170, 255)">updateGreeting</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript comment" style="color:rgb(99, 119, 119);font-style:italic">// Cycle through different greetings</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:rgb(127, 219, 202)">const</span><span class="token script language-javascript"> currentIndex </span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:rgb(127, 219, 202)">this</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript property-access">greetings</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript method function property-access" style="color:rgb(130, 170, 255)">indexOf</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript keyword" style="color:rgb(127, 219, 202)">this</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript property-access">greeting</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:rgb(127, 219, 202)">const</span><span class="token script language-javascript"> nextIndex </span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token script language-javascript">currentIndex </span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">+</span><span class="token script language-javascript"> </span><span class="token script language-javascript number" style="color:rgb(247, 140, 108)">1</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">%</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:rgb(127, 219, 202)">this</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript property-access">greetings</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript property-access">length</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:rgb(127, 219, 202)">this</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript property-access">greeting</span><span class="token script language-javascript"> </span><span class="token script language-javascript operator" style="color:rgb(127, 219, 202)">=</span><span class="token script language-javascript"> </span><span class="token script language-javascript keyword" style="color:rgb(127, 219, 202)">this</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token script language-javascript property-access">greetings</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token script language-javascript">nextIndex</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"> </span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token script language-javascript punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token script language-javascript"></span><br></span><span class=token-line style=color:#d6deeb><span class="token script language-javascript"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">script</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><br></span></code></pre></div></div>
38
+ <h3 class="anchor anchorWithStickyNavbar_fF9Z" id=styling-your-widget>Styling Your Widget<a href=#styling-your-widget class=hash-link aria-label="Direct link to Styling Your Widget" title="Direct link to Styling Your Widget">​</a></h3>
39
+ <p>Add custom styles in the <code>&lt;style></code> section:</p>
40
+ <div class="language-html codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-html codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag" style="color:rgb(127, 219, 202)">style</span><span class="token tag" style="color:rgb(127, 219, 202)"> </span><span class="token tag attr-name" style="color:rgb(173, 219, 103);font-style:italic">scoped</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"> </span><span class="token style language-css selector class" style="color:rgb(199, 146, 234);font-style:italic">.hello-world-container</span><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"> </span><span class="token style language-css property" style="color:rgb(128, 203, 196)">padding</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:rgb(247, 140, 108)">15</span><span class="token style language-css unit">px</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"> </span><span class="token style language-css property" style="color:rgb(128, 203, 196)">border</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:rgb(247, 140, 108)">1</span><span class="token style language-css unit">px</span><span class="token style language-css"> solid </span><span class="token style language-css hexcode color">#ddd</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"> </span><span class="token style language-css property" style="color:rgb(128, 203, 196)">border-radius</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token style language-css"> </span><span class="token style language-css number" style="color:rgb(247, 140, 108)">4</span><span class="token style language-css unit">px</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"> </span><span class="token style language-css property" style="color:rgb(128, 203, 196)">text-align</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token style language-css"> center</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"> </span><span class="token style language-css property" style="color:rgb(128, 203, 196)">background-color</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token style language-css"> </span><span class="token style language-css hexcode color">#f9f9f9</span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"> </span><span class="token style language-css punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token style language-css"></span><br></span><span class=token-line style=color:#d6deeb><span class="token style language-css"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;/</span><span class="token tag" style="color:rgb(127, 219, 202)">style</span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">></span><br></span></code></pre></div></div>
41
+ <h2 class="anchor anchorWithStickyNavbar_fF9Z" id=step-6-configure-your-build-output>Step 6: Configure Your Build Output<a href=#step-6-configure-your-build-output class=hash-link aria-label="Direct link to Step 6: Configure Your Build Output" title="Direct link to Step 6: Configure Your Build Output">​</a></h2>
42
+ <p>Ensure your <code>vite.config.js</code> file is configured to properly build your widgets:</p>
43
+ <div class="language-javascript codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-javascript codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token keyword module" style="color:rgb(127, 219, 202)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports"> defineConfig </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(127, 219, 202)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"vite"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token keyword module" style="color:rgb(127, 219, 202)">import</span><span class="token plain"> </span><span class="token imports maybe-class-name">VitePluginStyleInject</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(127, 219, 202)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"vite-plugin-style-inject"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token keyword module" style="color:rgb(127, 219, 202)">import</span><span class="token plain"> </span><span class="token imports">vue</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(127, 219, 202)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"@vitejs/plugin-vue"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token keyword" style="color:rgb(127, 219, 202)">const</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">DEFAULT_EXTENSIONS</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">".mjs"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">".js"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">".ts"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">".jsx"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">".tsx"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">".json"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain" style=display:inline-block></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token keyword module" style="color:rgb(127, 219, 202)">export</span><span class="token plain"> </span><span class="token keyword module" style="color:rgb(127, 219, 202)">default</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">defineConfig</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">build</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">outDir</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"tools/widgets/YourcustomWidget"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">emptyOutDir</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">true</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">sourcemap</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">true</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">lib</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">entry</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"./src/YourcustomWidget.vue"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">name</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"YourcustomWidget"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(130, 170, 255)">fileName</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">format</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token parameter"> entryName</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(127, 219, 202)">=></span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">entryName</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string string" style="color:rgb(173, 219, 103)">.</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">${</span><span class="token template-string interpolation">format</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token template-string string" style="color:rgb(173, 219, 103)">.min.js</span><span class="token template-string template-punctuation string" style="color:rgb(173, 219, 103)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">formats</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">"umd"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">rollupOptions</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">external</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(173, 219, 103)">"vue"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">"vuetify"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">plugins</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token function" style="color:rgb(130, 170, 255)">vue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token function maybe-class-name" style="color:rgb(130, 170, 255)">VitePluginStyleInject</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">resolve</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token literal-property property" style="color:rgb(128, 203, 196)">extensions</span><span class="token operator" style="color:rgb(127, 219, 202)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token spread operator" style="color:rgb(127, 219, 202)">...</span><span class="token constant" style="color:rgb(130, 170, 255)">DEFAULT_EXTENSIONS</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(173, 219, 103)">".vue"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(99, 119, 119);font-style:italic">// not recommended but saves us from having to change every SFC import</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><br></span></code></pre></div></div>
44
+ <h2 class="anchor anchorWithStickyNavbar_fF9Z" id=step-7-use-your-widget-in-a-screen-definition>Step 7: Use Your Widget in a Screen Definition<a href=#step-7-use-your-widget-in-a-screen-definition class=hash-link aria-label="Direct link to Step 7: Use Your Widget in a Screen Definition" title="Direct link to Step 7: Use Your Widget in a Screen Definition">​</a></h2>
45
+ <p>Create a screen definition file in your target's screens directory:</p>
46
+ <div class="language-ruby codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-ruby codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token constant" style="color:rgb(130, 170, 255)">SCREEN</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">AUTO</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">AUTO</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token constant" style="color:rgb(130, 170, 255)">LABELVALUE</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">&lt;</span><span class="token operator" style="color:rgb(127, 219, 202)">%=</span><span class="token plain"> target_name </span><span class="token operator" style="color:rgb(127, 219, 202)">%</span><span class="token operator" style="color:rgb(127, 219, 202)">></span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">HEALTH_STATUS</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">CCSDSSEQCNT</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token constant" style="color:rgb(130, 170, 255)">HELLOWORLD</span><br></span></code></pre></div></div>
47
+ <p>In this example, we're using the HELLOWORLD widget from the demo, which will result in a screen that looks like this:</p>
17
48
  <p><img decoding=async loading=lazy alt="Simple Screen" src=/tools/staticdocs/assets/images/simple_screen-e3de1ad836c0661d73a0ba970f991c64df8ecc7e23f9e944b6508a9a43fbc33c.png width=681 height=210 class=img__Ss2></p>
18
- <p>While this is a simple example the possibilities with custom widgets are limitless!</div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class=col><a href=https://github.com/OpenC3/cosmos/tree/main/docs.openc3.com/docs/guides/custom-widgets.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_UohW aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_g62E"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/tools/staticdocs/docs/guides/cfs><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>COSMOS and NASA cFS</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/tools/staticdocs/docs/guides/dynamic-packets><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Dynamic Packets</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_TN1Q thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#custom-widgets class="table-of-contents__link toc-highlight">Custom Widgets</a><ul><li><a href=#helloworld-widget class="table-of-contents__link toc-highlight">Helloworld Widget</a></ul></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class=footer__title>Homepage</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://openc3.com target=_blank rel="noopener noreferrer" class=footer__link-item>Home</a></ul></div><div class="col footer__col"><div class=footer__title>Docs</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/tools/staticdocs/docs>Documentation</a></ul></div><div class="col footer__col"><div class=footer__title>Community</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://www.linkedin.com/company/openc3 target=_blank rel="noopener noreferrer" class=footer__link-item>LinkedIn<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_awgD><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a></ul></div><div class="col footer__col"><div class=footer__title>More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://github.com/OpenC3/cosmos target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true viewBox="0 0 24 24" class=iconExternalLink_awgD><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></svg></a><li class=footer__item><a class=footer__link-item href=/tools/staticdocs/docs/privacy>Privacy</a></ul></div></div><div class="footer__bottom text--center"><div class=footer__copyright>Copyright © 2025 OpenC3, Inc.</div></div></div></footer></div>
49
+ <p>The widget name follows the convention from <code>plugin.txt</code> file. The screen definition for a screen that has only your custom widget created here, ensure your screen definition looks like this:</p>
50
+ <div class="language-ruby codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-ruby codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token constant" style="color:rgb(130, 170, 255)">SCREEN</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">AUTO</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">AUTO</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token plain"></span><br></span><span class=token-line style=color:#d6deeb><span class="token plain"></span><span class="token constant" style="color:rgb(130, 170, 255)">YOURCUSTOM</span><br></span></code></pre></div></div>
51
+ <p>If your widget requires telemetry data, make sure you include the target and telemetry information:</p>
52
+ <div class="language-ruby codeBlockContainer_ZGJx theme-code-block" style=--prism-color:#d6deeb;--prism-background-color:#011627><div class=codeBlockContent_kX1v><pre tabindex=0 class="prism-code language-ruby codeBlock_TAPP thin-scrollbar" style=color:#d6deeb;background-color:#011627><code class=codeBlockLines_AdAo><span class=token-line style=color:#d6deeb><span class="token constant" style="color:rgb(130, 170, 255)">YOURCUSTOM</span><span class="token plain"> </span><span class="token operator" style="color:rgb(127, 219, 202)">&lt;</span><span class="token operator" style="color:rgb(127, 219, 202)">%=</span><span class="token plain"> target_name </span><span class="token operator" style="color:rgb(127, 219, 202)">%</span><span class="token operator" style="color:rgb(127, 219, 202)">></span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">HEALTH_STATUS</span><span class="token plain"> </span><span class="token constant" style="color:rgb(130, 170, 255)">TEMP1</span><br></span></code></pre></div></div>
53
+ <h2 class="anchor anchorWithStickyNavbar_fF9Z" id=step-8-build-and-deploy-your-plugin>Step 8: Build and Deploy Your Plugin<a href=#step-8-build-and-deploy-your-plugin class=hash-link aria-label="Direct link to Step 8: Build and Deploy Your Plugin" title="Direct link to Step 8: Build and Deploy Your Plugin">​</a></h2>
54
+ <p>Follow the instructions <a href=/tools/staticdocs/docs/getting-started/gettingstarted#building-your-plugin>here</a> to build and install your plugin containing your custom widget.</p>
55
+ <p>Now open Telemetry Viewer and select your screen to see your custom widget in action!</p>
56
+ <p>While this example is simple, the possibilities with custom widgets are limitless!</div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class=col><a href=https://github.com/OpenC3/cosmos/tree/main/docs.openc3.com/docs/guides/custom-widgets.md target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_UohW aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_g62E"></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href=/tools/staticdocs/docs/guides/cfs><div class=pagination-nav__sublabel>Previous</div><div class=pagination-nav__label>COSMOS and NASA cFS</div></a><a class="pagination-nav__link pagination-nav__link--next" href=/tools/staticdocs/docs/guides/dynamic-packets><div class=pagination-nav__sublabel>Next</div><div class=pagination-nav__label>Dynamic Packets</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_TN1Q thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#step-1-set-up-your-plugin-structure class="table-of-contents__link toc-highlight">Step 1: Set Up Your Plugin Structure</a><li><a href=#step-2-declare-your-widget-in-plugintxt class="table-of-contents__link toc-highlight">Step 2: Declare Your Widget in plugin.txt</a><li><a href=#step-3-configure-your-build-process class="table-of-contents__link toc-highlight">Step 3: Configure Your Build Process</a><ul><li><a href=#set-up-packagejson class="table-of-contents__link toc-highlight">Set Up package.json</a><li><a href=#update-your-rakefile class="table-of-contents__link toc-highlight">Update Your Rakefile</a></ul><li><a href=#step-4-create-your-widget-component class="table-of-contents__link toc-highlight">Step 4: Create Your Widget Component</a><li><a href=#step-5-develop-your-widget class="table-of-contents__link toc-highlight">Step 5: Develop Your Widget</a><ul><li><a href=#designing-your-widget-layout class="table-of-contents__link toc-highlight">Designing Your Widget Layout</a><li><a href=#adding-widget-logic class="table-of-contents__link toc-highlight">Adding Widget Logic</a><li><a href=#styling-your-widget class="table-of-contents__link toc-highlight">Styling Your Widget</a></ul><li><a href=#step-6-configure-your-build-output class="table-of-contents__link toc-highlight">Step 6: Configure Your Build Output</a><li><a href=#step-7-use-your-widget-in-a-screen-definition class="table-of-contents__link toc-highlight">Step 7: Use Your Widget in a Screen Definition</a><li><a href=#step-8-build-and-deploy-your-plugin class="table-of-contents__link toc-highlight">Step 8: Build and Deploy Your Plugin</a></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Homepage</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://openc3.com target=_blank rel="noopener noreferrer" class=footer__link-item>Home</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Docs</div><ul class="footer__items clean-list"><li class=footer__item><a class=footer__link-item href=/tools/staticdocs/docs>Documentation</a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>Community</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://www.linkedin.com/company/openc3 target=_blank rel="noopener noreferrer" class=footer__link-item>LinkedIn<svg width=13.5 height=13.5 aria-hidden=true class=iconExternalLink_awgD><use href=#theme-svg-external-link /></svg></a></ul></div><div class="theme-layout-footer-column col footer__col"><div class=footer__title>More</div><ul class="footer__items clean-list"><li class=footer__item><a href=https://github.com/OpenC3/cosmos target=_blank rel="noopener noreferrer" class=footer__link-item>GitHub<svg width=13.5 height=13.5 aria-hidden=true class=iconExternalLink_awgD><use href=#theme-svg-external-link /></svg></a><li class=footer__item><a class=footer__link-item href=/tools/staticdocs/docs/privacy>Privacy</a></ul></div></div><div class="footer__bottom text--center"><div class=footer__copyright>Copyright © 2025 OpenC3, Inc.</div></div></div></footer></div>