Include Angular Service for custom plugin?

I am working on a new plugin and I am inspired by the Wifi / Network plugin scanner interface where the results are populated on the config page by an angular service / directive found in the Volumio2-UI src/app/plugin/core-plugin/wifi-controller.js (css, html) files.

github.com/volumio/Volumio2-UI/ … troller.js

These files are gulped together with the /volumio/http/www/scripts/app-697d229700.js from what I can tell, so my question is how do I make an installable plugin without hacking the core to inject an angular service to the front end where I can call it within my UIConfig.json and display a block I have control over?

It seems the end of the trail was in the https://volumio.github.io/docs/API/UI_Configuration_Pages.html

I have copied / updated those 3 files above from the wifi service to my plugin directory and at a loss how to get them available in my configuration page. Any tips on this?

Next, I’d like to call my service when I toggle a switch on the configuration page of my plugin. When the switch is toggled on, a method from my service populates the HTML on my configuration page with the results, and further actions like “Connect to Headphones” as a result found from the angular service for my plugin. As of now, I can’t even get any response out of the switch at all using ngClick, ngChange, onClick, onChange, onToggle, and a dozen other common angular event handlers. Is it possible to register a callback on the switches created by the UIConfig.json?

github.com/frapontillo/angular- … sSwitch.js

For example when the UIConfig.json calls:

    {"coreSection":"network-status"}

From app/plugins/system_controller/network/UIConfig.json such as:

{ "page": { "label": "TRANSLATE.NETWORK.NETWORK_SETTINGS" }, "sections": [ {"coreSection":"network-status"}, // How do I register my own service for this "section" of my config page? { "id": "section_wired_network", "element": "section", "label": "TRANSLATE.NETWORK.WIRED_NETWORK" //.... } ]}

I’d like {“MyPluginService” : “method_1”}
and be able to populate the “section” of that configuration page.

Would any direct me to the layer of Angular / Node that Volumio allows services to be added?

I am still literally stumped on this and have been digging through all of the code in the Volumio2 and Volumio2-UI packages to include every single word of the documentation for all sections of Volumio and the forums and I can’t seem to get any direction. It appears there are limitations in the settings of UIConfig.json and how it translates to the angular front-end. I have hit a wall with my plugin development after creating all of the system install scripts, plugin configurations, research on the backend audio routing, bluetooth, and more, and I simply want to create a drop-in or downloadable plugin that does not require modifying the core to include an angular service on my plugin’s configuration pages. I’ve created an audio_interface plugin, and I’m stuck at how to display anything other than buttons / select menus on the config page through UIConfig.json.

Question: How do I add my own angular service, directives and controllers to my own configuration page in Volumio2 without hacking the core, to include the menu.js.

Is there a way to call a custom .html page with angular and my controllers from the UIConfig.json or by adding a page and route through the index.js from within my plugin in /data/plugins/audio_interface/myPlugin/

I don’t know how much more effort I can put into this plugin without having control over the plugin’s interface options. Someone mentioned running your own nodejs server to create your own interface, but how would I do that within Volumio without sending them to another page or a popup? The UIConfig.json features seem to have no documentation, or very little, and the examples are restricted by the basics.

Thanks!