Controlling interactive ink-elements with a function

[J2thearo]

Hi there,

this is really an impressive library! I have already tried a lot with it and wonder whether it is also possible to change the value of the ink-var with a javascript function. By that I mean, if for example you can control the slider (ink-range) from the outside with a function call instead of the mouse.

Regards,
Jaro

[rowanc1]

Thanks for the praise @J2thearo! Glad it is helping out, always curious to see what people are making if you want to share!

I actually just ran into this yesterday, and am planning to make some improvements over the coming weeks.

Right now you can do this like (e.g. on the https://components.ink/ main page):

const inkVar = document.getElementsByTagName('ink-var')[1];
inkVar.value = 10;
inkVar.dispatch();

The syntax might change in the future, or adding a method to allow you dispatch without needing access to the html element. I will keep this thread updated!

[J2thearo]

Thank you @rowanc1, that helped me a lot. I'm really looking forward to your planned improvements.

A friend and I work on interactive animations to visualize scientific and mathematical concepts. We are always on the lookout for suitable technologies to implement our projects. Ink.js is an awesome new asset for us! If you're curious, check out one of our animations: https://j2thearo.github.io/ (its a prototype, suggestions for improvement are welcome)

We are currently still working on our website. It should be similar to brilliant.org, but much more interactive and playful.

Regards,
Jaro

[rowanc1]

So awesome. Nice to see the ink-equations and dynamic text in there. :) Glad ink could help out!

On my side I am currently working on https://iooxa.com, which I am hoping will expand the number of people who can create interactive explorations. Basically it is a WYSIWYG wrapper around ink-components with some collaboration and publishing sprinkled in.

I will try and push on the refactor of ink in the coming month, and might explore some better p5 integrations. I will keep this thread and #11 updated.

[lrq3000]

@rowanc1 Very impressive! This editor will indeed be very useful to quickly prototype things with ink-components!

[rowanc1]

This has been added to v0.2.4

See the release notes here: https://github.com/iooxa/article/releases/tag/v0.2.4

You can:

>> const v = iooxa.createVariable('scope.name', 3);
>> v.get();
3
>> v.set(null, '5 * 2');
10
...
iooxa.getVariableByName('scope.name');

The other ways to access through the component itself can be accessed through:

>> $0 = document.getElementById(...); // or select in editor!
>> $0.value
3
>> $0.valueFunction = '5 * 2'
'5 * 2' // Note that this is the *component*
>> $0.value
null // The value was set to null in the above statement
>> $0.$runtime.get()
10 // as expected!

You can also set the attribute of the component.