Elevator-Web-App

HTML · CSS · JavaScript

A web-based elevator simulation that models multiple elevators working together to maximize efficiency and minimize power consumption. The number of elevators and floors is configurable in config.js.

---

Architecture

Project Structure

Elevator-Web-App/
├── index.html                    # Entry point, loads all scripts
├── js/
│   ├── config.js                 # Constants and configuration
│   ├── utils.js                  # Queue data structure, helper functions
│   ├── elevator-system.js        # Core elevator logic (~740 lines)
│   ├── building_display.js       # UI rendering and animation (~369 lines)
│   └── binding.js                # Event handlers for user interactions
├── css/
│   ├── style.css                 # Building layout and styling (CSS Grid)
│   └── lib/UnidreamLED/          # Custom LED font for floor display
└── images/                       # Textures, backgrounds, button assets

Initialization Flow

Scripts load in order: utils.js → config.js → building_display.js → elevator-system.js → binding.js. On document ready, set_building_configs_and_rebuild() creates elevator objects, initializes outdoor button states, renders the building UI, binds event listeners, and starts all elevators.

---

Configuration (config.js)

Parameter	Default	Description
elevator_nums	6	Number of elevators
floor_nums	10	Number of floors
toggle_door_secs	1500ms	Door open/close animation duration
moving_speed_millisecond_per_pixel	5	Elevator movement speed
waiting_for_enter_duration	1500ms	Time door stays open for passengers
mode_start_waiting_time	2000ms	Delay before auto-mode engages

Direction and State Constants

• Direction: UP (1), DOWN (-1), STILL (0), WAITING_FOR_CHANGING (2)
• Door states: CLOSED (0), CLOSING (1), OPENED (2), OPENING (3)
• Auto-mode: RUNNING (0), STARTING (1), CLOSED (2)

---

Core Data Structures

Elevator Object

Each elevator maintains:

• now_floor_no — current floor position
• now_direction — current travel direction
• moving — whether the elevator is in motion
• door_state — current door state
• auto_mode_state — dispatch mode state
• indoor_switches[] — array of requested floor buttons (ON/OFF per floor)
• indoor_activated_switches_num — count of active floor requests
• recent_opened_switches — Queue tracking recent requests for anomaly detection

Global State

• elevators[] — array of all elevator objects (1-indexed)
• outdoor_buttons_state[][] — 2D array of up/down button states per floor
• numOfEleInFirstFloor — counter for ground-floor elevator availability

Queue (utils.js)

Custom queue implementation supporting push, pop, front, back, isEmpty, size, indexSatisfy(predicate), and removeElementByCondition.

---

Elevator Dispatch Algorithm

Running Mode (running_mode())

The main decision loop that determines where each elevator should go next:

1. Collect requests — builds a ReqPerFloor[] array counting other elevators at each floor (excludes self to avoid collision)
2. Handle idle state — if no requests exist, return to floor 1 (unless another elevator is already there), then wait and retry
3. Group request intervals — identifies contiguous floor ranges with active requests, stored as {st, ed, len} segments
4. Select target — finds the farthest interval with the most requests. If the elevator is within an interval of similar size (within 1 floor), it serves that interval instead. Moves to the midpoint of the selected interval
5. Execute movement — calls move_up() or move_down() toward the target, then recurses

A random 1–300ms delay between decision cycles prevents elevator synchronization.

Dispatch Request (dispatch_request())

Handles outdoor call buttons (up/down at each floor) with prioritized selection:

1. Same floor — prefer a stationary elevator already at the requested floor, or one moving in the same direction
2. Closest below — for UP requests, find the nearest stationary elevator below
3. Closest above — for DOWN requests, find the nearest stationary elevator above
4. Opposite direction fallback — if no ideal match, try an elevator heading the other way

Direction Reversal

Uses a 1.8x threshold: the elevator only continues in a direction if the ratio of floor requests to competing elevators in that direction meets or exceeds 1.8. This prevents congestion and ensures balanced distribution across the fleet.

Floor Arrival (on_reach_floor())

When an elevator reaches a floor:

1. Update the floor display
2. Check if the door should open (indoor button, outdoor button in current direction, or active requests)
3. If yes: open door → wait for passengers → close door → check_and_move()
4. If no: continue moving

---

User Interactions (binding.js)

Indoor Controls (per elevator)

• Floor buttons (1–N): toggle a floor request ON/OFF via toggle_indoor_switch()
• Open door button: reopens the door if closing or idle (no effect while moving)
• Close door button: skips the wait period and closes immediately

Outdoor Controls (per floor)

• Up/Down buttons: toggle the call button and trigger dispatch_request() to assign an elevator
• Visual feedback: active buttons turn yellow, inactive are white

---

Animation and Rendering (building_display.js)

Building Layout

CSS Grid defines the building structure:

• Columns: side wall, N elevator shafts, side wall
• Rows: ceiling, floor walls (one per floor), ground

Elevator Animation

• controller_move_up() / controller_move_down() — animate one floor at a time using jQuery .animate(), adjusting the elevator's top position and cable height
• controller_directly_go_to_floor() — instant repositioning (used during initialization)
• Door animation splits into .door-left and .door-right elements with CSS width transitions

Display

• Floor numbers shown using the UnidreamLED custom font
• Direction indicators: ↑ (up), ↓ (down), blank (still), C (mode changing), A (auto-mode)

---

Safety and Optimization

Anomaly Detection

Prevents button spam:

• Tracks requests in a 3-second sliding window
• If more than 4 requests arrive within the window, all are cancelled
• Hard cap of 13 concurrent active indoor switches per elevator

Efficiency Strategies

• Idle positioning: elevators return to floor 1 when idle, reducing average wait time
• Request grouping: identifies contiguous request clusters and moves to their midpoint
• Load balancing: the 1.8x threshold distributes work across elevators and prevents pile-ups
• Non-deterministic timing: random delays prevent elevators from moving in lockstep
• Direction stability: elevators only reverse when sufficient requests justify it

Async Control Flow

Uses nested callbacks with jQuery animations:

open_door() → wait_for_closing() → close_door() → check_and_move()

check_mode_and_callBack() allows manual requests to interrupt auto-dispatch cycles, ensuring the elevator remains responsive to user input at all times.

---

Version

5.0.1