Draw avatar with rings and indicators

Render the 3D avatar with measurement rings and labeled value indicators on top of it.

Overview

drawAvatarWithRingsAndIndicators(response, ringsAndIndicatorsOptions, options) renders the avatar with two kinds of measurement overlay:

Rings — circular bands drawn around the body at each measurement girth (waist, bust, hip, thigh, calf, upper arm).
Indicators — labels attached to the rings that show the measurement's numeric value and unit.

You only declare which measurements to surface. The numeric value and unit for each indicator are looked up from the response's measurements array — DrawUtils does not require you to wire those through yourself.

Supported responses

Source method	Notes
`getBodygramScannerPlatformPhotoEstimation`
`getBodygramScannerPlatformStatsEstimation`
`getBody2FitPhotoEstimation`
`getBody2FitStatsEstimation`
`getBody2FitTokenEstimation`

The method validates the response on the way in and throws if:

The shape doesn't match either Bodygram Scanner Platform or Body2Fit.
The avatar field is missing.
A requested indicator's measurement is absent from the response's measurements array.

Usage

Bodygram Scanner Platform

const utils = new BodygramSDKDrawUtils({ locale: 'en' });

const response = await sdk.getBodygramScannerPlatformPhotoEstimation({ /* … */ });

utils.drawAvatarWithRingsAndIndicators(
  response,
  {
    rings: [
      { name: 'waistGirth' },
      { name: 'hipGirth' },
      { name: 'thighGirthR' },
    ],
    indicators: [
      { name: 'waistGirth' },
      { name: 'hipGirth' },
    ],
    showDebugRings: false,
    templateID: 'default',
  },
  { container: 'avatar' },
);

Body2Fit

const utils = new BodygramSDKDrawUtils({ locale: 'en' });

const response = await sdk.getBody2FitPhotoEstimation({ /* … */ });

utils.drawAvatarWithRingsAndIndicators(
  response,
  {
    rings: [
      { name: 'bustGirth' },
      { name: 'waistGirth' },
      { name: 'hipGirth' },
    ],
    indicators: [
      { name: 'bustGirth' },
      { name: 'waistGirth' },
      { name: 'hipGirth' },
    ],
    showDebugRings: false,
    templateID: 'default',
  },
  { container: 'avatar' },
);

<div id="avatar"></div>

Reference

Full method signature, parameter table, return value, and throws semantics → drawAvatarWithRingsAndIndicators(...) in the API reference.
Ring/indicator config shape → AvatarWithRingsAndIndicatorsOptions, RingOptions, DrawIndicatorInput.
Available measurement names + default indicator sides → RingMeasurementName.
Mount target and presentation options → DrawOptions.

Indicator units are normalized to centimeters. When the response reports a girth in millimeters (mm), DrawUtils displays it in cm — values are divided by 10 and rounded to one decimal place. Other units (e.g. cm, in) are passed through unchanged.

Localization

Ring labels (e.g. Bust, Waist, Hip) and indicator labels are localized based on the locale you pass to the DrawUtils constructor. The same locale codes accepted by the Headless SDK are supported here — see the supported locales table for the full list.

const utils = new BodygramSDKDrawUtils({ locale: 'ja' });

utils.drawAvatarWithRingsAndIndicators(response, options, { container: 'avatar' });
// → ring/indicator labels render in Japanese

Try the playground below and switch the Locale selector to see the labels swap languages live. The selected locale is also reflected in the snippet on the right.

Playground

Try drawAvatarWithRingsAndIndicators with a Bodygram Scanner Platform sample, a Body2Fit sample, or your own response. The playground draws a fixed set of rings and indicators — bust, waist, and hip — to keep the avatar legible.

Interactive Demo

Scan response

Fetched from /success-response/platform-success-response-2.json.

Locale

Switch the locale to see the ring and indicator labels render in the selected language. Locale also flows into the snippet on the right.

Avatar with rings and indicators

Loading…

index.html · UMD

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Bodygram DrawUtils — Rings & Indicators</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 24px; }
    /* Padding gives the indicator labels room to breathe so they don't
       collide with the frame border. */
    #avatar { width: 100%; aspect-ratio: 3 / 4; background: #ffffff; border: 1px solid #e5e5e5; padding: 24px; box-sizing: border-box; }
  </style>

  <!-- 1. Bodygram Headless SDK (UMD) — produces the estimation response -->
  <script src="https://headless.body2fit.bodygram.com/sdk.umd.js"></script>

  <!-- 2. three.js — UMD requires three <= 0.160.0 -->
  <script src="https://unpkg.com/three@0.160.0/build/three.min.js"></script>

  <!-- 3. DrawUtils (UMD build) -->
  <script src="https://headless.body2fit.bodygram.com/sdk.drawutils.umd.js"></script>
</head>
<body>
  <div id="avatar"></div>

  <script>
    (async () => {
      // 1. Run a scan and estimate measurements with the main SDK.
      //    `token` comes from your server, where your API key lives.
      const sdk = new BodygramSDK({ clientKey: 'YOUR_CLIENT_KEY', locale: 'en' });
      const { front, side } = await sdk.scan();
      const response = await sdk.getBodygramScannerPlatformPhotoEstimation({
        token,
        front,
        side,
        age: 25,
        gender: 'female',
        height: 1700,
        weight: 60000,
      });

      // 2. Hand the full response to DrawUtils, plus the rings/indicators to draw.
      const utils = new BodygramSDKDrawUtils({ locale: 'en' });
      utils.drawAvatarWithRingsAndIndicators(
        response,
        {
          rings: [
            { name: 'bustGirth' },
            { name: 'waistGirth' },
            { name: 'hipGirth' },
          ],
          indicators: [
            { name: 'bustGirth' },
            { name: 'waistGirth' },
            { name: 'hipGirth' },
          ],
          showDebugRings: false,
          templateID: 'default',
        },
        { container: 'avatar' },
      );

      // ---
      // The same call also accepts Body2Fit responses:
      //
      //   const b2f = await sdk.getBody2FitPhotoEstimation({ … });
      //   utils.drawAvatarWithRingsAndIndicators(b2f, ringsAndIndicators, { container: 'avatar' });
      //
      // Indicator values and units are looked up from the response's
      // measurements array — you only declare which ones to surface.
    })();
  </script>
</body>
</html>

How it works

The playground does what the snippet on the right does:

Load three.js and DrawUtils. Same loading rules as drawAvatar — UMD loads three@0.160.0 and the DrawUtils UMD via globals; ES uses an importmap.
Fetch the scan response. The playground uses static samples at /success-response/platform-success-response-2.json and /b2f-responses/b2f-photo-success-avatar-response.json. Both samples include the bust, waist, and hip girths required by the indicators.
Construct DrawUtils. A single instance is reused across renders.
Draw the avatar with rings and indicators. DrawUtils looks up each indicator's value and unit from entry.measurements (Bodygram Scanner Platform) or estimations.measurements (Body2Fit). Millimeter values are normalized to centimeters before display.

DrawUtils API reference — full method signatures, options, and types.
Draw avatar — render the bare avatar with no overlays.
Draw posture avatar — render the avatar with posture overlays.
Headless API reference — measurements — the full list of girths the platform reports.

Draw avatar with rings and indicators

On this page