Icons: missing files, inconsistent sizes, design issues #7195

New issue

Open

opened 2024-01-17 17:54:52 +00:00 by euf · 0 comments

euf commented

2024-01-17 17:54:52 +00:00

(Migrated from github.com)

Context

As a follow-up to PRs #7118 and #7056 as well as issue #4017 I've examined current state of icon sizes and designs using a simple R script. I also hacked a wiki page to compare clear and night styles.

https://github.com/organicmaps/organicmaps/wiki/Icons:-clear-vs.-night,-sizes

These are the issues I found.

Design choices

As far as I can tell from visual comparison, the following night approaches were used:

POI icons (round and square ones)
- shape color and outline color changed from white to black, but outline keeps "60%" opacity and fill not changed
other icons vary significantly
- outline color changed #ffffff to #111111, outline opacity changed 80% to 60% ( e.g. motorcycle-parking-m)
- color changed #717065 to #777777 (e.g. mountain-pass-m)
- opacity changed 100% to 60% (e.g. firehydrant-m)
- color changed #7f5933 to #717065, opacity changed 100% to 60% (e.g. aircraft-m)
subway icons
- can't find any system, maybe tweaked by hand

Could someone who worked on night icons provide any info on how these techniques were developed? Is there some approach described anywhere? I'm worried that some of the resulting icons may look not so good next to each other. Maybe documenting a clear-to-night conversion flow would help to harmonize current designs and provide some clues to future attempts at this.

Missing files

Total of 658 unique SVG file names

File missing from style-night 
       name width height xmin ymin xsize ysize
 bank-l.svg    21     21    0    0    28    28


File missing from style-night 
           name width height xmin ymin xsize ysize
 banknote-l.svg    21     21    0    0    28    28

File missing from style-clear 
             name width height xmin ymin xsize ysize
 media_shop-m.svg    18     18    0    0    24    24


File missing from style-clear 
        name width height xmin ymin xsize ysize
 motel-m.svg    18     18    0    0    24    24

Weird size or viewBox

Non-integer width or height 
                   name width height xmin ymin xsize ysize
 barrier-entrance-s.svg  5.25      9    0    0     7    12


Non-integer width or height 
      name width height xmin ymin xsize ysize
 bench.svg 11.25      9    0    0    15    12


Non-integer width or height 
         name width height xmin ymin xsize ysize
 elevator.svg 11.25  11.25    0    0    15    15


Non-integer width or height 
           name width height xmin ymin xsize ysize
 entrance-s.svg  5.25      9    0    0     7    12


Non-integer width or height 
       name  width height xmin ymin xsize ysize
 exit-s.svg 8.0625      9    0    0 10.75    12


Viewbox start is not (0,0) 
       name width height xmin ymin xsize ysize
 ford-m.svg    11      5 -0.5  8.5    15     6


Non-integer width or height 
                   name width height xmin ymin xsize ysize
 lightrail-berlin-s.svg 11.25  11.25    0    0    15    15


Non-integer width or height 
                     name width height xmin ymin xsize ysize
 motorcycle-parking-m.svg 21.75  21.75    0    0    26    26


Non-integer width or height 
                name width height xmin ymin xsize ysize
 mountain-pass-s.svg  5.25      3    0    0     7     4


Non-integer width or height 
                   name width height xmin ymin xsize ysize
 parking-disabled-m.svg 11.25  11.25    0    0    15    15


Non-integer width or height 
       name width height xmin ymin xsize ysize
 star-m.svg  8.25   8.25    0    0    11    11


Non-integer width or height 
                   name width height xmin ymin xsize ysize
 transit_monorail-m.svg     9  11.25    0    0    12    15


Non-integer width or height 
          name width height xmin ymin xsize ysize
 zero-icon.svg  5.25   5.25    0    0     7     7

What next

I guess the following steps could be something like that:

Decide the fate of files missing from either clear or night style. Are they even used, if no one noticed their loss?
Collaborate to categorize icons by their semantics to further improve design inconsistencies. Another great wiki page https://github.com/organicmaps/organicmaps/wiki/Icons already has 427 icons of total 658.
Write or find some documentation for night style icon design.
Manually fix not only sizes, but also stroke widths for affected icons (entrance, exit, ford and others)
Establish an icon design guideline document to specify desired stroke widths, corner radius for shapes, fill preference, pixel grid howtos and a color palette. Then eventually fix all the icons to look better.

Help needed for the first three tasks, and I hope to tackle the last two tasks by myself in the near future. Comments and discussion is as always appreciated @organicmaps/design ❤️

Here is the R script in case someone wants to check my findings.


library(xml2)

get_svg_attrs <- function(path) {
  
  files <- list.files(path, full.names = T)
  files <- sort(files)
  tempdf <- data.frame()
  
  for (i in seq_along(files)) {
    this <- files[i]
    svg_in <- read_xml(
      x = this,
      encoding = "UTF-8",
      options = c("PEDANTIC", "NOBLANKS", "NSCLEAN")
    )
    svg_in <- xml_ns_strip(svg_in)
    svg_in <- xml_find_first(svg_in, "/svg")
    viewBox <- strsplit(xml_attr(svg_in, "viewBox"), " ")[[1]]
    
    tempdf <- rbind(
      tempdf,
      data.frame(
        name = basename(this),
        width =  as.numeric(xml_attr(svg_in, "width")),
        height = as.numeric(xml_attr(svg_in, "height")),
        xmin =   as.numeric(viewBox[1]),
        ymin =   as.numeric(viewBox[2]),
        xsize =  as.numeric(viewBox[3]),
        ysize =  as.numeric(viewBox[4])
      )
    )
  }
  return(tempdf)
}

df_clear <- get_svg_attrs("~/organicmaps/data/styles/clear/style-clear/symbols")
df_night <- get_svg_attrs("~/organicmaps/data/styles/clear/style-night/symbols")

svgnames <- unique(c(df_clear$name, df_night$name))
cat("Total of", length(svgnames), "unique SVG file names\n\n")

for (i in svgnames) {
  x0 <- df_clear[df_clear$name == i, ]
  x1 <- df_night[df_night$name == i, ]
  row.names(x0) <- NULL
  row.names(x1) <- NULL
  
  if (!isTRUE(all.equal(x0, x1))) {
    
    if (nrow(x0) == 0) {
      cat("File missing from style-clear \n")
    }
    else if (nrow(x1) == 0) {
      cat("File missing from style-night \n")
    } else {
      cat("Different attributes for clear and night \n")
    }
    
    print(rbind(x0, x1), row.names = F)
    cat("\n\n")
    
  } else {
    
    if (x0$width %% 1 != 0 || x0$height %% 1 != 0) {
      if(!grepl("subway-", i)) { # Skip subway icons for now
        cat("Non-integer width or height \n")
        print(x0, row.names = F)
        cat("\n\n")
      }
    }
    
    if (x0$xmin != 0 || x0$ymin != 0) {
      cat("Viewbox start is not (0,0) \n")
      print(x0, row.names = F)
      cat("\n\n")
    }
  }
}

## Wiki page ----

df_all <- merge(df_clear, df_night, by = c(
  "name","width","height","xmin","ymin","xsize","ysize"), all = TRUE)
x <- "
|name|style-clear|style-night|width|height|
|-|-|-|-|-|
"
for(i in seq_along(df_all$name)) {
  name <- df_all$name[i]
  url0 <- paste0(
    '<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-clear/symbols/',
    name,
    '"/>'
  )
  url1 <- paste0(
    '<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-night/symbols/',
    name,
    '"/>'
  )
  x <- paste0(x, 
              "|", name, "|", url0, "|", url1, "|", 
              df_all[df_all$name==name,]$width, "|",
              df_all[df_all$name==name,]$height, "|",
              "\n")
}
clipr::write_clip(x)

## Context As a follow-up to PRs #7118 and #7056 as well as issue #4017 I've examined current state of icon sizes and designs using a simple R script. I also hacked a wiki page to compare `clear` and `night` styles. https://github.com/organicmaps/organicmaps/wiki/Icons:-clear-vs.-night,-sizes These are the issues I found. ## Design choices As far as I can tell from visual comparison, the following `night` approaches were used: - POI icons (round and square ones) - shape color and outline color changed from white to black, but outline keeps "60%" opacity and fill not changed - other icons vary significantly - outline color changed `#ffffff` to `#111111`, outline opacity changed `80%` to `60%` ( _e.g. `motorcycle-parking-m`_) - color changed `#717065` to `#777777` (_e.g. `mountain-pass-m`_) - opacity changed `100%` to `60%` (_e.g. `firehydrant-m`_) - color changed `#7f5933` to `#717065`, opacity changed `100%` to `60%` (_e.g. `aircraft-m`_) - subway icons - can't find any system, maybe tweaked by hand Could someone who worked on night icons provide any info on how these techniques were developed? Is there some approach described anywhere? I'm worried that some of the resulting icons may look not so good next to each other. Maybe documenting a clear-to-night conversion flow would help to harmonize current designs and provide some clues to future attempts at this. ## Missing files ``` Total of 658 unique SVG file names File missing from style-night name width height xmin ymin xsize ysize bank-l.svg 21 21 0 0 28 28 File missing from style-night name width height xmin ymin xsize ysize banknote-l.svg 21 21 0 0 28 28 File missing from style-clear name width height xmin ymin xsize ysize media_shop-m.svg 18 18 0 0 24 24 File missing from style-clear name width height xmin ymin xsize ysize motel-m.svg 18 18 0 0 24 24 ``` ## Weird size or viewBox ``` Non-integer width or height name width height xmin ymin xsize ysize barrier-entrance-s.svg 5.25 9 0 0 7 12 Non-integer width or height name width height xmin ymin xsize ysize bench.svg 11.25 9 0 0 15 12 Non-integer width or height name width height xmin ymin xsize ysize elevator.svg 11.25 11.25 0 0 15 15 Non-integer width or height name width height xmin ymin xsize ysize entrance-s.svg 5.25 9 0 0 7 12 Non-integer width or height name width height xmin ymin xsize ysize exit-s.svg 8.0625 9 0 0 10.75 12 Viewbox start is not (0,0) name width height xmin ymin xsize ysize ford-m.svg 11 5 -0.5 8.5 15 6 Non-integer width or height name width height xmin ymin xsize ysize lightrail-berlin-s.svg 11.25 11.25 0 0 15 15 Non-integer width or height name width height xmin ymin xsize ysize motorcycle-parking-m.svg 21.75 21.75 0 0 26 26 Non-integer width or height name width height xmin ymin xsize ysize mountain-pass-s.svg 5.25 3 0 0 7 4 Non-integer width or height name width height xmin ymin xsize ysize parking-disabled-m.svg 11.25 11.25 0 0 15 15 Non-integer width or height name width height xmin ymin xsize ysize star-m.svg 8.25 8.25 0 0 11 11 Non-integer width or height name width height xmin ymin xsize ysize transit_monorail-m.svg 9 11.25 0 0 12 15 Non-integer width or height name width height xmin ymin xsize ysize zero-icon.svg 5.25 5.25 0 0 7 7 ``` ## What next I guess the following steps could be something like that: - [x] Decide the fate of files missing from either `clear` or `night` style. Are they even used, if no one noticed their loss? - [ ] Collaborate to categorize icons by their semantics to further improve design inconsistencies. Another great wiki page https://github.com/organicmaps/organicmaps/wiki/Icons already has 427 icons of total 658. - [ ] Write or find some documentation for night style icon design. - [ ] Manually fix not only sizes, but also stroke widths for affected icons (`entrance`, `exit`, `ford` and others) - [ ] Establish an icon design guideline document to specify desired stroke widths, corner radius for shapes, fill preference, pixel grid howtos and a color palette. Then eventually fix all the icons to look better. Help needed for the first three tasks, and I hope to tackle the last two tasks by myself in the near future. Comments and discussion is as always appreciated @organicmaps/design ❤️ <details> <summary> Here is the R script in case someone wants to check my findings.</summary> ```r library(xml2) get_svg_attrs <- function(path) { files <- list.files(path, full.names = T) files <- sort(files) tempdf <- data.frame() for (i in seq_along(files)) { this <- files[i] svg_in <- read_xml( x = this, encoding = "UTF-8", options = c("PEDANTIC", "NOBLANKS", "NSCLEAN") ) svg_in <- xml_ns_strip(svg_in) svg_in <- xml_find_first(svg_in, "/svg") viewBox <- strsplit(xml_attr(svg_in, "viewBox"), " ")[[1]] tempdf <- rbind( tempdf, data.frame( name = basename(this), width = as.numeric(xml_attr(svg_in, "width")), height = as.numeric(xml_attr(svg_in, "height")), xmin = as.numeric(viewBox[1]), ymin = as.numeric(viewBox[2]), xsize = as.numeric(viewBox[3]), ysize = as.numeric(viewBox[4]) ) ) } return(tempdf) } df_clear <- get_svg_attrs("~/organicmaps/data/styles/clear/style-clear/symbols") df_night <- get_svg_attrs("~/organicmaps/data/styles/clear/style-night/symbols") svgnames <- unique(c(df_clear$name, df_night$name)) cat("Total of", length(svgnames), "unique SVG file names\n\n") for (i in svgnames) { x0 <- df_clear[df_clear$name == i, ] x1 <- df_night[df_night$name == i, ] row.names(x0) <- NULL row.names(x1) <- NULL if (!isTRUE(all.equal(x0, x1))) { if (nrow(x0) == 0) { cat("File missing from style-clear \n") } else if (nrow(x1) == 0) { cat("File missing from style-night \n") } else { cat("Different attributes for clear and night \n") } print(rbind(x0, x1), row.names = F) cat("\n\n") } else { if (x0$width %% 1 != 0 || x0$height %% 1 != 0) { if(!grepl("subway-", i)) { # Skip subway icons for now cat("Non-integer width or height \n") print(x0, row.names = F) cat("\n\n") } } if (x0$xmin != 0 || x0$ymin != 0) { cat("Viewbox start is not (0,0) \n") print(x0, row.names = F) cat("\n\n") } } } ## Wiki page ---- df_all <- merge(df_clear, df_night, by = c( "name","width","height","xmin","ymin","xsize","ysize"), all = TRUE) x <- " |name|style-clear|style-night|width|height| |-|-|-|-|-| " for(i in seq_along(df_all$name)) { name <- df_all$name[i] url0 <- paste0( '<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-clear/symbols/', name, '"/>' ) url1 <- paste0( '<img src="https://raw.githubusercontent.com/organicmaps/organicmaps/master/data/styles/clear/style-night/symbols/', name, '"/>' ) x <- paste0(x, "|", name, "|", url0, "|", url1, "|", df_all[df_all$name==name,]$width, "|", df_all[df_all$name==name,]$height, "|", "\n") } clipr::write_clip(x) ``` </details>

👍 2

This repo is archived. You cannot comment on issues.