Difference between revisions of "IC Python API:Icons and Images"

From Reallusion Wiki!
Jump to: navigation, search
m
m (Icons and Images)
 
(2 intermediate revisions by the same user not shown)
Line 25: Line 25:
 
== Icons and Images ==
 
== Icons and Images ==
  
Qt supports the following images formats:
+
You are advised to use SVG files for button icons because they support lossless scaling.  Which is to say they maintain good image quality at any scale level, save the extremely tiny where smudging may occur. Qt supports the following images formats:
  
 
{|class = "wikitable"
 
{|class = "wikitable"
Line 51: Line 51:
 
|Portable Network Graphics
 
|Portable Network Graphics
 
|Read/write
 
|Read/write
 +
|-
 +
|SVG
 +
|Scalable Vector Graphics
 +
|Read
 
|-
 
|-
 
|PBM
 
|PBM
Line 73: Line 77:
 
|}
 
|}
  
You'll need to download and place the following image files in the same directory as the script file in order to follow this lesson.  You can download the images directly by right-mouse clicking them.
+
You'll need to download and place the following image files in the same directory as the script file in order to follow this lesson.  You can download the images directly by right-mouse clicking them and select '''Save Link As..'''.
 
+
[[File:Doge.png]]
+
  
 +
*Image for the Doge portrait: [[Media:Doge.png]]
 +
*Image for the hand button icon: [[Media:Hand.svg]]
  
 
== Creating the User Interface ==
 
== Creating the User Interface ==
Line 134: Line 138:
 
== Everything Put Together ==
 
== Everything Put Together ==
  
You can copy and paste the following code into a PY file and load it into iClone via '''Script > Load Python'''. Make sure to download the icon and image file from the [[Icons and Images]] section and place it in the same location as the script file.
+
You can copy and paste the following code into a PY file and load it into iClone via '''Script > Load Python'''. Make sure to download the icon and image file from the [[IC_Python_API:Icons_and_Images#Icons_and_Images|Icons and Images]] section and place it in the same location as the script file.
  
 
<syntaxhighlight lang="Python">
 
<syntaxhighlight lang="Python">

Latest revision as of 00:34, 19 February 2020

Main article: RL Python Samples.
Ic python api doge petter 01.png

During your iClone Python journey, you'll eventually want to decorate your user interface with images and button icons. This article will go over just that with the creation of a Doge Petter application within iClone. We will create a portrait for Doge, a counter for the number of times Doge was petted, and finally a button for petting Doge decorated with a hand icon.

Required Modules and Global Variables

Besides the rudimentary Reallusion Python module, we'll also need Pyside2 to build the user interface. And we'll need a global variable to keep track of the number of times we Doge was petted.

import RLPy
import os
from PySide2 import QtWidgets
from PySide2.shiboken2 import wrapInstance
from PySide2.QtCore import Qt
from PySide2 import QtGui

pet_count = 0

You may have also notice two unusual modules: QtCore.Qt and QtGui. We'll need QtCore.Qt to align text within QT labels and QtGui to create the images and icones via QPixmap and QIcon respectively.

Icons and Images

You are advised to use SVG files for button icons because they support lossless scaling. Which is to say they maintain good image quality at any scale level, save the extremely tiny where smudging may occur. Qt supports the following images formats:

Format Description Qt's support
BMP Windows Bitmap Read/write
GIF Graphic Interchange Format (optional) Read
JPG Joint Photographic Experts Group Read/write
JPEG Joint Photographic Experts Group Read/write
PNG Portable Network Graphics Read/write
SVG Scalable Vector Graphics Read
PBM Portable Bitmap Read
PGM Portable Graymap Read
PPM Portable Pixmap Read/write
XBM X11 Bitmap Read/write
XPM X11 Pixmap Read/write

You'll need to download and place the following image files in the same directory as the script file in order to follow this lesson. You can download the images directly by right-mouse clicking them and select Save Link As...

Creating the User Interface

Ic python api doge petter 02.png

Next, we'll need to create the user interface for the Doge Petter application.

window = RLPy.RUi.CreateRDialog()
window.SetWindowTitle("Doge Petter")

qt_dialog = wrapInstance(int(window.GetWindow()), QtWidgets.QDialog)
qt_dialog.setFixedWidth(370)
qt_dialog.setFixedHeight(280)

# Create the doge image
doge_portrait = QtWidgets.QLabel()
doge_portrait.setFixedWidth(350)
doge_portrait.setFixedHeight(190)
doge_portrait.setPixmap(QtGui.QPixmap(os.path.dirname(__file__) + "/doge.png"))

# Create a "petting" counter
pet_string = "You have petted Doge {} times"
pet_times_label = QtWidgets.QLabel(pet_string.format(pet_count))
pet_times_label.setAlignment(Qt.AlignCenter)

# Create a "petting" button
pet_button = QtWidgets.QPushButton(text="Pet Doge")
pet_button.setFixedHeight(25)
pet_button.setIcon(QtGui.QIcon(os.path.dirname(__file__) + "/hand.svg"))

# Add all of the UI elements to the window layout
for widget in [doge_portrait, pet_times_label, pet_button]:
    qt_dialog.layout().addWidget(widget)

window.Show()

Let's Pet Doge

Ic python api doge petter 03.png

For fun and sake of completion, let's connect a function to the Pet Doge button:

def pet_doge():
    global pet_count

    pet_count += 1
    pet_times_label.setText(pet_string.format(pet_count))


pet_button.clicked.connect(pet_doge)

Everything Put Together

You can copy and paste the following code into a PY file and load it into iClone via Script > Load Python. Make sure to download the icon and image file from the Icons and Images section and place it in the same location as the script file.

import RLPy
import os
from PySide2 import QtWidgets
from PySide2.shiboken2 import wrapInstance
from PySide2.QtCore import Qt
from PySide2 import QtGui

pet_count = 0

window = RLPy.RUi.CreateRDialog()
window.SetWindowTitle("Doge Petter")

qt_dialog = wrapInstance(int(window.GetWindow()), QtWidgets.QDialog)
qt_dialog.setFixedWidth(370)
qt_dialog.setFixedHeight(280)

# Create the doge image
doge_portrait = QtWidgets.QLabel()
doge_portrait.setFixedWidth(350)
doge_portrait.setFixedHeight(190)
doge_portrait.setPixmap(QtGui.QPixmap(os.path.dirname(__file__) + "/doge.png"))

# Create a "petting" counter
pet_string = "You have petted Doge {} times"
pet_times_label = QtWidgets.QLabel(pet_string.format(pet_count))
pet_times_label.setAlignment(Qt.AlignCenter)

# Create a "petting" button
pet_button = QtWidgets.QPushButton(text="Pet Doge")
pet_button.setFixedHeight(25)
pet_button.setIcon(QtGui.QIcon(os.path.dirname(__file__) + "/hand.svg"))

# Add all of the UI elements to the window layout
for widget in [doge_portrait, pet_times_label, pet_button]:
    qt_dialog.layout().addWidget(widget)

window.Show()


def pet_doge():
    global pet_count

    pet_count += 1
    pet_times_label.setText(pet_string.format(pet_count))


pet_button.clicked.connect(pet_doge)

APIs Used

You can research the following references for the APIs deployed in this code.