View source for Infotainment Skin - Tesla Model 3

<html>
<div style="display:flex; align-items:flex-start; justify-content:center;">
<div>
  <img src="../images/infotainment/teslam3/default_day.jpg" style="width:100%;">
</div>
<div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; max-width:38%;">
</html>
<youtube width="620" height="220">RzWvpZXXe0U</youtube>
<html>
  <img src="../images/infotainment/teslam3/ad_stopping.jpg" style="width:50%;">
  <img src="../images/infotainment/teslam3/audio_pane_radio_browse.jpg" style="width:50%;">
</div> <!-- right pane -->
</div>
</html>
'''Development State: <span style="color:#008000">Stable</span>'''
----
This is an approximation of the infotainment system found in the Tesla Model 3 (software version 9). While control systems and the underlying backend remain relatively unchanged, the Tesla system is organized slightly different than historical infotainment, offering multiple panes that can be operated independently, rather than specific individual full-screen-sized menus.

Instead, the menu design in the Tesla skins operate on a "pane" system.

Pane (screen) IDs are recorded in a file called '''Tesla_Model3_infotainment_screen_ID_matrix.xlsx''', located in the "doc" directory of the Tesla M3 skin. Button IDs are in '''Tesla_Model3_infotainment_button_ID_matrix.xlsx''' in the same directory.

== Layout ==
<html>
<img src="../images/infotainment/teslam3/m3_design_layout_annotated.jpg" style="max-width:100%;">
</html>
{| class="wikitable" style="margin:2em;"
!
! Name
! Description
! Associated simulator variable(s)
|-
|1
|Speed
|Vehicle speed readout (MPH)
|VDS_Vehicle_Speed
|-
|2
|Transmission
|Current transmission setting of the vehicle. Note that this honors a standard miniSim sedan dynamics model (including 1st and 2nd gear)
|VDS_Gear
|-
|3
|AutoDriver state
|The current status of the NADS AutoDriver feature (if enabled). Operates as a touch toggle switch, but is superceded by specific hardware.xml calls to operate AutoDriver.
|SCC_AutoDriver_Mode
|-
|4
|AutoDriver set speed
|The current set speed of the NADS AutoDriver feature (if enabled). If AutoDriver is enabled, - and + buttons will appear to either side to manipulate the set speed by 5 MPH increments.
|SCC_AutoDriver_Setspeed
|-
|5
|Roadway speed limit
|The speed limit of the current roadway, set by scenario. When the variable is set to 0, the speed limit sign icon will not be visible.
|SCC_SpeedLimit
|-
|6
|Controls button
|Toggles the Car System pane.
|
|-
|7
|Media button
|Toggles the Media pane.
|
|-
|8
|App Launcher button
|Toggles the App Launcher menu.
|
|-
|9
|Seat heater (driver) button
|By default, manually toggles day/night illumination mode.
|
|-
|10
|Climate temp (driver) rocker
|Clicking on a chevron on either side manipulates the driver climate temperature infotainment variable (shown, but currently not collected).
|
|-
|11
|Climate button
|(no effect)
|
|-
|12
|Climate temp (passenger) rocker
|Clicking on a chevron on either side manipulates the passenger climate temperature infotainment variable (shown, but currently not collected).
|
|-
|14
|Seat heater (passenger) button
|(no effect)
|
|-
|15
|Windshield defrost toggle button
|Toggles through three modes of operation: off (default), defog (blue icon), and defrost (red icon). (Windshield defrost toggle mode is currently not collected by default.)
|
|-
|16
|Volume rocker
|Clicking on a chevron on either side manipulates the media player volume channel of a connected audio interface. This does '''not''' modify the volumes of alert or notify sounds.
|
|-
|17
|Map orientation button
|Toggles two modes of operation for visual mapping orientation: North Up (default) and Heading Up. (Currently not collected by default.)
|
|-
|18
|Map zoom buttons
|Changes the zoom level of the map.
|
|-
|19
|Other map buttons
|(no effect)
|
|-
|20
|Driving Status
|A graphical representation of headlight state, general "lane perception" and the lane position of the vehicle.
|SCC_Lane_Deviation
VDS_Headlights
VDS_Headlights_HB
|-
|21
|Vehicle health status indicators
|Reflect vehicle status (turn signals instrumented).
|VDS_Headlights
VDS_Headlights_HB
|-
|22
|Turn signals
|Blink when right/left/caution signals are engaged.
|VDS_TurnSignal
|}

== Panes ==
=== PANE_HOME ===
<html>
<div style="display:flex; align-items:flex-start; justify-content:space-between;">
  <div style="padding:0.6em;">This is the base level of operation of the Tesla M3 skin. If this pane is called via scenario (or manually via the mirror) any other active (linked) pane is hidden, force-revealing the map if it wasn't already visible.</div>
  <div style="max-width:46%;">
  <img src="../images/infotainment/teslam3/pane_home.jpg" style="max-width:100%; ">
  </div>
</div>
</html>

=== PANE_AUDIO ===
<html>
<div style="display:flex; align-items:flex-start; justify-content:space-between;">
  <div style="padding:0.6em;">The entertainment media pane.</div>
  <div style="max-width:46%;">
  <img src="../images/infotainment/teslam3/pane_streaming_lightbox.jpg" style="max-width:100%; ">
  </div>
</div>
</html>

=== PANE_PHONE ===
<html>
<div style="display:flex; align-items:flex-start; justify-content:space-between;">
  <div style="padding:0.6em;">The phone pane.</div>
  <div style="max-width:46%;">
  <img src="../images/infotainment/teslam3/phone_dialer_lightbox.jpg" style="max-width:100%; ">
  </div>
</div>
</html>

=== PANE_WEB_BROWSER ===
<html>
<div style="display:flex; align-items:flex-start; justify-content:space-between;">
  <div style="padding:0.6em;">Semi-functional IFRAME-based web browser.</div>
  <div style="max-width:46%;">
  <img src="../images/infotainment/teslam3/pane_webbrowser_lightbox.jpg" style="max-width:100%; ">
  </div>
</div>
</html>

=== PANE_CAMERA ===
<html>
<div style="display:flex; align-items:flex-start; justify-content:space-between;">
  <div style="padding:0.6em;">Primarily serves as a template for the conception of new or modified panes (no list hierarchy).</div>
  <div style="max-width:46%;">
  <img src="../images/infotainment/teslam3/pane_camera_lightbox.jpg" style="max-width:100%; ">
  </div>
</div>
</html>

=== PANE_CAR_SYSTEM ===
<html>
<div style="display:flex; align-items:flex-start; justify-content:space-between;">
  <div style="padding:0.6em;">Operates mainly as a template for the conception of new or modified panes using a list/content system.</div>
  <div style="max-width:46%;">
  <img src="../images/infotainment/teslam3/pane_carsystem_lightbox.jpg" style="max-width:100%; ">
  </div>
</div>
</html>

== Other UI Elements ==
While panes comprise the majority of the visual interface for the system, there are other "screens" that can be called or manipulated. These include menus, submenus, and others. Below are a few that are supplied by default.

=== MENU_APP_LAUNCHER ===
<html>
<div style="display:flex; align-items:flex-start; justify-content:space-between;">
  <div style="padding:0.6em;">The App Launcher is a submenu that provides quick links to other panes not directly available from the main menu bar.</div>
  <div style="max-width:46%;">
  <img src="../images/infotainment/teslam3/app_launcher_lightbox.jpg" style="max-width:100%; ">
  </div>
</div>
</html>

=== ILLUMINATE_DAY / ILLUMINATE NIGHT ===
<html>
<div style="display:flex; align-items:flex-start; justify-content:space-between;">
  <div style="padding:0.6em;">Calling either will force the illumination state of the attached interfaces to go to the given mode.</div>
  <div style="max-width:46%;">
  <img src="../images/infotainment/teslam3/daynight_thumbnail.jpg" style="max-width:100%; ">
  </div>
</div>
</html>

----

== Development Considerations ==
This skin was meant to be modified, and have the ability to have new hooks written for additional functionality (panes, buttons, menus, external hardware, etc).

=== Buttons ===

=== Panes ===

=== Menus ===