buildQueryPlacemark function

dynamic buildQueryPlacemark(
  1. String query,
  2. String? city,
  3. String? country,
  4. BuildContext context, {
  5. dynamic visibility = true,
})

Implementation

buildQueryPlacemark(
    String query, String? city, String? country, BuildContext context,
    {visibility = true}) async {
  FontsProvider fonts = Provider.of<FontsProvider>(context, listen: false);
  ColorProvider colors = Provider.of<ColorProvider>(context, listen: false);
  double textSize = fonts.fonts.textSize;
  double titleSize = fonts.fonts.titleSize;
  double headSize = fonts.fonts.headingSize;

  String primaryColor;

  if (SettingsSharedPref.getTheme() == 'light') {
    primaryColor = 'black';
  } else {
    primaryColor = 'white';
  }

  // String buttonColor =
  //     colors.colors.buttonColors.toHexString(enableAlpha: false).substring(2);
  String grad1 =
      colors.colors.gradient1.toHexString(enableAlpha: false).substring(2);
  String grad2 =
      colors.colors.gradient2.toHexString(enableAlpha: false).substring(2);
  String grad3 =
      colors.colors.gradient3.toHexString(enableAlpha: false).substring(2);
  String grad4 =
      colors.colors.gradient4.toHexString(enableAlpha: false).substring(2);

  final sshData = Provider.of<SSHprovider>(context, listen: false);
  String countryCode = countryMap[country] ?? 'None';
  String countryFlagImg;

  String flagDiv;
  if (countryCode != 'None') {
    String cc = countryCode.toLowerCase();
    try {
      countryFlagImg = "https://www.worldometers.info/img/flags/$cc-flag.gif";
      flagDiv = '''
              <div style="text-align:center;">
                <img src="$countryFlagImg" style="display: block; margin: auto; width: 50px; height: 45px;"/><br/><br/>
              </div>
''';
    } catch (e) {
      countryFlagImg = '';
      flagDiv = '<br>';
    }
  } else {
    countryFlagImg = '';
    flagDiv = '<br>';
  }
  city ??= '';
  country ??= 'World Wide';
  String balloonContent = '''
        <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LG Gemini AI Touristic Info Tool</title>
    <style>
             .balloon {
               background: linear-gradient(135deg, #$grad1 5%, #$grad2 15%, #$grad3 60%, #$grad4 100%);
              padding: 10px;
              border-radius: 20px;
              font-family: Lato, sans-serif;
            }
            .balloon h1 {
              font-size: ${titleSize}px;
              color: $primaryColor;
            }
             .balloon h2 {
              font-size: ${headSize}px;
              color: $primaryColor;
            }
            .balloon h3 {
              font-size: ${headSize - 10}px;
              color: $primaryColor;
            }

            .balloon pp{
              font-size: ${textSize}px;
             color: $primaryColor;
            }
            .balloon p {
              font-size:  ${textSize}px;
              color: #ffff;
            }

            .details {
              background-color: rgba(255, 255, 255, 1);
              color: #000;
              padding: 10px;
              border-radius: 10px;
              margin-top: 10px;
              text-align: left;
              font-size: ${textSize}px;
            }
            .balloon b {
              color: #ffff;
            }

           .container-logo {
            width: 100px;
            height: 50px;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            margin: auto;
          }
          .logo img {
            max-width: 100%; /* Ensure image fits within container */
            max-height: 100%; /* Ensure image fits within container */
            display: block;
            margin: auto;
            border-radius: 10px; /* Optional rounded corners for the image */
          }
          </style>
</head>
<body>
          <div class="balloon">

            <div style="text-align:center;">
              <h1>$query</h1>
            </div>

            <br>

            <div style="text-align:center;">
              <h2>$city</h2>
              <h2>$country</h2>
            </div>

            $flagDiv
        </div>
</body>
</html>
''';

  ScreenOverlayModel screenOverlay = ScreenOverlayModel(
    name: "",
    overlayX: 0,
    overlayY: 1,
    screenX: 1,
    screenY: 1,
    sizeX: 0.5,
    sizeY: 0.5,
    content: balloonContent,
  );
  String kmlName = 'query-Balloon';
  String content = '<name>QueryBalloon</name>';

  final kmlBalloon = KMLModel(
    name: kmlName,
    content: content,
    screenOverlay: screenOverlay.balloonTag,
  );

  try {
    await LgService(sshData).sendKMLToSlave(
      LgService(sshData).balloonScreen,
      kmlBalloon.body,
    );
  } catch (e) {
    print(e);
  }
}