Package for Interactive Graphics

Learn
1

I retired recently and have been considering scratching a longtime itch by trying my hand at coding a web application. The last time I wrote anything was in the 1990s, in C for an Apollo workstation (which rather dates me).

Anyway, whilst futtering around reading about how “modern” web apps are built I came across ELM, which struck me as a very clean language that I could probably get my ageing brain around. Elm-ui looks like I can avoid having to learn too much about html, but I’d like some recommendations as to an equivalent package for graphics.

Back in the day I used GKS and PHIGS (look them up on wikipedia), which let you compose graphical elements (lines, fill areas etc.) as “segments”, which you could then transform, show, hide, etc. They also let you work in a normalised co-ordinate space, rather than pixels. Most importantly, however, it was relatively trivial to map segment ids (i.e. representations on a screen) to object ids in your data model, which greatly simplified building interactive graphical editors (think a flow chart or a circuit editor). Selecting a segment (say one representing a resistor) returned an event which contained its segment id, which you could trivially map to the appropriate structure in the application’s model.

I realise that I can use elm-svg to generate SVG (if I care to learn its complexities, which I’m not sure that I do), but it all seems rather low level. Can anyone suggest a package I might look at instead, one more at the level of elm-ui?

Thanks in advance

3 Likes
2

Off topic, but: I also got back into programming fairly recently after not writing any code at all since the 1990s (I was a teenager then, so I wrote rubbish games, in BASIC of course). Elm is a lot of fun, and I congratulate you on choosing an excellent way to spend your retirement!

I haven’t done much with graphics in Elm, but perhaps you might have some luck with ianmackenzie/elm-geometry and ianmackenzie/elm-geometry-svg?

2 Likes
3

Thanks for the suggestions, I hadn’t found the elm-geometry/ geometry-svg packages, which would might help solve the user ->normalised ->device coordinate question. Having dug a little about SVG, there are some ways of grouping elements and using them repeatedly (the , and tags as far as I can see), but the syntax is wearisome and I couldn’t tell if the composition becomes an atomic element or remains decomposed (e.g. if a resistor is a dot, a zig-zag line and a dot grouped together, can I subsequently change the colour of the zig-zag separately from the dots?).

May be I’m thinking of this the wrong way, perhaps I should be doing the composition in code? So much to learn…

4

Have a look at Elm Collage. It hides a lot of SVG’s complexities behind a clean and easy to learn API.

1 Like
5

Thanks for the suggestion, my immediate impression is that Collage may be what I’m looking for; I’ll have to experiment with it.

6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.