buildAppBalloonOverlay function

dynamic buildAppBalloonOverlay(
  1. BuildContext context
)

Builds and sends an app balloon overlay to Liquid Galaxy setup.

Implementation

buildAppBalloonOverlay(BuildContext context) 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 appLogoGemma =
  //     'https://github.com/Mahy02/LG-KISS-AI-App/blob/main/assets/images/appLogo-Gemma.png?raw=true';
  String appLogoGemini =
      'https://github.com/Mahy02/LG-KISS-AI-App/blob/main/assets/images/appLogo-Gemini.png?raw=true';
  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%;
            max-height: 100%;
            display: block;
            margin: auto;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div class="balloon">
        <div class="container-logo">
            <div class="logo">
                <img src="$appLogoGemini" alt="Logo Image"/>
            </div>
        </div>

        <div style="text-align:center;">
            <h1>Welcome to LG Gemini AI Touristic Info Tool!</h1>
        </div>

        <br>

        <div style="text-align:justify;">
            <pp>Prepare to be inspired by discovering the most captivating POIs tailored to your preference.</pp>
        </div>

        <div class="details">
            <p><b>Contributor:</b> Mahinour Elsarky</p>
            <p><b>Organization:</b> Liquid Galaxy Project</p>
            <p><b>Main-Mentors:</b> Claudia Diosan , Andreu Ibanez</p>
            <p><b>Co-Mentors:</b> Emilie Ma , Irene</p>
            <p><b>Listener Contributors:</b> Vertika Bajpai</p>
        </div>
    </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 = 'App-Balloon';
  String content = '<name>AppBalloon</name>';

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

  LookAtModel lookAt = LookAtModel(
    longitude: 0.0000101,
    latitude: 0.0000101,
    range: '31231212.86',
    tilt: '0',
    altitude: 50000.1097385,
    heading: '0',
    altitudeMode: 'relativeToSeaFloor',
  );

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