micahnyc/openspacebuttons.html

## openspacebuttons.html
<html>
<head>
    <script src="http://hub.openspaceproject.com/openspace-api.js"></script>
    <title>OpenSpace javascript demo</title>
</head>
    <body>
        <div id="text">connecting</div>
        <ul id="buttons"></ul>
        <script>
             //function to create buttons that send commands to openspace
            function createOpenSpaceButton(buttonTitle, actionIdentifier) {
                //create a new button with title
                let newButton = document.createElement("button");
                newButton.innerHTML = buttonTitle;
                //assign click function to button
                newButton.onclick = function () {
                    openspace.action.triggerAction(actionIdentifier);
                };
                //append the new button to the button container
                var buttons = document.getElementById("buttons");
                buttons.appendChild(newButton);
            }
            //create buttons
            createOpenSpaceButton("Hello World", "profile.focus.earth");
            createOpenSpaceButton("Toggle Zoom Friction", "os_default.toggle_zoom_friction");
            createOpenSpaceButton("Goodnight", "os_default.fade_to_black");
        </script>
        <script>
            //function to setup the openspace scripting once we are connected
            //async means it will wait to connect
            async function onOpenSpaceSocketConnected() {
                try {
                    //store the scripting library for use later
                    openspace = await api.library();
                    //update the text on the webpage
                    document.getElementById('text').innerHTML = 'connected';
                } catch (e) {
                    console.log('OpenSpace library could not be loaded: Error: \n', e)
                    return;
                }
            }
            //create a variable to hold the openspace scripting library
            var openspace = null;
            //create a variable to connect the openspace socket
            var api = window.openspaceApi('localhost', 4682);
            //tell the socket what to do when it connects
            api.onConnect(onOpenSpaceSocketConnected);
            //tell the socket to connect
            api.connect();
        </script>
    </body>
</html>
	<html>
	<head>
	<script src="http://hub.openspaceproject.com/openspace-api.js"></script>
	<title>OpenSpace javascript demo</title>
	</head>
	<body>
	<div id="text">connecting</div>
	<ul id="buttons"></ul>
	<script>
	//function to create buttons that send commands to openspace
	function createOpenSpaceButton(buttonTitle, actionIdentifier) {
	//create a new button with title
	let newButton = document.createElement("button");
	newButton.innerHTML = buttonTitle;
	//assign click function to button
	newButton.onclick = function () {
	openspace.action.triggerAction(actionIdentifier);
	};
	//append the new button to the button container
	var buttons = document.getElementById("buttons");
	buttons.appendChild(newButton);
	}
	//create buttons
	createOpenSpaceButton("Hello World", "profile.focus.earth");
	createOpenSpaceButton("Toggle Zoom Friction", "os_default.toggle_zoom_friction");
	createOpenSpaceButton("Goodnight", "os_default.fade_to_black");
	</script>
	<script>
	//function to setup the openspace scripting once we are connected
	//async means it will wait to connect
	async function onOpenSpaceSocketConnected() {
	try {
	//store the scripting library for use later
	openspace = await api.library();
	//update the text on the webpage
	document.getElementById('text').innerHTML = 'connected';
	} catch (e) {
	console.log('OpenSpace library could not be loaded: Error: \n', e)
	return;
	}
	}
	//create a variable to hold the openspace scripting library
	var openspace = null;
	//create a variable to connect the openspace socket
	var api = window.openspaceApi('localhost', 4682);
	//tell the socket what to do when it connects
	api.onConnect(onOpenSpaceSocketConnected);
	//tell the socket to connect
	api.connect();
	</script>
	</body>
	</html>