buildShowPois function

dynamic buildShowPois(
  1. List<PlacesModel> pois,
  2. BuildContext context,
  3. double lat,
  4. double long,
  5. String? city,
  6. String? country,
  7. String query,
)

Implementation

buildShowPois(List<PlacesModel> pois, BuildContext context, double lat,
    double long, String? city, String? country, String query) 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 content = '';
  String icon =
      "https://github.com/Mahy02/LG-KISS-AI-App/blob/main/assets/images/placemark_pin.png?raw=true";
  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';

  int poisLength = pois.length;

  String placesBalloonContent = '';

  for (int i = 0; i < poisLength; i++) {
    int index = i + 1;
    String name = escapeHtml(pois[i].name);
    placesBalloonContent += '''
             <div class="details">
                <p>$index. $name</p>
              </div>
''';
  }

  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 style="text-align:center;">
                <pp>Top $poisLength POIs</pp>
              </div>

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

  LookAtModel lookAt = LookAtModel(
    longitude: long,
    latitude: lat,
    range: '10000',
    tilt: '45',
    altitude: 0,
    heading: '0',
    altitudeMode: 'relativeToGround',
  );
  String styleId = 'placemark-style';
  double scale = 1;

  String styleTag = '''
<Style id="$styleId">
    <IconStyle id="mystyle">
      <Icon>
        <href>$icon</href>
        <scale>$scale</scale>
      </Icon>
    </IconStyle>
  </Style>
''';

  content += styleTag;

  for (PlacesModel poi in pois) {
    PointModel point =
        PointModel(lat: poi.latitude, lng: poi.longitude, altitude: 0);
    PlacemarkModel placemark = PlacemarkModel(
      id: poi.name,
      name: poi.name,
      styleId: styleId,
      description: poi.description ?? '',
      icon: icon,
      scale: scale,
      lookAt: lookAt,
      point: point,
    );

    content += placemark.placemarkOnlyTag;
  }
  final kmlPlacemark = KMLModel(
    name: 'POIs-pins',
    content: content,
  );

  ScreenOverlayModel screenOverlay = ScreenOverlayModel(
    name: "",
    overlayX: 0,
    overlayY: 1,
    screenX: 1,
    screenY: 1,
    sizeX: 0.5,
    sizeY: 0.5,
    content: balloonContent,
  );

  String kmlName = 'POIs-Balloon';
  String content2 = '<name>POIsBalloon</name>';

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

  try {
    await LgService(sshData).flyTo(lookAt);
    await LgService(sshData).sendKMLToSlave(
      LgService(sshData).balloonScreen,
      kmlBalloon.body,
    );
    await LgService(sshData).sendKmlFileToMaster(kmlPlacemark.body, 'POIs');
  } catch (e) {
    print(e);
  }
}