HtmlDialog - Is not loading images from aws s3 bucket

Developers Ruby API
1

Hi there, we are working on a plugin that list a lot of materials, so we built a grid with a lot images and materials specs. It’s a webpage that we load in a HtmlDialog. On browser it’s working like a charm, but inside the Sketchup (HtmlDialog) the images does not load. Follow some images:

Inside Sketchup:

WhatsApp Image 2020-07-17 at 16.38.04
WhatsApp Image 2020-07-17 at 16.38.041204×722 190 KB

Capturar
Capturar563×529 36 KB

Outside Sketchup: Capturar2

Anyone know what’s going on? hahaha
Thanks!!

2

Can you pare down and post a minimal example that others can test ?
(Best if packaged as SketchupExtension in a RBZ zip file.)

3

In devtools, click on “Console”. What does it say?
Also, click on a request and see the result. What does it say?

4

Yes Dan, but the problem appear only for some users :sweat_smile: hahaha
I’ll send the .rbz and console print as Kengey ask.

thanks guys!

5

Hi Kengey, thanks for reply!!
Console nothing, on network tab the requests are “cancelled”!

6

Hello Diego,

If you are still listening, or anyone,
Is your grid still working?

I am trying to layout some items in a grid with HTMLDlg but the divs take up full width.
The page displays as expected with Firefox


      dlg_optns = {

        :dialog_title => 'Polyhedron Options',
        :width => 800,
        :height => 650,
        :resizable => false,
        :style => UI::HtmlDialog::STYLE_DIALOG
      }

      dlg_html = <<-HTML

        <html>
        <head>
          <meta charset="UTF-8"> 

          <style>

            body {
              background-color:Gainsboro;
              font-family: Verdana, sans-serif; 
              font-size: 100%;
              overflow: hidden;
            }
            input[type=button] {
              width: 150px;
              height: 25px;
              float: none;
            }

            .grid-container {
              display: grid;
/*              grid-template-columns: 30px 80px 30px 80px 30px 80px;*/
              grid-template-columns: auto auto auto auto;
            }
            .grid-item-label {
              color: darkblue;
              font-size: 0.875em;
              text-align: center;
             }
            .grid-item-input {
              color: red;
              font-size: 0.875em;
             
            }
          </style>
        </head>

        <script>

          function cancel_dlg() {sketchup.cancel_dlg() }

          document.onkeydown = function(evt) {
            evt = evt || window.event;
            if (evt.keyCode == 13) {
              send_dlg_optns();
            }
            if (evt.keyCode == 27) {
              cancel_dlg();
            }
          }
        </script>

        <body>

          <div class="grid-container">
            <div class="grid-item-label">1:</div>
            <div class="grid-item-input">test 1</div>
            <div class="grid-item-label">2:</div>
            <div class="grid-item-input">test 2</div>
            <div class="grid-item-label">3:</div>
            <div class="grid-item-input">test 3</div>
            <div class="grid-item-label">4:</div>
            <div class="grid-item-input">test 4</div>
            <div class="grid-item-label">5:</div>
            <div class="grid-item-input">test 5</div>
            <div class="grid-item-label">6:</div>
            <div class="grid-item-input">test 6</div>
            <div class="grid-item-label">7:</div>
            <div class="grid-item-input">test 7</div>
            <div class="grid-item-label">8:</div>
            <div class="grid-item-input">test 8</div>
            <div class="grid-item-label">9:</div>
            <div class="grid-item-input">test 9</div>
            <div class="grid-item-label">10:</div>
          </div>

          <p>
          <div style="text-align: center">

            <input type="button" value="Create Model" onclick="send_dlg_optns()">
            <input type="button" value="Cancel" onclick="cancel_dlg()">

          </div>
          </p>

        </body>
        </html>

      HTML

      dlg_model_optns2 = UI::HtmlDialog.new(dlg_optns)
      dlg_model_optns2.set_html(dlg_html)
      dlg_model_optns2.center

      dlg_model_optns2

    end # html_dlg_model_options2(model_optns)

No errors shown in DevTools…

7

Maybe this is an issue with firewall blocking? Either corporate network, or national firewalls - some countries block large IP ranges that affect popular server services like AWS, DigitalOcean etc.

I’d recommend working with the affected users to hear if they know of any firewall, and also check with where in the world they are located. You might see a pattern that gives a clue.

1 Like