Need brainstorm ideas to solve this

[darren.james7518]

Hi guys,

I have a double glazed window image which is fully customizable with the use of CSS/HTML.

Once the user has finished customising, I need to display the resulting image on another page, but this is (so far) impossible.

The two obvious solutions would be to copy the image to another page or take a snapshot.

Copy

If I copy the image to another page then neither windows displays because the CSS/HTML attributes (height, width opener direction etc) must be unique for each window. I have tried renaming all the attributes so that the second window has unique names, it almost works, the sizing is OK but many features are broken. It is worth mentioning that the window is extremely complex. There are about 50 custom states and many hold dozens of variables, the window is a complex beast.

Snapshot

There is currently no screen capture software which can handle an image made from CSS/HTML. The result looks awful.

Has anyone got any suggestions because I am stuck on this?

[adamhholmes]

I’m not following what the problem is here…

Surely you can just recreate the elements on another page (or just copy the page)…

Obviously you’ll have to pass the relevant attributes to the second page (which presumably are all store in the database, so just a reference to the Object is all you need), and you’ll need to adjust your CSS values accordingly…

But other than that I can’t see why there should be any issue.

Do you have any links to preview pages or editor pages to take a look at to make things clearer?

[darren.james7518]

@adamhholmes

Do you have any links to preview pages or editor pages to take a look at to make things clearer?

I would be extremely grateful if you could have a look, thank you. I am going to clone the site and prepare a link for you.

Ideally a snapshot would be preferable because I need to show a smaller version of the window on several pages - I suppose I could have conditions on the main window to handle this, but ultimately the customer will want to print their window so at some point I need a clear snapshot.

Anyway, to recreate the elements on another page would be a huge step forward and allow me to effectively launch the app as this is about the final issue to solve.

UPDATE: I can’t clone the site because “This application is at its limit for number of Things in the database. Please upgrade your application to continue saving data”

hmmm, is there a way I can give you (only you) access to my app?

[adamhholmes]

You can DM me a link to your editor and I’ll take a look (make sure your app is set to anyone can view)… or you can add me as a ‘view only’ collaborator.

[darren.james7518]

Just DM’d you @adamhholmes

[darren.james7518]

@adamhholmes I am able to get on to openai chatbot again after two weeks of it being down for me. So, it has said I can achieve a screenshot of an HTML element using a JavaScript library and convert it to a data URL. I’m currently working on this … who knows, maybe the bot will succeed!

[darren.james7518]

Ok, here’s where I am with this, any help much appreciated.

I am trying to create a feature on my website that allows users to take a screenshot of a specific area of the page and then save that image to my database. To achieve this, I have implemented the following steps:

1. I created an HTML element that allows users to take a screenshot using the ‘snap’ id.
2. I added a ‘save’ button to the page with the id “save-button”.
3. I added some JavaScript code to trigger a workflow when the ‘save’ button is clicked. This workflow has three steps:

• a. The first step runs the JavaScript code that captures the screenshot and converts it to a Data URL (code below).
• b. The second step creates a new “WindowFileImage” Thing in Bubble with the “file” field = dataUrl
• c. The third step makes changes to the “WindowFileImage” Thing and sets the “file” field to file = dataUrl

4. I tested the feature and found that the image is not being saved to the database, I think the issue is the naming of the file = “dataUrl” (see image below). I guess I am not able to rename the image file when it is saved to the database, I don’t know how to do this?

Javascript

document.getElementById('save-button').addEventListener('click', function() {
    html2canvas(document.getElementById('snap')).then(canvas => {
        const dataUrl = canvas.toDataURL();
        const newThing = {
            file: dataUrl
        };
        bubble.create('window_file_image', newThing, function(err, data) {
            console.log(err, data);
        });
    });
});

[keith]

Why do you think that bubble.create()is a thing?

[darren.james7518]

I actual don’t know! I have zero experience with java and have been asking the chat AI for help. I’m completely lost/stuck. I have been trying to get a screen shot for about 2 months on and off so I am willing to even ask a robot now

[dorilama]

@darren.james7518

it has said I can achieve a screenshot of an HTML element using a JavaScript library

didn’t you get a similar response from a human on the forum some days ago?

Does anyone know of a screenshot plugin which handles shadows?

Work through this. This will copy your gradient properly, but you will need to edit the code to only capture your element and not the entire page. 20 minutes of Google searching to find that for ye. https://www.codingnepalweb.com/how-to-take-screenshot-using-javascript/

[darren.james7518]

@dorilama Yes that’s correct. I couldn’t get the javascript to work and so I tried to ask chatAI to help implement it. Then it provided similar (slightly different) Javascript so I tried that but I got stuck.

All that said, I just purchased yet another plugin called Screenshot Generator, which was built using the html2canvas library, the same library I believe in the link above. Sadly the image it produces does not capture HTML shadows/bevel so it seems the html2canvas library is the same as every other plugin.

I now have no idea what to do, I can’t believe that I am unable to launch my app because I can not display an image on a different page! The image must be good, the entire app is literally for designing windows and so this is a crucial step.

[troy.roberge]

Honestly, I’ve tried to help lots, but you never really learned any basics so you just ask question after question and now you are stuck.

I would really suggest going through videos and training lessons and it might give you some help.

The code I gave you works. You just need to tailor it to your needs. If not, well pay a plugin guy to build a plugin for you.

[dorilama]

Some options:

• check the supported css properties of html2canvas (good thing it has a documentation)
• you create an svg directly

[darren.james7518]

@troy.roberge

Honestly, I’ve tried to help lots, but you never really learned any basics so you just ask question after question and now you are stuck.

I would really suggest going through videos and training lessons and it might give you some help.

The code I gave you works. You just need to tailor it to your needs. If not, well pay a plugin guy to build a plugin for you.

Ok thank you.

[darren.james7518]

@dorilama

• check the supported css properties of html2canvas (good thing it has a documentation)
• you create an svg directly

Thank you for the link, it confirms box-shadow is not supported, which I would need.