Live preview of java swing

Product Wishlist SDK and API
1

Summary

Live preview of java swing installation, program and toolbar views.

What is it?

live preview of java swing view representation with URcap styleguide-compliant styling and a polyscope window border wrapper to accelerate UI development.

Why is it needed?

UI design time is currently very slow. a single change to the view involves many tens of seconds every time on the fastest hardware. Its worse for lesser hardware. Kill the sim, make the change, build the mvn project, boot the sim, load test program, see what you didnt do right, repeat.

Even the best world class ui devs would benefit from live preview.

The UI development would be greatly accelerated if there was a way to view a live preview.

(personally i prefer VSCode; so I am partial to a VSCode extension for this but I would be happy with a live preview of any sort)

3 Likes
2

Hi RogueBuck
I usualy add some code ala this:

public static void main(String[] args) {
    JFrame frame = new JFrame();
    JPanel panel = new JPanel();
    frame.setPreferredSize(Style.DimentionSize.INSTALLATION_BODY_DIMENSION.getDimension());
    frame.setMaximumSize(Style.DimentionSize.INSTALLATION_BODY_DIMENSION.getDimension());
    panel.setPreferredSize(Style.DimentionSize.INSTALLATION_BODY_DIMENSION.getDimension());
    panel.setMaximumSize(Style.DimentionSize.INSTALLATION_BODY_DIMENSION.getDimension());
    InstallNodeView view = new InstallNodeView(null);
    view.buildUI(panel, null);
    frame.add(panel);
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    frame.pack();
    frame.setVisible(true);
  }

In the bottom of all my View files, In eclipse I can now right click on the file and chose run as Java application.
This should then show an approximate version of your view.

2 Likes
3

Can you share what the values some of those sizes are returning? I don’t have those functions in my class it seems.

4

:clap: that is clever! I never thought to add main().

Do you see any side effects of this? does the URCap build as normal with this included? Or do you remove it before running the maven build?

5

I think you comment it back out prior to running your full build. You also won’t be able to verify interaction with the contribution, since that file isn’t running (most likely) but for quickly laying out components, this is a HUGE time saver already. I notice it’s not EXACTLY the same as the simulator in terms of screen placement, but it’s definitely a good starting point.

1 Like
6

ya, I agree. i think best practice is probably to comment it out, i was just curious if @cg1 had tried leaving it in. Ill try it and see what happens. I realize it wont interact with the contribution, that is fine. Just seeing the dead, estimated, UI elements on the screen is going to speed me up

7

I changed “InstallNodeView” to the name of my installation node view, but i still get a null pointer exception on the view.buildUI(panel, null) line.

8

Yeah, the downside of doing it this way is that you do need to handle the case where where the provider is null in an apropiate manner.
This do mean that all most all events like mouse clicks to show a keybord and so on wont work properly.
I have tired to get the contribution to work with it but have not succeded.

I have always left this piece of the code in the URcap and havn’t seen any proplems so far.

Should properly have mentioned this but the Style Class is a personal implementation of the style guide found here:
https://www.universal-robots.com/articles/ur/urplus-resources/urcap-download-center/

Just Glad I could Help.

9

Yeah I have a Style class as well, I was just curious what you had for the frame size and such. I used what’s in the style guide (1080, 626) but it didn’t seem like it was quite the same size as the actual installation page. Maybe it is and it’s just not including the the panel on the left and such

10

The problem is that the TItle size is not accommodated for, in the height,
and the padding for the width, when the raw numbers from the style guide is used.
Through trial and error,l I have found the title height to be about 80px
and the padding for the width is also given in the style guide as:
Install body padding = 10px
program body padding = 17px
Remember that you have a piece of padding on each side so you should multiply the number with 2.

This should help you get something alot closer to the real panel size.

11

If you want to get mouse clicks to work you can create “Mock” classes that implements URs own classes and use them in your preview test. I would recommend making it to it’s own maven package that you can include, then you can reuse it in new projects.

It is still not 100% the same as UR but depending on have much you implement and how you do it, it can be pretty similar. I have worked on this at work, that’s also why I can’t provided code.

The DataModel class is the most annoying one to create.

12

Hi all,

Came across this:

provides a ‘test’ class for previewing the UI elements

2 Likes