I am attempting to slightly modify a Grafana plugin that is located here: https://github.com/satellogic/grafana-3d-globe-panel

In essence, I need to create some additional fields in the editor.html file. When a user enters information in those fields, I will take their responses and use them to produce a series of layers that the plugin will interpret to make a 3D Globe on the rendering screen above the inputs.

My issue is I do not know how to do this. In the codebase there is no index.html file that contains scripts that normally would be included in an index.html file. In fact, the editor.html file doesn't contain any "head" or "body" tags.

What I've tried to do is first to create a simple function in monitor.js, like so:

updateBaseURL = () => { const url = document.getElementById('wms_filter').value; console.log(url); }

The corresponding html is found here:

<div class="gf-form"> <label class="gf-form-label width-8">Base Layer URL</label> <input type="text" class="gf-form-input" id="wms_base_url" ng-model="ctr.panel.test" oninput="updateBaseURL()" placeholder="Specify base layer URL"> </div>

At the very bottom of the file, I attempted to link the module.js file to editor.js like so:

<script src="module.js"></script>

I've tried all sorts of filepaths for the src...relative file path, absolute, local. I did every combination I could think of that people would do to normally link external js files to html files. The end result is always the same whenever I type into the field I made:

Error Message

All that I need to do is get the input that the user is typing in. Talking to a colleague of mine, he noticed that some of the other html elements in the file utilize angular. I haven't ever touched Angular so I'm unsure of the Angular way to do things, but shouldn't the default way of importing Javascript into the html file work?

For reference, here's one of the default tags located in editor.html: enter image description here

I have no idea where ctrl.render() is located...my guess is within module.js but I haven't seen any imports or reference to a "render" besides this line in a class "GlobeCtrl" within module.js:

this.events.on('render', this.updateViewerHeight); /* ... Some other code */ ...Farther down updateViewerHeight = () => { // Cesium needs a fixed height to correctly size its canvas this.viewer.container.style.height =${Math.ceil(this.height)}px; // Add a small delay to ensure the rectangle is correclty displayed window.setTimeout(() => { this.viewer.camera.setView({ destination: rectangle, }); }, 100); } Am I missing something obvious, or is this something specific to Angular/the plugin itself?

| improve this question | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.