Code Monkey home page Code Monkey logo

rebusurance's Introduction

Rebusurance

Rebusurance is a suite of image assets for displaying highway shields in software user interfaces. Included in this repository is a single PaintCode document that contains various shields for routes in the United States. Each shield is scalable, simultaneously accommodating variations in screen resolution, font size, and route number length. The designs are loosely based on the specifications in the Manual on Uniform Traffic Control Devices (MUTCD) as implemented in Wikimedia Commons template images, including common state and territorial route shields.

This project’s design goals are:

  1. Maximize legibility, with the legend set as large as possible and extraneous details removed.
  2. Stay within a predictable width and height to facilitate text layout.
  3. Resemble the design most commonly seen on signage, preferably guide signs.

The name of this project is a play on the words rebus and reassurance, as in reassurance marker. Just as rebuses are icons displayed inline within a sentence, rebusurance images are best suited for running text, such as within a turn banner or step table in a turn-by-turn navigation application.

Setup

PaintCode is required for opening these image assets. From within PaintCode, choose a target platform and language, then export the assets as a “StyleKit”, which is generated drawing code that you can include in your application. The code that invokes this drawing code can specify the following parameters for any shield:

Name Kind Default value Description
legendText String 25 The alphanumeric legend born by the shield.
legendSize Number 60 The font size of the legend. The shield automatically resizes to fit the legend.

Additionally, each shield accepts two or more color parameters, depending on the colors used by the design. The default colors are based on the MUTCD color specifications.

Name Kind Default value
blue Color #003F87
brown Color #603311
green Color #006B54
orange Color #DD7500
pink Color #EF5B84
purple Color #72166B
red Color #AF1E2D
yellow Color #FCD116
yellowGreen Color #BAD80A
white Color #FFFFFF
black Color #000000

rebusurance's People

Contributors

1ec5 avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar avatar

Forkers

frederoni kennykb

rebusurance's Issues

U.S. state and territorial route shields

Need to add individual designs for each state and territory, since the white ellipse and rectangle only resemble signage in a handful of states:

  • Alabama
  • Alaska
  • American Samoa
  • Arizona
  • Arkansas
  • California
  • Colorado
  • Connecticut
  • Delaware
  • District of Columbia
  • Florida
  • Georgia
  • Guam
  • Hawaii
  • Idaho
  • Illinois
  • Indiana
  • Iowa
  • Kansas
  • Kentucky
    • State highway
    • Parkway
  • Louisiana
  • Maine
  • Maryland
  • Massachusetts
  • Michigan
  • Minnesota
    • State highway
    • Business state highway
  • Mississippi
  • Missouri
    • State highway
    • Supplemental
  • Montana
    • Primary
    • Secondary
  • Nebraska
  • Nevada
  • New Hampshire
  • New Jersey
  • New Mexico
  • New York
    • Touring routes
    • Parkways
    • Long Island parkways
  • North Carolina
  • North Dakota
  • Northern Mariana Islands
  • Ohio
  • Oklahoma
  • Oregon
  • Pennsylvania
    • State route
    • Turnpike
  • Puerto Rico
    • Primary
    • Urban primary
    • Secondary
    • Tertiary
  • Rhode Island
  • South Carolina
  • South Dakota
  • Tennessee
    • Primary
    • Secondary
  • Texas
    • State highway, loop, spur, FM, ranch, beltway, NASA, recreational, principal arterial, park access (callers should prepend appropriate prefix)
    • State toll road
  • Utah
  • Vermont
    • State highway
    • Town highway
  • Virgin Islands
  • Virginia
    • Primary
    • Secondary
  • Washington
  • West Virginia
    • State route
    • County route
    • Home access road
  • Wisconsin
    • State trunk highway
    • County trunk highway
  • Wyoming

Numbered Florida toll road shield

The PaintCode file already includes the Pennsylvania Turnpike shield for turnpike extension routes that have numerals on the shield, as well as a Blue Rectangle shield for Texas state toll roads. Florida also has a distinct shield for numbered toll roads.

Resize shields based on legend font size

All shields should respond to changes to the legendSize variable, but currently only the white rectangle, white ellipse, Colorado, Maryland, and Minnesota shields do.

Export common formats

Each time the PaintCode document is modified, it should be reexported into non-proprietary formats for the benefit of those who don’t have a copy of PaintCode installed.

SVG is an obvious format to export to, but it doesn’t support any of the parameters that affect the drawings. So we should also export a StyleKit in JavaScript, Objective-C, Swift, and/or Java for various platforms that may need these shields.

Count a 1 as half a character

When legendText is set to 101, the shields get too wide. The system font is variable-width, so narrow digits don’t need the entire character width:

us 101

Sign standards typically make an exception for the numeral 1, by treating it as half a character or no character at all.

US interstate crown detail obscured by stroke width in smaller sizes

At smaller sizes, the crown on the interstate shield quickly becomes <1px difference between the peak and trough and is not discernable on a map. Increasing the vertical size of the crown would better show this detail. Below is the stock version of the crown and a version where the crown has been expanded to 2x size for comparison.

Stock crown:
image

Double-height crown:
image

State names with 'New' are transposed

The files for New York and New Hampshire shields are transposed as York New and Hampshire New. There appear to be no Jersey New files only because New Jersey has only generic shields defined in Rebusurance. Is this a bug or a misfeature?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.