diff --git a/app/src/main/java/com/wytehat/btlogger/MapHtmlBuilder.java b/app/src/main/java/com/wytehat/btlogger/MapHtmlBuilder.java index 4759f43..8a5804d 100644 --- a/app/src/main/java/com/wytehat/btlogger/MapHtmlBuilder.java +++ b/app/src/main/java/com/wytehat/btlogger/MapHtmlBuilder.java @@ -34,6 +34,43 @@ public final class MapHtmlBuilder { public int aggressiveness = HistoryNormalizer.DEFAULT_AGGRESSIVENESS; } + /* + * Font Awesome Free 6.5.2 "link" and "link-slash" (solid), inlined as + * SVG paths rather than pulled from a CDN - the whole icon font would be + * a ~75KB download over the network for two glyphs, and the popups have + * to render when the map is loaded from cache. + * + * Icons: CC BY 4.0 (https://fontawesome.com/license/free), + * Copyright 2024 Fonticons, Inc. + */ + private static final String ICON_LINK_PATH = + "M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4" + + "l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1" + + "c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8" + + "c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6" + + "c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6" + + "C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7z" + + "M60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4" + + "l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1" + + "c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2" + + "c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6" + + "c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6" + + "C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"; + + private static final String ICON_LINK_SLASH_PATH = + "M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464" + + "c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L489.3 358.2l90.5-90.5" + + "c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1" + + "c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1" + + "c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114l-96 96-31.9-25" + + "C430.9 239.6 420.1 175.1 377 132c-52.2-52.3-134.5-56.2-191.3-11.7" + + "L38.8 5.1zM239 162c30.1-14.9 67.7-9.9 92.8 15.3c20 20 27.5 48.3 21.7 74.5" + + "L239 162zM116.6 187.9L60.2 244.3c-56.5 56.5-56.5 148 0 204.5" + + "c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6" + + "s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6" + + "C74 372 74 321 105.5 289.5l61.8-61.8-50.6-39.9zM220.9 270" + + "c-2.1 39.8 12.2 80.1 42.2 110c38.9 38.9 94.4 51 143.6 36.3L220.9 270z"; + /** Diameter of a device's own marker; history points draw at half. */ private static final int DEVICE_MARKER_SIZE = 22; @@ -43,6 +80,15 @@ public final class MapHtmlBuilder { private MapHtmlBuilder() { } + /** One of the inlined Font Awesome glyphs, tinted and sized for a popup line. */ + private static String icon(String path, String color) { + + return "" + + ""; + } + /** The round white-bordered marker, shared by devices and history points. */ private static String divIcon( String color, @@ -522,11 +568,15 @@ public final class MapHtmlBuilder { */ if (LocationPoint.EVENT_CONNECTED.equals(point.event)) { - html.append("
🔗 Connected to the phone here"); + html.append("
") + .append(icon(ICON_LINK_PATH, "#00A86B")) + .append("Connected to the phone here"); } else if (LocationPoint.EVENT_DISCONNECTED.equals(point.event)) { - html.append("
💔 Link to the phone dropped here"); + html.append("
") + .append(icon(ICON_LINK_SLASH_PATH, "#E53935")) + .append("Link to the phone dropped here"); } long time = HistoryNormalizer.pointTime(point);