Aircraft Details window

Faramir · November 21, 2020, 12:11:17 AM

After nearly 15 years working with BaseStation I finally got rid of the wobly table layout in the Aircraft Details window. Whatever I tried I never got the items lined up properly... until today! It was so simple and all those years it never dawned on me! Now I have the window I want with lots of information I store in the database, like a side-view, additional logo (if present), radio callsign, alliance membership (if present), a big brand-logo and a big picture of the actual aircraft all neatly organised, I'm so happy with this! How an old program can still put a very big grin on my face after almosr 15 years! A sample of my window as it is today can be seen here. The next project for me will be a way to put the routes into the database. Hopefully that will be complete within the next 15 years!

peteroberts · November 21, 2020, 08:19:25 AM

Morning Faramir,
That looks very nice, well done. Would you care to share the code for the Details Window with us please? I would like to try and emulate yours.

Backups taken ready of course

Thanks

Pete.

Anmer · November 21, 2020, 08:57:09 AM

Thanks for sharing.

I spent many "enjoyable" hours creating Aircraft Details windows. It was when Flight Display was still accessing routes and "grabbing" photos.

Here's my current window and the xsl and css "code".

BaseStation.XSL

Code Select


<?xml version="1.0" encoding="iso8859-1"?> 
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 

<xsl:template match="/"> 
<html> 
<head> 
<link rel="stylesheet" href="basestation.css" type="text/css"/> 
</head> 
<body> 

<table> 
<tr> 
<td> 
<div class="entrybox3"> 
<table>
<tr> 
<td width="195">
<span class="entrycaption">ModeS: </span>
<span class="entrydata"><xsl:apply-templates select="//transmission/modes"/></span>
</td> 
 
<td width="255"> 
<span class="entrycaption">Operator: </span> 
<span class="entrydata"><xsl:apply-templates select="//regdata/registeredowners"/></span> 
</td> 

<td width="80"> 
<span class="entrycaption">Type: </span> 
<span class="entrydata"><xsl:apply-templates select="//regdata/ICAOTypeCode"/></span> 
</td> 

<td width="60">
<img src="I:\Kinetic BaseStation\OperatorFlags\{//regdata/ICAOTypeCode}.bmp" width="85" height="20" border="0" /> 
</td> 

</tr> 
<tr>
</tr>
</table> 
</div> 
</td> 
</tr> 
</table> 

<table> 
<tr> 
<td> 
<div class="entrybox3"> 
<table>
<tr> 

 

<td width="100"> 
<span class="entrycaption">Reg:  </span> 
<span class="entrydata"><xsl:apply-templates select="//regdata/registration"/></span> 
</td> 

<xsl:variable name="C_Flag"> 
<xsl:choose> 
<xsl:when test="contains(//transmission/country,'_')='true'"> 
<xsl:value-of select="translate(substring-before(//transmission/country,'_'),' ','_')"/> 
</xsl:when> 
<xsl:otherwise> 
<xsl:value-of select="translate(//transmission/country,' ','_')"/> 
</xsl:otherwise> 
</xsl:choose> 
</xsl:variable>

<td width="200">
<span class="entrycaption">Country:  </span> 
<span class="entrydata"><xsl:apply-templates select="//transmission/country"/></span>
</td> 


<td width="40">
<img src="I:\Kinetic BaseStation\BMPFlags\{$C_Flag}.bmp" width="20" height="16" border="0" /> 
</td>


<td width="160">
<span class="entrycaption">Flight No  :  </span> 
<span class="entrydata"><xsl:apply-templates select="//currentflight/callsign"/></span>
</td> 

<td width="60"> 
<span class="entrydata"><xsl:variable name="AirlineICAO" select="substring(//currentflight/callsign,1,3)"/> 
<img src="I:\Kinetic BaseStation\OperatorFlags\{$AirlineICAO}.bmp" width="85" height="20" border="0" /></span> 
</td> 
  
</tr> 
<tr>
</tr>
</table> 
</div> 
</td> 
</tr> 
</table> 

<table width="197" >
<tr>
<td> 
<img src="I:\Kinetic\Aircraft Images\{//regdata/registration}.jpg" class="border" alt="Planepictures.net" height="136" width="197" />  
</td> 
<td> 
<img src="I:\Kinetic\Aircraft Images\{//regdata/registration}_A.jpg" class="border" alt="Airliners.net" height="136" width="197" />  
</td> 
<td> 
<img src="I:\Kinetic\Aircraft Images\{//regdata/registration}_J.jpg" class="border" alt="Jetphotos.net" height="136" width="197" /> 
</td>
</tr> 
</table>

<table> 
<tr> 
<td width="200">
<a href="http://www.airliners.net/search?keywords={//regdata/registration}" target="new"> 
  <span class="entrycaption2">Planepictures.net: <xsl:apply-templates select="//regdata/registration"/></span></a>
</td>
<td width="200"> 
<a href="http://dm.airliners.net/search/photo.search?regsearch={//regdata/registration}" target="new"> 
  <span class="entrycaption2">Airliners.net: <xsl:apply-templates select="//regdata/registration"/></span></a> 
</td>
<td width="200"> 
<a href="http://www.jetphotos.net/showphotos.php?offset=0&amp;where=search|-2|-2|-2|-2|{//regdata/registration}|15|1|||||||-2|-2|-2|-2|||15|1||-2|-2||||reg|1||||||-2|||1|||||||" target="new">
  <span class="entrycaption2">Jetphotos.net: <xsl:apply-templates select="//regdata/registration"/></span></a>
</td>
</tr>
</table>

<table> 
<tr> 
<td width="380"> 
</td> 
<td width="180"> 
</td>
</tr> 
<tr> 
<td> 
<div class="entrybox4"> 
<table width="400"> 
<tr> 
 
<td width="200"> 
<span class="entrycaption">Type                       :  </span> 
<span class="entrydata2"><xsl:apply-templates select="//regdata/type"/></span> 
</td> 
 
<td width="200"> 
<span class="entrycaption">Serial No        :  </span> 
<span class="entrydata2"><xsl:apply-templates select="//regdata/serialno"/></span> 
</td> 
</tr> 
</table> 

<table> 
<tr> 
<td width="380"> 
</td>
</tr>
</table> 
</div> 
</td> 
<td> 
<div class="scrollArea"> 
<table> 
<tr> 
<td> 
<span class="entrycaption">Notes : </span>
<span class="entrydata3"><xsl:apply-templates select="//user/notes"/></span> 
</td> 
</tr> 
</table> 
</div> 
</td> 
</tr> 
</table>

<table> 
<tr> 
<td width="607"> 
<span class="entryheading">Links</span> 
</td> 
</tr> 
<tr> 
<td> 
<div class="entrybox3"> 
<table width="600"> 
<tr> 
<td width="200">
<a href="http://www.airframes.org/reg/{translate(//regdata/registration,'ABCDEFGHIJKLMNOPQRSTUVWXYZ','abcdefghijklmnopqrstuvwxyz')}" target="new"> 
 <span class="entrycaption2">Airframes: <xsl:apply-templates select="//regdata/registration"/></span></a>
</td> 
<td width="200">
<xsl:variable name="Greg" select="substring-after(//regdata/registration,'G-')"/>
<a href="http://www.caa.co.uk/application.aspx?categoryid=60&amp;pagetype=65&amp;applicationid=1&amp;mode=detailnosummary&amp;fullregmark={$Greg}" target="new">
<span class="entrycaption">G-INFO: <xsl:apply-templates select="//regdata/registration"/></span></a> 
</td> 
<td width="200">
<a href="http://www.caa.co.uk/application.aspx?catid=60&amp;pagetype=65&amp;appid=1&amp;mode=detail&amp;modes={//transmission/modes}&amp;dataindex=0" target="new"> 
<span class="entrycaption">G-INFO: <xsl:apply-templates select="//transmission/modes"/></span></a> 
</td>
<td width="200">
<xsl:variable name="Nreg" select="substring-after(//regdata/registration,'N')"/> 
<a href="http://registry.faa.gov/aircraftinquiry/NNum_Results.aspx?NNumbertxt={$Nreg}" target="new"> 
<span class="entrycaption">FAA Registry: <xsl:apply-templates select="//regdata/registration"/></span></a> 
</td> 
</tr>
<tr>
<td width="200">
<a href="http://www.planespotters.net/search.php?q={//regdata/registration}" target="new"> 
<span class="entrycaption">Planespotters: <xsl:apply-templates select="//regdata/registration"/></span></a> 
</td> 
</tr>
</table> 
</div> 
</td> 
</tr> 
</table> 

</body> 
<meta http-equiv="refresh" content="5"/>
</html> 

</xsl:template> 
</xsl:stylesheet>

BaseStation.css

Code Select

html {
  background: #ffc;
  color:#000;
  }

.border {
 border: solid 1px orange; 
}

.entryheading {
  font-family: Arial; font-size: 80%;
}

.entrydata {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold; font-size: 70%; color: blue;
}

.entrydata2 {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 70%;
}

.entrydata3 {
  font-family: Arial, Helvetica, sans-serif;
   font-size: 70%; color: red;
}

.entrybox {
  border: 1px solid #fc6; background-color: #ffd;
}

.entrybox2 {
  table-layout: fixed;
  width; 30;  
  overflow: hidden;  
  border: 1px solid #fc6;
  background-color: #ffd; width: 200; height: 80;
  word-wrap: break-word;
}

.entrybox4 {
  table-layout: fixed;
  overflow: hidden;  
  border: 1px solid #fc6;
  background-color: #ffd; width: 400; height: 40;
  word-wrap: break-word;
}

.scrollArea {
width:200px; 
height: 40px;
padding-left: 5px;
padding-right: 5px; 
border-color: #fc6;
border-width: 1px; 
border-style: solid;
float: left; 
background-color: #ffd;
overflow: auto;
}

.entrybox3 {
  border: 1px solid #fc6;
  background-color: #ffd; width: 605;
}

.entrycaption {
  font-family: Arial; font-weight: bold;  font-size: 70%;
}

.entrycaption2 {
  font-family: Arial; font-weight: bold;  font-size: 70%; line-height: 0.5cm;
}

.ModeSdata {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 70%; color: red;

.Links {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold; font-size: 80%; color: blue;
}

[attachment deleted reduce file load]

Faramir · November 21, 2020, 10:47:30 AM

Quote from: peteroberts on November 21, 2020, 08:19:25 AM
Would you care to share the code for the Details Window with us please?

Thanks for the compliment Pete. Sure I want to share the code, from this moment it's Public Domain :-)
This post contains a lot of code that I use for this windows. I hope to make it as easy as possible to do this and as inspiration and comments (I'm absolutely no SQLite specialist). Hopefully it can help you!

Remarks:

the OperatorFlagCode is not included in de temp1 and temp2 xsl files. I created a trigger that copies the OperatorFlagCode to the field MTOW which is includedin thos two files. That guarantees the correct representation (before it was 'created' with the flightnumber's first three characters). Adding a trigger to the database should only be considered if you know what you are doing (as it surely corrupts your database if it's done wrong) and you have a sound backup of the database, original basestation.xsl and basestation.css. I'll include the trigger (in the form of a SQLite query.
the PopularName field is used to store a second logo, i.e. sub-operator, military unit (max 20 chars)
the TotalHours field stores the ICAO radio callsign, i.e. British Airways has the callsign 'Speedbird' (max 20 chars)
the InfoURL feed (only available via a SQLite query) holds the alliance name for this operator in the MTOW field (max 150 chars)
Basestation refers to the Basestation program directory.
Sideview folder: Basestation\Colored Silhouettes
Operator- and additional logo's: Basestation\OperatorFlags
Brandlogo: Basestation\Brandlogo's
Aircraft image (in the xsl code).: H:\Hobby\Luchtvaart\BaseStation Pictures\
note: A very large collection of images in a single folder significantly slows down Basestation.
I store the aircraft images as registrations.png i.e. PH-CKC.png is stored in the 'P' subfolder.
I made subdirectories 0-9 and A-Z and images are stored in de directory of the first letter of the filename.

I created three queries for the member companies of the three aliances. They are also shared here. The list is based on the Wikipedia page of the tree alliances Star Alliance, SkyTeam and OneWorld.

BaseStation.XSL

Code Select

<?xml version="1.0" encoding="iso8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="/">
  <html>
   <head>
    <link rel="stylesheet" href="basestation.css" type="text/css"/>
   </head>
   <body>
    <!-- AIRCRAFT TABLE -->
    <!-- country, registration, mode-s       -->
    <!-- manufacturer, icao typecode, serial -->
    <!-- type, type-bitmap                   -->
    <span class="entryheading">Aircraft</span>
    <div class="entrybox">
     <table>
      <tr><!-- first row, country information, mode-s         -->
       <td width="110"><span class="entrycaption">Country: </span></td>
       <td width="221"><span class="entrydata"><xsl:apply-templates select="//transmission/country"/></span></td>
       <td width="110"><span class="entrycaption">Registration: </span></td>
       <td width="221"><span class="entrydata"><xsl:apply-templates select="//regdata/registration"/></span></td>
       <td width="110"><span class="entrycaption">ICAO24 code: </span></td>
       <td width="220"><span class="entryhighlite"><xsl:apply-templates select="//transmission/modes"/></span></td>
      </tr>
      <tr><!-- second row, manufacturer icao typecode, serial -->
       <td width="110"><span class="entrycaption">Maker: </span></td>
       <td width="220"><span class="entrydata"><xsl:apply-templates select="//regdata/manufacturer"/></span></td>
       <td width="110"><span class="entrycaption">ICAO Type: </span></td>
       <td width="220"><span class="entrydata"><xsl:apply-templates select="//regdata/ICAOTypeCode"/></span></td>
       <td width="110"><span class="entrycaption">Serial number: </span></td>
       <td width="220"><span class="entrydata"><xsl:apply-templates select="//regdata/serialno"/></span></td>
      </tr>
      <tr><!-- third row, aircraft type, type bitmap          -->
       <td width="110"><span class="entrycaption">Type: </span></td>
       <td width="220"><span class="entrydata"><xsl:apply-templates select="//regdata/type"/></span></td>
       <td width="110"><span class="entrycaption">Type View: </span></td>
       <td width="220"><img src="C:\Program Files (x86)\Kinetic\Basestation\Colored Silhouettes\{//regdata/ICAOTypeCode}.bmp" border="0"/></td>
      </tr>
     </table>
    </div>
    <br/>
    <!-- OPERATOR TABLE -->
    <!-- Operator, ICAO operatorcode, Flight Callsign -->
    <!-- Operator logo, Sub-Operator logo -->
    <span class="entryheading">Operator</span>
     <div class="entrybox">
      <table>
       <tr><!-- Operator, Callsign (when present), ICAO Operator code, Flight         -->
        <td width="110"><span class="entrycaption">Operator: </span></td>
        <td width="221"><span class="entrydata"><xsl:apply-templates select="//regdata/registeredowners"/></span></td>
        <td width="110"><span class="entrycaption">Callsign: </span></td>
        <td width="221"><span class="entrydata"><xsl:apply-templates select="//regdata/totalhours"/></span></td>
        <td width="110"><span class="entrycaption">Operatorcode: </span></td>
        <td width="220"><span class="entrydata"><xsl:apply-templates select="//regdata/mtow"/></span></td>
       </tr>
       <tr><!-- Operator logo, Sub-Operator logo (if not empty), Alliance (if not empty)-->
        <td width="110"><span class="entrycaption">Airline: </span></td>
        <td width="220"><span class="entrydata"><img src="C:\Program Files (x86)\Kinetic\Basestation\OperatorFlags\{//regdata/mtow}.bmp" border="0"/></span></td>
        <xsl:choose> <!-- show sub operator only when not empty -->
         <xsl:when test="not (//regdata/popularname= '')">
          <td width="110"><span class="entrycaption">Additional: </span></td>
          <td width="220"><span class="entrydata"></span><img src="C:\Program Files (x86)\Kinetic\Basestation\OperatorFlags\{//regdata/popularname}.bmp" border="0"/></td>
         </xsl:when>
          <xsl:otherwise>
           <td width="110"><span class="entrycaption"></span></td>
           <td width="220"><span class="entrydata"></span></td>
          </xsl:otherwise>
        </xsl:choose>
        <xsl:choose> <!-- show alliance logo only when not empty -->
         <xsl:when test="not (//user/InfoURL= '')">
          <td width="110"><span class="entrycaption">Alliance: </span></td>
          <td width="220"><span class="entrydata"></span><img src="C:\Program Files (x86)\Kinetic\Basestation\Pictures\{//user/InfoURL}.png" border="0"/></td>
         </xsl:when>
          <xsl:otherwise>
           <td width="110"><span class="entrycaption"></span></td>
           <td width="220"><span class="entrydata"></span></td>
          </xsl:otherwise>
        </xsl:choose>
       </tr>
      </table>
     </div>
    <br/>
    <!-- FLIGHT TABLE -->
    <!-- Flight number, Actual Squawk Code -->
    <span class="entryheading">Flight Information</span>
     <div class="entrybox">
      <table>
       <tr><!-- Flight, -->
        <td width="110"><span class="entrycaption">Flight: </span></td>
        <td width="221"><span class="entrydata"><xsl:apply-templates select="//currentflight/callsign"/></span></td>
        <td width="110"><span class="entrycaption">Squawk:</span></td>
        <td width="221"><span class="entrydata"><xsl:apply-templates select="//currentflight/squawk"/></span></td>
        <td width="110"><span class="entrycaption"></span></td>
        <td width="220"><span class="entrydata"></span></td>
       </tr>
      </table>
     </div>
    <br/>
    <!-- GRAPHICS TABLE -->
    <!-- Manufacturer's Logo, Aircraft Image -->
    <span class="entryheading">Additional Information</span>
     <div class="entrybox">
      <table>
       <tr><!-- Flight number, Actual Squawk Code -->
        <td width="64"><span class="entrycaption"></span></td>
        <td width="400"><img src="C:\Program Files (x86)\Kinetic\BaseStation\Brandlogo's\{//regdata/manufacturer}.png" width="400" height="225" border="0" /></td>
        <td width="64"><span class="entrycaption"></span></td>
        <td width="400"><img src="H:\Hobby\Luchtvaart\BaseStation Pictures\{substring(//regdata/registration, 1, 1)}\{//regdata/registration}.png" width="400" height="225" border="0" /></td>
        <td width="64"><span class="entrycaption"></span></td>
       </tr>
      </table>
     </div>
    <br/>
    <!-- OPTIONAL USER NOTES TABLE -->
    <xsl:choose>
     <xsl:when test="not (//user/notes= '')">
      <span class="entryheading">Additional Information</span>
       <div class="entrybox">
        <table>
         <tr><!-- User Notes (if not empty) -->
          <td width="990"><span class="entrydata"><xsl:apply-templates select="//user/notes"/></span></td>
         </tr>
        </table>
       </div>
     </xsl:when>
    </xsl:choose>
   </body>
  </html>
 </xsl:template>
</xsl:stylesheet>

BaseStation.css

Code Select

html {
  background: #daebf8;
  color: #000;
}

.entryheading {
  font-family: Arial;
  font-size: 120%;
}

.entrycaption {
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: "bold";
  font-size: "90%";
}

.entrydata {
  color: #00f;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: "bold";
  font-size: "90%";
}

.entryhighlite {
  color: #f00;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: "bold";
  font-size: "90%";
}

.entrymessage {
  color: #f00;
  font-family: Arial;
  font-weight: "bold";
  font-size: "70%";
}

.entryfill {
  color: #daebf8;
  font-family: Arial;
  font-size: "70%";
}


.entrybox {
	font-family: Arial, Helvetica, sans-serif;
  border: 1px solid #fc6;
  background-color: #eaf3fb;
}

OperatorFlagCode Trigger

Code Select

CREATE TRIGGER OperatorFlag
  AFTER UPDATE
  ON Aircraft
 BEGIN
  UPDATE aircraft SET MTOW = (SELECT UPPER(NEW.OperatorFlagCode) FROM Aircraft)
  WHERE Aircraft.AircraftID = NEW.AircraftID;
END;

StarAlliance query

Code Select

UPDATE AIRCRAFT
SET InfoURL = 'StarAlliance'
WHERE OperatorFlagCode = 'AEE'
OR
OperatorFlagCode = 'ACA'
OR
OperatorFlagCode = 'CCA'
OR
OperatorFlagCode = 'AIC'
OR
OperatorFlagCode = 'ANZ'
OR
OperatorFlagCode = 'ANA'
OR
OperatorFlagCode = 'AAR'
OR
OperatorFlagCode = 'AUA'
OR
OperatorFlagCode = 'AVA'
OR
OperatorFlagCode = 'BEL'
OR
OperatorFlagCode = 'CMP'
OR
OperatorFlagCode = 'CTN'
OR
OperatorFlagCode = 'MSR'
OR
OperatorFlagCode = 'ETH'
OR
OperatorFlagCode = 'EVA'
OR
OperatorFlagCode = 'LOT'
OR
OperatorFlagCode = 'DLH'
OR
OperatorFlagCode = 'SAS'
OR
OperatorFlagCode = 'CSZ'
OR
OperatorFlagCode = 'SIA'
OR
OperatorFlagCode = 'SAA'
OR
OperatorFlagCode = 'SWR'
OR
OperatorFlagCode = 'TAP'
OR
OperatorFlagCode = 'THA'
OR
OperatorFlagCode = 'THY'
OR
OperatorFlagCode = 'UAL'

SkyTeam Alliance query

Code Select

UPDATE AIRCRAFT
SET InfoURL = 'SkyTeam'
WHERE OperatorFlagCode = 'AFL'
OR
OperatorFlagCode = 'ARG'
OR
OperatorFlagCode = 'AMX'
OR
OperatorFlagCode = 'AEA'
OR
OperatorFlagCode = 'AFR'
OR
OperatorFlagCode = 'AZA'
OR
OperatorFlagCode = 'CAL'
OR
OperatorFlagCode = 'CES'
OR
OperatorFlagCode = 'CSA'
OR
OperatorFlagCode = 'DAL'
OR
OperatorFlagCode = 'GIA'
OR
OperatorFlagCode = 'KQA'
OR
OperatorFlagCode = 'KLM'
OR
OperatorFlagCode = 'KAL'
OR
OperatorFlagCode = 'MEA'
OR
OperatorFlagCode = 'SVA'
OR
OperatorFlagCode = 'ROT'
OR
OperatorFlagCode = 'HVN'
OR
OperatorFlagCode = 'CXA'

OneWorld Alliance query

Code Select

UPDATE AIRCRAFT
SET InfoURL = 'OneWorld'
WHERE OperatorFlagCode = 'AAL'
OR
OperatorFlagCode = 'BAW'
OR
OperatorFlagCode = 'CPA'
OR
OperatorFlagCode = 'FIN'
OR
OperatorFlagCode = 'IBE'
OR
OperatorFlagCode = 'JAL'
OR
OperatorFlagCode = 'MAS'
OR
OperatorFlagCode = 'QFA'
OR
OperatorFlagCode = 'QTR'
OR
OperatorFlagCode = 'RAM'
OR
OperatorFlagCode = 'RJA'
OR
OperatorFlagCode = 'SBI'
OR
OperatorFlagCode = 'ALK'
OR
OperatorFlagCode = 'EIN'

Log in or Sign Up

New Members

Aircraft Details window

Faramir

peteroberts

Anmer

Faramir