Styling of JSXGraph

[georgekinnear]

I am wondering if it would be useful to have a way to define/apply styles for JSXGraph plots. I am opening this issue mainly to share my ideas about this, and to see what other people think, before going any further with thinking about how to implement it.

I find that I have some settings I always copy into new plots, so that all my plots have a consistent appearance (choosing colours, line thickness, styling of axes etc.). It would be good to have a way to wrap all those settings up and make it easy to apply them to new plots (and to update all plots at once if you want to tweak the style). (See also some recent discussion at https://github.com/maths/moodle-qtype_stack/pull/1008 about having control over the appearance of JSXGraph plots.)

One possibility would be to define some styles that could be invoked, e.g. [[jsxgraph style="edinburgh"]] could apply all the style choices that I like, and STACK would include a set of different styles (a bit like the way beamer has different themes you can pick from: https://deic.uab.cat/~iblanes/beamer_gallery/index_by_theme.html).

Another possibility would be to have a longer list of options that could be customised, e.g. so you could do something like [[jsxgraph colours="matplotlib" lineWeight="medium" highlight="points_only"]] to pick a colour palette, set the line width and specify which objects should be highlighted on hover. Forming a list of the different things that would be useful as options might be a helpful starting point, so I'm keen to hear from people about that!

Perhaps both approaches would be possible, so you could set the overall style and then use further options to tweak it.

The style="edinburgh" approach would rely on having some styles defined in the STACK codebase - perhaps this would work something like the new custom validation functions, with a way to write your own style locally, and potential to contribute it to the project.

[aharjula]

Less is more. I would prefer not to expose too many options and thus ease excess variation through them. After all, we would then need to support those options and map them if the backend changes.

So [[jsxgraph style="edinburgh"]] sounds nice. And it could even tied to the named version system mentioned in #1008 .

[sangwinc]

@georgekinnear, thanks - if you'd like this in the next release can you please send me a pull request.

[georgekinnear]

Probably not for the next release!

I do have a plan to discuss this with @LukeLongworth in August.

[georgekinnear]

I've been doing some work on this with @LukeLongworth and we've formed the following idea for a way forward.

There would be a folder in the STACK repo - e.g. corsscripts/jsxgraph_styles/ - that to contain contributed style files, e.g. canterbury.js and edinburgh.js. Sites may also want to add their own custom styles post-install into this folder, but hopefully the contributed folder would include a good range of options.

Users would then load those styles with (e.g.) [[jsxgraph style="canterbury"]] which is effectively shorthand for [[jsxgraph]] [[cors src="jsxgraph_styles/canterbury.js"/]]

(For users who want to write their own style files, maybe before contributing to the repo, there is the option to do [[jsxgraph]] [[include src="…"]] to pull in code from some other location.)

The content of the style files is javascript code that includes:

1. changes to the styling of the iframe (relevant to #1008)
2. definitions of useful constants/functions, e.g. a list of colours to use as a colour palette for plots
3. changes to the JXG.Options (by filling in the ... in JXG.Options = JXG.merge(JXG.Options, { ... }), as in the examples at https://github.com/jsxgraph/jsxgraph/tree/main/src/themes)

Here is an example of what a style file might look like: https://gist.github.com/georgekinnear/8f2a99938ea709e236504d8081612dcb

One thing that were were not sure about is point 2 on the list - in particular, how standardised the different themes should be (e.g. should they all provide a palette of 8 colours, so that users can rely on those existing if they want to change styles?)

[aharjula]

Do note that [[cors src="jsxgraph_styles/canterbury.js"/]] would generate an URL and not actually include the thing, so it would not do the same as [[include src="…"/]]. That would be a significant difference in the way things would happen. You would need to use that URL to do an inclusion within the client side, which is a very different thing from the server-side inclusion.

But that does give me an idea... I'll make it so that one can use some of those special "protocols" that are usable in various other places also work for the include-block [[include src="cors://jsxgraph_styles/canterbury.js"/]] and the CORS addresses. I.e., contrib://, contribl://, template:// and templatel:// are already supported for inclusion why is cors:// not yet there. Once it is there, then one can have the same behaviour for those as well.