buildYoutubeLinkBallon function

dynamic buildYoutubeLinkBallon(
  1. String placeName,
  2. String? city,
  3. String? country,
  4. double lat,
  5. double long,
  6. String vidId,
  7. BuildContext context, {
  8. dynamic visibility = true,
})

Implementation

buildYoutubeLinkBallon(String placeName, String? city, String? country,
    double lat, double long, String vidId, 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 linkp{
             font-size:  ${textSize}px;
              color: blue;
              text-decoration: underline;
            }

            .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;">
                <h2> ${escapeHtml(placeName)}</h2>
              </div>

              <div style="text-align:center;">
                <h3>${escapeHtml(city)}</h3>
                <h3>${escapeHtml(country)}</h3>
              </div>

              $flagDiv


                <iframe width="560" height="315" src="https://www.youtube.com/embed/$vidId?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

        </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 = 'Youtube-Balloon';
  String content = '<name>YoutubeBalloon</name>';

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

  LookAtModel lookAt = LookAtModel(
    longitude: long,
    latitude: lat,
    range: '500',
    tilt: '60',
    altitude: 0,
    heading: '0',
    altitudeMode: 'relativeToGround',
  );

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