trail-mate/docs/skyplot.md

You are a senior embedded GUI engineer. Please use LVGL 8.x (C/C++) to implement a "GNSS Sky Plot (Satellite Sky Map)" page. Screen resolution: landscape 480(w) × 222(h). Requirements: Draw strictly according to the pixel layout given below; do not change the layout on your own; do not change element copy; the color system must revolve around the main color 0xEBA341 and be consistent with the warm color engineering style; all controls must be reusable and data refreshable.

============================================================

1. Overall page layout (pixel level) ============================================================

• Page root container root: size 480×222, background color is light warm beige (see style token).

• Divided into three parts: A. Top TopBar: height 30px, full width 480 B. Content area Content: height 222-30=192px, y=30

• left SkyPlotPanel: x=8, y=38, w=277, h=176

• right StatusPanel: x=293, y=38, w=179, h=176 Note: Leave 8px spacing at the top of the Content area, so y=30+8=38 for the two panels; leave 8px spacing between the left and right panels.

• Global rounded corners: 8px

• Global stroke: 2px (main color emphasizes the edge)

============================================================ 2) Style and color token (must be used, unified style)

Main color (Amber): #EBA341 (0xEBA341) Main color dark (AmberDark): #C98118 Background (WarmBG): #F6E6C6 Panel bottom (PanelBG): #FAF0D8 Line: #E7C98F Text: #6B4A1E TextDim: #8A6A3A Warn: #B94A2C Success (Ok): #3E7D3E Information blue (Info): #2D6FB6

Constellation color (for SYS/legend): GPS: #E3B11F GLN: #2D6FB6 GAL: #3E7D3E BD: #B94A2C

SNR status color (for outer ring/padding of points): SNR_GOOD:#3E7D3E SNR_FAIR:#8FBF4D SNR_WEAK:#C18B2C NOT_USED:#B94A2C IN_VIEW: #6E6E6E (gray)

Font:

• Title/column header: 20px (or LVGL Built-in approximate font size)
• Header: 14px
• List content: 16px
• Bottom summary: 14px

============================================================ 3) TopBar (height 30)

TopBar container: x=0,y=0,w=480,h=30, background WarmBG, bottom divider 2px Line. Left title:

• label_title: changed to Summary text: "USE: 7/18|HDOP: 1.6|FIX: 3D"
• The three sections of USE/HDOP/FIX use different colors, and the whole is coordinated with the theme

Battery display on the right (only placeholder, does not implement the battery algorithm):

• battery_icon: x=410, y=6, w=26, h=14, stroke 2px TextDim, filled with transparent, small bump on the right 3×6.
• label_batt: x=442, y=5, text "100%", color TextDim, font size 18.

============================================================ 4) Left SkyPlotPanel (x=8,y=38,w=292,h=176)

Panel container:

• panel_sky: Rounded Corners 10, Background PanelBG, Stroke 2px AmberDark.

Draw a "sky circle chart" internally:

• Circle chart circumscribed square area sky_area: x=10, y=2, w=170, h=170 (relative to panel_sky) => Circle center C = (10+85, 2+85) = (95,87) relative to panel_sky Internal coordinates => Radius R = 82 (leaving space for stroke and text)

Drawing content (you can use lv_canvas or self-drawn objects, but they must be rendered): a) Outer circle (horizon 0°): Ring stroke Line 2px b) 3 concentric circles (30°/60°/90°):

• r=R*2/3 (about 55)
• r=R*1/3 (about 27)
• r=0 (center point) Use Line 1px dotted line effect for the circular line (if you cannot do a dotted line, you can also use a thin solid line) c) Cross bearing lines: N-S and E-W pass through the center of the circle, line color Line 1px d) Direction text:
• "N" placed above the circle: the center is aligned with the center x, y=2-2 (close to the outside of the circle)
• "E" Place on the right side: x=10+170+8,y=95-10
• "W" Place on the left side: x=2,y=95-10 (in the blank space on the left side of the circle) Text color, font size 18 e) Elevation angle scale text:
• Change the scale to "pointing to the 10:30 direction": mark "90°" (near the outer circle), "60°" (r=55), and "30°" (r=27) on the diagonal line from the center of the circle to the 10:30 direction.
• The text is arranged along the diagonal line, and the overall visual connection points to the 10 and a half direction Text color TextDim, font size 16 f) Marking near the center of the circle:
• label_horizon: placed slightly below the center of the circle: text "0° Horizon", color TextDim, font size 12

Satellite point drawing (dynamic): -Use a small dot object sat_dot for each satellite (recommended lv_obj + fillet = radius) -Point radius: 10px (diameter 20) -Display satellites within the point ID (two or three digits), text white or dark brown (contrast is automatically selected according to the background color, white is preferred) -The position of the point is mapped to the circle by (azimuth, elevation): r = R * (1 - elevation/90) x = Cx + r * sin(azimuth) y = Cy - r * cos(azimuth) (azimuth: 0°=N, 90°=E) -Point fill color: by constellation (GPS/GLN/GAL/BD)

• Click outer ring/small mark: press SNR status (GOOD/FAIR/WEAK/NOT_USED/IN_VIEW):
• GOOD/FAIR/WEAK: use the corresponding color to make a 2px outer ring
• NOT_USED: outer ring Warn
• IN_VIEW: outer ring Gray
• If the satellite used_in_fix=true, add a small label "USE" next to the point:
• use_tag: Rounded corners 6, background Ok, text white, font size 12
• Position: Offset the lower left corner of the pasting point (dx=-12, dy=12) to avoid blocking the numbers

Legend (in the lower right corner area of ​​SkyPlotPanel):

• legend_sys (constellation legend) is placed on the right side of the circle chart, below:
• Small color block 10×10 + Text (GPS/GLONASS/Galileo/BeiDou)
• Position: starting from x=190, y=105, line height 15
• legend_snr (SNR legend) is placed above legend_sys and aligned to its left (upper right corner area of SkyPlotPanel):
• Text order: "SNR Good" "SNR Weak" "Not Used" "In View"
• Use small dots (diameter 10) + text
• Position: starting from x=190, arranged vertically (line height 15), the whole is above legend_sys; the distance from legend_sys is 6px; the whole is moved up 30px; small dots and text arrangement rules are the same as legend_sys (color block y+4, text x+14)
• text color TextDim, font size 12

============================================================ 5) Right StatusPanel (x=293, y=38, w=179, h=176)

Panel container:

• panel_status: rounded corners 10, background PanelBG, stroke 2px AmberDark

Title bar (height 26):

• header: x=0,y=0,w=179,h=26, background Amber, upper half of rounded corners maintained
• label: centered "SATELLITE STATUS", text color #2A1A05, font size 14 bold

Header row (height 22, y=26):

• Background: #F2D9A5
• Columns: ID / SYS / ELEV / SNR / USE
• Column width (pixels): ID=24, SYS=38, ELEV=39, SNR=38, USED=39 (ELEV=USED, SNR=SYS)
• Text centered, color TextDim, font size 12

Data list area (y=48 to y=176, height 128): -Rendered in "fixed row height" mode, row height 17px, 7 rows can be displayed (remaining scrolling/pagination is not implemented, but the structure must be reserved) -5 columns in each row to align the header

• Line bottom divider 1px Line
• SYS text color according to constellation color (GPS/GLN/GAL/BD)
• USED column: if used=true, display "YES" color Ok; otherwise "NO" color Warn
• Other column text colors Text
• When the number of satellites exceeds the number of rows that can be displayed, the list is displayed in the following priority order: USED=YES first, high SNR first, then high elevation, then PRN/SVID in ascending order

The summary area at the bottom is removed, and all space is given to the data list area

============================================================ 6) Data structure and refresh interface (must be provided)

Define data structure (example):

• struct SatInfo { int id; // PRN/SVID enum Sys {GPS, GLN, GAL, BD} sys; float azimuth; // 0..359 deg float elevation; // 0..90 deg int snr; // dB-Hz bool used; enum SNRState {GOOD, FAIR, WEAK, NOT_USED, IN_VIEW} snr_state; };

• struct GnssStatus { int sats_in_use; int sats_in_view; float hdop; enum Fix {NOFIX, FIX2D, FIX3D} fix; };

Must implement two refresh functions (for upper layer calls):

• void ui_gnss_skyplot_set_sats(const SatInfo* sats, int count); -> Update circular chart satellite points (create/reuse objects), update the first N rows of the right table
• void ui_gnss_skyplot_set_status(GnssStatus st); -> Update bottom summary text and FIX Color

============================================================ 7) Interaction (minimal)

• The Back button position is allowed to be reserved in the upper left corner (but this requirement does not have to be implemented).
• The page does not require touch interaction; only the display needs to be refreshed.
• Backspace key behavior: trigger the Back button logic of TopBar, consistent with other pages.

============================================================ 8) Deliverable requirements

• Provide a function ui_gnss_skyplot_create(lv_obj_t* parent) to return the page root object.
• All object pointers are stored in static/structural bodies, supporting repeated page entry without leakage.
• Do not use external image resources; draw everything with LVGL.
• Output code should be directly compilable (pseudocode is not accepted).

Generate complete LVGL page code according to the above requirements.