Add icons for building `roof:shape`

[tordans]

The roof shape fields added in #1552 (comment) are a good candidate to add icons to.

Docs for this features https://github.com/ideditor/schema-builder?tab=readme-ov-file#icons
This can be seen in use for the crossing markings ATM.

[tordans]

@mxdanger since you provided icons at Zverik/every_door#910 maybe this is something you can and want to contribute to.

[mxdanger]

Would these icons have to be vector? Currently they are raster only and rendered straight from Blender. The shading, shadows, and colors make it easy to visually read.

However, as field icons are very small (20x20px) could it still be viable to use a PNG? I also haven't tested if the icon visually works at that small of a size.

I assume these icons would be uploaded here: https://github.com/openstreetmap/iD/tree/develop/svg/iD-sprite/fields

[Shrinks99]

I refer to these icons a whole lot! Having a similar visual representation in the editor would be quite helpful. The crosswalk icons are all 20×20px SVGs and represented with currentColor values (presumably to allow other apps to also adopt the schema icon set and theme them accordingly). I assume these should be too? Here's my 15 minute go at a few of the easier ones... hipped is pretty useless without a second level of shading (I've used opacity here so they can all continue to use currentColor). It's clear to me that a solid colour isn't going to cut it here!

Given those constraints, seems doable? I think it would be best to re-draw these so they stay stylistically consistent. That said, @mxdanger Is your .blend file available anywhere? Also did you render these with an isometric (45° rotated orthographic) camera setup?

[mxdanger]

I've created a repo for the blend file and icons. Feel free to use to your liking. https://github.com/mxdanger/osm-roof-icons

[Picorims]

Here is a draft proposal (CC-BY 4.0 Charly Schmidt aka Picorims, can be changed to accommodate the project of course, that is just to have an initial license):

Inkscape 1.3.2 SVG file (black under transparent, if you have a dark theme it might be hard to see but it is there):

PNG image:

notes:

• I am not a designer, I just happen to have some skills in design but it may have beginner mistakes.
• It uses both a rectangular grid (one for the icon size, one for the pixels size) and an isometric grid (somewhat matches pixel size horizontally). Snapping sometimes wanted to go on one, the other, or both, so some nodes might not be perfectly placed, but I tried to (zoom in to check)
• It has all black fills and strokes, I don't know how to configure currentColor in Inkscape.
• I chose not to use two shades as I'd believe it'd be harder to read.
• I chose to add a profile in the top left to distinguish icons looking similar.
• It is inspired off these renders, which I assume are the same as from the blender file: https://wiki.openstreetmap.org/wiki/User:Mxdanger
• I have put an H for single side roof variants. I thought it was better than flipping or switching the shading side.
• I stuck to 3D shapes as it is very hard to make intuitive 2D ones (I started experimenting with a split view on both sides, it looked like hieroglyphs...)
• Some parts are pixel perfect. Not all of them.
• Some of them are not centered because it was easier to construct that way (geometry, symmetry, grid, etc.).
• Similarly, the building shape is not consistent to accommodate for roof "legibility" and ease of design.
• My screens are at 125% scaling so I put the zoom at 125%, which on my screen is pretty much the size when I open up iD and look for crossing icons.
  • (in document properties I set the viewport scaling to 1)
  • At this size it is still somewhat hard to distinguish, but it still gives a rough idea of each roof.
  • You can only put so much detail within 20px and it is gonna be challenging to make them different enough and legible at such a small scale with a single color.

Feel free to edit. It doesn't have to be used at all. But I still think that feedback may be valuable for the final design.

[Picorims]

Here is the same set exported at 16x the normal resolution to see theme better when zoomed in, if needed:

[bhousel]

Impressive work @Picorims! - this is an incredibly hard thing that you're trying to do.
I don't know whether it really makes sense for osm roof shapes to be represented by icons (people keep inventing new ones and it's just a ton of minutiae to capture in a small space), but you've gotten further than I thought possible.

[Picorims]

Thanks! Sketch drawing from Engineering classes from back when I was in high school surely helped.

I much prefer how it shows a big picture like in Street Complete in this version here: #1552 (comment)

But I'd say it'd be still better than nothing to have some kind of even symbolic hint to make it a bit easier to edit? I plan to do some on iD once I'll have documented myself a bit on it, as I'd need it for a personal project I am currently working on. And looking at the current UI, I would need the wiki page above open on a second screen at all times just to double check what is what every time. Which is a good practice by itself but with icons the double check might be easier? At least for a visual mind like me I usually navigate more easily through apps with icons, though these are admittedly less tricky to design for sure.

It could be much more symbolic though. Say a triangle for the 1st one, a 3D pyramid for the 4th one, an A for the 6th one, the outline which is pretty unique for the onion one, etc. It would be much more legible and distinguishable, at the expense of accuracy, but more recognizable at this scale. It depends how risky it is to have symbolic icons, if it might give bad intuitions to people which do not have the wiki pictures at hand.

I don't know, just throwing some thoughts at it.

[Shrinks99]

@Picorims These are pretty good!! +1 on them being helpful, anything we can do to add some sort of visual to the labels is a bonus here.

I see what you're trying to do with the lines representing a cross section of the roof, but it's not working for me as well as the pictograms are, especially at their actual sizes. Only so much detail we can fit in this small of a space! The hardest ones are probably 3 & 4, I don't think the rest need them. Along with the descriptive text it should be fairly obvious what "flat" and "round" are for example.

---

I would think the single-sided variants could rely on the text representation of the roof type to distinguish them? Could also try a dashed line through the middle? Something like this perhaps?

I also had a go at adjusting the sawtooth icon to make it a little more uniform with the rest:

---

While this doesn't make it easier, the crossing icons all have sharp corners whereas these are rounded. It's pretty early in this icon set's development, but the important thing here is consistency!

[tordans]

I think we should try to simplify this more. We have multiple places where we can help users pick the right icon:

• the icon in the dropdown next to the text string

  

• the image that is shows when users click the info-i

  

I think we should try to keep the dropdown icons simple (just the main shape) and use the info-i icon to show details (if needed). The info-i part is something that we pull from the OSM Wiki data items (Example)

More to the point: I suggest to remove the helper lines and only go with the 3D shape.

(And a +1 to change the orientation of those two ; but it is fine as is as well IMO)

[tordans]

Another question is, where to store the icons. I see either https://rapideditor.github.io/temaki/docs/ or https://github.com/enzet/map-machine#r%C3%B6ntgen-icon-set as good candidates and having them there will be easier than adding a new icon provider to the list.

Would you merge those in Temaki, @bhousel?

[bhousel]

Would you merge those in Temaki, @bhousel?

Yes but Temaki is CC0, so he’d need to relicense them.