Forum consepet
You are not logged in. Please Login.

Forum consepet > Using AI software > UI builder 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: Mar 12, 2025 6:35:37 pm
cgetty



Posts: 137
Registered:
2013-12-25


8/20/25

I might come back to this later. In the mean time I'm going to work on the UI builder version which seems to be more functional than this one At the moment. remote version

C:xampphtdocsvb3VisualJSprojectsbuilder_my_try1.


The project files are here: http://localhost/_perplex_clone/another.clone/elmo.html

I put a bookmark here in the browser HTML with everything inside true components perplexity

OK so this is the project where we change gears and we put all of the true web components inside this one HTML file to get it to work correctly. We seemed to be having difficulties moving forward when it comes to implementing the code our last issue was the horizontal bar that allows me to move up and down on the left side of the panel between where you load the files and where the components are chosen. It seemed after a while we get to a point where we just stop making progress and this is one of those.

Perplexities sent me a new HTML fully supposedly repaired. I'm pasting it down below. This is what complexity told me as he printed out my new HTML in whole.

Here is the complete, self-contained single HTML file with all components, styles, and fixed splitter behavior integrated, giving you a clean fresh starting point for your IDE-like web app prototype:
Still didn't fix the problem
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>IDE Prototype - Single File</title>
  <style>
    /* Basic Reset and layout */
    * {
      box-sizing: border-box;
    }
    body, html {
      margin: 0; padding: 0; height: 100%;
      font-family: Arial, sans-serif;
      overflow: hidden;
      background: #D0E4FA;
      color: #222;
      user-select: none;
    }
    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
    }
    app-menu-bar {
      display: block;
      flex-shrink: 0;
      height: 35px;
    }
    /* Button panel below menu bar */
    #buttonPanel {
      background: #e0e0e0;
      padding: 8px;
      border-bottom: 1px solid #bbb;
      display: flex;
      align-items: center;
      gap: 10px;
      user-select: none;
      height: 40px;
      flex-shrink: 0;
    }
    #buttonPanel button {
      padding: 5px 10px;
      font-size: 14px;
      border: 1px solid #999;
      background-color: white;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }
    #buttonPanel button:hover {
      background-color: #d0d0d0;
    }
    /* Content container */
    .content {
      display: flex;
      flex: 1;
      height: calc(100vh - 75px); /* subtract menu + button panel */
      overflow: hidden;
      background: #fafafa;
    }
    /* Side panels */
    .side-panel {
      background: #D0E4FA;
      border: 1px solid #bbb;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-width: 280px;
      max-width: 600px;
      user-select: none;
      transition: width 0.3s ease;
      position: relative;
    }
    .side-panel.collapsed {
      width: 24px !important;
      min-width: 24px !important;
      max-width: 24px !important;
      overflow: hidden;
    }
    .left-panel {
      border-right: none;
      width: 300px;
      min-width: 24px;
      max-width: 600px;
      position: relative;
    }
    .right-panel {
      border-left: none;
      width: 240px;
      min-width: 24px;
      max-width: 600px;
      padding: 10px;
      box-sizing: border-box;
      position: relative;
    }
    /* Collapse buttons */
    .collapse-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 48px;
      width: 24px;
      background: #b3d1fa;
      border: 1px solid #999;
      color: #0a53d0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      user-select: none;
      border-radius: 0 4px 4px 0;
      flex-shrink: 0;
      z-index: 10;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .collapse-left {
      right: 0;
      left: auto;
      border-radius: 0 4px 4px 0;
    }
    .collapse-right {
      left: 0;
      right: auto;
      border-radius: 4px 0 0 4px;
    }
    /* Resizers between panels */
    #resizerLeft, #resizerRight {
      width: 6px;
      cursor: ew-resize;
      background: #aaa;
      position: relative;
      user-select: none;
      flex-shrink: 0;
      transition: background-color 0.2s ease;
    }
    #resizerLeft:hover, #resizerRight:hover {
      background: #555;
    }
    /* Main panel */
    .main-panel {
      flex: 1;
      background: white;
      padding: 20px;
      overflow-y: auto;
    }
    /* Tabs container */
    .tabs-container {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      user-select: none;
    }
    /* Tabs header */
    .tabs-header {
      display: flex;
      height: 35px;
      border-bottom: 1px solid #bbb;
      background: #D0E4FA;
      user-select: none;
    }
    .tab-button {
      padding: 8px 20px;
      cursor: pointer;
      border: none;
      background: #D0E4FA;
      font-weight: normal;
      font-size: 14px;
      border-bottom: 3px solid transparent;
      outline: none;
      user-select: none;
      white-space: nowrap;
      transition: background-color 0.3s, border-bottom-color 0.3s;
    }
    .tab-button:hover {
      background-color: #B0D1FA;
    }
    .tab-button.active {
      background-color: white;
      border-bottom-color: #0a53d0;
      font-weight: bold;
      color: #0a53d0;
    }
    /* Tab panels container */
    .tab-panels {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
      position: relative;
    }
    /* Individual tab panel */
    .tab-panel {
      flex: 1;
      overflow: auto;
      min-height: 60px;
    }
    /* Component selector container */
    .component-selector-container {
      min-height: 60px;
      background: #d0e4fa;
      padding: 8px 10px;
      overflow-y: auto;
      box-sizing: border-box;
      font-size: 14px;
      user-select: none;
      transition: height 0.2s;
    }
    .component-selector-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .component-selector-list li {
      padding: 6px 10px;
      margin-bottom: 3px;
      background: white;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid #bbb;
      user-select: none;
      transition: background-color 0.2s ease;
    }
    .component-selector-list li:hover {
      background-color: #b3d1fa;
      color: #0a53d0;
    }
    /* Horizontal splitter inside left panel */
    #dragSplitter {
      height: 6px;
      background: #888;
      cursor: ns-resize;
      user-select: none;
      transition: background-color 0.15s ease;
      flex-shrink: 0;
    }
    #dragSplitter:hover {
      background-color: #555;
    }
  </style>
</head>
<body>
  <div id="app">
    <app-menu-bar></app-menu-bar>
    <div id="buttonPanel" role="toolbar" aria-label="Layout controls">
      <button type="button" aria-label="Add Component">Add Component</button>
      <button type="button" aria-label="Remove Component">Remove Component</button>
      <button type="button" aria-label="Undo">Undo</button>
      <button type="button" aria-label="Redo">Redo</button>
    </div>
    <div class="content">
      <!-- LEFT PANEL -->
      <aside class="side-panel left-panel" id="leftPanel">
        <div class="tabs-container">
          <div class="tabs-header" role="tablist" aria-label="Left Panel Tabs">
            <button class="tab-button" id="tabPages" aria-selected="false" role="tab" aria-controls="panelPages" tabindex="-1">Pages</button>
            <button class="tab-button active" id="tabProject" aria-selected="true" role="tab" aria-controls="panelProject" tabindex="0">Project</button>
          </div>
          <div class="tab-panels">
            <section class="tab-panel" id="panelPages" role="tabpanel" aria-labelledby="tabPages" tabindex="0" hidden>
              <p>Pages content here...</p>
            </section>
            <section class="tab-panel active" id="panelProject" role="tabpanel" aria-labelledby="tabProject" tabindex="0">
              <app-tree-view></app-tree-view>
            </section>
            <div id="dragSplitter"></div>
            <div class="component-selector-container" role="region" aria-label="Component Selector">
              <ul class="component-selector-list" id="componentSelectorList">
                <li tabindex="0">Binder</li>
                <li tabindex="0">Timer</li>
                <li tabindex="0">Anim Binder</li>
                <li tabindex="0">style Box</li>
                <li tabindex="0">Data Binder</li>
                <li tabindex="0">Message Service</li>
                <li tabindex="0">Web Api Caller</li>
                <li tabindex="0">MQTT</li>
                <li tabindex="0">HTML Element</li>
                <li tabindex="0">Span Element</li>
                <li tabindex="0">Icon Element</li>
                <li tabindex="0">link</li>
                <li tabindex="0">Flash</li>
                <li tabindex="0">Audio</li>
                <li tabindex="0">Video</li>
                <li tabindex="0">Form Layout</li>
                <li tabindex="0">Image</li>
                <li tabindex="0">Build Setting</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="collapse-button collapse-left" id="collapseLeftBtn" title="Toggle Left Panel">◀</div>
      </aside>
      <!-- Resizer between left panel and main panel -->
      <div id="resizerLeft"></div>
      <!-- MAIN PANEL -->
      <main class="main-panel" tabindex="0" role="main" aria-label="Main content area">
        <h1>Main Content Area</h1>
        <p>Click on components on the left to display details here.</p>
      </main>
      <!-- Resizer between main panel and right panel -->
      <div id="resizerRight"></div>
      <!-- RIGHT PANEL -->
      <aside class="side-panel right-panel" id="rightPanel">
        <h3>Right Panel</h3>
        <p>Additional UI components or information.</p>
        <div class="collapse-button collapse-right" id="collapseRightBtn" title="Toggle Right Panel">▶</div>
      </aside>
    </div>
  </div>
  <script>
    // Tabs switching
    const tabs = document.querySelectorAll('.tab-button');
    const panels = document.querySelectorAll('.tab-panel');
    tabs.forEach(tab => {
      tab.addEventListener('click', () => {
        tabs.forEach(t => {
          t.classList.remove('active');
          t.setAttribute('aria-selected', 'false');
          t.setAttribute('tabindex', '-1');
        });
        tab.classList.add('active');
        tab.setAttribute('aria-selected', 'true');
        tab.setAttribute('tabindex', '0');
        panels.forEach(panel => {
          panel.hidden = true;
          panel.classList.remove('active');
        });
        const panel = document.getElementById(tab.getAttribute('aria-controls') || tab.id.replace('tab','panel'));
        panel.hidden = false;
        panel.classList.add('active');
        panel.focus();
      });
    });
    window.addEventListener('DOMContentLoaded', () => {
      document.getElementById('tabProject').click();
    });

    // Collapse buttons
    const leftPanel = document.getElementById('leftPanel');
    const rightPanel = document.getElementById('rightPanel');
    const collapseLeftBtn = document.getElementById('collapseLeftBtn');
    const collapseRightBtn = document.getElementById('collapseRightBtn');
    collapseLeftBtn.addEventListener('click', () => {
      leftPanel.classList.toggle('collapsed');
      collapseLeftBtn.innerHTML = leftPanel.classList.contains('collapsed') ? '▶' : '◀';
    });
    collapseRightBtn.addEventListener('click', () => {
      rightPanel.classList.toggle('collapsed');
      collapseRightBtn.innerHTML = rightPanel.classList.contains('collapsed') ? '◀' : '▶';
    });

    // Component selector click
    const componentList = document.getElementById('componentSelectorList');
    const mainPanel = document.querySelector('.main-panel');
    componentList.addEventListener('click', ev => {
      if (ev.target.tagName === 'LI') {
        const componentName = ev.target.textContent;
        mainPanel.innerHTML = '<h2>Selected Component: ' + componentName + '</h2><p>Details for ' + componentName + '.</p>';
      }
    });
    componentList.addEventListener('keydown', ev => {
      const current = ev.target;
      if (current.tagName === 'LI') {
        if (ev.key === 'ArrowDown') {
          ev.preventDefault();
          const next = current.nextElementSibling || componentList.firstElementChild;
          next.focus();
        } else if (ev.key === 'ArrowUp') {
          ev.preventDefault();
          const prev = current.previousElementSibling || componentList.lastElementChild;
          prev.focus();
        } else if (ev.key === 'Enter' || ev.key === ' ') {
          ev.preventDefault();
          current.click();
        }
      }
    });

    // === Horizontal splitter in left panel (fixed robust version) ===
    window.addEventListener('DOMContentLoaded', () => {
      const splitter = document.getElementById('dragSplitter');
      const topPanel = document.getElementById('panelProject');
      const bottomPanel = document.querySelector('.component-selector-container');
      const container = splitter.closest('.tab-panels');
      let isDragging = false;
      let startY = 0;
      let startTopHeight = 0;
      let totalAvailable = 0;

      splitter.addEventListener('mousedown', (e) => {
        isDragging = true;
        startY = e.clientY;
        startTopHeight = topPanel.offsetHeight;
        // Calculate available height once per drag
        const panelsRect = container.getBoundingClientRect();
        totalAvailable = panelsRect.height - splitter.offsetHeight;
        document.body.style.cursor = 'ns-resize';
        document.body.style.userSelect = 'none';
      });

      document.addEventListener('mousemove', (e) => {
        if (!isDragging) return;
        let delta = e.clientY - startY;
        let newTopHeight = startTopHeight + delta;
        const minTop = 80, minBottom = 80;
        newTopHeight = Math.max(minTop, Math.min(newTopHeight, totalAvailable - minBottom));
        topPanel.style.flexGrow = '0';
        topPanel.style.height = newTopHeight + 'px';
        bottomPanel.style.flexGrow = '0';
        bottomPanel.style.height = (totalAvailable - newTopHeight) + 'px';
      });

      document.addEventListener('mouseup', () => {
        if (isDragging) {
          isDragging = false;
          document.body.style.cursor = '';
          document.body.style.userSelect = '';
        }
      });

      // Optionally: set initial heights on load
      window.requestAnimationframe(() => {
        const panelsRect = container.getBoundingClientRect();
        const total = panelsRect.height - splitter.offsetHeight;
        topPanel.style.height = `${Math.round(total * 0.6)}px`;
        bottomPanel.style.height = `${Math.round(total * 0.4)}px`;
      });
    });
  </script>
  <!-- app-menu-bar web component code -->
  <script>
    class AppMenuBar extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
          <style>
            :host {
              display: block;
              background: #D0E4FA;
              color: #333;
              height: 35px;
              font-family: Arial, sans-serif;
              box-sizing: border-box;
              user-select: none;
            }
            nav {
              height: 100%;
              display: flex;
              align-items: center;
              padding: 0 1em;
            }
            .menu-item {
              margin-right: 1.5em;
              position: relative;
              cursor: pointer;
              font-weight: 600;
            }
            .menu-item:hover {
              color: #0a53d0;
            }
          </style>
          <nav>
            <div class="menu-item">Project</div>
            <div class="menu-item">Build</div>
            <div class="menu-item">Tools</div>
            <div class="menu-item">Help</div>
          </nav>
        `;
      }
    }
    customElements.define('app-menu-bar', AppMenuBar);
  </script>
  <!-- app-tree-view web component code -->
  <script>
    class AppTreeView extends HTMLElement {
      constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
          <style>
            :host {
              display: block;
              width: 100%;
              height: 100%;
              overflow: auto;
              border: 1px solid #ccc;
              background: white;
              font-family: Arial, sans-serif;
              box-sizing: border-box;
              user-select: none;
            }
            header {
              background: #f0f0f0;
              padding: 8px 10px;
              font-weight: bold;
              border-bottom: 1px solid #ccc;
            }
            ul {
              list-style: none;
              margin: 0;
              padding-left: 20px;
            }
            li {
              cursor: pointer;
              padding-left: 20px;
              line-height: 1.5em;
              position: relative;
            }
            li.folder::before {
              content: "▶";
              position: absolute;
              left: 0;
              top: 3px;
              font-size: 0.9em;
              transform-origin: center;
              transition: transform 0.2s ease;
            }
            li.folder.expanded::before {
              transform: rotate(90deg);
            }
          </style>
          <header>TreeView Demo</header>
          <ul id="tree"></ul>
        `;
        this.treeEl = this.shadowRoot.getElementById('tree');
      }
      connectedCallback() {
        this.items = [
          { id: 'folder1', caption: 'folder1', folder: true, children: null },
          { id: 'folder2', caption: 'folder2', folder: true, children: null },
          { id: 'file1', caption: 'file1', folder: false },
        ];
        this.renderTree(this.items, this.treeEl);
      }
      renderTree(items, container) {
        container.innerHTML = '';
        items.forEach(item => {
          const li = document.createElement('li');
          li.textContent = item.caption;
          li.dataset.id = item.id;
          if (item.folder) {
            li.classList.add('folder');
            li.classList.add('collapsed');
            li.addEventListener('click', async (e) => {
              e.stopPropagation();
              if (li.classList.contains('expanded')) {
                li.classList.remove('expanded');
                if (li.querySelector('ul')) li.removeChild(li.querySelector('ul'));
              } else {
                li.classList.add('expanded');
                if (!item.children) {
                  li.appendChild(this.createLoadingNode());
                  await this.loadChildren(item);
                  li.removeChild(li.querySelector('.loading'));
                }
                if (item.children && item.children.length > 0) {
                  const ul = document.createElement('ul');
                  this.renderTree(item.children, ul);
                  li.appendChild(ul);
                }
              }
            });
          } else {
            li.addEventListener('click', () => {
              alert(item.id + ' selected!');
            });
          }
          container.appendChild(li);
        });
      }
      createLoadingNode() {
        const loadingLi = document.createElement('li');
        loadingLi.textContent = 'Loading...';
        loadingLi.classList.add('loading');
        loadingLi.style.fontstyle = 'italic';
        return loadingLi;
      }
      async loadChildren(item) {
        return new Promise(resolve => {
          setTimeout(() => {
            item.children = [
              { id: item.id + '_1', caption: item.id + '_1', folder: true, children: null },
              { id: item.id + '_2', caption: item.id + '_2', folder: true, children: null },
              { id: item.id + '_3', caption: item.id + '_3', folder: false },
              { id: item.id + '_file1', caption: 'file_' + Math.random().toString(36).substr(2, 6), folder: false },
              { id: item.id + '_file2', caption: 'file_' + Math.random().toString(36).substr(2, 6), folder: false },
            ];
            resolve();
          }, 500);
        });
      }
    }
    customElements.define('app-tree-view', AppTreeView);
  </script>
</body>
</html>

Last edited by: cgetty on Aug 20, 2025 9:14:41 pm
Profile

Posted: Aug 18, 2025 4:45:08 pm
cgetty



Posts: 137
Registered:
2013-12-25


8/18/25
So we are changing our approach since the components in the component sub directory the AI is finding it hard to position things exactly as I want them. But the AI seems to be able to place them easier if all the components are in one HTML file and he makes true web components on the fly and incorporates them inside the one HTML file.

This will also be easier to bring new sessions of the AI up to speed instead of having to send a bunch of individual files.

This file is gonna grow large and at some point I'm gonna have to get used to pasting things into the file instead of having the AI print this large html file out for me out the entire file cause it's gonna get resource intensive.

So the idea is to get this HTML file single file with all the components in it and all the CSS and all the junk that it needs in the javascript to make the basic interface to match as closely as the crossui ide as Possible. So this is where we are at the moment


8/17/25
Today we hooked up a settings.Ini file in order to load the components into the HTML browser. So far we were able to use this settings dot in I file to load in the Components for us into the HTML

<app-menu-bar></app-menu-bar>
<app-panel-toolbar></app-panel-toolbar>
<layout-panel></layout-panel> 


Last edited by: cgetty on Aug 20, 2025 8:26:28 pm
Profile

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

Creative Commons License