Local external files referenced by HtmlDialog

I’m having trouble getting my HtmlDialog to load external files. Not even the SketchUp Modus UI files will load.

As you can see the Modus directories are where they should be.
Also my own external files are not loaded. They are reported by the web-page console in a directory where they are not located. See below.

They are the bottom 2 files of the 3 files highlighted in this directory and referenced by the html file, the first of the 3 files highlighted. See below.

In the html I just give the name of the files as references. This is how W3 Schools says it should be done for files in the same directory as the web-page which needs them.

Here is how I reference the js file. See below.

Any help appreciated.

You are refrénig to some files here

…but you did not shown us what is inside the vendor/modus folder.

the files modus.min.css, jquery.js… etc. should be on that folder that you are referring to in the html file.
The DevTools window show that this files can not be loaded, I assume because these are not there.

Regarding API WebDialogs and perhaps HtmlDialogs, they used to copy the html file to the Local TEMP folder. This may be why the Chrome DevTools is looking there. But I notice for some reason it is looking in the parent of the local TEMP folder.

  1. I would suggest first to reboot your computer. (This will clear out any memory errors.)

  2. Then rerun the SketchUp installer (via right-click “Run as administrator”) and choose the Repair option.

  3. Reboot again for good measure. (Generally with installers there can be install tasks to do after the reboot.)

  4. Retest the extension.

Other questions:

  • Does the extension dialog load correctly in SketchUp 2021 or earlier ?
    Ie, can we isolate this issue to only SketchUp 2022 ?

The html file is looking in temp’s parent directory because in mad desperation I tried putting a …/ in front of the file names in that iteration of my code. What you say about SketchUp moving the file to the temp directory makes sense.

I tried fixing my installation of SU2022 but the html file still looks for the missing files in C:/Users/Francis/AppData/local/temp. As you say, maybe because SketchUp puts it there. As a temporary fix I could pack my external css and js into the html file again but that would leave the Modus files not found. They are not critical but SketchUp wants them to standardise formating.

I tested the extension in SU2020 but when I wrote the extension licence permission code into the ew.lic file on my SU2020 subdirectory it wouldn’t work. I have temporarily disabled the licence code in my extension just to test it in the SU2020version. The html file is still looking for the missing files in C:/Users/Francis/AppData/local/temp. See below

The directories starting with vendor/modus are part of Sketchup’s Modus webdialog styling and standardisation kit. The files needed for it are in the directories. I didn’t show them for brevity and convenience. Believe me, the files are there. My own files are on the extension directory but the html file which forms the HtmlDialog looks for them on the AppData/local/temp directory. As Dan wrote, this is likely because SketchUp has copied and run the html file from this directory. SketchUp would need to either run the html from the extension directory or copy the css and js files to the AppData/local/temp directory, including its own Modus files.

Could you type window.location.href in the html dialog console?
How do you assign your path to your HtmlDialog?

I could try to find where the dialog is but I suspect that not only does SketchUp run the page from a different directory but also changes its name. I have no control over what SketchUp does so I think this is an issue for SketchUp to deal with in a way that works as simply as possible for developers.

Neither is the Modus kit found, and this is a SketchUp recommended standardisation kit.

I think I may be best to pack the css and js into the html file and accept for now that the Modus kit doesn’t load, for now.

From what I see this is not related to modus but something going on with loading in relative resources. This is not supposed to happen and many of the UI’s of my tools are setup this way without any issue. I believe something else is going on.

Could you type window.location.href in the html dialog console?

How do you assign your path to your HtmlDialog ?

1 Like

I second this! I’ve not had a problem either. This is why I suspected a bad install or memory corruption (which would go away with a machine reboot.)

I am starting to have the impression that from ruby you read in the contents of your *.html file and then pass that as a string to the HtmlDialog using set_html, instead of set_file(filename) with a path to your html file. That would clarify why the page thinks it is running in AppData and that you cannot find the actual html file and that the browser cannot find any external resources it is reffering to.

I am even more confident now that I have setup this quick test:

using set_html will not work when working with external references. You should use set_file(path_to_file)


In self.create_dialog I assign

html_file_path = File.join(__dir__, 'windowPlusSuHtmlDialog.html')

Yes, but what is more important, is that you then read in the contents of that file and next you assign that content to the HtmlDialog using set_html.
Do not do that. Use set_file instead. I cannot see all code, but do something like dialog.set_file(html_file_path)


Now, I believe you are reading in the contents in ruby and then replace some values, before you send it to the dialog. Obviously, with set_file you cannot do that anymore and you will need to use another mechanism to get state from SketchUp into your UI (using execute_script).

If you are not comfortable with that and want to keep using set_html, I would suggest that you also replace the paths to the external files in your html dialog with absolute file:// paths. So, first from ruby, construct the absolute paths and then replace them in your html string.

1 Like

If you are going to use #set_html (as I do) then you must also read the css and all the js files into Ruby strings and insert them into the html string.

I do this as well. But I use %{key} replacement parameters in the html file.

So for example, within your "windowPlusSuHtmlDialog.html" file:

<!DOCTYPE html>
  <!-- etc., etc. -->

And then in your Ruby you load the resource files into a hash of strings:

html = File.read(html_file_path)

resources = Hash[
  :modus, File.read(modus_file_path),
  :bootstrap, File.read(bootstrap_file_path),
  :vue, File.read(vue_file_path),
  :wPlusStyles, File.read(wPlusStyles_file_path),

# Replace %{parameters} in HTML text with resource strings,
# and pass it to the dialog object:
dialog.set_html( html % resources )

For information on how the % method replaces %{parameters} with string values in a hash identified by matching symbol keys, see the Ruby Core Doc for the String#% method. (The 3rd example shows the replacement of %{foo} in a string with the value keyed by :foo in the argument hash.)

Now the real benefit isn’t so much with the resources, it is when we need to dynamically build parts of the html <body> such as dynamically populating controls or stuffing model data into a table.

For this I use little HTML template fragments for say a table row with each data fields
being a %{fieldname} replaceable parameter. And then I’ll use that HTML fragment in an iterator block repeatedly stuffing data into it using the String#% method.

After I have the table body string all built up, I’ll put it into the hash with the other replacement strings identified with say a :table_data key, and when I do the replacement on the html file text, it will replace the %{table_data} parameter within the <tbody> element in the HTML.


Oh … BTW, we prefer you post code not images. It is not always to zoom into the images. They just get blurry and I have enough problems with my eyes lately.

Yes, that is what I am doing. I have read Dan’s posts and will try to do what he is suggesting. Reading the text of the css and js files and pasting them into the html files, properly tagged, should work and I think I can do that.

I’ll post code in future. I too have eye issues lately.

I’ll write a post to let the forum know if what you suggest worked for me. Either later today or early next week probably.

Thank you! This works fine.

1 Like