Update design and use SkyView branding #7

drakeapps · 2017-02-09T23:17:59Z

Update the styling of page
Use SkyView name instead of fa-dump1090
Show aircraft altitude colors in aircraft paths
Show small details pane if hovering over plane
Add altitude chart
Update icons
Add back in current date/time display to page

Fix some indentation issues

…ading and add degree symbol. Remove the work Link from links

Show altitude color key on map Correctly handle retina images with CSS

… on altitude

Add box shadow to header

…of it, but don't need the switcher panel currently

… use an SVG

…resent

mutability · 2017-02-10T16:02:25Z

public_html/planeObject.js

 PlaneObject.prototype.updateIcon = function() {
 var scaleFactor = Math.max(0.2, Math.min(1.2, 0.15 * Math.pow(1.25, ZoomLvl))).toFixed(1);

 var col = this.getMarkerColor();
 var opacity = 1.0;
 var outline = (this.position_from_mlat ? OutlineMlatColor : OutlineADSBColor);
 var baseMarker = getBaseMarker(this.category, this.icaotype, this.typeDescription, this.wtc);
- var weight = ((this.selected && !SelectedAllPlanes ? 2 : 1) / baseMarker.scale / scaleFactor).toFixed(1);
+ //var weight = ((this.selected && !SelectedAllPlanes ? 2 : 1) / baseMarker.scale / scaleFactor).toFixed(1);


Any reason to keep these lines?

mutability · 2017-02-10T16:07:29Z

public_html/planeObject.js

 imgSize: baseMarker.size,
- src: svgPathToURI(baseMarker.path, baseMarker.size, outline, weight, col, transparentBorderWidth),
+ src: svgPathToURI(baseMarker.svg, baseMarker.size, outline, '', col, ''),


Let's get rid of the redundant args here.

mutability · 2017-02-10T16:08:18Z

public_html/planeObject.js

 var rotation = (this.track === null ? 0 : this.track);
- var transparentBorderWidth = (32 / baseMarker.scale / scaleFactor).toFixed(1);
+ //var transparentBorderWidth = (32 / baseMarker.scale / scaleFactor).toFixed(1);


Are the new icons still easy to hit? The transparent border thing was because I kept missing the old icons when they were scaled down.

I don't really have a problem clicking them, but I guess that varies to the user. It makes it equal to how clickable icons are on FA so making that consistent. I did find it annoying trying to click planes that are nearly on top of each with the transparent border. But it can be added back in if it seems like it should be

mutability · 2017-02-10T16:12:48Z

public_html/script.js

+function flightFeederCheck() {
+ $.ajax('/status.json', {
+ success: function(data) {
+ if (typeof data.serial !== 'undefined') {


I updated the FF status.json in 7.6.0; there is now a "type": "flightfeeder" key that is probably better to check than looking for the serial number (uncommissioned FFs won't have a serial number)

mutability · 2017-02-10T16:14:18Z

public_html/style.css

+}
+
+#altitude_chart_button {
+ background-image: url('images/alt_legend_feet.svg');


These svgs have a fixed set of colors so they are going to be out of sync with the endpoints used in the code.

Do you mean that if the plane is selected or stale it'll be a slightly different color and won't match up? Or something else that I'm missing?

If the user changes the color configuration, the aircraft will change to reflect their modifications but the legends won't.

If generating the gradient on the fly turns out to be tricky, another alternative is to disable the legend if the config.js settings don't match the defaults

Changed so the chart will be hidden if using custom colors.

Generating the colors for a custom chart is pretty straight forward, but making it look good and consistent is the issue.

mutability · 2017-02-10T16:18:34Z

public_html/script.js

@@ -1308,6 +1473,14 @@ function onDisplayUnitsChanged(e) {
 });
 }

+function setAltitudeLegend(units) {


Is there a way to hide the legend entirely? It takes up a lot of screen real estate

Added an option to toggle it on and off.

mutability · 2017-02-10T16:32:04Z

Also can you change the base branch to dev as that's where it will be merged?
(I can do it, but it might cause random fallout so it's probably best if you do it)

Romeo-Golf · 2017-02-10T21:43:57Z

Out of interest which of the many different things called skyview is this being named after? ;)

Is it this ADS-B receiver:

http:https://www.dynonavionics.com/skyview-system.php

Or the NASA site:

http:https://skyview.gsfc.nasa.gov/current/cgi/titlepage.pl

Or the iPhone app:

https://www.terminaleleven.com/skyview/iphone/

Or weather station:

http:https://www.skyview.co.uk

mutability · 2017-02-11T05:16:33Z

None of the above.

… chart is based on default colors

mutability · 2017-03-16T15:43:15Z

Some issues I'm seeing:

We seem to have lost the "center / follow plane" functionality (or at least I can't find it) which was previously enabled by selecting the => symbol or doubleclicking on a table row
Discontinuity in tracks after a gap in data:

There is no strong visual indication on the aircraft icon that it is selected - it changes color slightly but that is not very noticeable; what happened to the change in stroke width?
the range ring spacing in metric mode is probably too low (try 100km intervals?)
the header section in table mode scrolls with the table rather than always being visible

mutability · 2017-03-16T18:03:35Z

Datablock on hover is slow to appear (maybe 750ms hover time?)

The hover datablock righthand margin needs some padding:

drakeapps · 2017-03-20T04:41:30Z

I looked over the follow plane functionality. Double clicking on the table works again
I get the discontinuity on the current version also
Yeah, highlighting the selected aircraft probably should be better.
I didn't touch the size of the rings, just added the label. But can increase it
Not 100% sure what you mean. Should the table header hover/scroll with it? It doesn't look like it was before.
Added padding to the hover box

mutability · 2017-03-20T14:15:20Z

OK I think if we can get the selected-aircraft-highlight restored in some form then this should be good to merge, the other stuff is enhancements or existing bugs that we can look at later.

drakeapps · 2017-03-21T15:13:13Z

Added a 1px black stroke to selected aircraft

mutability · 2017-03-22T11:30:55Z

Need to add the outline only when a single aircraft is selected, not when select-all is used (see the original code)

drakeapps · 2017-03-22T14:28:27Z

Done

Update design and use SkyView branding

James Wilson added 30 commits January 17, 2017 17:19

Update header styling

b0dc4f8

Add a smaller info pane that appears while hovering over planes

6c86d4f

Update map control icons

cc75121

Add retina images. Hide hover box on initial page load

cf6fcdc

Redesign infoblock

e5fcd40

Add date/time to header

c2c43b9

Update more styling of the page. Add legend to table highlighting

924bcaa

Fix some indentation issues

Add settings pop up box

8228050

Add labels to range rings

e2fcc58

Remove stroke from range ring labels

ac9249b

Use FlightAware aircraft icons

71b9b65

Remove accidentally committed data folder

8b9f984

Merge https://github.com/flightaware/dump1090

bbfdd45

Check for adsb_icao, not just adsb

e4a94aa

Round range rings labels. Add commas to altitudes. Change Track to He…

4cbb1ab

…ading and add degree symbol. Remove the work Link from links

Chagne Track to Heading in infoblock also

a7be17a

Show altitude colors in plane track lines

d6898db

Show altitude color key on map Correctly handle retina images with CSS

Add ground vehicle icons

d332f47

Forgot a comma

6d43008

Change the track for each altitude change to correctly color it based…

6b699bf

… on altitude

Add functionality to ground vehicle and blocked MLAT filter

bee8500

Add box shadow to header

Fix page height overflowing

9d3f3bd

Switch to FlightFeeder logo for FlightFeeders

ee23816

Don't show layerSwitcher on the map. We still want the functionality …

fbf8af2

…of it, but don't need the switcher panel currently

Make 'Show Map' button styling match header

c34b1c3

Change altitude based on units. Increase width of altitude legend and…

908d794

… use an SVG

Remove retina altitude key styles

973182c

Change style of settings box and add close icon

773668f

Chagne other and tisb row colors

06ab050

Align checkboxes with top line

0e1e5df

James Wilson added 7 commits January 31, 2017 18:21

Increase size of the sidebar

cc92afd

Remove highlighting from map buttons

bc2415b

Add back in layer switcher. Update Select All/None button text

5d78178

Only show layerSwitcher controls if there is more than 1 base layer p…

484765a

…resent

Update altitude legend with correct colors

b929821

Update altitude chart dimensions

2e6b4eb

Update the location it tries to put the infoblock if it's over the icon

d40e69e

mutability requested changes Feb 10, 2017

View reviewed changes

Clean up SVG rendering. Use the new flightfeeder key in status.json

fddb229

drakeapps changed the base branch from master to dev February 10, 2017 18:21

James Wilson and others added 2 commits February 10, 2017 14:41

Add toggle to show/hide altitude chart

e0e09ed

Merge branch 'dev' into master

3a819a5

James Wilson added 2 commits February 22, 2017 12:17

Hide the altitude chart and checkbox if using custom colors since the…

f23bdb2

… chart is based on default colors

Merge branch 'master' of github.com:drakeapps/dump1090

9621cad

drakeapps added 2 commits March 19, 2017 23:05

Add back in follow plane functionality

cfcb329

Add padding to right side of highlight box

87689cf

Add stroke around selected aircrafts

f6dfe26

Prevent stroke when selecting all planes

84383e2

mutability merged commit d790600 into flightaware:dev Mar 22, 2017

kpetrilli pushed a commit to kpetrilli/dump1090 that referenced this pull request Sep 15, 2020

Merge pull request flightaware#7 from drakeapps/master

9d6f5de

Update design and use SkyView branding

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update design and use SkyView branding #7

Update design and use SkyView branding #7

drakeapps commented Feb 9, 2017

mutability Feb 10, 2017

mutability Feb 10, 2017

mutability Feb 10, 2017

drakeapps Feb 10, 2017

mutability Feb 10, 2017

mutability Feb 10, 2017

drakeapps Feb 10, 2017

mutability Feb 11, 2017

mutability Feb 20, 2017

drakeapps Feb 22, 2017

mutability Feb 10, 2017

drakeapps Feb 10, 2017

mutability commented Feb 10, 2017

Romeo-Golf commented Feb 10, 2017

mutability commented Feb 11, 2017

mutability commented Mar 16, 2017

mutability commented Mar 16, 2017

drakeapps commented Mar 20, 2017

mutability commented Mar 20, 2017

drakeapps commented Mar 21, 2017

mutability commented Mar 22, 2017

drakeapps commented Mar 22, 2017

Update design and use SkyView branding #7

Update design and use SkyView branding #7

Conversation

drakeapps commented Feb 9, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mutability commented Feb 10, 2017

Romeo-Golf commented Feb 10, 2017

mutability commented Feb 11, 2017

mutability commented Mar 16, 2017

mutability commented Mar 16, 2017

drakeapps commented Mar 20, 2017

mutability commented Mar 20, 2017

drakeapps commented Mar 21, 2017

mutability commented Mar 22, 2017

drakeapps commented Mar 22, 2017