MiBand4WF

Create watch faces for the Xiaomi mi-band4 Here I commit all files for my watch faces. Enjoy!

Properties of the json file

The json file is composed of nested dictionaries which contain many keys used to set the location, position and image to be displayed for each element of the watchface. These are some common keys:

• X: position in the x-axis (int)
• Y: position in the y-axis (int)
• ImageIndex: number of the first image (int)
• ImagesCount: images from ImageIndex to ImageIndex + ImagesCount (int)

Alternative to X and Y positions using distances:

• TopLeftX: (int)
• TopLeftY: (int)
• BottomRightX: (int)
• BottomRightY: (int)
• Alignment: (string) ["TopRight", "TopLeft", "BottomRight", "BottomLeft", ...]
• Spacing: (int)

The available keys and their usability are described below.

Replace "int", "string", and "bool" with that type of data but with the value you want.

Table of Contents

1. Background
2. Time
3. Date
4. Activity
5. Status
6. Battery
7. Weather

Background

It defines the image background:

image

"Background": {
  "Image": {
    "X": "int",
    "Y": "int",
    "ImageIndex": "int"
  }
}

Time

It displays the time:

images

"Time": {
  "Hours": {
    "Tens": {
      "X": "int",
      "Y": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
    },
    "Ones": {
      "X": "int",
      "Y": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
    }
  },
  "Minutes": {
    "Tens": {
      "X": "int",
      "Y": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
    },
    "Ones": {
      "X": "int",
      "Y": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
    }
  },
  "Seconds": {
    "Tens": {
      "X": "int",
      "Y": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
    },
    "Ones": {
      "X": "int",
      "Y": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
    }
  },
  "AmPm": {
    "X": "int",
    "Y": "int",
    "ImageIndexAm": "int",
    "ImageIndexPm": "int"
  }
}

Date

It represents the weekday, day and month:

images

"Date": {
  "WeekDay": {
      "X": "int",
      "Y": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
  },
  "MonthAndDay": {
    "TwoDigitsMonth": "bool",
    "TwoDigitsDay": "bool",
    "Separate": {
      "Day": {
        "TopLeftX": "int",
        "TopLeftY": "int",
        "BottomRightX": "int",
        "BottomRightY": "int",
        "Alignment": "string",
        "Spacing": "int",
        "ImageIndex": "int",
        "ImagesCount": "int"
      },
      "Month": {
        "TopLeftX": "int",
        "TopLeftY": "int",
        "BottomRightX": "int",
        "BottomRightY": "int",
        "Alignment": "string",
        "Spacing": "int",
        "ImageIndex": "int",
        "ImagesCount": "int"
      }
    }
  },
  "OneLine": {
    "Number": {
      "TopLeftX": "int",
      "TopLeftY": "int",
      "BottomRightX": "int",
      "BottomRightY": "int",
      "Alignment": "string",
      "Spacing": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
    },
    "DelimiterImageIndex": "int",
  }
}

Activity

It shows the data regarding the calories, steps, pulse and distance the user does during the day:

images

"Activity": {
  "Calories": {
    "TopLeftX": "int",
    "TopLeftY": "int",
    "BottomRightX": "int",
    "BottomRightY": "int",
    "Alignment": "string",
    "Spacing": "int",
    "ImageIndex": "int",
    "ImagesCount": "int"
  },
  "Steps": {
    "TopLeftX": "int",
    "TopLeftY": "int",
    "BottomRightX": "int",
    "BottomRightY": "int",
    "Alignment": "string",
    "Spacing": "int",
    "ImageIndex": "int",
    "ImagesCount": "int"
  },
  "StepsGoal": {
    "TopLeftX": "int",
    "TopLeftY": "int",
    "BottomRightX": "int",
    "BottomRightY": "int",
    "Alignment": "string",
    "Spacing": "int",
    "ImageIndex": "int",
    "ImagesCount": "int"
  },
  "Pulse": {
    "TopLeftX": "int",
    "TopLeftY": "int",
    "BottomRightX": "int",
    "BottomRightY": "int",
    "Alignment": "string",
    "Spacing": "int",
    "ImageIndex": "int",
    "ImagesCount": "int"
  },
  "Distance": {
    "Number": {
      "TopLeftX": "int",
      "TopLeftY": "int",
      "BottomRightX": "int",
      "BottomRightY": "int",
      "Alignment": "string",
      "Spacing": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
    },
    "SuffixImageIndex": "int",
    "DecimalPointImageIndex": "int"
  }
}

Status

It references the different icons for the user to know the status of some functions of the watch:

images

"Status": {
  "Alarm": {
    "Coordinates": {
      "X": "int",
      "Y": "int"
    },
    "ImageIndexOn": "int"
  },
  "Bluetooth": {
    "Coordinates": {
      "X": "int",
      "Y": "int"
    },
    "ImageIndexOn": "int",
    "ImageIndexOff": "int"
  },
  "DoNotDisturb": {
    "Coordinates": {
      "X": "int",
      "Y": "int"
    },
    "ImageIndexOn": "int"
  },
  "Lock": {
    "Coordinates": {
      "X": "int",
      "Y": "int"
    },
    "ImageIndexOn": "int"
  }
}

Battery

Data regarding the status of the battery of the watch:

images

"Battery": {
  "Icon": {
    "X": "int",
    "Y": "int",
    "ImageIndex": "int",
    "ImagesCount": "int"
  },
  "Text": {
    "TopLeftX": "int",
    "TopLeftY": "int",
    "BottomRightX": "int",
    "BottomRightY": "int",
    "Alignment": "string",
    "Spacing": "int",
    "ImageIndex": "int",
    "ImagesCount": "int"
  },
  "Scale": {
    "StartImageIndex": "int",
    "Segments": [
      {
        "X": "int",
        "Y": "int"
      }
    ]
  }
}

Weather

Information about the weather such as current temperature or temperature during the day and during the night:

images

"Weather": {
  "Icon": {
    "CustomIcon": {
      "X": "int",
      "Y": "int",
      "ImageIndex": "int",
      "ImagesCount": "int"
    }
  },
  "Temperature": {
    "Today": {
      "OneLine": {
        "Number": {
          "TopLeftX": "int",
          "TopLeftY": "int",
          "BottomRightX": "int",
          "BottomRightY": "int",
          "Alignment": "string",
          "Spacing": "int",
          "ImageIndex": "int",
          "ImagesCount": "int"
        },
        "MinusSignImageIndex": "int",
        "DelimiterImageIndex": "int",
        "AppendDegreesForBoth": "bool",
        "DegreesImageIndex": "int"
      },
      "Separate": {
        "Day": {
          "Number": {
            "TopLeftX": "int",
            "TopLeftY": "int",
            "BottomRightX": "int",
            "BottomRightY": "int",
            "Alignment": "string",
            "Spacing": "int",
            "ImageIndex": "int",
            "ImagesCount": "int"
          },
          "MinusImageIndex": "int",
          "DegreesImageIndex": "int"
        },
        "Night": {
          "Number": {
            "TopLeftX": "int",
            "TopLeftY": "int",
            "BottomRightX": "int",
            "BottomRightY": "int",
            "Alignment": "string",
            "Spacing": "int",
            "ImageIndex": "int",
            "ImagesCount": "int"
          },
          "MinusImageIndex": "int",
          "DegreesImageIndex": "int"
        }
      }
    },
    "Current": {
      "Number": {
        "TopLeftX": "int",
        "TopLeftY": "int",
        "BottomRightX": "int",
        "BottomRightY": "int",
        "Alignment": "string",
        "Spacing": "int",
        "ImageIndex": "int",
        "ImagesCount": "int"
      },
      "MinusImageIndex": "int",
      "DegreesImageIndex": "int"
    }
  }
}

Use OneLine or Separate in Temperature>Today, do not add both in order not to have duplicated information