Attitude.json

{
  "header": {
    "version": 1
  },
  "widget": {
    "x": "0",
    "y": "0",
    "w": "2",
    "h": "2",
    "type": "WidgetSandBox",
    "options": {
      "form": {
        "components": []
      },
      "form_content": {},
      "sandbox": "// Import Gauges from https://github.com/teocci/js-module-flight-indicators\n// Add css with link tag\nconst css = document.createElement('link')\ncss.rel = \"stylesheet\"\ncss.href = \"https://unpkg.com/flight-indicators-js@1.0.5/css/flight-indicators.css\"\ndocument.body.appendChild(css)\n\nlet attitude\nimport(\"https://unpkg.com/flight-indicators-js@1.0.5/esm/module-flight-indicators.mjs\").then((mod) => {\n    const FlightIndicators = mod.default\n\n    attitude = new FlightIndicators(\n        div,\n        FlightIndicators.TYPE_ATTITUDE\n    )\n\n    // This is a dirty hack to switch to remote copy's of images\n    let images = div.querySelectorAll(\"img\")\n    for (const image of images) {\n        let src = image.src\n\n        var lastIndex = src.lastIndexOf(\"/img/\")\n        image.src = \"https://unpkg.com/flight-indicators-js@1.0.5\" + src.substr(lastIndex)\n\n        // Hide box is broken, hide manually\n        // see: https://github.com/teocci/js-module-flight-indicators/pull/1\n        if (src.endsWith(\"fi_box.svg\")) {\n            image.style.display = \"none\"\n        }\n    }\n\n    resize()\n})\n\n// Remove margin and border to give more room\ndiv.style.margin = 0\ndiv.style.border = 0\ndiv.style.padding = 0\n\n// Center gauge\ndiv.style.display = \"flex\"\ndiv.style.justifyContent = \"center\"\ndiv.style.alignItems = \"center\"\n\nfunction resize() {\n\n    if (attitude == null) {\n        return\n    }\n\n    // Get width and height of widget\n    const width = div.offsetWidth\n    const height = div.offsetHeight\n\n    const max_size = Math.min(width, height)\n    attitude.resize(max_size)\n}\n\n// Watch for size changes\nnew ResizeObserver(() => { resize() }).observe(div)\n\nconst ATTITUDE_id = 30\nlet selected = null //IB add\n\n// Runtime function\nhandle_msg = function(msg) {\n\n    if (msg._id != ATTITUDE_id) {\n        return\n    }\n\n    selected = msg._vehicleID //IB add\n\n    if (attitude == null) {\n        return\n    }\n\n    function rad2deg(rad) {\n        return rad * (180.0 / Math.PI)\n    }\n\n    // Roll is backwards for some reason...\n    attitude.updateRoll(-rad2deg(msg.roll))\n\n    attitude.updatePitch(rad2deg(msg.pitch))\n}\n\n//IB listen for vehicle remove\nparent.addEventListener('vehicleRemoveAttitude gauge', e => {\n    const vehicleID = e.detail.vehicleID\n    if (vehicleID == selected) {\n        // Reset angle\n        attitude.updateRoll(0)\n        attitude.updatePitch(0)\n        resize()\n    } \n})\n",
      "about" : {
        "name": "Attitude gauge",
        "info": "Attitude gauge example built using the Sandbox widget. Reads ATTITUDE MAVLink message."
      }
    }
  }
}