https://wiki.reallusion.com/index.php?title=IC_Python_API:Embedding_QML&feed=atom&action=historyIC Python API:Embedding QML - Revision history2024-03-28T20:54:25ZRevision history for this page on the wikiMediaWiki 1.26.2https://wiki.reallusion.com/index.php?title=IC_Python_API:Embedding_QML&diff=4819&oldid=prevChuck (RL): /* Everything Put Together */2020-10-26T06:56:57Z<p><span dir="auto"><span class="autocomment">Everything Put Together</span></span></p>
<table class='diff diff-contentalign-left'>
<col class='diff-marker' />
<col class='diff-content' />
<col class='diff-marker' />
<col class='diff-content' />
<tr style='vertical-align: top;' lang='en'>
<td colspan='2' style="background-color: white; color:black; text-align: center;">← Older revision</td>
<td colspan='2' style="background-color: white; color:black; text-align: center;">Revision as of 06:56, 26 October 2020</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l50" >Line 50:</td>
<td colspan="2" class="diff-lineno">Line 50:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Everything Put Together ==</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>== Everything Put Together ==</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color:black; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:ic_python_api_embedding_qml_02.gif|frame]]</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>You can copy and paste the following code into a PY file and load it into iClone via '''Script > Load Python'''. Make sure to have both '''famous_quotes.qml''' and '''QuoteButton.qml''', mentioned in the previous step, extracted to the same directory.</div></td><td class='diff-marker'> </td><td style="background-color: #f9f9f9; color: #333333; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #e6e6e6; vertical-align: top; white-space: pre-wrap;"><div>You can copy and paste the following code into a PY file and load it into iClone via '''Script > Load Python'''. Make sure to have both '''famous_quotes.qml''' and '''QuoteButton.qml''', mentioned in the previous step, extracted to the same directory.</div></td></tr>
</table>Chuck (RL)https://wiki.reallusion.com/index.php?title=IC_Python_API:Embedding_QML&diff=4817&oldid=prevChuck (RL): Created page with "{{TOC}} {{Parent|IC_Python_API#Sample_Code_Snippets|Sample Code Snippets}} This short article will go over the embedding process of a custom QML UI file into an iClone dialog..."2020-10-26T03:01:32Z<p>Created page with "{{TOC}} {{Parent|IC_Python_API#Sample_Code_Snippets|Sample Code Snippets}} This short article will go over the embedding process of a custom QML UI file into an iClone dialog..."</p>
<p><b>New page</b></p><div>{{TOC}}<br />
{{Parent|IC_Python_API#Sample_Code_Snippets|Sample Code Snippets}}<br />
<br />
This short article will go over the embedding process of a custom QML UI file into an iClone dialogue window.<br />
<br />
== Preparing the QML File ==<br />
<br />
[[File:Ic_python_api_embedding_qml_01.png|frame]]<br />
<br />
In order to start writing QML code, you'll need to download Qt Creator Community edition: https://www.qt.io/download-open-source. Writing the actual QML code is not within the scope of this essay, but nothing is stopping you from opening and studying example QML files with Qt Creator.<br />
<br />
For this example, we have a QML that provides buttons for famous historical figures. When a button is pressed, a quote by him/her is then printed to the text-block to the top. Everything in this UI file is practically self-contained, in that interactions with this UI will not call outside functions in the iClone environment. The only topic we will focus on is the embedding process.<br />
<br />
== Required Modules ==<br />
<br />
Besides the rudimentary Reallusion Python module, we'll also need '''Pyside2''' to build the user interface, and '''os''' for locating the UI file.<br />
<br />
<syntaxhighlight lang="python"><br />
import RLPy<br />
import os<br />
import PySide2<br />
from PySide2.shiboken2 import wrapInstance<br />
from PySide2.QtCore import *<br />
</syntaxhighlight><br />
<br />
== Embedding the QML File ==<br />
<br />
Embedding QML files is still relatively straight-forward. All in all, it's quite similar to embedding a regular QT UI file with the addition of few extra steps. This includes embedding a QML file into a '''QQuickWidget''' and adding that to the dialog window layout. You can download the QML files [[Media:Famous_quotes.zip| here]], and extract the two items into a designated directory.<br />
<br />
<syntaxhighlight lang="python"><br />
# Creating iClone dialogue window<br />
main_dlg = RLPy.RUi.CreateRDialog()<br />
main_dlg.SetWindowTitle("Famous Quotes")<br />
<br />
# Deploy Qt functionality on the dialogue window<br />
main_pyside_dlg = wrapInstance(int(main_dlg.GetWindow()), PySide2.QtWidgets.QDialog)<br />
<br />
# Embed the QML file<br />
main_dlg_view = PySide2.QtQuickWidgets.QQuickWidget()<br />
main_dlg_view.setSource(QUrl.fromLocalFile(f"{os.path.dirname(__file__)}/famous_quotes.qml"))<br />
main_dlg_view.setResizeMode(PySide2.QtQuickWidgets.QQuickWidget.SizeRootObjectToView)<br />
main_qml = main_dlg_view.rootObject()<br />
<br />
# Add widget to layout<br />
main_pyside_dlg.layout().addWidget(main_dlg_view)<br />
main_pyside_dlg.adjustSize()<br />
<br />
main_dlg.Show()<br />
</syntaxhighlight><br />
<br />
== Everything Put Together ==<br />
<br />
You can copy and paste the following code into a PY file and load it into iClone via '''Script > Load Python'''. Make sure to have both '''famous_quotes.qml''' and '''QuoteButton.qml''', mentioned in the previous step, extracted to the same directory.<br />
<br />
<syntaxhighlight lang="python"><br />
import RLPy<br />
import os<br />
import PySide2<br />
from PySide2.shiboken2 import wrapInstance<br />
from PySide2.QtCore import *<br />
<br />
<br />
# Creating iClone dialogue window<br />
main_dlg = RLPy.RUi.CreateRDialog()<br />
main_dlg.SetWindowTitle("Famous Quotes")<br />
<br />
# Deploy Qt functionality on the dialogue window<br />
main_pyside_dlg = wrapInstance(int(main_dlg.GetWindow()), PySide2.QtWidgets.QDialog)<br />
<br />
# Embed the QML file<br />
main_dlg_view = PySide2.QtQuickWidgets.QQuickWidget()<br />
main_dlg_view.setSource(QUrl.fromLocalFile(f"{os.path.dirname(__file__)}/famous_quotes.qml"))<br />
main_dlg_view.setResizeMode(PySide2.QtQuickWidgets.QQuickWidget.SizeRootObjectToView)<br />
main_qml = main_dlg_view.rootObject()<br />
<br />
# Add widget to layout<br />
main_pyside_dlg.layout().addWidget(main_dlg_view)<br />
main_pyside_dlg.adjustSize()<br />
<br />
main_dlg.Show()<br />
</syntaxhighlight><br />
<br />
=== APIs Used ===<br />
<br />
You can research the following references for the APIs deployed in this code.<br />
<br />
<div style="column-count:4; -moz-column-count:4; -webkit-column-count:4"><br />
* [[ IC_Python_API:RLPy_RUi#CreateRDialog | RLPy.RUi.CreateRDialog() ]]<br />
</div></div>Chuck (RL)