184 lines
		
	
	
		
			6.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
			
		
		
	
	
			184 lines
		
	
	
		
			6.1 KiB
		
	
	
	
		
			HTML
		
	
	
	
<!DOCTYPE html>
 | 
						|
<html><head>
 | 
						|
<meta name="viewport" content="width=device-width, initial-scale=1">
 | 
						|
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
 | 
						|
<title>NMEA 2000 Gateway</title>
 | 
						|
 | 
						|
<script type="text/javascript" src="index.js"></script>
 | 
						|
<script type="text/javascript" src="md5.js"></script>  
 | 
						|
<link rel="stylesheet" href="index.css">
 | 
						|
</head>
 | 
						|
<body>
 | 
						|
<div class="main">
 | 
						|
<h1 id="headline">NMEA 2000 Gateway </h1>
 | 
						|
<div class="row">
 | 
						|
  <span class="label">connected</span>
 | 
						|
  <span class="value" id="connected"></span>
 | 
						|
</div>
 | 
						|
<div id="tabs">
 | 
						|
  <div class="tab active" data-page="statusPage">Status</div>
 | 
						|
  <div class="tab" data-page="configPage">Config</div>
 | 
						|
  <div class="tab" data-page="xdrPage">XDR</div>
 | 
						|
  <div class="tab" data-page="dashboardPage">Data</div>
 | 
						|
  <div class="tab" data-page="updatePage">Update</div>
 | 
						|
  <div class="tab" data-url="https://github.com/wellenvogel/esp32-nmea2000" data-window="help" id="helpButton">Help</div>
 | 
						|
</div>
 | 
						|
<div id="statusPage" class="tabPage">
 | 
						|
  <div id="statusPageContent">
 | 
						|
    <div class="row">
 | 
						|
      <span class="label">VERSION</span>
 | 
						|
      <span class="value" id="version">---</span>
 | 
						|
      <button class="infoButton" id="converterInfo">?</button>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <div class="row even">
 | 
						|
      <span class="label">Access Point IP</span>
 | 
						|
      <span class="value" id="apIp">---</span>
 | 
						|
    </div>
 | 
						|
    <div class="row ">
 | 
						|
      <span class="label">wifi client connected</span>
 | 
						|
      <span class="value" id="wifiConnected">---</span>
 | 
						|
    </div>
 | 
						|
    <div class="row even">
 | 
						|
      <span class="label">wifi client IP</span>
 | 
						|
      <span class="value" id="clientIP">---</span>
 | 
						|
    </div>
 | 
						|
    <div class="row">
 | 
						|
      <span class="label"># clients</span>
 | 
						|
      <span class="value" id="numClients">---</span>
 | 
						|
    </div> 
 | 
						|
    <div class="row">
 | 
						|
      <span class="label">TCP client connected</span>
 | 
						|
      <span class="value" id="clientCon">---</span>
 | 
						|
    </div>
 | 
						|
    <div class="row">
 | 
						|
      <span class="label">TCP client error</span>
 | 
						|
      <span class="value" id="clientErr">---</span>
 | 
						|
    </div>  
 | 
						|
  </div>
 | 
						|
  <button id="reset">Reset</button>
 | 
						|
</div>
 | 
						|
<div class="configForm tabPage hidden" id="configPage" >
 | 
						|
  <div class="buttons">
 | 
						|
    <button id="resetForm">ReloadConfig</button>
 | 
						|
    <button id="forgetPass">ForgetPass</button>
 | 
						|
    <button id="changeConfig">Save&Restart</button>
 | 
						|
    <button id="exportConfig">Export</button>
 | 
						|
    <button id="importConfig">Import</button>
 | 
						|
    <button id="factoryReset">FactoryReset</button>
 | 
						|
  </div>
 | 
						|
  <div class="configFormRows">
 | 
						|
 | 
						|
  </div>
 | 
						|
</div>
 | 
						|
<div class="configForm tabPage hidden" id="xdrPage" >
 | 
						|
  <div class="buttons">
 | 
						|
    <button id="resetForm">ReloadConfig</button>
 | 
						|
    <button id="changeConfig">Save&Restart</button>
 | 
						|
    <button id="loadUnassigned">Show Unmapped</button>
 | 
						|
    <button id="exportXdr">Export</button>
 | 
						|
    <button id="importXdr">Import</button>
 | 
						|
  </div>
 | 
						|
  <div class="configFormRows">
 | 
						|
 | 
						|
  </div>
 | 
						|
</div>
 | 
						|
<div class="tabPage hidden" id="dashboardPage">
 | 
						|
 | 
						|
</div>
 | 
						|
<div class="tabPage hidden" id="updatePage">
 | 
						|
  <div class="row">
 | 
						|
    <span class="label">firmware type</span>
 | 
						|
    <span class="value status-fwtype">---</span>
 | 
						|
  </div>
 | 
						|
  <div class="row">
 | 
						|
    <span class="label">currentVersion</span>
 | 
						|
    <span class="value status-version">---</span>
 | 
						|
  </div>
 | 
						|
  <div class="row">
 | 
						|
    <span class="label">New Firmware</span>
 | 
						|
    <input type="file" name="file1" id="uploadFile">
 | 
						|
  </div>
 | 
						|
  <div class="row">
 | 
						|
    <span class="label"></span>
 | 
						|
    <span id="imageProperties" class="value"></span>
 | 
						|
  </div>
 | 
						|
  <div id="uploadProgress">
 | 
						|
    <div id="uploadDone"></div>
 | 
						|
  </div>
 | 
						|
  <div class="buttons">
 | 
						|
    <button id="uploadBin">Upload</button>
 | 
						|
  </div>
 | 
						|
</div>
 | 
						|
 | 
						|
</div>
 | 
						|
<div class="overlayContainer hidden" id="overlayContainer">
 | 
						|
  <div id="overlay" class="overlay">
 | 
						|
    <div id="overlayContent" class="overlayContent">
 | 
						|
      AHA
 | 
						|
    </div>
 | 
						|
    <div class="overlayButtons">
 | 
						|
      <button id="hideOverlay">Close</button>
 | 
						|
    </div>
 | 
						|
  </div>
 | 
						|
</div>
 | 
						|
<div class="overlayContainer hidden" id="adminPassOverlay">
 | 
						|
  <div id="adminPassOverlay" class="overlay">
 | 
						|
    <div id="adminPassOverlayContent" class="overlayContent">
 | 
						|
      <h2>Admin Password</h2>
 | 
						|
      <div id="adminPassHint"></div>
 | 
						|
      <div id="adminPassError" ></div>
 | 
						|
      <input id="adminPassInput" type="password">
 | 
						|
      <div class="row">
 | 
						|
        <span class="label">remember me</span>
 | 
						|
        <select id="adminPassKeep">
 | 
						|
          <option value="true">on</option>
 | 
						|
          <option value="false" selected>off</option>
 | 
						|
        </select>
 | 
						|
      </div>
 | 
						|
      <div class="overlayButtons">
 | 
						|
        <button id="adminPassCancel">Cancel</button>
 | 
						|
        <button id="adminPassOk">OK</button>
 | 
						|
      </div>
 | 
						|
    </div>
 | 
						|
  </div>
 | 
						|
</div>
 | 
						|
<div id="xdrHelp" class="hidden">
 | 
						|
  <h1>XDR Help</h1>
 | 
						|
  <p>You can configure the mapping of various NMEA2000 entities to XDR records.</p>
 | 
						|
  <p>To set up such a mapping you select the category, the source of data 
 | 
						|
    (if the category has different sources) and the field (if the category has multiple fields).</p>
 | 
						|
  <p>You have to provide the name of the transducer for the XDR record.</p>  
 | 
						|
  <p>Many of the NMEA2000 messages have an instance id (0..255) to allow
 | 
						|
    for different sources of the data. You need to decide how do you want to
 | 
						|
    map such IDs to XDR records.
 | 
						|
  </p>
 | 
						|
  <ul>
 | 
						|
  <li>IGNORE: the instance id will be ignored</li>
 | 
						|
  <li>AUTO: the instance will be appended to the transducer name: #123</li>
 | 
						|
  <li>SINGLE: just map exactlly one instance to this transducer name</li>
 | 
						|
  </ul>
 | 
						|
  <p>You can also decide if you want a both way mapping, i.e. also map
 | 
						|
    received XDR records back to NMEA 2000.
 | 
						|
  </p>
 | 
						|
  <p>Once you create a mapping the system will show an example of the 
 | 
						|
    generated XDR records (and the accepted ones).
 | 
						|
  </p>
 | 
						|
  <p>To ease the set up the system will track received NMEA2000 data 
 | 
						|
    that it currently does not map.
 | 
						|
    With clicking <span class="txtShowUnmapped">"Show Unmapped"</span> you bring up such a list and for each 
 | 
						|
    found mapping there is a "+" button that will allow you to create a mapping
 | 
						|
    for this record.
 | 
						|
  </p>
 | 
						|
  <p>The set of handled PGNs that can be mapped to XDR records can be found
 | 
						|
    in the documentation.
 | 
						|
  </p>  
 | 
						|
</div>
 | 
						|
<div class="hidden">
 | 
						|
  <a id="downloadXdr"></a>
 | 
						|
</div>
 | 
						|
</body>
 | 
						|
</html>
 | 
						|
 | 
						|
 |