Editing shape of the paths

[citrulluslanatus]

It would be a great customisation option if you could adjust the shape of the paths (e.g. by dragging and dropping points of the line) so that they could follow actual paths on a map or a satellite image, for example.

[otacke]

Not something that can currently be accomplished with H5P Group's DragNBar library that I am using and not something that anyone has offered funding for so far.

[otacke]

Note: Paths are now "editable" elements in the editor not relying on DragNBar. Good UX for implementing this feature is not obvious for me though. Maybe ...

• Extra menu (copying the visual appearance of Drag&Bar) with edit button and draw button.
• When clicking on the draw button ...
  • Clicking somewhere that's not a linked stage: cancel
  • Mousedown on linked stage one starts drawing mode for path that must end on stage two or cancels
• Or: Extra button in toolbar to toggle path drawing on
  • Clicking somewhere that's not a stage, toggle off
  • Clicking on first stage starts drawing mode that must end on another stage to define path or it toggles off

Potential issue: It may become difficult to properly select stages and paths as their hitboxes may overlap. Would also need to be tackled, potentially adding a chooser menu similar to the editor widget of H5P.Animator (again having to deal with H5P's clumsy list handling)

[citrulluslanatus]

I don't know whether this would be easier to implement, but maybe it might in terms of UX be even easier if there were (later invisible) intermediate "path-points" (number selectable?) on the path, which could be moved by drag and drop like the actual stations. The more path-points, the more adaptable the path.
I already kind of use this method when two stations are too far apart and a direct path looks silly on thebmap, except that the intermediate stations are at the moment normal stations of course (usually with short text).

[otacke]

@citrulluslanatus Thanks, also an approach, yes. I really don't know what the best user experience here would be. And I am not sure what the actual benefit would be in relation to the increased level of complexity.

From a technical perspective, it feels simpler to do, but you'd also need to add + select/remove intermediate points, people may want different interpolations, etc. Feels like building a part of Inkscape :-)

[citrulluslanatus]

@otacke I don't know about the technical benefit :), but for application this would be deluxe.
And using drag and drop-points on the line would maybe also be familiar from many other appications (regarding UX) I guess, e.g. like this:
https://inueb.net/pfad-demo
But again, I can only argue from the user-perspectice, not regarding technical application.

[otacke]

@citrulluslanatus I NEED the user perspective :-D But I need answers to things like "How/where should a user be able add or select or remove buttons" and all the other shenanigans." Making it work on a technical level is my problem ;-)

[citrulluslanatus]

@otacke Well, I can only give a single perspective of course :). But I did some research and one of the easier options might be the one that QGIS uses. There you can add and reposition points by clicking on the middle of the line (= point appears) and dragging the appearing "waypoint" with your mouse. Could be applied like this: To add new waypoints, you hover over the line between two existing points (incuding the normal stages). A transparent point appears at the midpoint. Clicking on/near this point adds it to the line and immediately puts it into drag mode.
Removing all waypoints then might be something for the new custom-paths-menu (where you can also change the color).
Like this:
https://inueb.net/pfad-demo-neu
But whatever a final solution may be, a retractable path would be a very cool feature. I hope you find some funding in the future. I would fund this immediately if I wasn't so incredibly broke 😄 .

[otacke]

@citrulluslanatus That feels very smooth, indeed! I don't think the paths menu would be the right choice. It's a menu for the whole path - what should be done there? Have a list of dragging nodes to remove some of then? In this case, it may be simpler to just add a context menu to a dragging node that offer nothing but a "delete" option.

Left to think about: How to make this accessible. Hovering the mouse over a path segment won't work when using a keyboard.

[citrulluslanatus]

@otacke Yes, if a dragging node can have a context menu - that would be even more intuitive to use 👍 .
I never tried to use game-map without a mouse / trackpad to be honest... I wouldn't even know how to position the stages correctly without a mouse :). But if hovering does not work, maybe all next potential nods are just shown as a kind of half-transparent preview after a new line between two stages was set (one node at the beginning), but a node then needs a klick / touch to become "dragable"... Or the new node-menu gets a "add new node left / add new node right" option...

[otacke]

@citrulluslanatus It's clumsy, but H5P Group's DragNBar library that's also used in Course Presentation and Interactive Video, for instance, allows it. I doubt anyone would really do it, but leave it out and you e.g. ignore people who may have motorical disabilities. And since people have to deal with laws and regulations, they ask for compliance on your end. You'd not believe what discussions I have had to deal with. Sometimes I get the feeling people want everyone to use texts only - at least everyone then has an equally bad experience.

Maybe you now realize why I struggle with finding good UX :-)

What's your background by the way? You seem to have coding experience. I am accepting pull requests ;-)

[otacke]

Just adding one more approach, but I don't like it myself: One could simply introduce a "waypoint" element that can be added just like a stage and essentially would be a stage without any function, two neighbors (min = max), that does not display on the map. Simple to implement and as accessible as today's solution is.

Don't like it though, because linking them to other stages and to one another will quickly become a pain in the ass.

[otacke]

But ... If I add an alternative/additional way of connecting stages by a path ...

[citrulluslanatus]

@otacke About my background: Not much of a help there. Half teacher (in the context I use H5P since a couple of years), half biologist. Not much coding expirience, I can deal with html and css, but am only starting to get along with JS (which has become a personal interest due to some side projects independet of H5P - currently doing an online JS course). For the path demos I got a lot of help from o3-mini-high :).
Regarding UX - yes, I see your point! But you're right regarding accessibility of course...
But yes, "drawing" a path by adding "waypoint-stages" sound acually handy... Since the path menu can overwrite the general color setting maybe it could also overwrite the connection? A bit less intuitive perhaps, but if setting the stages can be done by keyboard only, I suppose this could be done as well? As I said, this is how I "correct" the way of a path at the moment, with image-only or text-only stages....