Is this the best way to make such a page? Might need some help making it nice and modular/reusable.
","upvoteCount":2,"answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"What you have is the right idea. Here is a snippet of javascript that creates a button to trigger an action:
\nfunction createOpenSpaceButton(buttonTitle, actionIdentifier) {\n // create a new button with title\n let newButton = document.createElement(\"button\");\n newButton.innerHTML = buttonTitle;\n // assign click function to button\n newButton.onclick = function () {\n openspace.action.triggerAction(actionIdentifier);\n };\n //append the new button to the button container\n var buttons = document.getElementById(\"buttons\");\n buttons.appendChild(newButton);\n}\n// create buttons\ncreateOpenSpaceButton(\"Hello World\", \"profile.focus.earth\");\ncreateOpenSpaceButton(\"Toggle Zoom Friction\", \"os_default.toggle_zoom_friction\");\ncreateOpenSpaceButton(\"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
","upvoteCount":1,"url":"https://github.com/OpenSpace/OpenSpace/discussions/2095#discussioncomment-2739741"}}}
-
|
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:
and an accompanying definition of the function Something like Is this the best way to make such a page? Might need some help making it nice and modular/reusable. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
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 |
Beta Was this translation helpful? Give feedback.
What you have is the right idea. Here is a snippet of javascript that creates a button to trigger an action: