I have a settings popup on my generator but there is also an image layer combiner plug in, and it seems like the image is on top of the setting box when i open it, so you can’t click the bottom settings. Does anyone know how to fix this? thank you so much in advance :')

  • perchanceM
    link
    fedilink
    English
    arrow-up
    6
    ·
    edit-2
    11 days ago

    If you change this:

    <div id="popup1" class="overlay">
    

    to this:

    <div id="popup1" class="overlay" style=" z-index: 999;">
    

    That should fix the popup/overlay issue.

    And for the images not loading I think that’s due to this: [mol=moles.consumableList, moles_select] since moles_select is a bunch of URLs on a single line which I don’t think the image-layer-combiner-plugin supports. If you want a random number of moles then one way would be to ask an AI “Please make a javascript function called convertArrayOfImagesToSingleImage which takes an array of URLs and overlay them on a canvas so they turn them into a single layered PNG and return a PNG data URL” and then you’d use it like this or similar:

    [mol=moles.consumableList, convertArrayOfImagesToSingleImage(moles_select.evaluateItem.split(" "))]

    Edit: Actually tell the AI to implement convertArrayOfImagesToSingleImage by embedding the PNGs inside an SVG and return the data URL for the SVG. That way you don’t have to deal with async stuff. Something like this might work:

    function convertArrayOfImagesToSingleImage(pngUrls, width=1024, height=1024) {
      const images = pngUrls.map(url => `<image href="${url}" width="${width}" height="${height}" />`).join("\n  ");
      const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">${images}</svg>`;
      return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
    }