hyperion.ng/assets/webconfig/content/remote_components.html

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-12">
			<h1 class="page-header" lang="en" data-lang-token="main_menu_component_token">Effects</h1>
			<div class="introd">
				<h4 lang="en" data-lang-token="remote_components_intro">The components remote enables you to disable and enable certain components of Hyperion during runtime. Keep in mind this persist just until the next reboot! To enable/disable components permament, use the configuration section.</h4>
			</div>
			<hr>
			<div class="col-lg-12">
			 <div id="componentsbutton">
			 </div>
			</div>
		</div>
	</div>
</div>

<script>
/*
new Enum('SMOOTHING', 'BLACKBORDER', 'KODICHECKER', 'FORWARDER', 'UDPLISTENER', 'BOBLIGHT_SERVER','GRABBER', 'V4L');

function Enum() {
	for (var i in arguments)
	{
		this[arguments[i]] = i;
		$('#componentsbutton').append('<button type="button" class="btn btn-success" onclick="requestSetComponentState(\''+arguments[i]+'\',true)"><i class="fa fa-play"></i></button> '+arguments[i]+'<br />');
		$('#componentsbutton').append('<button type="button" class="btn btn-danger" onclick="requestSetComponentState(\''+arguments[i]+'\',false)"><i class="fa fa-play"></i></button> '+arguments[i]+'<br />');
    }
}
*/

function updateComponents(event) {
		if ($('#componentsbutton').length == 0)
		{
			$(hyperion).off("cmd-serverinfo",updateComponents);
		}
		else
		{
			components = event.response.info.components;
			// create buttons
			for ( idx=0; idx<components.length;idx++)
			{
				//components_html += '<tr><td>'+(components[idx].title)+'</td><td><i class="fa fa-circle component-'+(components[idx].enabled?"on":"off")+'"></i></td></tr>';
				enable_style = (components[idx].enabled? "btn-success" : "btn-danger");
				enable_icon  = (components[idx].enabled? "fa-play" : "fa-stop");
				comp_name    = components[idx].name;
				comp_btn_id  = "comp_btn_"+comp_name;
				
				// create btn if not there
				if ($("#"+comp_btn_id).length == 0)
				{
					d='<p><button type="button" id="'+comp_btn_id+'" class="btn '+enable_style
						+'" onclick="requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)
						+')"><i id="'+comp_btn_id+'_icon" class="fa '+enable_icon+'"></i></button> '+components[idx].title+'</p>';
					$('#componentsbutton').append(d);
				}
				else // already create, update state
				{
					setClassByBool( $('#'+comp_btn_id)        , components[idx].enabled, "btn-danger", "btn-success" );
					setClassByBool( $('#'+comp_btn_id+"_icon"), components[idx].enabled, "fa-stop"    , "fa-play" );
					$('#'+comp_btn_id).attr("onclick",'requestSetComponentState(\''+comp_name+'\','+(!components[idx].enabled)+')');
				}
				
			}
		}
};

$(document).ready(function() {
	$(hyperion).on("cmd-serverinfo",updateComponents);
});

</script>