GoPro overlay

overlay.xml

<layout>
  <!-- Bottom left area. -->
  <composite x="240" y="1552" name="speed">
    <component type="msi2" metric="speed" units="kph" size="512" green="0" yellow="30" end="50" textsize="2" />
    <frame x="76" y="76" width="360" height="360" bg="0,0,0,255" cr="180" fo="1">
      <translate x="180" y="88">
        <component type="metric" metric="speed" units="kph" size="160" dp="0" rgb="255,255,255" align="centre"/>
      </translate>
    </frame>

    <translate x="255" y="360">
      <component type="metric-unit" metric="speed" units="kph" size="48" align="centre">{:~P}</component>
    </translate>

    <translate x="536" y="340">
      <frame width="512" height="96" bg="0,0,0" cr="48" opacity="0.5"></frame>
      <composite name="altitude">
        <component type="icon" x="36" y="16" file="mountain.png" size="64"/>
        <component type="metric" x="216" y="20" metric="alt" units="alt" dp="0" size="48" align="right" />
        <component type="text" x="220" y="20" size="48">m</component>
      </composite>
      <composite name="gradient">
        <component type="icon" x="292" y="16" file="slope-triangle.png" size="64"/>
        <component type="metric" x="434" y="20" metric="gradient" dp="0" size="48" align="right" />
        <component type="text" x="438" y="20" size="48">%</component>
      </composite>
    </translate>

    <translate x="536" y="220">
      <component type="chart" name="gradient_chart" height="96" fill="0,0,0,127" bg="0,0,0,0" />
    </translate>

  </composite>

  <!-- Circuit map (above bottom right). -->
  <translate x="3088" y="1016">
    <component type="cairo_circuit_map" size="512" fill="63,63,63" outline="31,31,31" loc-fill="255,255,255" loc-outline="0,0,0" />
  </translate>

  <translate x="2656" y="1912">
    <frame width="312" height="96" bg="0,0,0" cr="48" opacity="0.5"></frame>
    <composite name="odometer">
      <component type="icon" x="16" y="16" file="speedometer-variant-tool-symbol.png" size="64"/>
      <component type="metric" x="220" y="20" metric="odo" dp="0" size="48" align="right" />
      <component type="text" x="224" y="20" size="48">m</component>
    </composite>
  </translate>

  <translate x="2992" y="1912">
    <frame width="96" height="96" bg="0,0,0" cr="48" opacity="0.5"></frame>
    <translate x="16" y="16">
      <component type="gps-lock-icon" size="64"/>
    </translate>
  </translate>

  <frame x="3088" y="1552" width="512" height="512" cr="256" outline="255,255,255,255" bg="255,255,255,0" fo="1" opacity="0.5">
    <frame x="8" y="8" width="496" height="496" cr="248">
      <!-- Recommended style: geo-toner-grey -->
      <component type="moving_journey_map" size="496" zoom="19" />
    </frame>
  </frame>
</layout>