Forum consepet
You are not logged in. Please Login.

Forum consepet > Using AI software > Splash screen With perplexity
Announcements
If you don't want to register but you would like to comment login using the temp account. ID sp_cc Password 12345678. If you want me to know who you are leave your first name or handle at the end of your post. http://tiny.cc/energ.


Posted: Aug 21, 2025 5:27:15 am
cgetty



Posts: 137
Registered:
2013-12-25


This is a splash screen Using perplexity the idea is that I can run the splash screen with another program this splash screen wall display a screen in a pop window up three seconds close After the splash screen closes in about three seconds it runs the main program. So this is a done deal i'm happy it works very well mission accomplished.

I took the splash screen sub directory and copied it on my remote website here.
vb3builder.atwebpages.com/vb.clone/
https://vb4.xp3.biz/vb.clone/

because some things just cannot currently these files are in the subdirectory called splash
Located here localhost/vb3/VisualJS/projects/builder_my_try1/ 

The way this is supposed to work is that in the splash subdirectory there's a splash.html file and a splash .js file. In addition to that there's a directory called graphics. In this directory is all the images that I'm supposed to cycle through and then there's a Json file that maps them out I guess for some reason having to do with remote access and security we're not allowed to scan the directory so it looks at this file and then it knows what graphics to load. So the idea is that every time you run the main program it runs a splash screen shows the image and then goes to program after three seconds that you were using to run the splash screen and every time you run the splash screen it's pulses cycle through a different image.

So this is basically how it works right now the HTML file file that runs your main program you need to edit it to call up the screen saver here's vb3builder.atwebpages.com/vb.clone/

So I'm gonna load up the HTML code that you need to use to call up the Splash screen program.
Then inside the splash directory there is two files one is called splash .js And the other one is called splash dot html. Three files altogether I'm gonna paste below .
-------------------------------------------------------------------------------------------------
Index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>UI Builder</title>
</head>
<body>
  <!-- Loading indicator -->
  <div id="loading"><img src="http://vb3.xp3.biz/runtime/loading.gif" alt="Loading..." /></div>

  <!-- LINB framework -->
  <script type="text/javascript" src="http://vb3.xp3.biz/jsLinb/js/linb-all.js"></script>
  <script type="text/javascript" src="http://vb3.xp3.biz/runtime/jsLinb/js/adv-all.js"></script>
  <script type="text/javascript" src="http://vb3.xp3.biz/runtime/jsLinb/js/linb-all.js"></script>
  <script type="text/javascript" src="http://vb3.xp3.biz/runtime/jsLinb/js/adv-all.js"></script>

  <!-- Splash Screen Popup Launcher -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const splashWindow = window.open(
        './splash/splash.html',
        'SplashScreen',
        'width=1300,height=800,' +
          'left=' + (screen.width - 1300) / 2 + ',' +
          'top=' + (screen.height - 800) / 3 + ',' +
          'resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,status=no'
      );
      window.focus();

      // Listen for message from splash window signaling it is done
      window.addEventListener('message', function(event) {
        if (event.data === 'splashDone' && splashWindow && !splashWindow.closed) {
          splashWindow.close();
          console.log('Splash screen closed by parent, initializing app...');
          linb.UI.setTheme('default');
          linb.Com.load('App', function () {
            linb('loading').remove();
          }, 'en');
        }
      });

      // Disable previous polling method (optional if you prefer to keep it)
      /*
      const splashChecker = setInterval(() => {
        if (!splashWindow || splashWindow.closed) {
          clearInterval(splashChecker);
          console.log('Splash screen closed, initializing app...');
          linb.UI.setTheme('default');
          linb.Com.load('App', function () {
            linb('loading').remove();
          }, 'en');
        }
      }, 500);
      */
    });
  </script>
</body>
</html>
-------------------------------------------------------------------------------------------------
The next two programs reside in the splash directory  this one is splash.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Splash Screen</title>
  <style>
    /* Splash screen styles */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background-color: #000;
      color: #fff;
      font-family: Arial, sans-serif;
    }
    .splash-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100vw;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .splash-content img {
      display: block;
      max-width: 100%;
      max-height: 80vh;
      margin: 0 auto;
    }
    .splash-content h1 {
      font-size: 2.5rem;
      margin: 20px 0;
    }
    .splash-content p {
      font-size: 1.2rem;
    }
  </style>
</head>
<body>
  <div class="splash-content">
    <img src="" alt="Splash Screen Image" />
    <h1>Welcome to the UI Builder</h1>
    <p>Loading your application, please wait...</p>
  </div>

  <script type="module">
    import SplashScreen from './splash.js';
    const splash = new SplashScreen('./graphics');
    splash.show();
  </script>
</body>
</html>
-------------------------------------------------------------------------------------------------
The other one is called splash. JS

export default class SplashScreen {
  constructor(imageDirectory, duration = 3000) {
    this.imageDirectory = imageDirectory;
    this.duration = duration;
    this.images = [];
    this.currentIndex = parseInt(localStorage.getItem("splashCurrentIndex")) || 0;
  }

  async loadImages() {
    const jsonPath = `${this.imageDirectory}/splash-images.json`;
    console.log("Loading JSON from:", jsonPath);
    try {
      const response = await fetch(jsonPath);
      if (!response.ok) throw new Error("JSON not found");
      this.images = await response.json();
      console.log("Images loaded:", this.images);
    } catch (error) {
      console.error("Failed to load images from JSON:", error);
      this.images = [];
    }
  }

  async show() {
    if (this.images.length === 0) {
      await this.loadImages();
    }
    if (this.images.length === 0) {
      console.error("No images found in the manifest. Skipping splash screen.");
      return;
    }
    const splashContent = document.querySelector('.splash-content');
    const imgElement = splashContent.querySelector("img");

    const imagePath = `${this.imageDirectory}/${this.images[this.currentIndex]}`;
    console.log("Displaying image:", imagePath);
    imgElement.src = imagePath;

    this.currentIndex = (this.currentIndex + 1) % this.images.length;
    localStorage.setItem("splashCurrentIndex", this.currentIndex);

    setTimeout(() => {
      this.hide();
    }, this.duration);
  }

  hide() {
    const splashContent = document.querySelector('.splash-content');
    if (splashContent) {
      splashContent.style.display = "none";
    }
    // Notify the opener window that the splash is done
    if (window.opener) {
      window.opener.postMessage('splashDone', '*');
    }
  }
}
-------------------------------------------------------------------------------------------------
Also in order for this to work because it's running remotely I'm not allowed to scan for security reasons most service the more allow it so there's a Json file inside the directory where the graphics are stored in a graphics sub directory.

So in order to generate this json file you need to run this php file in the same directory on your local machine with all the graphics files that you want to build this json file for and then it will if it's successfully saves the file to your machine it will let you know that it saved it correctly and then you just load that to the remote server.

PHP code below generate-images-json.php
<?php
// Set fixed images directory relative to this script
$imagesDir = dirname(__FILE__) . '/graphics';
$jsonFile = $imagesDir . '/splash-images.json';

$message = '';
$messageType = ''; // 'success' or 'error'

// Define JSON_PRETTY_PRINT if not defined (PHP 5.3 compatibility)
if (!defined('JSON_PRETTY_PRINT')) {
    define('JSON_PRETTY_PRINT', 128);
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!is_dir($imagesDir)) {
        $message = "Error: '$imagesDir' directory not found.";
        $messageType = 'error';
    } else {
        $imageExtensions = array('png', 'jpg', 'jpeg', 'gif');
        $imageFiles = array();

        foreach (scandir($imagesDir) as $file) {
            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
            if (in_array($ext, $imageExtensions)) {
                $imageFiles[] = $file;
            }
        }

        if (file_put_contents($jsonFile, json_encode($imageFiles, JSON_PRETTY_PRINT))) {
            $message = "Success! JSON file generated with " . count($imageFiles) . " images.";
            $messageType = 'success';
        } else {
            $message = 'Error: Failed to write JSON file.';
            $messageType = 'error';
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Generate splash-images.json</title>
<style>
body {
  font-family: Arial, sans-serif;
  padding: 30px;
  background: #222;
  color: #eee;
}
button {
  padding: 12px 24px;
  font-size: 18px;
  cursor: pointer;
}
#toast {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 16px;
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}
#toast.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 3s;
  animation: fadein 0.5s, fadeout 0.5s 3s;
}
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;} to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
  from {bottom: 30px; opacity: 1;} to {bottom: 0; opacity: 0;}
}
.success {background-color: green;}
.error {background-color: darkred;}
</style>
</head>
<body>
  <h1>Generate splash-images.json from ./graphics directory</h1>
  <p>Make sure you have a folder named <code>graphics</code> in this directory with image files.</p>
  <form method="POST" action="">
    <button type="submit">Generate JSON</button>
  </form>

  <div id="toast"></div>
  <script>
  function showToast(message, type) {
    var toast = document.getElementById("toast");
    toast.textContent = message;
    toast.className = "show " + type;
    setTimeout(function() {
      toast.className = toast.className.replace("show", "");
    }, 3500);
  }
  <?php if(!empty($message)): ?>
    showToast(<?php echo json_encode($message); ?>, "<?php echo $messageType; ?>");
  <?php endif; ?>
  </script>
</body>
</html>



Last edited by: cgetty on Aug 21, 2025 9:55:50 am
Profile

Powered by myUPB v2.2.7  ·   © PHP Outburst 2002 - 2026

Creative Commons License