How to make a panel with images?

Miguel_Paula · February 27, 2024, 7:24pm

Hi, I’m making a button that when I press it, a panel appears and images with descriptions appear below but this appears:

this code I’m using:

AFRAME.registerComponent('custom-panel', {
  init: function () {
    this.panel = document.createElement('div');
    this.panel.id = 'my-custom-panel';
    this.panel.style.position = 'fixed';
    this.panel.style.top = '0';
    this.panel.style.left = '0';
    this.panel.style.width = '100vw';
    this.panel.style.height = '100vh';
    this.panel.style.background = 'rgba(101, 78, 163, 1)';
    this.panel.style.color = 'white';
    this.panel.style.padding = '20px';
    this.panel.style.display = 'none';
    this.panel.style.zIndex = '9999';
    this.panel.innerHTML = `
      <div style="overflow-y: auto; height: 90%; margin: 5%;">
        <h2 style="text-align: center;">Galeria</h2>
        <div style="margin-bottom: 20px;">
          <img src="assets/tesla-mini.jpg" alt="Tesla" style="max-width: calc(100% - 40px); height: auto; display: block; margin: 10px auto;">
          <p style="text-align: center;">Sofá Retrátil</p>
        </div>
        <div style="margin-bottom: 20px;">
          <img src="assets/tesla-mini.jpg" alt="Sofá Retrátil" style="max-width: calc(100% - 40px); height: auto; display: block; margin: 10px auto;">
          <p style="text-align: center;">Sofá Retrátil</p>
        </div>
        <!-- Mais imagens e descrições conforme necessário -->
      </div>
    `;
    var button = document.createElement('button');
    button.innerText = 'Quais são os Sofas Retráteis?';
    button.style.position = 'fixed';
    button.style.top = '20px';
    button.style.right = '20px';
    button.style.zIndex = '10000';
    document.body.appendChild(button);
    document.body.appendChild(this.panel);
    button.onmouseover = function() {
      this.style.transform = 'scale(1.1)';
    };
    button.onmouseout = function() {
      this.style.transform = 'scale(1)';
    };
    this.panel.onmouseover = null;
    this.panel.onmouseout = null;
    button.addEventListener('click', () => {
      if (this.panel.style.display === 'none') {
        this.panel.style.display = 'block'; // Mostra o painel
        button.innerText = 'Voltar para experiência AR!'
      } else {
        this.panel.style.display = 'none';
        button.innerText = 'Quais são os Sofas Retráteis?'
      }
    });
  }
});

Ian · February 27, 2024, 8:04pm

Hello @Miguel_Paula
I would suggest referencing our quick tips video here:

Button interactions follow the same CSS, HTML and javascript rules of the web.

Miguel_Paula · February 27, 2024, 8:10pm

Yes, I know that but I have a problem with the panel that appears when I click…
the panel is without the image I want.

Ian · February 27, 2024, 8:16pm

have you tried

./assets/tesla-mini.jpg

Or verified the correct asset path

Miguel_Paula · February 27, 2024, 8:22pm

It hasn’t been the same yet.
This is the right way, I tested everything but it didn’t work.

Ian · February 27, 2024, 8:41pm

Can you specify what asset paths you have tested? More information would be helpful. Are you receiving any console errors?

Miguel_Paula · February 27, 2024, 8:50pm

I’m not getting any errors but I made some changes, migrated part of the code to CSS.
this is what the CSS looked like:

/* Styles for the panel */
#my-custom-panel {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background: rgba(101, 78, 163, 1);
     color: white;
     padding: 20px;
     display: none; /* Initially hidden */
     z-index: 9999;
     overflow-y: auto;
}

#my-custom-panel div {
     margin: 5%;
     height: 90%;
}

#my-custom-panel h2 {
     text-align: center;
}

#my-custom-panel img {
     max-width: calc(100% - 40px);
     height: auto;
     display: block;
     margin: 10px auto;
}

#my-custom-panel p {
     text-align: center;
}

/* Styles for the button */
.custom-button {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 10000;
     transition: transform 0.3s;
}

.custom-button:hover {
     transform: scale(1.1);
}

this is how the JS looked:

import './css.css'

AFRAME.registerComponent('custom-panel', {
   init: function () {
     // Create the panel
     this.panel = document.createElement('div');
     this.panel.id = 'my-custom-panel';
     this.panel.innerHTML = `
       <div>
         <h2>Gallery</h2>
         <div style="margin-bottom: 20px;">
           <img src="./assets/tesla-mini.jpg" alt="Tesla">
           <p>Retractable Sofa</p>
         </div>
         <div style="margin-bottom: 20px;">
           <img src="./assets/tesla-mini.jpg" alt="Retractable Sofa">
           <p>Retractable Sofa</p>
         </div>
         <!-- More images and descriptions as needed -->
       </div>
     `;

     // Create the button
     var button = document.createElement('button');
     button.innerText = 'What are Retractable Sofas?';
     button.className = 'custom-button';

     // Add the button to the body
     document.body.appendChild(button);

     // Add the panel to the body
     document.body.appendChild(this.panel);

     // Button click event to show/hide the panel
     button.addEventListener('click', () => {
       if (this.panel.style.display === 'none') {
         this.panel.style.display = 'block';
         button.innerText = 'Back to AR experience!';
       } else {
         this.panel.style.display = 'none';
         button.innerText = 'What are Retractable Sofas?';
       }
     });
   }
});

christoph_nia · February 27, 2024, 9:19pm

When you’re referencing assets from JS, you’ll want to require() the asset, rather than just using the path as a string, so that it resolves the assets at build time.

Something like this should work:

<img src="{$require('./assets/tesla-mini.jpg'}" ...>

Miguel_Paula · February 27, 2024, 10:48pm

It’s still not working, it’s the same thing.
Here’s a photo of what it looks like now:

Miguel_Paula · February 27, 2024, 10:58pm

I changed the this.panel.innerHTML a bit and changed it to this:

<div>
        <h2>Retractable Sofa</h2>
    <div style="margin-bottom: 20px;">
         <p>Tesla</p>
         <img src="{$require('./assets/tesla-mini.jpg'}">
     </div>
     <div style="margin-bottom: 20px;">
         <p>Tesla</p>
         <img src="{$require('./assets/tesla-mini.jpg'}">
     </div>
     <!-- More images and descriptions as needed -->
</div>

Evan · February 27, 2024, 11:00pm

You’ll need to use backticks instead of quotes, so the require statement is actually evaluated:

<img src=`${require('./assets/tesla-mini.jpg'}`>

Miguel_Paula · February 27, 2024, 11:06pm

did not work. An error code appeared.
erro:
Build failed for [0f6f93e] with errors:
./app.js
Module build failed (from /var/task/node_modules/babel-loader/lib/index.js):
SyntaxError: /tmp/src/awsolution.retratil/app.js: Unexpected token, expected “;” (89:20)

87 |

88 |

Tesla

89 | <img src=${require('./assets/tesla-mini.jpg')}>
| ^
90 |

91 |

92 |

Tesla

at Object._raise (/var/task/node_modules/@babel/parser/lib/index.js:766:17)
at Object.raiseWithData (/var/task/node_modules/@babel/parser/lib/index.js:759:17)
at Object.raise (/var/task/node_modules/@babel/parser/lib/index.js:753:17)
at Object.unexpected (/var/task/node_modules/@babel/parser/lib/index.js:8966:16)
at Object.semicolon (/var/task/node_modules/@babel/parser/lib/index.js:8948:40)
at Object.parseExpressionStatement (/var/task/node_modules/@babel/parser/lib/index.js:11971:10)
at Object.parseStatementContent (/var/task/node_modules/@babel/parser/lib/index.js:11567:19)
at Object.parseStatement (/var/task/node_modules/@babel/parser/lib/index.js:11431:17)
at Object.parseBlockOrModuleBlockBody (/var/task/node_modules/@babel/parser/lib/index.js:12013:25)
at Object.parseBlockBody (/var/task/node_modules/@babel/parser/lib/index.js:11999:10)
at Object.parseBlock (/var/task/node_modules/@babel/parser/lib/index.js:11983:10)
at Object.parseFunctionBody (/var/task/node_modules/@babel/parser/lib/index.js:10963:24)
at Object.parseFunctionBodyAndFinish (/var/task/node_modules/@babel/parser/lib/index.js:10946:10)
at /var/task/node_modules/@babel/parser/lib/index.js:12153:12
at Object.withTopicForbiddingContext (/var/task/node_modules/@babel/parser/lib/index.js:11272:14)
at Object.parseFunction (/var/task/node_modules/@babel/parser/lib/index.js:12152:10)

christoph_nia · February 27, 2024, 11:11pm

I had a missing parenthesis in my code, the full example would look more like this:

...innerHTML = `
...
<img src="${require('./assets/tesla-mini.jpg')}" ...>
...
`

Miguel_Paula · February 27, 2024, 11:17pm

it worked thank you very much!

system · May 14, 2024, 10:02pm

This topic was automatically closed 4 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Scroll_bar 🧑‍💻 Technical Support general , css , ui	18	181	May 4, 2024
How to add 2D button image? 🧑‍💻 Technical Support	7	69	February 16, 2025
Ui button - Image pop-up 🧑‍💻 Technical Support	3	22	April 17, 2025
AR Graphic UI showing up as gray boxes, not the content 🧑‍💻 Technical Support ar-camera , ui	8	53	April 8, 2025
Button struggles 🧑‍💻 Technical Support	9	340	April 5, 2024

How to make a panel with images?

Related topics