hyperion.ng/assets/webconfig/effects.html

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header" lang="en" data-lang-token="main_menu_effects_token">Effects</h1>
			<div class="introd">
				<h4 lang="en" data-lang-token="remote_effects_intro">The Effects remote enables you to set an effect for testing or demonstration purposes. Don't forget to stop it afterwards.</h4>
			</div>
			<hr>
			<div class="col-lg-12" id="buttondiv">
				<button type="button" class="btn btn-danger" id="effect_stop"><i class="fa fa-stop"></i></button><span lang="en" data-lang-token="remote_effects_label_stopeffect">Stop Effect</span><br />
			</div>
		</div>
	</div>
</div>

<script>

	$(document).ready( function() {
			
		webSocket = new WebSocket('ws://'+document.location.hostname+':19444');
		var serverInfo;
		
		webSocket.onerror = function(event) {
			alert(event.data);
		};
		
		
		webSocket.onopen = function(event) {
			webSocket.send('{"command":"serverinfo"}');
		};
		
		webSocket.onmessage = function(response){
			responseJSON = JSON.parse(response.data );
			//console.log(response.data);
			for(i = 0; i < responseJSON.info.effects.length; i++) {
				//console.log(responseJSON.info.effects[i].name);
				var effectName = responseJSON.info.effects[i].name;
				
				$('#buttondiv').append('<button type="button" class="btn btn-success" onclick="playEffect(\''+effectName+'\')"><i class="fa fa-play"></i></button> '+effectName+'<br />');
			}
		}
		
		$("#effect_stop").on("click", function() {
			webSocket.send('{"command":"clear", "priority":1}');			
		});
	});
	
	
	function playEffect(effectName) {
		console.log(effectName);
		webSocket.send('{"command":"effect","effect":{"name":"'+effectName+'"},"priority":1}');
	}	

</script>