Piaware has a home page with link to Skyaware Map url/skyaware978 that appears to correspond to this source
How could a another link be added to url/graphs1090
1 Like
Not a bad idea. I’ll bring this up at our team meeting this week. Thanks!
1 Like
The landing page is provided by the piaware-web package; source code is here: GitHub - flightaware/piaware-web: Landing/status webpage for PiAware sdcard images
which installs into /var/www/html/ on your Pi; you can tweak the files there as needed.
(nb: if you do modify these files directly, they will be overwritten on upgrade as they’re owned by the package)
1 Like
By default this page exists in Piaware image only, but does not exist in Raspbian image with package install.
I have installed it on Armbian Buster very easily by following command:
pi@orangepipc:~$ sudo apt install piaware-web
Later addition:
Above command works only if the piaware and/or dump1090-fa is installed by package install, in which case the Flightaware repository is added first by following command:
wget http://flightaware.com/adsb/piaware/files/packages/pool/piaware/p/piaware-support/piaware-repository_3.7.2_all.deb
sudo dpkg -i piaware-repository_3.7.2_all.deb
For installation using piaware & dump1090-fa packages built from source code, you will need to first add Flightaware repository by above command.
.
1 Like
@abcd567 Thank you. I was wondering how to do this.
I was trying to do the same thing. Edited the index.js and index.html in /var/www/html/. Not too complicated once I figured out that I needed to do crtl+shift+r instead of ctrl+r to see the changes. There are 4 sections to mimic in index.js and then a div in index.html.
It can be prettier, but does the job for now. I can post code if anyone wants to see what is needed.
At 15 deg C your RPi must be out in the elements. Wonder what the low temp range of the Rpi is.
More on the subject, yeah it would be convenient to have a button for graphs1090 on that page. Can you show the code for adding one button? Thanks.
Lower than 8c apparently. 
We’ll see if it survives the weekend here in Chicago. Mine’s in my attic. Friday’s low will be -23c
Currently in a garage, will be in a shed once I can get the antenna mounted. I’m running Ubuntu on a Lenovo tiny. Pi’s were going for silly money so I moved over to these little things for projects.
Here is a diff of the original and my current. I trimmed it down a bit so that it only shows the changes for the graph1090 button
$:/var/www/html$ diff index.html index.html.orig
62,75d61
< <script id="perflink-template" type="text/template">
< <a href="<%= url %>" class="btn btn-primary btn-lg"><%= text %></a>
< </script>
<
<
102,111c88,89
< <div id="map" style="display:inline-block;"></div>
< <br/>
< <div id="uatmap" style="display:inline-block;"></div>
< <br/>
< <div id="perf" style="display:inline-block;"></div>
< <br/><br/>
---
> <div id="map" style="display:inline-block;"></div>
> <div id="uatmap" style="display:inline-block;"></div>
$:/var/www/html$ diff index.js index.js.orig
202,294d201
< var PerfLink = Backbone.Model.extend({
< defaults: {
< url: '/graph1090/',
< text: 'Go to Performance Graphs',
< visible: true,
< },
<
< updateFromData: function(data) {
< this.set('visible', true);
< }
< });
<
< var PerfLinkView = Backbone.View.extend({
< template: _.template($('#perflink-template').html()),
<
< initialize: function() {
< this.listenTo(this.model, 'change', this.render);
< this.render();
< },
<
< render: function() {
< if (!this.model.get('visible')) {
< this.$el.addClass('hidden');
< } else {
< this.$el.removeClass('hidden');
< var rendered = this.template(this.model.attributes);
< this.$el.html(rendered);
< }
< },
< });
<
536,553d442
<
< var perf = new PerfLink();
< var perfView = new PerfLinkView({
< el: '#perf',
< model: perf
< });
2 Likes
Is their an idiots guide on how to do this, I copied the existing bank of text in the index.js file for the existing button which gave like a broken document link below the existing button to the left of the page. So I copied the text above into the Js file and then added the script section of text into the index.html file & the 2nd button appeared but both had moved to the top left of the page above the FA image.
The above is DIF(erence) between original and changed.
Not something to copy paste as that will duplicate it.
Need some basic html and layout knowledge to be changing buttons.
I must say this option would be a fantastic change, if it was to be ever implemented by FA, with for example a simple config file, where one could simply add a list of urls and the buttons would be auto generated on the homepage.
In the meantime, any chance the more tech savvy users could create a short instruction on how to do the change, to have buttons with links on the FA homepage and not break anything?
(This is going from a quick visual rather than doing)
Basically find your index.html and edit it.
Pre-load the script area with the additional buttons you want, and define how they function:
<script id="maplink-template" type="text/template">
<a href="<%= url %>" class="btn btn-primary btn-lg"><%= text %></a>
</script>
Script ID = yournewbutton-template (references elsewhere)
Class = define it as a button like the other ones
And within the container, between the open/close DIVs where the buttons are centered:
<div style="text-align:center;">
<div id="map" style="display:inline-block;"></div>
<div id="uatmap" style="display:inline-block;"></div>
<div id="xxxxx" ^^^^ </div>
</div>
Add an additional button with distinct id (he used ‘perf’ in above example)
That sets the button placeholders.
In the .JS you need to more or less repeat the PerfLink &perflink view Section (from the difference compare earlier) to under the end of the SkyAwareMapLink section.
Give the var a name that means something to you for other buttons based on the ID to keep things consistent. Change the URL to your preferred link/location and hover text.
Replace ‘#perflink-template’ with the script ID you added to the index.html
And to generate the buttons themselves, Under…
var map = new SkyAwareMapLink();
var mapView = new SkyAwareMapLinkView({
el: '#map',
model: map
});
Paste the above var perf / perfView section. But again, name it something meaningful if you add more.
1 Like
Wow, that’s so kind of you - thank you very much Will try this out in a few hours.
To be honest I just went the easy way by using HTML button set up under the </ body> on the index.html file
Allthough I do need to try an figure out a way to fix the url of the FR24 feed button, as it uses IP:8754 to display the page, but the a href puts a / between the ip & colon
<center>
<a href='/adsbx/'>
<button style="height:47px;width:154px; border-radius:6px; font-size:18px; font:helvetica; background-color:#337ab7; border-color:#2e6da4; color:#fff">ADSB Range</button>
</a>
<a href='/graphs1090/'>
<button style="height:47px;width:154px;border-radius:6px; font-size:18px;font:helvetica;background-color:#337ab7; border-color:#2e6da4; color:#fff">Graphs1090</button>
</a>
<a href=':8754'>
<button style="height:47px;width:154px;border-radius:6px; font-size:18px;font:helvetica;background-color:#337ab7; border-color:#2e6da4; color:#fff">FR24 Status</button>
</a>
</center>
1 Like