Worldmap control problem

I am stuck at the moment with this project. Let me explain what i got.

I have made a large wooden worldmap on the wall. Behind it a have 128 led light for different locations. To control this i have programmed an ESP32 so i can turn on/off each one of these 128 leds. The control of these leds is send from HA via MQTT to the ESP32.
The control payload is a string of 1’s and 0’s for each led.
example: 111001…000011

When i use the developer/service tab and use the MQTT:publish service things goes fine. So a happy developer here.

Now for the GUI side of this control
This causing me headache. I tried to make a webpage with a form with 128 checkboxes. I’ve added some javascript to it and i am able to create a JSON string with the needed 1’s and 0’s
But how do i get this into HA?

My next thought was to create this inside HA itself and added it as a custom-iframe-panel. The weppage in the ifram did work but i still have the issue that i don’t know how to get this into HA so that the MQTT:Publish service can send the correct string.

As another attempt i tried to create a custom-panel. I got the example panel working but if i try to make changes to it then they don’t show up after a restart. Not even if i make small textual changes. And still i got the same issue here. How to get this string into HA and trigger the MQTT:Publish service.

So my question here is.
Would anybody have a great idea for this on how getting this to work. It may be also a completly different approach. Any help will do.

System Info
Home Assistant 2023.5.3
Supervisor 2023.04.1
Operating System 10.1
Frontend 20230503.3 - latest


I created 128 input_binary entities via the helper. Placed them on a new dashboard.
Next i made a template that take the states of the input_binaries and create a string that contains the right format. The string is then send via MQTT