Customizing sBitx Interface Colors

You can modify the colors of the textual elements in both the local and web interfaces of sBitx to your preference. Below are the steps to help you get started.

Choosing Colors

Use this color picker tool to help select your colors: RGB Color Picker

---

Changing Web Interface Colors

Steps:

1. Open the style.css file:

   nano /home/pi/sbitx/web/style.css
   

2. Search for the word color and modify the values as needed.
3. Save the changes and close the file.
4. Restart sBitx by reopening the web interface.

Notes:

• Some colors in the web interface use float RGB format, where:
  • 0 means no color (black), and 1 means full intensity.
  • The format is {RED, GREEN, BLUE}.
  • Examples:
    • Gray → {0.5, 0.5, 0.5}
    • Yellow → {1, 1, 0}
    • White → {1, 1, 1}

---

Changing Local Interface Colors

Steps:

1. Open the sbitx_gtk.c file:

   nano /home/pi/sbitx/src/sbitx_gtk.c
   

2. Locate the float palette array and/or struct font_style font_table.
3. Modify the colors using the float RGB format.
4. Save the file and close it.
5. Once you've modified your colors and fonts, rebuild sBitx to apply the changes:

   cd /home/pi/sbitx && ./build sbitx
   

   This will compile and apply your new color settings.

Example Default Colors:

float palette[][3] = {
    {1,1,1}, // COLOR_SELECTED_TEXT (WHITE)
    {0,1,1}, // COLOR_TEXT (CYAN)
    {0.5,0.5,0.5}, // COLOR_TEXT_MUTED (GRAY)
    {1,1,0}, // COLOR_SELECTED_BOX (YELLOW)
    {0,0,0}, // COLOR_BACKGROUND (BLACK)
    {1,1,0}, // COLOR_FREQ (YELLOW)
    {1,0,1}, // COLOR_LABEL (MAGENTA)
    {0,0,0}, // SPECTRUM_BACKGROUND (BLACK)
    {0.1, 0.1, 0.1}, // SPECTRUM_GRID (DARK GRAY)
    {1,1,0}, // SPECTRUM_PLOT (YELLOW)
    {0.2,0.2,0.2}, // SPECTRUM_NEEDLE (DARKER GRAY)
    {0.5,0.5,0.5}, // COLOR_CONTROL_BOX (GRAY)
    {0.2, 0.2, 0.2}, // SPECTRUM_BANDWIDTH (DARKER GRAY)
    {0,1,0}, // COLOR_RX_PITCH (GREEN)
    {0.1, 0.1, 0.2}, // SELECTED_LINE (DARK BLUE)
    {0.1, 0.1, 0.2}, // COLOR_FIELD_SELECTED (DARK BLUE)
    {1,0,0}, // COLOR_TX_PITCH (RED)
};

Example Font Styles:

struct font_style font_table[] = {
    {FONT_FIELD_LABEL, 0, 1, 1, "Mono", 14, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FONT_FIELD_VALUE, 1, 1, 1, "Mono", 14, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FONT_LARGE_FIELD, 0, 1, 1, "Mono", 14, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FONT_LARGE_VALUE, 1, 1, 1, "Arial", 24, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FONT_SMALL, 0, 1, 1, "Mono", 10, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FONT_LOG, 1, 1, 1, "Mono", 11, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FONT_FT8_RX, 0, 1, 0, "Mono", 11, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FONT_FT8_TX, 1, 0.6, 0, "Mono", 11, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FONT_FT8_QUEUED, 0.5, 0.5, 0.5, "Mono", 11, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FONT_FT8_REPLY, 1, 0.6, 0, "Mono", 11, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FF_MYCALL, 0.2, 1, 0, "Mono", 11, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FF_CALLER, 1, 0.2, 0, "Mono", 11, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
    {FF_GRID, 1, 0.8, 0, "Mono", 11, CAIRO_FONT_WEIGHT_NORMAL, CAIRO_FONT_SLANT_NORMAL},
};

Notes:

• The font colors follow the {RED, GREEN, BLUE} format.
• Font styles define the font type, size, and weight for different UI elements.

---

By following these steps, you can fully customize the visual appearance of your sBitx interface!