I want to create an action that clicks a button inside a widget when I am in cockpit. Is this possible? I am not sure how to structure my JavaScript code. If I use document.getElementById("my-button") it returns null.
I also don’t know if there is a way to view console.log output or to view the document tree. I found out the value was null because I called alert(). Hope someone can help me
What kind of widget is the button in? Is it a normal button “Input” widget, inside some kind of container widget, or is this a button from some other webpage being displayed inside an iframe or something?
More generally, programatically clicking a button is rarely a good idea. What is the button supposed to do, and could you make your Action do that instead?
You should be able to press CTRL/CMD+SHIFT+I to open the normal dev tools, and if I’m remembering correctly that’s also available in the menu bar at the top.
You may need to disable Cockpit’s system logging via the Settings / Dev menu to enable things to show up in the console.
Thanks for your reply. I am developing a custom extension to control a gimbal camera and I loaded it as a widget by configuring the register_service endpoint, which works. I believe it’s called an automatic external iframe in the docs. I agree that it might not be the best idea but I’m not sure if I can make it work with http. The button sends a websocket message to my backend which makes it move on the yaw axis for example.
I can add some http endpoints to my backend but I am not sure if I can set the correct port to use in the Action. Because I let BlueOS assign an available port for my Extension container I don’t know the port beforehand. Thanks, I can get the dev tools to work!
Sorry - I wrote this response up weeks ago but apparently forgot to send it. Just found the tab now.
Cool! Does the autopilot have any access to that gimbal, or is it independently controllable via MAVLink, or are you intending to bypass MAVLink and the autopilot and just control it directly through your Extension?
Depending on the data you’re trying to collect it could be useful for the autopilot to know which way the camera is pointing, for synchronised logging purposes and potentially targeting particular locations in autonomous missions and the like.
Iframes have their own context, so you’ll need to get the iframe element, then get the button element from inside it. Try searching something like “JavaScript click button inside iframe”.
I believe sites can also be configured to refuse access from outside an iframe / from a different domain (as a security measure to prevent things like phishing attacks), which may be worth looking into if you can’t get the code to find your button.
Fair enough. If necessary you could map it to a fixed port instead, but that might be the greater evil than just auto-clicking your button
I have found a solution. You can still make your extension use an ephemeral port by making the extension available under the /extensionv2 path.
Let’s say you have an extension named my-epic-extension and you make it available under the /extensionv2 URL. You can create a Cockpit HTTP action by requesting the /extensionv2/myepicextension/position URL for example. So a full request URL could look like this: http://192.168.2.2/extensionv2/myepicextension/position/.