Where Am I now ?

The "breadcrumbs" element is always present, on top of the page.

It shows you where you are on the lab.

It enables you to reach any page on the lab.

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

Walk Leg Steps Detail

The WalkLegStepsDetail component displays a detailed view of a each step in a walk leg of a trip plan.

<WalkLegStepsDetail />

Origin
16:50
➢
DEPART towards SOUTHEAST
⤶
Turn LEFT towards EAST
on Route de Lennik - Lennikse Baan / Lenniksebaan
↑
CONTINUE towards EAST
on Route de Lennik - Lennikse Baan
⤶
Turn LEFT towards NORTHEAST
on Avenue des Chanterelles - Hanenkammenlaan
⤷
Turn RIGHT towards SOUTHEAST
Rental vehicle (dott-global)
16:57
Now if we display the component in debug mode we can see some of the info we decided not to use when it was not relevant:
Raw Data
Origin
16:50
➢
DEPART towards SOUTHEAST
on track
⤶
Turn LEFT towards EAST
on Route de Lennik - Lennikse Baan / Lenniksebaan
↑
CONTINUE towards EAST
on Route de Lennik - Lennikse Baan
⤶
Turn LEFT towards NORTHEAST
on Avenue des Chanterelles - Hanenkammenlaan
⤷
Turn RIGHT towards SOUTHEAST
on path
Rental vehicle (dott-global)
16:57
Command Palette
?
LabData/en/data
ApidateAPI params in:BMC v1BMC v2OTP 1ApidateTimeAPI params in:BMC v1BMC v2OTP 1OTP 2OTP 2.10
LabDataGtfs/en/data/gtfs
LabDataGtfs RT/en/data/gtfs-rt
LabDataGbfs/en/data/gbfs
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/
LabDataGtfsTrip Patterns/en/data/gtfs/trip-patterns
LabDataGtfsGtfs Archives/en/data/gtfs/archives
LabDataGtfs RTAlerts/en/data/gtfs-rt/feed/alerts
LabDataGtfs RTTrip Updates/en/data/gtfs-rt/feed/trip-updates
LabDataGbfsAgencies/en/data/gbfs/agencies
LabDataGbfsStations/en/data/gbfs/stations
LabDataGbfsStation Statuses/en/data/gbfs/station-statuses
LabDataGbfsFree Floating Bikes/en/data/gbfs/free-floating-bikes
LabDataGbfsMap/en/data/gbfs/map
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
LabPlanOTP 2.10/en/planner-otp-2-10
LabPlanPlanner v2.1/en/planner-v2-1
LabPlanPlanner v2.1 preset/en/planner-v2-1-preset
LabPlanMigrating to OTP2/en/planner/migrating-to-otp2
LabPlanMigrating to OTP2Get started/en/planner/migrating-to-otp2
LabMigrating to OTP2Get startedHow the engine thinks/en/planner/migrating-to-otp2
LabMigrating to OTP2Get startedTwo recipes/en/planner/migrating-to-otp2
LabMigrating to OTP2Get startedOn these pages/en/planner/migrating-to-otp2
LabPlanMigrating to OTP2Mode selection UX/en/planner/migrating-to-otp2/mode-ux
LabMigrating to OTP2Mode selection UXSettings/en/planner/migrating-to-otp2/mode-ux
LabMigrating to OTP2Mode selection UXUser preferences/en/planner/migrating-to-otp2/mode-ux
LabMigrating to OTP2Mode selection UXRestrict modes/en/planner/migrating-to-otp2/mode-ux
LabMigrating to OTP2Mode selection UX1 Monomodal presets/en/planner/migrating-to-otp2/mode-ux
LabMigrating to OTP2Mode selection UX2 Multimodal presets/en/planner/migrating-to-otp2/mode-ux
LabMigrating to OTP2Mode selection UX3 Simple select, progressive reveal/en/planner/migrating-to-otp2/mode-ux
LabMigrating to OTP2Mode selection UX4 Rent and park toggles/en/planner/migrating-to-otp2/mode-ux
LabMigrating to OTP2Mode selection UX5 Rent or park switches/en/planner/migrating-to-otp2/mode-ux
LabMigrating to OTP2Mode selection UXPros & cons/en/planner/migrating-to-otp2/mode-ux
LabPlanMigrating to OTP2Query matrix/en/planner/migrating-to-otp2/query-matrix
LabPlanMigrating to OTP2Coverage review/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewStreet modes/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewTransit-vs-street filter/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewUnset slots/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewTransit modes/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewWho: operators, lines/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewWhere: places/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewWhen: time/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewTraveller profile/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewIntents check/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewPreset recipe/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewOne cursor, many queries/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewBudget per shape/en/planner/migrating-to-otp2/coverage-review
LabMigrating to OTP2Coverage reviewRecommendations/en/planner/migrating-to-otp2/coverage-review
LabMap/en/map
LabMapMap Base/en/map/base-light
LabMapMap Transit/en/map/transit-light
LabMapMap Transit (via proxy)/en/map/transit-light-proxy
LabDeparture/en/departure
LabDoc/en/doc
LabDocPlanner Cases Library/en/doc/planner-lib
LabDocUi/Ux/en/doc/user-interface
LabDocUi/UxPlanner/en/doc/user-interface/planner/
LabUi/UxPlannerInstant | Duration | Distance/en/doc/user-interface/planner/
LabUi/UxPlannerItinerary Time Overview/en/doc/user-interface/planner/
LabUi/UxPlannerLeg Overview/en/doc/user-interface/planner/
LabUi/UxPlannerItinerary Overview/en/doc/user-interface/planner/
LabUi/UxPlannerLeg Detail/en/doc/user-interface/planner/
LabDocUi/UxDeparture/en/doc/user-interface/departure
LabDocUi/UxInput/en/doc/user-interface/input/
LabHelp/en/help
ApifromPlaceAPI params in:BMC v1BMC v2OTP 1OTP 2OTP 2.10ApitoPlaceAPI params in:BMC v1BMC v2OTP 1OTP 2OTP 2.10ApiarriveByAPI params in:BMC v1BMC v2OTP 1OTP 2OTP 2.10ApitimeAPI params in:BMC v1BMC v2OTP 1ApibannedAgenciesAPI params in:BMC v1OTP 1OTP 2OTP 2.10ApibannedRoutesAPI params in:BMC v1OTP 1ApiwalkSpeedAPI params in:BMC v1OTP 1OTP 2OTP 2.10ApiwheelchairAPI params in:BMC v1BMC v2OTP 1ApinumItinerariesAPI params in:BMC v1BMC v2OTP 1ApimodeAPI params in:BMC v1BMC v2OTP 1ApialightSlackAPI params in:BMC v1BMC v2OTP 1ApiboardSlackAPI params in:BMC v1BMC v2OTP 1ApilocaleAPI params in:BMC v1OTP 1ApishowIntermediateStopsAPI params in:BMC v1OTP 1ApimaxWalkDistanceAPI params in:BMC v1OTP 1ApistartTransitStopIdAPI params in:BMC v1OTP 1ApistartTransitTripIdAPI params in:BMC v1OTP 1ApiwaitReluctanceAPI params in:BMC v1OTP 1OTP 2OTP 2.10ApiwalkReluctanceAPI params in:BMC v1OTP 1OTP 2OTP 2.10ApiroutingProfileAPI params in:BMC v2ApipageCursorsAPI params in:BMC v2ApibannedStopsAPI params in:OTP 1ApibannedStopsHardAPI params in:OTP 1ApibannedTripsAPI params in:OTP 1ApibatchAPI params in:OTP 1ApibikeBoardCostAPI params in:OTP 1ApibikeSpeedAPI params in:OTP 1OTP 2OTP 2.10ApibikeSwitchCostAPI params in:OTP 1ApidisableAlertFilteringAPI params in:OTP 1ApidisableRemainingWeightHeuristicAPI params in:OTP 1ApigeoidElevationAPI params in:OTP 1ApiignoreRealtimeUpdatesAPI params in:OTP 1OTP 2OTP 2.10ApiintermediatePlacesAPI params in:OTP 1ApimaxHoursAPI params in:OTP 1ApimaxPreTransitTimeAPI params in:OTP 1ApimaxTransfersAPI 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 1ApitransferPenaltyAPI params in:OTP 1OTP 2OTP 2.10ApitriangleSafetyFactorAPI 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 1ApiwalkBoardCostAPI params in:OTP 1ApitimetableViewAPI params in:OTP 2OTP 2.10ApinumTripPatternsAPI params in:OTP 2OTP 2.10ApimaximumTransfersAPI params in:OTP 2OTP 2.10ApimaximumAdditionalTransfersAPI params in:OTP 2OTP 2.10ApisearchWindowAPI params in:OTP 2OTP 2.10ApiincludePlannedCancellationsAPI params in:OTP 2OTP 2.10ApiincludeRealtimeCancellationsAPI params in:OTP 2OTP 2.10ApitransferSlackAPI params in:OTP 2OTP 2.10ApiboardSlackDefaultAPI params in:OTP 2OTP 2.10ApiboardSlackListAPI params in:OTP 2OTP 2.10ApialightSlackDefaultAPI params in:OTP 2OTP 2.10ApialightSlackListAPI params in:OTP 2OTP 2.10ApibicycleOptimisationMethodAPI params in:OTP 2OTP 2.10ApitransportModesAPI params in:OTP 2OTP 2.10ApiegressModeAPI params in:OTP 2OTP 2.10ApidirectModeAPI params in:OTP 2OTP 2.10ApiaccessModeAPI params in:OTP 2OTP 2.10ApiitineraryFiltersDebugAPI params in:OTP 2OTP 2.10ApipageCursorAPI params in:OTP 2OTP 2.10ApiwheelchairAccessibleAPI params in:OTP 2OTP 2.10ApitriangleFactorsSafetyAPI params in:OTP 2OTP 2.10ApitriangleFactorsSlopeAPI params in:OTP 2OTP 2.10ApitriangleFactorsTimeAPI params in:OTP 2OTP 2.10ApiuseBikeRentalAvailabilityInformationAPI params in:OTP 2OTP 2.10ApimaxDirectDurationForModeAPI params in:OTP 2OTP 2.10ApifiltersAPI params in:OTP 2OTP 2.10ApirelaxTransitGroupPriorityAPI params in:OTP 2OTP 2.10ApifromServiceJourneyIdAPI params in:ApifromServiceDateAPI params in:ApifromStopLocationIdAPI params in:ApifromAimedDepartureTimeAPI params in:ApiwhiteListedAgenciesAPI params in:ApibannedLinesAPI params in:ApiwhiteListedLinesAPI params in:ApibannedServiceJourneysAPI params in:ApibannedRentalNetworksAPI params in:ApiwhiteListedRentalNetworksAPI params in:ApipassThroughPointsAPI params in:ApirelaxTransitGroupPriorityRatioAPI params in:ApirelaxTransitGroupPriorityConstantAPI params in:ApimaxAccessEgressDurationForModeAPI params in:ApimodePresetAPI params in:
DocOTP 1Full Open API Documentation
DocOTP 2Full Open API Documentation
DocOTP 2.10Full Open API Documentation
DocPlanner v1Full Open API Documentation
DocPlanner v2Full Open API Documentation
DocPlanner v2.1Full Open API Documentation
DocPlanner v2.1 presetFull Open API Documentation