Design a site like this with
Get started

Custom watchface config.json data structure

Main config.json object data structure
Property nameProperty typeDescription
infoInfoDefaultDescribed additional info about current watchface
use_custom_arrowsBooleanfalseIf true , will use custom arrow images from /xdrip/arrows folder. The arrows folder should contain 7 images with the following names. DoubleDown, DoubleUp,Flat, FortyFiveDown, FortyFiveUp,SingleDown,SingleUp
If false or not specified, the embedded arrows would be used.
resource_to_replaceint0Defines the resource number which should be replaced and used to generate wathcdrip app dynamic content
graphGraphSettingsDefines graph settings
arrow_positionPositionPositionDefines the arrow position where it would be rendered on the canvas
bg_value_textBgValueTextBgVWill display bg value with specific settings
iob_textSimpleTextSimpleTextPredicted IOB text settings
wpb_textSimpleTextSimpleTextPredicted WPB text settings
pump_iob_textSimpleTextSimpleTextPump iob text settings
pump_reservoir_textSimpleTextSimpleTextPump reservoir text settings
pump_battery_textSimpleTextSimpleTextPump battery text settings
delta_textSimpleTextSimpleTextBG delta text settings
delta_time_textSimpleTextSimpleTextBG delta time text settings
no_readings_textSimpleTextSimpleTextThis text would be displayed if there is no reading to display
no_readings_time_textSimpleTextSimpleTextNo readings time settings
battery_levelSimpleTextSimpleTextWill display a phone battery level
status_textarray [SimpleText]not implemented
ext_status_line_textSimpleTextSimpleTextWill display the AAPS external status data (since watchdrip v0.2.2)

Info object data structure

Property nameProperty typeDescription
descriptionStringA short description for current watcface
authorStringWathcface creator author
watch_typeStringThe watch model is supported by this watch.
versionStringThe current version of the watcface

GraphSettings object data structure

Property nameProperty typeDefaultDescription
positionPositionPositionPosition where to draw the graph
widthint120Graph width
heightint80Graph height
x_axisAxisSettingsIf defined, will display x-axis with specified settings
y_axisAxisSettingsIf defined, will display y-axis with specified settings
low_lineLineSettingsIf defined, will display a low BG line with specified settings
high_lineLineSettingsIf defined, will display a high BG line with specified settings

Position object data structure

Property nameProperty typeDefaultDescription
xint0The x-coordinate
yint0The y-coordinate
rotateint0The amount to rotate, in degrees

AxisSettings object data structure

Property nameProperty typeDefaultDescription
has_linesbooleantrueWill connect the dots with a line
is_insidebooleantrueSet to true if you want axis values to be drawn inside the chart area(axis name still will be drawn outside), by
If set to false, the axis is drawn outside the chart area.
text_sizeint10The amount to rotate, in degrees
line_colorString(color format)#FFFFFFDefines line color
text_colorString(color format)#FFFFFFDefines text color

LineSettings object data structure

Property nameProperty typeDefaultDescription
displaybooleantrueWill display a current line
point_radiusintSet the radius for points for this line.
line_thicknessintSet line thickness.
text_sizeintSet labels text size
shapeValueShapeSet shape for points, possible values CIRCLE, SQUARE, DIAMOND
area_transparencyintSet area transparency(255 is full opacity) for filled lines
colorString(color format)

TextSettings object data structure

Property nameProperty typeDefaultDescription
font_sizefloat10Text size
text_scalefloat1Set the paint’s horizontal scale factor for text. The default value is 1.0. Values > 1.0 will stretch the text wider. Values < 1.0 will stretch the text narrower.
font_familyStringsans-serifSince watchdrip 0.1.2 is possible to use one of the android system fontface “MONOSPACE“, “SANS_SERIF“, “SERIF“. Or use an app embedded “Roboto-Bold.ttf“, “Roboto-Italic.ttf” and “Roboto-Regular.ttf“. Or if enabled custom watchface, you can upload your custom font ttf file to “xdrip/fonts” directory and specify the font file name in this field, like “my_custom_font.ttf”.
I case you use an app embedded or custom font, the text_style option will be ignored.
text_styleStringnormalThe text style. possible values
“normal”, “bold”, “italic”, “bold_italic”
text_alignStringleftSet the text alignment
colorString(color format)#FFFFFF

SimpleText object data structure

Property nameProperty typeDefaultDescription
text_settingsTextSettingsTextSettingsText Settings
positionPositionPositionDefines the text position where it would be rendered on the canvas
text_patternString“”The text pattern would be used to display text in normal state. Use ‘$value‘ to display the value. Use ‘$time‘ to display time data. Use ‘$time_short‘ to display short units in time
outdated_text_patternString“”The text pattern which would be used to display text in an outdated state. It is possible to use the same variable as in text_pattern

BgValueText object data structure extends SimpleText

Property nameProperty typeDefaultDescription
color_highString(color format)#FFFFFFThe text color which would be used when BG data is high
color_lowString(color format)#FFFFFFThe text color which would be used when BG data is low


11 thoughts on “Custom watchface config.json data structure

  1. Hi Artem, How are you???

    I’ve got a question: how can i “x_axis” “line_thickness” change, cause when i set chart on GTR2E i’ve got vertical line but they are randomly visible.


  2. Hi guys,

    I wanna change the watchface, so that I can’t see the graph, I want a picture instead.

    Any idea how to do that?
    There are a lot of setting, but i couldn’t find a file anywhere with that content. I just see the watchface.bin all the time.

    And another thing, if I open the watchfac.bin, open it and pack it again (without changes), it’s more than double size. Is there a trick to compress it?


    1. You need to create a custom wf. To pack/unpack there is a lot of tools online (I use python). To save space cut all PNG smaller as you can and remove the half alpha (pixel half transparent – to do that I used PIL python and numpy)


    1. Okay I can use delta_text and delta_time_text to split the string of the delta.

      How can I change the text color? Contrary to what is stated in the table above, you cannot specify the colors in RGB in hex (#ffffff). Some combinations work (e.g. #0000ff), most don’t (e.g. #555555, #aaaaaa). What colors are supported? I want to use the Bip S palette: (source and
      Why the colors in bg_value_text are set to color_high: “#ffffff00” and color_low: “#ffff0000 – four hex values instead of three?


  3. Thanks so much for your work (using an Amazfit 5 with WatchDrip+ perfectly).
    How do i need to get started with customization?
    Where do i find this file config.json?


      1. Thanks for the link. Though, i am still having trouble to get started.
        Is there a working example for AMAZFIT BAND 5 that looks like the original?
        I just want to change font sizes and not the whole watchface.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: