Elm Weekly Drip #37 and Exercise: Add Image Shapes [02.20.2017]
We just added support for Firebase Storage to our SVG
Editor. We can upload images, but
they don't yet show up in our document. This week's exercise is to add an
Image shape type to our SVG editor and create a new one when the images
First, let's see some Elm links.
Part 2: Make the Dino Walk
The second part in a series showing off Elm and A-Frame, for producing VR scenes with Elm.
Ellie puts the Elm platform in your browser so you can try Elm, share ideas, and bring your programs to life.
Luke Westby / Humblespark has been working on a fantastic web-based live editor for Elm. If you haven't seen it, it's absolutely amazing. You can also enable vim mode in the editor by adding ?vim=true to any URL.
[ h/t @luke_dot_js ]
Noah Hall released a few things!
Run Elm files in worker mode from the CLI
Compile and run Elm files in worker mode in a single command. Useful for testing Node-based Elm apps!
Elm compiler via Node
This allows you to compile an Elm file via node.
Use NPM for managing elm deps
This package is intendend to enable you to use npm to host your Elm packages. It works by downloading an Elm package from github when passed in.
All of the above are courtesy of Noah Hall.
[ h/t @eeue56 ]
We can upload images to Firebase storage, but we can't yet see them in our document. For this week's exercise, start with this tag and:
- Add an
Imageshape type and complete the various
Shape-related case statements, rending an SVG Image Element
- When a file completes uploading, add an
Imageto the shapes at the corresponding
- Support resizing the image and moving it.
A gotcha: Image elements in SVG need to have a width and height to be valid.
Also, you'll want to use
preserveAspectRatio "none" in order to make the
bounding box properly reflect the image it's holding. Finally, you'll use
xlinkHref to include the href to the actual image the shape is showing.
Good luck, and see you soon!