Skip to content

Cookie preferences

We use cookies for our own analytics, to see how our campaigns perform and, if you allow it, to load content from other services such as the Google site search. We never sell your data. Necessary cookies keep the site working and cannot be switched off. See our Cookie Policy for details and our Privacy Policy for how we handle personal data.

Security, load balancing and remembering your cookie choice.

Show us which pages people read and how they find the site, so we can improve it (Google Analytics).

Show us which of our ad campaigns bring visitors to the site and remember the campaign or partner link you arrived from (Google Ads, partner program). We do not use these cookies to build advertising profiles.

Load the site search from Google when you use it. Google sets its own cookies and shows ads in the search results.

© 2026 The ThingsBoard Authors
22.5k Try for free

ThingsBoard Cloud

Choose your data region

Your data stays in the region you choose, for residency and compliance. No credit card required.

Rather run it yourself? Install on your own servers

Odometer card

  • Widget
  • 1 install
  • v1.0.0
  • Oct 13, 2026
  • MIT license
  • v4.2+

A running total on mechanical drums, the way the meter on the wall shows it. Each digit turns to its new value and a nine carries forward into a zero rather than spinning backwards through eight, so a number that is climbing looks like it is climbing. The housing sizes itself to the card and to the digits it holds, a fixed count of drums keeps the width steady as the total grows into it, and the colors go from the classic dark drum to anything a dashboard needs.

Widget Type
  • Latest
Category
  • Cards & Info

Who it’s for

Anyone whose number only ever goes one way. A maintenance planner watching running hours tick toward the next service, a fleet operator reading distance, a plant counting units produced since the line was commissioned, an energy manager showing the meter total on a screen in reception. The number itself is not news on any given day; what people want is to see it move, and to recognize a counter the moment they walk past it.

What it does

A pump at 008427.3 hours: six drums for the whole hours and one for the tenths, turning behind a dark housing with the tenths on the opposite color, exactly as the meter on the wall is built. When the tenths pass nine the drum carries forwards into a zero rather than spinning back through eight, which is the detail that makes a counter look like a counter rather than a number being replaced.

  • Turns a running total into something that reads from across a room, where a plain value card reads as text to be stopped and parsed.
  • Keeps the width fixed. A set number of digits with the leading zeros kept means 427 stands as 000427 and the card never reflows as the total grows into it.
  • Carries the way the real thing carries, and borrows backwards when a total is corrected downwards, which is the only time a counter should ever run back.
  • Comes in two styles from the same two colors: mechanical drums for a dashboard with some character, and flat digits for one without. The roll is the same in both — it is the roll, not the housing, that says odometer.
  • Wraps round when the total outgrows the housing, as a mechanical counter does, so six drums at 999999 roll to 000000 rather than widening the card.
  • Shows one running total. It does not add keys together or compute the total from a rate, so a counter that has to be derived belongs in a calculated field first.

How to set up

The widget takes one entity and one numeric key, and reads its latest value.

Data keys

  • One numeric key — Timeseries or Attribute. The total the drums show, taken as the latest value rather than over a time window, which is why the dashboard time window does not change what it reads. Its decimals decide how many drums carry the fraction and its units are printed beside the housing. A reading that is not a number, or a key with nothing on it yet, shows the no-data message instead of standing at zero, because a counter reading zero is a claim.

Counter

  • Style — Mechanical by default. Mechanical builds one housing with the drums curving away at the top and bottom and the tenths on the opposite color. Digital keeps the rolling and throws away the machinery, setting the numerals straight on the card with the decimal smaller and softer.
  • Number of digits — 6 by default. How many digit positions stand before the decimal, which is how many drums the mechanical housing holds. Set it to zero to let the housing fit whatever the reading needs right now, at the cost of a card that changes width as the number grows.
  • Keep the leading zeros — on by default, and shown once a digit count is set. Stands a reading of 427 as 000427, which is what a real counter does and what stops the digits sliding sideways. Off leaves the unused positions off the card.
  • Separate the thousands — off by default. Puts a gap every three digits, which is easier to read and further from the look of a mechanical counter, which has no gaps at all.
  • Animate the digits — on by default. Each digit rolls to its new value instead of being replaced. Turn it off on a wall of many cards, where the motion is noise rather than information.

How to customize

  • To swap the classic dark drums for a light counter — set Drums and Digits. In the mechanical style Drums is the housing and the faces of the drums while Digits is the ink on them; in the digital style the same Drums color becomes the ink and Digits is what sits on the decimal. One pair of colors covers both styles, so changing style does not mean reconfiguring the palette.
  • To stop the card naming its own key — turn off Show the key label, which is worth doing when the widget title already says what is being counted.
  • To drop the units — turn off Show the units. They come from the data key.

Tips

  • Give the housing a couple more digits than the total needs today. A counter that wraps is authentic but rarely what anybody wants from their service hours.
  • Point it at a key that only climbs. A value that goes up and down will roll both ways, which works, but the form promises a total and the eye will read it as one.
  • Use the mechanical style where the dashboard has some weight to it — a dark header, photographs, a plant schematic — and the digital one where everything else is flat. Both read the same number; they just belong to different rooms.
  • Turn off the animation on a wall of twenty of these. One rolling counter draws the eye, twenty of them is a slot machine.

Share Your Widget with the Community

Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.