buildCustomTour function

Future<double> buildCustomTour(
  1. BuildContext context,
  2. List<PlacesModel> pois
)

Implementation

Future<double> buildCustomTour(
    BuildContext context, List<PlacesModel> pois) 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);

  List<LookAtModel> lookAts = [];
  List<String> poisNames = [];
  String placesData = '';

  for (int i = 0; i < pois.length; i++) {
    String placeName = escapeHtml(pois[i].name);
    poisNames.add(placeName);
    LookAtModel lookAt = LookAtModel(
      longitude: pois[i].longitude,
      latitude: pois[i].latitude,
      range: '500',
      tilt: '45',
      altitude: 0,
      heading: '300',
      altitudeMode: 'relativeToGround',
    );
    lookAts.add(lookAt);

    String countryFlagImg;
    String countryCode = countryMap[pois[i].country] ?? 'None';
    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></br>';
    }

    placesData += '''
             <div class="details" style="text-align: center; font-weight: bold;">
                $flagDiv
                <p>${i + 1}</p>
                <p>${escapeHtml(pois[i].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;
            }
           .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>Your Custom Tour Pathway</h1>
              </div>

              <br>

              $placesData

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

  ScreenOverlayModel screenOverlay = ScreenOverlayModel(
    overlayID: 'custom-overlay',
    name: "",
    overlayX: 0,
    overlayY: 1,
    screenX: 2,
    screenY: 2,
    sizeX: 0.5,
    sizeY: 0.5,
    content: balloonContent,
  );

  String kmlName = 'custom-tour-Balloon';
  String ballooncontent = '<name>customTourBalloon</name>';

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

  TourModel tour = TourModel(
    name: 'app-tour',
    numberOfPlaces: pois.length,
    lookAtCoordinates: lookAts,
    poisNames: poisNames,
  );
  List<dynamic> tourTag = tour.lineTourTag();
  String tourTagContent = tourTag[0];
  double tourTagDuration = tourTag[1];

  final sshData = Provider.of<SSHprovider>(context, listen: false);
  final kmlPlacemark = KMLModel(name: 'app-tour', content: tourTagContent);

  try {
    await LgService(sshData).sendKmlFileToMaster(kmlPlacemark.body, 'app-tour');
    await LgService(sshData).sendKMLToSlave(
      LgService(sshData).balloonScreen,
      kmlBalloon.body,
    );
  } catch (e) {
    print(e);
  }
  return tourTagDuration;
}