Jump to content

Livemap and Inair


massilia68

Recommended Posts

no, it is not, as the live map is taken from the same source, you would have to create a few different js files, maybe even modules. Also you would need to create 360 images of the aircraft icons to represent the points of the compass so the plane faces the correct direction

Link to comment
Share on other sites

You can simply create the 360 images with an easy php script:

<?php
$count = 0;
while ($count < 360){
$filename = 'orig.png';
$rotang = -$count; // Rotation angle
$source = imagecreatefrompng($filename) or die('Error opening file '.$filename);
imagealphablending($source, false);
imagesavealpha($source, true);
$rotation = imagerotate($source, $rotang, imageColorAllocateAlpha($source, 0, 0, 0, 127));
imagealphablending($rotation, false);
imagesavealpha($rotation, true);
header('Content-type: image/png');
imagepng($rotation, "rotate/{$count}.png");
imagedestroy($source);
imagedestroy($rotation);
$count = $count + 1;

}
?>

Put this php file into a directory and add a folder called rotate and name your original image orig.png and make sure it is oriented this way:

orig.png

(PLEASE! Don't just use our inair icon ;) Be creative and create one of your own. It isn't that hard)

Upload it to the directory you have saved the folder the php file is in and run the script. If everything worked out as it should you will have 360 images in your rotate folder, already named according to the phpvms way ;). You only have to put these into the innair folder.

This is how everything worked out for me. ;)

  • Like 1
Link to comment
Share on other sites

Go into your acarsmap.js file around line 100 you should find this:

 var pos = new google.maps.LatLng(lat, lng);
 flightMarkers[flightMarkers.length] = new google.maps.Marker({
  position: pos,
  map: map,
  icon: url+"/lib/images/inair/"+data[i].heading+".png",
  flightdetails: data[i],
  infowindow_content: detailed_bubble
 });

Now you can modify this a bit. If you have two airlines with the defined airline codes SLN and SLK for example then your code you would have to exchange with the part I mentioned above would look like this:

 if (data[i].code == "SLN"){
 var pos = new google.maps.LatLng(lat, lng);
 flightMarkers[flightMarkers.length] = new google.maps.Marker({
  position: pos,
  map: map,
  icon: url+"/lib/images/inair/"+data[i].heading+".png",
  flightdetails: data[i],
  infowindow_content: detailed_bubble
 });
 }
else if (data[i].code == "SLK"){
 var pos = new google.maps.LatLng(lat, lng);
 flightMarkers[flightMarkers.length] = new google.maps.Marker({
  position: pos,
  map: map,
  icon: url+"/lib/images/inair2/"+data[i].heading+".png",
  flightdetails: data[i],
  infowindow_content: detailed_bubble
 });
 }

Notice that you will have to change the line containing this

(data[i].code == "SLK")

and add customize the airline code.

Then you have to change this line:

icon: url+"/lib/images/inair2/"+data[i].heading+".png",

so that the right icon get's selected.

This code would use the images from the folder "inair" for the airline SLN and the images from folder "inair2" for the airline SLK.

Hope this helps ;) and don't forget to backup the file before you change something so if something get's messed up you will be able to recover the original status.

Link to comment
Share on other sites

an easier solution is just making it like this :

var pos = new google.maps.LatLng(lat, lng);
flightMarkers[flightMarkers.length] = new google.maps.Marker({
position: pos,
map: map,
icon: url+"/lib/images/inair/"+data[i].code+"/"+data[i].heading+".png",
flightdetails: data[i],
infowindow_content: detailed_bubble
});

and then inside the inair folder just make seperate folders named for each 3 letter code

so if you have the inair folder create folders inside like "SLK", "SLN", with the inair images for each airline in it ;)

Link to comment
Share on other sites

I'm not very experienced with javascript and there are probably better ways to solve this problem (maybe with jquery or stuff like that) but I got it to work like this:

Just add these lines of code to the end of your acarsmap.tpl file:

<script type="text/javascript">
function makebig(){
var button = document.getElementById("button");
var buttoncontent = button.value;
if (buttoncontent == "Make big"){
var elem = document.getElementById("acarsmap");
elem.style.width = "800px";
elem.style.height = "800px";
button.value = "Make small";
}
else {
var elem = document.getElementById("acarsmap");
elem.style.width = "<?php echo  Config::Get('MAP_WIDTH');?>";
elem.style.height = "<?php echo Config::Get('MAP_HEIGHT')?>";
button.value = "Make big";
}
};
</script>
<input type="button" id="button" onclick="makebig()" value="Make big">

Then change these lines according to your needs:

elem.style.width = "800px";
elem.style.height = "800px";

If you want to change the values then you have to really be careful to change every value that comes up in those lines.

For example if you want to change "Make big" to "Big" you will have to change it

if (buttoncontent == "Make big"){

here and

button.value = "Make big";

here and

<input type="button" id="button" onclick="makebig()" value="Make big">

here ;)

If anyone has some suggestion on how to improve the code then I'd be happy to know.

-Lauritz

Link to comment
Share on other sites

Ok, I've coded the full screen module for you ;)

Put this in your ACARS.php Module:

public function viewmapbig()
{
 $this->set('acarsdata', ACARSData::GetACARSData());
 $this->render('acarsmapbig.tpl');

}

Then you have to create a new template file in your "phpvms/lib/skins/YOURSKINFOLDER/" folder named acarsmapbig.tpl which contains the following stuff:

<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
</style>
</head>
<?php
/**
* These are some options for the ACARS map, you can change here
*
* By default, the zoom level and center are ignored, and the map
* will try to fit the all the flights in. If you want to manually set
* the zoom level and center, set "autozoom" to false.
*
* You can use these MapTypeId's:
* http://code.google.com/apis/maps/documentation/v3/reference.html#MapTypeId
*
* Change the "TERRAIN" to the "Constant" listed there - they are case-sensitive
*
* Also, how to style the acars pilot list table. You can use these style selectors:
*
* table.acarsmap { }
* table.acarsmap thead { }
* table.acarsmap tbody { }
* table.acarsmap tbody tr.even { }
* table.acarsmap tbody tr.odd { }
*/
?>
<script type="text/javascript">
<?php
/* These are the settings for the Google map. You can see the
Google API reference if you want to add more options.

There's two options I've added:

autozoom: This will automatically center in on/zoom
  so all your current flights are visible. If false,
  then the zoom and center you specify will be used instead

refreshTime: Time, in seconds * 1000 to refresh the map.
  The default is 10000 (10 seconds)
*/
?>
<script type="text/javascript"
 src="https://maps.googleapis.com/maps/api/js?libraries=weather&sensor=false">
</script>
<script type="text/javascript">
var acars_map_defaults = {
autozoom: false,
zoom: 4,
   center: new google.maps.LatLng("<?php echo Config::Get('MAP_CENTER_LAT')?>", "<?php echo Config::Get('MAP_CENTER_LNG')?>"),
   mapTypeId: google.maps.MapTypeId.SATELLITE,
   refreshTime: 10000
};
</script>
<div id="acarsmap" style="margin: 0; width: 100%; height: 100%; position: absolute;"></div>
</div>
<script type="text/javascript" src="<?php echo fileurl('/lib/js/acarsmap.js');?>"></script>
<?php
/* This is the template which is used in the table above, for each row.
Be careful modifying it. You can simply add/remove columns, combine
columns too. Keep each "section" (<%=...%>) intact

Variables you can use (what they are is pretty obvious)

Variable:	   Notes:
<%=flight.pilotid%>
<%=flight.firstname%>
<%=flight.lastname%>
<%=flight.pilotname%>    First and last combined
<%=flight.flightnum%>
<%=flight.depapt%>	 Gives the airport name
<%=flight.depicao%>
<%=flight.arrapt%>	 Gives the airport name
<%=flight.arricao%>
<%=flight.phasedetail%>
<%=flight.heading%>
<%=flight.alt%>
<%=flight.gs%>
<%=flight.disremaining%>
<%=flight.timeremaning%>
<%=flight.aircraft%>    Gives the registration
<%=flight.aircraftname%>   Gives the full name
<%=flight.client%>	 FSACARS/Xacars/FSFK, etc
<%=flight.trclass%>	 "even" or "odd"
    <%=flight.realid%>
 <%=flight.percomplete%>
 <%=flight.onlineimage%>

You can also use logic in the templating, if you so choose:
http://ejohn.org/blog/javascript-micro-templating/
*/

?>
<script type="text/html" id="acars_map_row">
<tr height="10px" class="<%=flight.trclass%>">
</tr>
</script>
<?php
/* This is the template for the little map bubble which pops up when you click on a flight
Same principle as above, keep the <%=...%> tags intact. The same variables are available
to use here as are available above.
*/
?>
<script type="text/html" id="acars_map_bubble">
<span style="font-size: 10px; text-align:left; width: 100%" align="left">
<b><%=flight.pilotid%> - <%=flight.pilotname%></b><br />
<strong>Flight <%=flight.flightnum%></strong> (<%=flight.depicao%> to <%=flight.arricao%>)<br />
<strong>Aircraft: </strong><%=flight.aircraftname%><br />
<strong>Status: </strong><%=flight.phasedetail%><br />
<strong>Dist/Time Remain: </strong><%=flight.distremaining%> <?php echo Config::Get('UNITS');?> / <%=flight.timeremaining%><br />
</span>
</script>


The map should be accessible with a link looking like this:

http://www.YOURLINK/YOURPHPVMSFOLDER/index.php/acars/viewmapbig

or if you have installed phpvms into your root folder

http://www.YOURLINK/index.php/acars/viewmapbig

You will only have to put a normal button or link to your default livemap linking to the fullscreen one.

I have a live demo here if you want to check it out:

http://skyline-va.de/phpvms/index.php/acars/viewmapbig

Hope this helps ;)

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

I can't even access your website.

But by the way:

There is one thing missing in these instructions. After you have followed the steps I mentioned above you have to use this else command for the one in line 74 of the index.php (phpvms root folder):

else
{
# It's a template sammich!
 if (strpos($page_content,'html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }') !== false) {
$BaseTemplate->ShowTemplate('header2.tpl');
echo $page_content;

}
 else {
$BaseTemplate->ShowTemplate('header.tpl');
echo $page_content;
$BaseTemplate->ShowTemplate('footer.tpl');

}
}

Then you should get a fullscreen live map.

Happy Christmas!

Link to comment
Share on other sites

  • Administrators

I found it easier to use the action.php method which goes skinless and just set the map to 100% like I did here -> http://www.virtualac.../map/fullscreen <- this uses the Leaf map instead of the Google map but you can use the same concept, plus you do not have to hack a core file subject to update.

Link to comment
Share on other sites

  • 3 weeks later...

I found it easier to use the action.php method which goes skinless and just set the map to 100% like I did here -> http://www.virtualac.../map/fullscreen <- this uses the Leaf map instead of the Google map but you can use the same concept, plus you do not have to hack a core file subject to update.

Hello, David How you can work with action.php ?

Howto to do this with action.php?

Thanks Fred

Link to comment
Share on other sites

  • 1 month later...

discovered one thing now with

var pos = new google.maps.LatLng(lat, lng);
flightMarkers[flightMarkers.length] = new google.maps.Marker({
position: pos,
map: map,
icon: url+"/lib/images/inair/"+data[i].code+"/"+data[i].heading+".png",
flightdetails: data[i],
infowindow_content: detailed_bubble
});

which works great ;)

but one problem if you have 2 Airlines VLI and FEV (in my case) and Pilot assigned to FEV fly a VLI flight it show the FEV inair image instead of VLI

so is there a possibility to go over the flightnumber if flightcode starts with VLI* force use of VLI inair image?

best regards,

Thomas

Link to comment
Share on other sites

  • 1 month later...
  • 11 months later...

You can simply create the 360 images with an easy php script:

<?php
$count = 0;
while ($count < 360){
$filename = 'orig.png';
$rotang = -$count; // Rotation angle
$source = imagecreatefrompng($filename) or die('Error opening file '.$filename);
imagealphablending($source, false);
imagesavealpha($source, true);
$rotation = imagerotate($source, $rotang, imageColorAllocateAlpha($source, 0, 0, 0, 127));
imagealphablending($rotation, false);
imagesavealpha($rotation, true);
header('Content-type: image/png');
imagepng($rotation, "rotate/{$count}.png");
imagedestroy($source);
imagedestroy($rotation);
$count = $count + 1;

}
?>

Put this php file into a directory and add a folder called rotate and name your original image orig.png and make sure it is oriented this way:

orig.png

(PLEASE! Don't just use our inair icon ;) Be creative and create one of your own. It isn't that hard)

Upload it to the directory you have saved the folder the php file is in and run the script. If everything worked out as it should you will have 360 images in your rotate folder, already named according to the phpvms way ;). You only have to put these into the innair folder.

This is how everything worked out for me. ;)

Gives me a 500 Internal Server Error

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...