BMC User Interface Guidelines and demo

BMC Ui Planner Components

Instant | Duration | Distance

The time follow the `hh:mm` format (ie 23:59). The duration uses the `h` of hour or the `min` of minute as separator (ie 1h13 or 6min). The distance uses metric units, the km or meter format (ie 1.03km or 1m). To Minimize the room for confusion, it is recommended to always use 24h format in duration, and to always pad the hour with 0 if needed: Do NOT: 3:45, instead DO: 03:45. This makes the time pattern instantly recognizable. '00:00' To further minimize confusion, and increase visual distinction between duration and instant representation, spacing can be added to the duration: 3h 45m, instead do: 3h45m. If you also display distances around duration, it is recommended to use the m for meters and min for minutes. The shorthands min of minutes and the m of meters works without the need for translation in at least 4 languages, de, en, fr and nl. For the h of hour, it is a bit more complex 'h' work in en and fr, but in german it is Stunde (s) and in dutch it is uur (u). That said, in the context of a compact ui, we recommend keeping a 'h' for hour as it is the (non-official, but widely used) international symbol/shorthand for hour.
(source: https://en.wikipedia.org/wiki/International_System_of_Units#Related_units)

Instant|Duration|Distance

Instant:
23:5903:1215:3400:42
Duration:
23h593h1215h3442min
23h 593h 12min15h 34min42min
Distance:
2.03km42.8km867m42m
Illustrated all together:
21:42→23:59
|
3h 12min • 42.8km

Itinerary Time Overview

The ItineraryTimeOverview component displays a summary of trip timetable (Start -> Duration -> End ).

<ItineraryTimeOverview />

16:50
1h09
17:59

Leg Overview

The LegOverview component displays a summary of a leg in a trip plan. The LegOverview component tries to display as much relevant information as is made possible by the available space. Try resizing the window to see the effect when space becomes scarce

<LegOverview />

Itinerary Overview

The ItineraryOverview component displays a summary of a leg in a trip plan. The ItineraryOverview component renders the size of each LegOverview proportionally to their duration.

<ItineraryOverview />

Leg Detail

The LegDetail component displays a detailed view of a leg in a trip plan. When you put all the LegDetail components together, you get a complete trip plan ui.

<LegDetail />

Go to Rental vehicle (dott-global)
7min, 494m
Go to Anderlecht Yzerkruis
3min, -1m
R42
Brussel Zuid

Anderlecht Yzerkruis

Track ?

17:01
5 intermediate stops,7min
  1. Anderlecht Erasmus
    17:02
  2. Anderlecht Mijlenmeers
    17:03
  3. Anderlecht Eddy Merckx
    17:04
  4. Anderlecht Leemans - Eddy Merckx
    17:05
  5. Anderlecht Sint-Niklaas
    17:06

Anderlecht Coovi

Track ?

17:08
Go to Anderlecht
42s, 38m
S83966
Louvain-la-Neuve

Anderlecht

Track ?

17:11
1 stop,5min

Brux.-Midi/Brus.-Zuid

Track ?

17:16
S23666
Louvain

Brux.-Midi/Brus.-Zuid

Track ?

17:30
3 intermediate stops,19min
  1. Brux.-/ Brus-Centr.
    17:34
  2. Brux.-Nord/Brus.-Noord
    17:40
  3. Schaerbeek / Schaarbeek
    17:45

Haren-Sud / Haren-Zuid

Track ?

17:49
Go to Rental vehicle (dott-global)
3min, 126m
Go to Destination
7min, -1m
Command Palette
?
LabData/en/data
ApidateAPI params in:BMC v1BMC v2OTP 1ApidateTimeAPI params in:BMC v1BMC v2OTP 1OTP 2
LabDataGtfs/en/data/gtfs
LabDataGtfs RT/en/data/gtfs-rt
LabDataRedis/en/data/redis
LabDataGtfsAgencies/en/data/gtfs/feed/agencies/
LabDataGtfsRoutes/en/data/gtfs/feed/routes/
LabDataGtfsTrips/en/data/gtfs/feed/trips/
LabDataGtfsStops/en/data/gtfs/feed/stops/
LabDataGtfs RTAlerts/en/data/gtfs-rt/feed/alerts
LabDataGtfs RTTrip Updates/en/data/gtfs-rt/feed/trip-updates
LabDataRedisredisCacher/gtfsRtAlertsDeLijn/en/data/redis/redisCacher/gtfsRtAlertsDeLijn
LabDataRedisredisCacher/gtfsRtAlertsEurostar/en/data/redis/redisCacher/gtfsRtAlertsEurostar
LabDataRedisredisCacher/gtfsRtAlertsNmbsSncb/en/data/redis/redisCacher/gtfsRtAlertsNmbsSncb
LabDataRedisredisCacher/gtfsRtAlertsStibMivb/en/data/redis/redisCacher/gtfsRtAlertsStibMivb
LabDataRedisredisCacher/gtfsRtAlertsTec/en/data/redis/redisCacher/gtfsRtAlertsTec
LabDataRedisredisCacher/gtfsRtAlertsTecRaw/en/data/redis/redisCacher/gtfsRtAlertsTecRaw
LabDataRedisredisCacher/gtfsRtTripUpdatesDeLijn/en/data/redis/redisCacher/gtfsRtTripUpdatesDeLijn
LabDataRedisredisCacher/gtfsRtTripUpdatesEurostar/en/data/redis/redisCacher/gtfsRtTripUpdatesEurostar
LabDataRedisredisCacher/gtfsRtTripUpdatesNmbsSncb/en/data/redis/redisCacher/gtfsRtTripUpdatesNmbsSncb
LabDataRedisredisCacher/gtfsRtTripUpdatesStibMivb/en/data/redis/redisCacher/gtfsRtTripUpdatesStibMivb
LabDataRedisredisCacher/gtfsRtTripUpdatesTec/en/data/redis/redisCacher/gtfsRtTripUpdatesTec
LabDataRedisredisCacher/gtfsRtTripUpdatesDeLijnRaw/en/data/redis/redisCacher/gtfsRtTripUpdatesDeLijnRaw
LabDataRedisredisCacher/gtfsRtTripUpdatesEurostarRaw/en/data/redis/redisCacher/gtfsRtTripUpdatesEurostarRaw
LabDataRedisredisCacher/gtfsRtTripUpdatesNmbsSncbRaw/en/data/redis/redisCacher/gtfsRtTripUpdatesNmbsSncbRaw
LabDataRedisredisCacher/gtfsRtTripUpdatesTecRaw/en/data/redis/redisCacher/gtfsRtTripUpdatesTecRaw
LabDataRedisredisCacher/pointsByLinesStibMivb/en/data/redis/redisCacher/pointsByLinesStibMivb
LabDataRedisredisCacher/waitingTimesStibMivb/en/data/redis/redisCacher/waitingTimesStibMivb
LabSearch/en/search
LabPlan/en/planner-home
LabPlanPlanner v1/en/planner-tec-app
LabPlanPlanner v2/en/planner-v2-bmc
LabPlanOTP 1/en/planner
LabPlanOTP 2/en/planner-v2
LabMap/en/map
LabMapMap Base/en/map/base-light
LabMapMap Transit/en/map/transit-light
LabDeparture/en/departure
LabUi/Ux/en/user-interface
LabUi/UxPlanner/en/user-interface/planner/
LabUi/UxPlannerInstant | Duration | Distance/en/user-interface/planner/
LabUi/UxPlannerItinerary Time Overview/en/user-interface/planner/
LabUi/UxPlannerLeg Overview/en/user-interface/planner/
LabUi/UxPlannerItinerary Overview/en/user-interface/planner/
LabUi/UxPlannerLeg Detail/en/user-interface/planner/
LabUi/UxDeparture/en/user-interface/departure
LabUi/UxInput/en/user-interface/input/
LabHelp/en/help
ApifromPlaceAPI params in:BMC v1BMC v2OTP 1OTP 2ApitoPlaceAPI params in:BMC v1BMC v2OTP 1OTP 2ApiarriveByAPI params in:BMC v1BMC v2OTP 1OTP 2ApitimeAPI params in:BMC v1BMC v2OTP 1ApibannedAgenciesAPI params in:BMC v1OTP 1OTP 2ApibannedRoutesAPI params in:BMC v1OTP 1ApiwalkSpeedAPI params in:BMC v1OTP 1OTP 2ApiwheelchairAPI params in:BMC v1BMC v2OTP 1ApinumItinerariesAPI params in:BMC v1BMC v2OTP 1ApimodeAPI params in:BMC v1BMC v2OTP 1ApilocaleAPI params in:BMC v1OTP 1ApishowIntermediateStopsAPI params in:BMC v1OTP 1ApiroutingProfileAPI params in:BMC v2ApipageCursorsAPI params in:BMC v2ApialightSlackAPI params in:OTP 1ApibannedStopsAPI params in:OTP 1ApibannedStopsHardAPI params in:OTP 1ApibannedTripsAPI params in:OTP 1ApibatchAPI params in:OTP 1ApibikeBoardCostAPI params in:OTP 1ApibikeSpeedAPI params in:OTP 1OTP 2ApibikeSwitchCostAPI params in:OTP 1ApiboardSlackAPI params in:OTP 1ApidisableAlertFilteringAPI params in:OTP 1ApidisableRemainingWeightHeuristicAPI params in:OTP 1ApigeoidElevationAPI params in:OTP 1ApiignoreRealtimeUpdatesAPI params in:OTP 1OTP 2ApiintermediatePlacesAPI params in:OTP 1ApimaxHoursAPI params in:OTP 1ApimaxPreTransitTimeAPI params in:OTP 1ApimaxTransfersAPI params in:OTP 1ApimaxWalkDistanceAPI params in:OTP 1ApiminTransferTimeAPI params in:OTP 1ApinonpreferredTransferPenaltyAPI params in:OTP 1ApioptimizeAPI params in:OTP 1ApiotherThanPreferredRoutesPenaltyAPI params in:OTP 1ApipreferredAgenciesAPI params in:OTP 1ApipreferredRoutesAPI params in:OTP 1ApireverseOptimizeOnTheFlyAPI params in:OTP 1ApistartTransitStopIdAPI params in:OTP 1ApistartTransitTripIdAPI params in:OTP 1ApitransferPenaltyAPI params in:OTP 1OTP 2ApitriangleSafetyFactorAPI params in:OTP 1ApitriangleSlopeFactorAPI params in:OTP 1ApitriangleTimeFactorAPI params in:OTP 1ApiunpreferredAgenciesAPI params in:OTP 1ApiunpreferredRoutesAPI params in:OTP 1ApiuseRequestedDateTimeInMaxHoursAPI params in:OTP 1ApiwaitAtBeginningFactorAPI params in:OTP 1ApiwaitReluctanceAPI params in:OTP 1OTP 2ApiwalkBoardCostAPI params in:OTP 1ApiwalkReluctanceAPI params in:OTP 1OTP 2ApitimetableViewAPI params in:OTP 2ApinumTripPatternsAPI params in:OTP 2ApimaximumTransfersAPI params in:OTP 2ApimaximumAdditionalTransfersAPI params in:OTP 2ApisearchWindowAPI params in:OTP 2ApiincludePlannedCancellationsAPI params in:OTP 2ApiincludeRealtimeCancellationsAPI params in:OTP 2ApitransferSlackAPI params in:OTP 2ApiboardSlackDefaultAPI params in:OTP 2ApiboardSlackListAPI params in:OTP 2ApialightSlackDefaultAPI params in:OTP 2ApialightSlackListAPI params in:OTP 2ApibicycleOptimisationMethodAPI params in:OTP 2ApitransportModesAPI params in:OTP 2ApiegressModeAPI params in:OTP 2ApidirectModeAPI params in:OTP 2ApiaccessModeAPI params in:OTP 2ApiitineraryFiltersDebugAPI params in:OTP 2ApipageCursorAPI params in:OTP 2ApiwheelchairAccessibleAPI params in:OTP 2ApitriangleFactorsSafetyAPI params in:OTP 2ApitriangleFactorsSlopeAPI params in:OTP 2ApitriangleFactorsTimeAPI params in:OTP 2ApiuseBikeRentalAvailabilityInformationAPI params in:OTP 2ApimaxDirectDurationForModeAPI params in:OTP 2ApifiltersAPI params in:OTP 2ApirelaxTransitGroupPriorityAPI params in:OTP 2
DocOTP 1Full Open API Documentation
DocOTP 2Full Open API Documentation
DocPlanner v1Full Open API Documentation
DocPlanner v2Full Open API Documentation