How to make a custom gauge for use in Kivy

[Bavo Denys]

Hi

I'm working on an mobile application for kite surfers at the Belgian coast. I want to display real time wind data for several places along the Belgian coast. I found this example on https://www.windekindmeteo.be/ . How do I start to make something similar for my app created with Kivy. I would really appreciate some advice on how to start with this!! 

Thanks in advance!!

Bavo Denys

[wolf...@gmail.com]

here is an example. https://github.com/wolfmanjm/kivy-smoothie-host/blob/master/dial-gauge.py

There are also some examples in the kivy garden.

[Rod K.]

Hello Bavo,

I hope that the GitHub example posted here was more than enough to satisfy your needs. For me, as an absolute beginner, it would be much too complicated to code all elements for a gauge (I'm not good enough at maths). In case you could use some advice from a novice like me, I would suggest to design all gauge elements in your preferred photo editing program (ensuring that the angle between whatever values are to be displayed is perfectly constant) and then placing them as images on the right position (relative to a mobile phone's screen). I made an android app for my daughter with a gauge that retrieves via internet the current KP-index (indicator of disturbances in the Earth's magnetic field) for drone-flying purposes. The gauge itself is a perfect square that is coded in the kv file so as to remain a square no matter what the screen proportions are:

Image:
     source: "Images/Gauge.png"
     size_hint_y: None     # Deactivates relative height so as to declare it separately.
     height: self.width     # Defines that height = width. KEEPS SQUARE aspect ratio constant!
     size_hint_x: 0.96     # Defines the width relative to layout.
     pos_hint: {'center_x': .5, 'center_y': .5}   # Puts the image right in the middle of the layout.

The needle (also in the kv file) is a very thin and long image that is also placed and sized according to the layout and is the only element that needs some math to let it rotate according to a value that is delivered and updated by the python code. I did need a PushMatrix and PopMatrix for the rotation. The needle rotates from the centre of the bottom side:

Image:
     source: "Images/Needle.png"
     size_hint_y: None                 # Deactivates relative height so as to declare it separately.
     height: self.width * 13.8     # Defines that height = (width * png's aspect ratio). For the "needle"=13.8
     size_hint_x: 0.018               # Defines the width relative to layout.
     pos_hint: {'center_x': 0.5, 'y': 0.5}     # Places the image right in the middle of the layout.
     canvas.before:
         PushMatrix
         Rotate:
             angle: 130.5 - (29 * root.kp)
             origin: self.center_x, self.y
     canvas.after:
         PopMatrix

Of course in your case you would probably need several gauges on one screen or several screens. Maybe my suggestion is absurd and a no-go for advanced coders, but at least I can assure you that the KP-index app I made works perfectly, displaying the correct values whenever it's used.

I'm attaching a screenshot of the app so that you can see the results for yourself. At the moment of taking the screenshot, the kp value was zero (excellent for flying!).