How to make a professional looking UI?

Developers Ruby API
1

Dear Friends,
Attached photo shows a professional UI. I wish to learn how can we make such UI. Can you let me know how can I start?

Screenshot 2020-12-10 172326
Screenshot 2020-12-10 172326445Ă—1174 100 KB

1 Like
2

You can start with e.g.:

https://ruby.sketchup.com/UI/HtmlDialog.html

https://github.com/SketchUp/htmldialog-examples

https://forums.sketchup.com/search?q=html%20category%3A13

https://forums.sketchup.com/t/ruby-learning-resources-wikilists/22861

1 Like
3

As @dezmo said, you can create a UI with an HtmlDialog.

For the information communication between SketchUp and the UI you can apply JSON.
With JavaScript you can make specific functions on the UI functional.

1 Like
4 
dlg = UI::HtmlDialog.new(
	dialog_title:    'MAJ Stair',
	scrollable:       true,
	resizable:        false,
	width:            600,
	height:           450,
	style:            UI::HtmlDialog::STYLE_WINDOW
)

  html = <<-HTML
	<!DOCTYPE html> 
	<html> 
	<body> 
    <br>
    <select style="width:204px;height:24px;">
    <option>Steps Number</option>
    <option>Steps Riser</option>
    </select>
    <br>
    <input style="width:200px;height:20px;" type="text"/>
	</body> 
	</html>
	HTML

  dlg.set_html(html)
  dlg.center
  dlg.show

I hope you can help me to start learning. As I understand it is possible to write HTML code in Ruby Code Editor and run it. Now I can improve window. As I understood for receiving data from window, we need JSON. Is it possible to write JS code in Ruby Code Editor? In my code example how can I read a number from text box?

5

Try to think of it not to “get” and read the number but rather to “send” the number. It’s only a minor difference but important for finding the right solution to such tasks. Imagine SketchUp like a web server and the dialog like a website in a browser. The dialog invokes the action (by a button press of the user), reads the form values, builds JSON data and sends it to a Ruby action callback.

JSON is a subset of JavaScript data types that is also valid in other languages. That makes is very universal. Wherever you can write JavaScript or Ruby, you can also write JSON.

2 Likes
7

If someone have such problem I suggest visit following forum.
[Example]An example to help you how to write SketchUp Ruby code with HtmlDialog - #11 by eneroth3.
Especial thanks to Camlaman.

8

My window in HTML show stair size but also it depend on system unit. Instead of sending system unit to HTML and show right numbers there, we can write HTML code for each unit. In this way we just need send data from HTML to Ruby and now I know how to do it. Also I find following forums. Your information in this forum is so useful. Thank you.