Modus Bootstrap issues HTML dialog

Developers Ruby API
, ,
1

A im working on this extension:

mw_material_skimmer.rbz (12,9 MB)
There are 4 tab panes and a column with navigation ‘nav-pills’ on the left. The Welcome tab and material tab works fine, but the folder tab and activity tab seems to start under the material tab:
MaterialSkimmer

Also, the material tab does not take the full width of the dialog, therefore not displaying the map textures horizontally under the main texture image:
materialtab
It looks as if it is not taking the full width from the initial dialog size (there are 12 columns in the modus bootstrap)
Any ideas where to look?

2

I’m not up on all the nuances of Modus, but in dealing with style for web dialogs I often must use width: -webkit-fill-available; to get the content of a <div> or whatever to fill the width.

3

A couple of things..

There are two css files. One in main, the other in /css. Remove from main.

The html formatting is hard to read.

There’s an extra <style></style> at the top.

In the css, remove:

/* Material Tab Specific Styles */
#material {
  display: flex;
  flex-direction: column;
  height: 100%; /* Take full height of tab-content */
}

The panel content should now be at the top.

The extension loads with errors for me. It’s interesting. I’m going to look at the materials stuff later.

1 Like
4

I am not that organized…I know I should be, slowly getting the hang on it.
These errors where probably due to the fact I shipped the log file as well?
One can also submit feedback in the welcome tab😉

image
image872×553 29.8 KB

Currently developing live in Sketchup 2024 %appdata% and then copying working builds in 2025 so I can go back, not the best practice, but learning a lot, though…
Will dive into your suggestions!

5

I was wanting to ask you if your style comes from C++ coding?

Eh, I should have written that I was running MW Material Skimmer in SU '25. I also often have a year on year set up and go back and forth.

The load errors come from:

require 'zip'

require 'nokogiri'

They’re in a few places. I commented them out and all is good in the world. I don’t know about ruby gems or nokogiri or what they’re supposed to do here or if anything else broke.

The logging seems to work… at least launching the Html Dialog.

logs 
2025-03-27 23:26:28: get_version callback triggered
2025-03-27 23:26:45: select_file callback triggered with params: "D:/SketchUp/Resources/PBR/Brick/Brick_21_1K.skm"
2025-03-27 23:26:45: File selected: D:/SketchUp/Resources/PBR/Brick/Brick_21_1K.skm
2025-03-27 23:26:45: File size: 5870077 bytes
2025-03-27 23:26:45: Successfully opened ZIP file: D:/SketchUp/Resources/PBR/Brick/Brick_21_1K.skm
2025-03-27 23:26:45: RGB value: (96, 58, 28). Has texture: 1
2025-03-27 23:26:45: path to texture_element: red_bricks_04_diff_1k_1.png
2025-03-27 23:26:45: PBR Texture extracted: red_bricks_04_rough_1k_2.png
2025-03-27 23:26:45: PBR Texture extracted: red_bricks_04_nor_dx_1k_3.png
2025-03-27 23:26:45: PBR Texture extracted: red_bricks_04_ao_1k_4.png
2025-03-27 23:26:45: texture entry found: red_bricks_04_diff_1k_1.png
2025-03-27 23:26:45: Texture extracted from D:/SketchUp/Resources/PBR/Brick/Brick_21_1K.skm
2025-03-27 23:26:45: title_element: Brick_21_1K
2025-03-27 23:26:45: Extracted title: Brick_21_1K
2025-03-27 23:26:45: Thumbnail extracted from D:/SketchUp/Resources/PBR/Brick/Brick_21_1K.skm
2025-03-27 23:26:45: Garbage collected...
2025-03-27 23:50:14: get_version callback triggered
2025-03-28 00:05:50: get_version callback triggered
2025-03-27 20:10:00: get_version callback triggered
2025-03-27 20:11:46: get_version callback triggered
2025-03-27 20:12:32: get_version callback triggered
2025-03-27 20:36:02: select_folder callback triggered
2025-03-27 20:41:27: get_version callback triggered
2025-03-27 20:43:09: get_version callback triggered
2025-03-27 20:43:14: select_folder callback triggered
2025-03-27 20:43:57: get_version callback triggered
2025-03-27 20:44:38: select_file callback triggered with params: nil
2025-03-27 20:46:13: get_version callback triggered
2025-03-27 20:51:55: get_version callback triggered
2025-03-27 20:57:08: get_version callback triggered
2025-03-28 09:23:23: get_version callback triggered
2025-03-28 09:24:03: get_version callback triggered
2025-03-28 09:32:52: show_logs callback triggered

Your file selection works.
The Submit feedback seems to work (opened at, didn’t send). Browse seems like it will work.

Your Recent Material dropdown is Modus 4 vs. Modus 5 - what you are using. So you can replace this:

material-name-input 
<div class="input-group mb-3">
  <input type="text" class="form-control" id="material-name-input" value="dummy material.skm">
  
  <button class="btn btn-outline-secondary" type="button" id="browse-button">Browse</button>
  
  <button class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
          data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Recent</span>
  </button>
  
  <ul class="dropdown-menu dropdown-menu-end" id="recent-files-dropdown"></ul>
</div>

And then style like this:

css 
#recent-files-dropdown {
  min-width: 200px;
}

Or

#recent-files-dropdown {
  width: 100%; /* Match parent width if needed */
}

Or however you choose.

Just to point at some hassle points… sometimes (but your stuff is working) you might do something like:

jsdelivr 
  <link href="https://cdn.jsdelivr.net/npm/@trimble-oss/modus-bootstrap@2.0.8/dist/css/modus-bootstrap.min.css" rel="stylesheet">

And/or,

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

I don’t have Node installed or anything so sometimes those are easier if you can’t get Modus/Bootstrap/whatever working.

When you first posted this I took it and stripped it apart and kind of made my own template out of it. So thanks for sharing it. It’s interesting that you have callbacks in utils and your welcome_tab gets versions and you have the SharedConstants in another area. It was like a story with a twist :slight_smile:

6

Not especially from C++, just collecting stuff from AI agents. I started with a post suggesting gsub from the xml’s but figured I wanted a better way to extract xml’s and started thinking about classes, having a more structured way of setting things up. Thanks to the excellent templates from @DanRathbun trying to implement it for future set up. But then I got another idea and start wondering another path, forgetting what the original goal was etc.
And than the clock hits, so the next day I don’t know wat I did why:)

7

It is easier to have your extension code in a common development location and use @thomthom’s Extension Sources extension to load and test them in various SketchUp versions.

2 Likes
8

I have used String#scan in the past to extract certain XML elements from a XML file that I’ve read into a string.

There is also the REXML library that is bundled with Ruby. It has the advantage that it does not need to be compiled and deployed like Nokogiri.

9

My companion Gemini said “it would do a better job” and I am like, well let’s install a gem!
It’s in the name, I guess:)

10

MS Copilot says in summary ..

If performance and advanced querying capabilities are crucial for your project, Nokogiri is typically the better choice. However, if simplicity and pure Ruby are key priorities, REXML might be more suitable.

I’ve looked at the XML in the SKM archives and (in my opinion) they are so simple that I would never complicate the code and bloat an extension using Nokogiri.

The SketchUp Extensibility team strongly recommends that gems be wrapped up into your extension’s namespace module. This usually means for non-pure Ruby gems, that you need to tweak the C code and recompile a dedicated edition of Nokogiri inside your extension.

Is this trip really necessary?

1 Like
11

I will reconsider my decision. I had the ifc schema in mind, which is a lot more complicated.

12

I haven’t checked for a while, but I believe Nokogiri cannot be compiled using an ‘mswin’ Ruby build, which is what Windows SU uses.

It does compile with ‘ucrt’ Ruby. I recall that it will load with SU, but it would need to be tested with SU’s Ruby to make sure everything works.

Don’t recall if I tried it on macOS…

13

That’s how I started my template too. :wink:

I saw you had vendor (like SketchUp team example) and the gems and thought I better have a closer look. Thought I might find a new secret! But it looks like that secret is: keep it simple.