diff --git a/html/config.js b/html/config.js index 06daf1e..dc50f73 100644 --- a/html/config.js +++ b/html/config.js @@ -243,10 +243,10 @@ HideCols = [ -//showing Pictures from the planespotters.net api -showPictures = true; +// showing Pictures from the planespotters.net api +// showPictures = true; // showing small pictures / silhouettes if photo is unavialable or planespotters.net photo is not aviablable -showSilhouettes=true; +// showSil = true; // this shows small pictures in the details but they need to be provided by the user in the folder /usr/local/share/tar1090/aircraft_sil // pictures need to be named A330.png and so forth with the type code in the form TYPE.png // provide ZZZZ.png to be shown when the type is not known. diff --git a/html/defaults.js b/html/defaults.js index 3ea5881..84dcfd8 100644 --- a/html/defaults.js +++ b/html/defaults.js @@ -264,7 +264,11 @@ let HideCols = [ ] -let showPictures = false; +let showPictures = true; +let silAvailable = true; +let showSil = true; +let wideInfoBlock = false; +let baseInfoBlockWidth = 180; // enable DWD Radolan (NEXRAD like weather for Germany) let enableDWD = true; diff --git a/html/script.js b/html/script.js index f424928..ddffb96 100644 --- a/html/script.js +++ b/html/script.js @@ -108,15 +108,11 @@ let halloween = false; let noRegOnly = false; let triggerMapRefresh = 0; let firstDraw = true; -let new_html=""; -let cachedAirplane=""; -let loadedPhoto=null; -//FIGURE OUT WHY IT"S NOT WORKING FROM CONFIG -let silhouettesAviablable=true; -let type=null; -let photoShown=null; +let cachedAirplane = ""; +let photoShown = null; let cachedSilhouette = ""; +let infoBlockWidth = baseInfoBlockWidth; const renderBuffer = 45; @@ -157,8 +153,6 @@ let badLineMlat; let badDot; let badDotMlat; -let infoBlockWidth=180; - // TAR1090 application object let TAR; TAR = (function (global, $, TAR) { @@ -1061,36 +1055,24 @@ function initPage() { key: "wideInfoblock", display: "Wider infoblock", container: "#settingsRight", - init: false, + init: wideInfoBlock, setState: function(state) { - console.log("state "+state); - if (state) { - infoBlockWidth=240*globalScale; - - setInfoblockWidth(); - setSelectedInfoBlockVisibility(); - }else{ - infoBlockWidth=180*globalScale; - $('#selected_photo').css("left","0%"); - setInfoblockWidth(); - setSelectedInfoBlockVisibility(); - } + wideInfoBlock = state; + setSelectedInfoBlockVisibility(); } }); new Toggle({ key: "showPictures", display: "Show Pictures", container: "#settingsRight", - init: true, + init: showPictures, setState: function(state) { - console.log("state "+state); if (state) { showPictures=true; }else{ showPictures=false; $('#selected_photo').html("

"); $('#copyrightInfo').html(""); - } } }); @@ -2072,6 +2054,23 @@ function refreshPageTitle() { document.title = PageName + ' - ' + subtitle; } +function displaySil() { + if (!silAvailable || !showSil) { + $('#selected_photo').html(""); + return; + } + let selected = SelectedPlane; + let new_html=""; + let type = selected.icaoType ? selected.icaoType : 'ZZZZ'; + let hex = selected.icao.toUpperCase(); + new_html = ""; + if ( hex != cachedSilhouette) { + $('#selected_photo').html(new_html); + cachedSilhouette = selected.icao.toUpperCase(); + $('#copyrightInfo').html(""); + } +} + let selCall = null; let selIcao = null; let selReg = null; @@ -2161,59 +2160,42 @@ function refreshSelected() { $('#selected_ownop').text(""); - if (showPictures) { - let planeHex = selected.icao.toUpperCase(); + let planeHex = selected.icao.toUpperCase(); - if (planeHex != cachedAirplane) { - cachedAirplane=selected.icao.toUpperCase(); + if (showPictures && planeHex != cachedAirplane) { + cachedAirplane = selected.icao.toUpperCase(); $('#selected_photo').html("

Loading image...

"); $('#copyrightInfo').html(""); - $.ajax({ - url: 'https://api.planespotters.net/v1/photos/hex/'+planeHex, - dataType: 'application/json', - headers: { 'x-auth-token': 'gbn39gVQb0iIqukMQnuLjrAzDqq5alCB' }, - complete: function(data){ - console.log(data) - try{ - let apiResponse=JSON.parse(data["responseText"]); - let photoToPull = apiResponse["photos"][0]["thumbnail"]["src"]; - let linkToPicture = apiResponse["photos"][0]["link"]; - console.log(linkToPicture); - setInfoblockWidth(); - new_html = ''; - $('#copyrightInfo').html("Image © "+apiResponse["photos"][0]["photographer"]+""); - $('#selected_photo').html(new_html); - setSelectedInfoBlockVisibility(); - photoShown=true; - } - catch(e){ - if (silhouettesAviablable){ + let req = $.ajax({ + url: 'https://api.planespotters.net/v1/photos/hex/'+planeHex, + dataType: 'json', + headers: { 'x-auth-token': 'gbn39gVQb0iIqukMQnuLjrAzDqq5alCB' }, + }); - type = selected.icaoType ? selected.icaoType : 'ZZZZ'; - let hex= selected.icao.toUpperCase(); - new_html = ""; - if ( hex != cachedSilhouette) { - $('#selected_photo').html(new_html); - cachedSilhouette = selected.icao.toUpperCase(); - setInfoblockWidth(); - setSelectedInfoBlockVisibility() - photoShown=false; - $('#copyrightInfo').html(""); - } - }else{ - $('#selected_photo').html(""); - setInfoblockWidth(); - setSelectedInfoBlockVisibility() - photoShown=false; - } - } + req.done(function(data) { + console.log(data) + let photos = data["photos"]; + if (!photos || photos.length == 0) { + photoShown = false; + displaySil(); + setSelectedInfoBlockVisibility() + return; + } + let new_html=""; + let photoToPull = photos[0]["thumbnail"]["src"]; + let linkToPicture = photos[0]["link"]; + console.log(linkToPicture); + new_html = ''; + $('#copyrightInfo').html("Image © " + photos[0]["photographer"]+""); + $('#selected_photo').html(new_html); + setSelectedInfoBlockVisibility(); + photoShown = true; + }); + } else { + displaySil(); + } - }})}} - - - - - //$('#airplanePhoto').css("width",""+infoBlockWidth*0.85+""); + //$('#airplanePhoto').css("width",""+infoBlockWidth*0.85+""); $("#selected_altitude1").text(format_altitude_long(selected.altitude, selected.vert_rate, DisplayUnits)); @@ -3289,14 +3271,12 @@ function showMap() { } function setSelectedInfoBlockVisibility() { + setInfoblockWidth(); if (SelectedPlane && toggles['selectedDetails'].state) { if (!mapIsVisible) $("#sidebar_container").css('margin-left', '140pt'); //$('#sidebar_canvas').css('margin-bottom', $('#selected_infoblock').height() + 'px'); // - $('#large_mode_control').css('left', (infoBlockWidth * globalScale + 10) + 'px'); - $('.ol-scale-line').css('left', (infoBlockWidth * globalScale + 8) + 'px'); - if (mapIsVisible && document.getElementById('map_canvas').clientWidth < parseFloat($('#selected_infoblock').css('width')) * 3) { $('#selected_infoblock').css('height', '290px'); $('#large_mode_control').css('left', (5 * globalScale) + 'px'); @@ -3311,7 +3291,6 @@ function setSelectedInfoBlockVisibility() { } $('#selected_infoblock').show(); - setInfoblockWidth(); } else { if (!mapIsVisible) $("#sidebar_container").css('margin-left', '0'); @@ -4816,22 +4795,21 @@ function shiftTrace(offset) { updateAddressBar(); } -function setInfoblockWidth(){ - //$('#large_mode_control').css('left', (infoBlockWidth * globalScale) + 'px'); - //$('.ol-scale-line').css('left', (infoBlockWidth * globalScale + 8) + 'px'); - if (photoShown==false && showPictures && infoBlockWidth==240*globalScale){ - $('#selected_photo').css("left","15%");} - else{ - $('#selected_photo').css("left","0%"); - } - $('#selected_infoblock').css("width",infoBlockWidth*globalScale); - $('#selected_photo').css("width",""+infoBlockWidth*0.87*globalScale+""); - $('#airplanePhoto').css("width",""+infoBlockWidth*0.87*globalScale+""); - $('#silhouette').css("width",151*globalScale); - - - +function setInfoblockWidth() { + if (wideInfoBlock) { + infoBlockWidth = baseInfoBlockWidth * 1.333333333333; + $('#selected_photo').css("left","15%"); + } else { + infoBlockWidth = baseInfoBlockWidth; + $('#selected_photo').css("left","0%"); + } + $('#selected_infoblock').css("width",infoBlockWidth*globalScale); + $('#selected_photo').css("width",""+infoBlockWidth*0.87*globalScale+""); + $('#airplanePhoto').css("width",""+infoBlockWidth*0.87*globalScale+""); + $('#silhouette').css("width",151*globalScale); + $('#large_mode_control').css('left', (infoBlockWidth * globalScale + 10) + 'px'); + $('.ol-scale-line').css('left', (infoBlockWidth * globalScale + 8) + 'px'); }