Subscribe now

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 upload.

First, let's see some Elm links.

Easy VR with Elm and A-Frame #2

Part 2: Make the Dino Walk

The second part in a series showing off Elm and A-Frame, for producing VR scenes with Elm.

[ h/t @tilman_avid and @eduardkyvenko ]


Ellie - A Web-based Elm Development Environment

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!

eeue56/elm-run-worker

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!


eeue56/elm-node-elm-compiler

Elm compiler via Node

This allows you to compile an Elm file via node.


eeue56/post-install-elm

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 ]

Exercise

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 Image shape type and complete the various Shape-related case statements, rending an SVG Image Element
  • When a file completes uploading, add an Image to the shapes at the corresponding SvgPosition.
  • 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!

Resources