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.9
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/
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.9/en/planner-otp-2-9
LabMap/en/map
LabMapMap Base/en/map/base-light
LabMapMap Transit/en/map/transit-light
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.9ApitoPlaceAPI params in:BMC v1BMC v2OTP 1OTP 2OTP 2.9ApiarriveByAPI params in:BMC v1BMC v2OTP 1OTP 2OTP 2.9ApitimeAPI params in:BMC v1BMC v2OTP 1ApibannedAgenciesAPI params in:BMC v1OTP 1OTP 2OTP 2.9ApibannedRoutesAPI params in:BMC v1OTP 1ApiwalkSpeedAPI params in:BMC v1OTP 1OTP 2OTP 2.9ApiwheelchairAPI 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 1ApiroutingProfileAPI 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.9ApibikeSwitchCostAPI params in:OTP 1ApidisableAlertFilteringAPI params in:OTP 1ApidisableRemainingWeightHeuristicAPI params in:OTP 1ApigeoidElevationAPI params in:OTP 1ApiignoreRealtimeUpdatesAPI params in:OTP 1OTP 2OTP 2.9ApiintermediatePlacesAPI 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 2OTP 2.9ApitriangleSafetyFactorAPI 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 2OTP 2.9ApiwalkBoardCostAPI params in:OTP 1ApiwalkReluctanceAPI params in:OTP 1OTP 2OTP 2.9ApitimetableViewAPI params in:OTP 2OTP 2.9ApinumTripPatternsAPI params in:OTP 2OTP 2.9ApimaximumTransfersAPI params in:OTP 2OTP 2.9ApimaximumAdditionalTransfersAPI params in:OTP 2OTP 2.9ApisearchWindowAPI params in:OTP 2OTP 2.9ApiincludePlannedCancellationsAPI params in:OTP 2OTP 2.9ApiincludeRealtimeCancellationsAPI params in:OTP 2OTP 2.9ApitransferSlackAPI params in:OTP 2OTP 2.9ApiboardSlackDefaultAPI params in:OTP 2OTP 2.9ApiboardSlackListAPI params in:OTP 2OTP 2.9ApialightSlackDefaultAPI params in:OTP 2OTP 2.9ApialightSlackListAPI params in:OTP 2OTP 2.9ApibicycleOptimisationMethodAPI params in:OTP 2OTP 2.9ApitransportModesAPI params in:OTP 2OTP 2.9ApiegressModeAPI params in:OTP 2OTP 2.9ApidirectModeAPI params in:OTP 2OTP 2.9ApiaccessModeAPI params in:OTP 2OTP 2.9ApiitineraryFiltersDebugAPI params in:OTP 2OTP 2.9ApipageCursorAPI params in:OTP 2OTP 2.9ApiwheelchairAccessibleAPI params in:OTP 2OTP 2.9ApitriangleFactorsSafetyAPI params in:OTP 2OTP 2.9ApitriangleFactorsSlopeAPI params in:OTP 2OTP 2.9ApitriangleFactorsTimeAPI params in:OTP 2OTP 2.9ApiuseBikeRentalAvailabilityInformationAPI params in:OTP 2OTP 2.9ApimaxDirectDurationForModeAPI params in:OTP 2OTP 2.9ApifiltersAPI params in:OTP 2OTP 2.9ApirelaxTransitGroupPriorityAPI params in:OTP 2OTP 2.9
DocOTP 1Full Open API Documentation
DocOTP 2Full Open API Documentation
DocOTP 2.9Full Open API Documentation
DocPlanner v1Full Open API Documentation
DocPlanner v2Full Open API Documentation