Maya GUI with image map - arbitrary hitbox


#1

Hi. Long time no see. But eventually find myself back here. Great community.
I was looking into building more complex UI:s in Maya using PySide2 or QML. What I’m looking for is to create something like this. Arbitrary shaped hitboxes.

Not really sure what he uses, but the type of things I’m interested in can be achieved in HTML. however I’m not sure if it is possible in Qt this way. There used to be HTML support in Maya, right? like back in v6? https://www.youtube.com/watch?v=prU2MYPMoiw

So I’m eager for anyones ideas or tips really.
Keep it up!


#2

Qt does have the ability to render html, but I don’t know if those libraries are exposed to PySide (or if they were included in the Maya at all).

But using Qt, you should be able to acquire the coordinate in a Widget that the user has clicked, and filter down to a specific event.


#3

Oh thank you. That was a super fast reply! :light_smile:
Yes, must have been someone who has done this. Can’t find any info on the subject though


#4

Hey - look up QGraphicsView and QGraphicsScene.

The QGraphicsScene is a special kind of widget which allows you to paint items on a canvas and define how they draw and what actions occur when you interact with them etc.

Essetially you create a graphics scene, then you add items to the scene. Those items could be simple circles, rectangles etc - or they could be custom items which draw they own shapes using paths or images. Because items are classes, you can then override the mouse events, the paint events and most other things too.

As you progress you can utilise script jobs to make the panel bi-directional too, for instance in that video he clicks an item in the panel and it selects the control in the rig, it can be a nice polish feature to have the panel update live as you select things in the scene as well :slight_smile:

This is a very simple example of code:

That is doing the bare minimum to add something to the scene (the text item). Whilst this is a more thorough example:

Dont be put off by the amount of math in the second example, that can largely be ignored (because its creating a dynamic spring effect between the nodes). But it shows creating custom items and defining their draw behaviours etc.

Hope that helps a little - and please post any questions, we’re all more than happy to help!