CrossUI :: links to some programs I have on line

guest	Quote Add Reply
	Temp notes Improvements that can be done to programs in general - load drivers faster - Only load drivers that are needed for each program instead of loading the entire runtime folder - Clean up the OSF.php script or find another one like it. - Figure out how to make XUI like limb for phones Find out what site VB2 is and add it to the this list Add vb3 link to this list vb3builder.atwebpages.com/vb3/ Add this one too spencer.atwebpages.com/vb3/ My Do Nothing Web Page vb4.xp3.biz/l.vbz/ limb My Do Nothing Web Page vb4.xp3.biz/vbz/ xui Cathy's Place mobile1.onlinewebshop.net/cat1/ limb mobile1.onlinewebshop.net/cat1/meg/data/data.json Cathy's Place vb4.xp3.biz/cathy/ xui My Family tree uibuilder.atwebpages.com/famtree/ xui Alpha Tax Service elmoross.atwebpages.com/alpha/ xui Elene's site hotchick.atwebpages.com/ limb Cong Territory Map mobile1.onlinewebshop.net/sod/dl/files/t.files.html limb El Padrino Food Trailer elmoross.atwebpages.com/elpad/ xui elmoross.atwebpages.com/elpad/data/elpad.json El Padrino Food Trailer This is the debug on CrossUI's site xui https://tinyurl.com/crossui El Padrino Food Trailer elmoross.atwebpages.com/elpad/elpad/ limb Menu editor for Elpad, loads and imports json xui hotchick.atwebpages.com/elpadx/ hotchick.atwebpages.com/elpadx/data/data.json Loads json data from the web and populates a grid hotchick.atwebpages.com/elpad/ xui hotchick.atwebpages.com/elpad/data/data.json foodtrucks.atwebpages.com/sandbox1/crg_photos1_list.php?pagesize=30 Phprunner File up load program that works hotchick.atwebpages.com/elpad/ful.html Mojo Man Food Truck spencer.atwebpages.com/mojo.man/ xui foodtrucks.atwebpages.com/sandbox2/crg_photos1_list.php?pagesize=30 Phprunner 55 Meadows Road Bible Study Group vb4.xp3.biz/bsg/ xui Crystal's Place limb vb4.xp3.biz/tuk/ <- to be removed /tuktuk.6te.net/tuk/ <- Current tiny.cc/tuk1 limb Azteca Grill limb spencer.atwebpages.com/azteca/ El Pueblito xui tuktuk.6te.net/elp/ South Side Burger limb spencer.atwebpages.com/ssb/ Deep Tread Tire Service limb tiny.cc/mikea mobile1.onlinewebshop.net/deep/ Claudia limb tiny.cc/claudia2 mobile1.onlinewebshop.net/claudia/ Mildred's appointment page https://tinyurl.com/554w4s6h <-- TinyURL black listed hotchick.atwebpages.com/mildred/menu.php <-- native URL hotchick.atwebpages.com/mildred/apointments_list.php <-- Guest URL Food Gallary1 https://vb4.xp3.biz/2_tst/gallery1/metadata-editor.html
Last edited by: cgetty on Apr 15, 2025 1:07:05 am

guest	Quote Add Reply
	Okay, here's a brief synopsis of our discussion: objective: To create a UI builder framework inspired by Jack Li's original UI Builder, focusing on: Simplicity and reusability of components Using vanilla javascript as a base (like Jack did) Gradually adding modern concepts and features. Key Points: Reusable Components: We discussed how reusable components are modular UI elements that can be used multiple times and how Jack likely implemented them in 2009 using pure javascript. Vanilla javascript Approach: We're starting with vanilla javascript to build a basic UI builder framework. Examples: I provided code examples for creating reusable components (like buttons and cards) using: Basic javascript classes Shadow DOM for encapsulation Dynamic attributes for configuration Next Steps: I suggested a learn-by-doing approach, starting with simple components, gradually adding complexity, and incorporating modern concepts. Your Plan: You want to learn these concepts and build the framework together, step by step. When you're back at your PC, you can copy and paste this summary into our chat so we can continue from here. Let me know when you're ready to dive into specific features or concepts!
Last edited by: cgetty on Mar 11, 2025 5:12:00 am

Posted: Mar 22, 2025 1:07:54 am

cgetty	Quote Add Reply
Administrator Programming King Posts: 95 Registered: 2013-12-25	splash-screen-code.txt Deep seek === splash.html === <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Splash Screen</title> <style> /* Splash screen styles */ body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; color: #fff; font-family: Arial, sans-serif; } .splash-content { text-align: center; } .splash-content img { max-width: 100%; max-height: 80vh; } .splash-content h1 { font-size: 2.5rem; margin: 20px 0; } .splash-content p { font-size: 1.2rem; } </style> </head> <body> <div class="splash-content"> <!-- Image will be injected here dynamically --> <img src="" alt="Splash Screen Image"> <h1>Welcome to the UI Builder</h1> <p>Loading your application, please wait...</p> </div> </body> </html> === splash.js === // App/components/splash/splash.js class SplashScreen { constructor(imageDirectory, splashHtmlPath, duration = 3000) { this.imageDirectory = imageDirectory; // Directory containing images this.splashHtmlPath = splashHtmlPath; // Path to the splash HTML file this.duration = duration; // Duration in milliseconds (default: 3 seconds) this.currentIndex = 0; // Track the current image index this.images = []; // Store loaded image paths this.splashElement = null; // Reference to the splash screen DOM element } // Load all images from the directory async loadImages() { try { const response = await fetch(this.imageDirectory); const text = await response.text(); const parser = new DOMParser(); const htmlDocument = parser.parseFromString(text, "text/html"); const imageFiles = Array.from(htmlDocument.querySelectorAll("a")) .map((link) => link.href) .filter((href) => /.(png\|jpg\|jpeg\|gif)$/i.test(href)); // Filter image files this.images = imageFiles; } catch (error) { console.error("Failed to load images:", error); } } // Load the splash screen HTML file async loadSplashHtml() { try { const response = await fetch(this.splashHtmlPath); const html = await response.text(); return html; } catch (error) { console.error("Failed to load splash screen HTML:", error); return null; } } // Display the splash screen async show() { if (this.images.length === 0) { await this.loadImages(); } if (this.images.length === 0) { console.error("No images found in the directory. Skipping splash screen."); return; // Skip the splash screen if no images are found } const splashHtml = await this.loadSplashHtml(); if (!splashHtml) { console.error("Splash screen HTML not found. Skipping splash screen."); return; // Skip the splash screen if the HTML file fails to load } // Log the image being loaded console.log("Loading image:", this.images[this.currentIndex]); // Create a container for the splash screen this.splashElement = document.createElement("div"); this.splashElement.style.position = "fixed"; this.splashElement.style.top = "0"; this.splashElement.style.left = "0"; this.splashElement.style.width = "100%"; this.splashElement.style.height = "100%"; this.splashElement.style.zIndex = "1000"; this.splashElement.innerHTML = splashHtml; // Inject the current image into the splash screen const imgElement = this.splashElement.querySelector("img"); if (imgElement) { // Construct the correct image path const imagePath = `./App/components/splash/graphics/${this.images[this.currentIndex]}`; imgElement.src = imagePath; console.log("Image path:", imagePath); // Log the image path for debugging } // Append the splash screen to the body document.body.appendChild(this.splashElement); // Cycle to the next image for the next run this.currentIndex = (this.currentIndex + 1) % this.images.length; // Hide the splash screen after the specified duration setTimeout(() => { this.hide(); }, this.duration); } // Hide the splash screen hide() { if (this.splashElement) { document.body.removeChild(this.splashElement); this.splashElement = null; } } } // Export the SplashScreen class for use in other modules export default SplashScreen; === Debugging Steps === 1. Ensure the image file (`delphi.helment.jpg`) exists in: C:xampphtdocsvb3VisualJSprojectsbuilder_my_try1Appcomponentssplashgraphicsdelphi.helment.jpg 2. Check the browser console (F12) for: - "Loading image:" log to verify the correct image is being loaded. - "Image path:" log to verify the correct path is being used. 3. If the image still doesn't load: - Verify the image file exists at the specified path. - Check the Network tab in the browser's developer tools for errors. === Notes === - The `splash.html` file defines the splash screen layout and styling. - The `splash.js` file handles loading and displaying the splash screen. - The `graphics` directory contains the images for the splash screen.
Profile

cgetty

Quote

Add Reply

Administrator
Programming
King

Posts: 95
Registered:
2013-12-25

splash-screen-code.txt Deep seek

=== splash.html ===
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Splash Screen</title>
<style>
/* Splash screen styles */
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
}
.splash-content {
text-align: center;
}
.splash-content img {
max-width: 100%;
max-height: 80vh;
}
.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>
</body>
</html>

=== splash.js ===
// App/components/splash/splash.js
class SplashScreen {
constructor(imageDirectory, splashHtmlPath, duration = 3000) {
this.imageDirectory = imageDirectory; // Directory containing images
this.splashHtmlPath = splashHtmlPath; // Path to the splash HTML file
this.duration = duration; // Duration in milliseconds (default: 3 seconds)
this.currentIndex = 0; // Track the current image index
this.images = []; // Store loaded image paths
this.splashElement = null; // Reference to the splash screen DOM element
}

// Load all images from the directory
async loadImages() {
try {
const response = await fetch(this.imageDirectory);
const text = await response.text();
const parser = new DOMParser();
const htmlDocument = parser.parseFromString(text, "text/html");
const imageFiles = Array.from(htmlDocument.querySelectorAll("a"))
.map((link) => link.href)
.filter((href) => /.(png|jpg|jpeg|gif)$/i.test(href)); // Filter image files

this.images = imageFiles;
} catch (error) {
console.error("Failed to load images:", error);
}
}

// Load the splash screen HTML file
async loadSplashHtml() {
try {
const response = await fetch(this.splashHtmlPath);
const html = await response.text();
return html;
} catch (error) {
console.error("Failed to load splash screen HTML:", error);
return null;
}
}

// Display the splash screen
async show() {
if (this.images.length === 0) {
await this.loadImages();
}

if (this.images.length === 0) {
console.error("No images found in the directory. Skipping splash screen.");
return; // Skip the splash screen if no images are found
}

const splashHtml = await this.loadSplashHtml();
if (!splashHtml) {
console.error("Splash screen HTML not found. Skipping splash screen.");
return; // Skip the splash screen if the HTML file fails to load
}

// Log the image being loaded
console.log("Loading image:", this.images[this.currentIndex]);

// Create a container for the splash screen
this.splashElement = document.createElement("div");
this.splashElement.style.position = "fixed";
this.splashElement.style.top = "0";
this.splashElement.style.left = "0";
this.splashElement.style.width = "100%";
this.splashElement.style.height = "100%";
this.splashElement.style.zIndex = "1000";
this.splashElement.innerHTML = splashHtml;

// Inject the current image into the splash screen
const imgElement = this.splashElement.querySelector("img");
if (imgElement) {
// Construct the correct image path
const imagePath = `./App/components/splash/graphics/${this.images[this.currentIndex]}`;
imgElement.src = imagePath;
console.log("Image path:", imagePath); // Log the image path for debugging
}

// Append the splash screen to the body
document.body.appendChild(this.splashElement);

// Cycle to the next image for the next run
this.currentIndex = (this.currentIndex + 1) % this.images.length;

// Hide the splash screen after the specified duration
setTimeout(() => {
this.hide();
}, this.duration);
}

// Hide the splash screen
hide() {
if (this.splashElement) {
document.body.removeChild(this.splashElement);
this.splashElement = null;
}
}
}

// Export the SplashScreen class for use in other modules
export default SplashScreen;

=== Debugging Steps ===
1. Ensure the image file (`delphi.helment.jpg`) exists in:
C:xampphtdocsvb3VisualJSprojectsbuilder_my_try1Appcomponentssplashgraphicsdelphi.helment.jpg

2. Check the browser console (F12) for:
- "Loading image:" log to verify the correct image is being loaded.
- "Image path:" log to verify the correct path is being used.

3. If the image still doesn't load:
- Verify the image file exists at the specified path.
- Check the Network tab in the browser's developer tools for errors.

=== Notes ===
- The `splash.html` file defines the splash screen layout and styling.
- The `splash.js` file handles loading and displaying the splash screen.
- The `graphics` directory contains the images for the splash screen.

Profile

User Name:

Message: