Buttons for HTML/JS control page

[hedbergj]

I'd like to create a reusable block of html/js that could be used to trigger OS actions in order to quickly build show controller pages (like these: http://ui.openspaceproject.com/ )

I guess it would need two parts:

<button onClick="doAnAction('whichAction');">Do it</button>

and an accompanying definition of the function doAnAction()

Something like

function doAnAction(whichAction) {
     ## openspace... 
}

Is this the best way to make such a page? Might need some help making it nice and modular/reusable.

[micahnyc]

What you have is the right idea. Here is a snippet of javascript that creates a button to trigger an action:

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");

And here is a gist to an example html page with this in action: https://gist.github.com/micahnyc/39f84b8d36e923a5aa03be9cc4cea1cb