Synchronized inputs: setting a HTML view's value from a button

Community Help
1

I was adapting the Satellite Explorer / D3 / Observable notebook to have some presets, allowing for free dragging of the latitude/longitude/etc. parameters with also the ability to pick from certain presets. I should be able to use the set function described in the “Synchronized Inputs” example, but I can’t seem to set the value of a view in my attempt: Satellite explorer with presets / Ahmed Fasih / Observable?

When I click on one of the buttons—all of which should set the rotation view to a hardcoded value, [200, 13, 0]—the form’s value don’t get updated, though I do see the map blur for a moment before returning to full accuracy, as if I’d changed the sliders.

This makes me think that I can’t mindlessly use the set function to set the HTML form’s value but I’m unsure how I should be tweaking it for this to work. I don’t think I need to encode the event that’s dispatched do I?

2

When the combined input’s value is changed programmatically, it doesn’t transfer to each of the sub-inputs. See how Inputs.form does it with a setter: https://github.com/observablehq/inputs/blob/main/src/form.js#L25

or maybe you could base the combined input on Inputs.form? For a start:

viewof rotate = Inputs.form([Inputs.range([-180, 180]), Inputs.range([-90, 90]), Inputs.range([-180, 180]) ])

3

Thank you! The first suggestion didn’t seem to work, i.e., replacing set with this set3:

function set3(input, values) {
  // adapted from https://github.com/observablehq/inputs/blob/main/src/form.js#L25
  for (let i=0; i<3;i++){
    input.value[i] = values[i];
  }
  input.dispatchEvent(new Event("input"));
}

had the same behavior as before, but when I used Inputs.form as you suggested, with the original set from Mike’s “Synchronized Inputs” example, it works! Republished: Satellite explorer with presets / Ahmed Fasih / Observable :blush:!

There must be something I don’t understand about HTML forms and look forward to digging into later. Again, many thanks!

1 Like