I wrote a cool Battery Status Monitor for uiFlow.



  • I got my M5Stack two days ago and just used flow to write a battery status monitor. The demo in uiFlow just showed a fake battery display to show how to draw lines and rectangles, etc. I created a battery status monitor that has these features:

    • Button Presses:
      • A=Show Batt %
      • B=Bright Down
      • C=Bright Up
    • Shows 4 battery status markers in a battery display like on your phone: red, orange, yellow, and green.
      *. When full they all show green.
    • When charging the unit checks for the percentage of battery charge and displays the appropriate color on the display. The display even shows charging or discharging by having the appropriate color on the battery display.

    Its hard to explain but it's awesome and I'm proud of it. I don't have privileges to post it here so I put it on my google drive. I hope thats allowed.
    https://drive.google.com/file/d/1x_bvFIKlw_p4aV5HTHdQAkPKws7TaNsf/view?usp=sharing

    Let me know if you try it. I hope they add it to the demo's.



  • I've been working on refining the code so if anyone actually wants to try this let me know and I will re-upload the file.



  • Hi Meldrak,

    With UI Flow 1, it is quite easy to report the battery status by a label.
    But it may be fun to display the picture of the battery and with various colors. So I am interested by your example

    Take care

    csierra67



  • @csierra67 That was my goal. I wanted to change the demo they have in UIFlow to something that actually worked. They just had a battery logo with green bars. It was just for show. I wrote this to start learning how to use UIFlow. I'm certain it could be scaled down and added to any programs UI in the upper corner. :)



  • Hi Meldrak,

    I tried to download the program from your drive but it is protected and I did not have the permission.
    Why not posting a copy of the UI Flow blocks (as an image or several images..) here.
    As far as the publication of your example by M5 stack, I don(t know the submission process.

    csierra67



  • Sorry about the file issue. I fixed the permissions and I will take some screenshots and show y'all the code!



  • 0_1703093786433_Screenshot 2023-12-20 at 11.35.54 AM.png



  • If you see ways I could have made the code smaller, or have ideas on how I can improve it please let me know. I stumbled my way through this as my first program other than "Hello World". The unit only reports battery percentage as 25%, 50%, or 75% as far as I can tell. I'm not sure how to get it to report exact percentages. The "isChargeFull" blockly doesn't seem to work at all. Maybe the unit never reports full. I would also like it to refresh the status more often, but again blockly seems to lack the support for it to change the battery monitor as the percentage changes. I have to restart the unit every now and then or the unit wont realize the percentage has dropped into the range of another color, even though they are flashing like I want and the button press to show percentage works to display percentages in 25% increments.



  • Hi Meldrak,

    I gave it a try with a Core M5 basic but I did not get the inside of the battery turn green, orange or red. It stayed black. The issue is that the m5f file does not contain all of the blockly commands, rect1, rect2... up to rect 6 are missing and must be added. The python program contains the corresponding commands but they don't seem to be sufficient..

    The increase brightness button works, the decrease brightness seems to effective, screens becomes completely black.
    Overall my feeling is that the code is too complex to just report the battery charge level.
    And as you say, the indication lacks of precision : 100 % 75% 50% and 25%