First I wanted to write step-by-step tutorial, but there is not so much to write. The code is pretty simple and everybody who knows python and/or HTML/CSS should understand it. The code is written with one of the latest Panda builds in Ubuntu 14.04 Trusty. I can’t guarantee that this code will work properly on other platforms.
Code demonstrates some simple GUI elements and very-very simple interaction.
script.py:
# coding: utf-8
from direct.showbase.ShowBase import ShowBase
from panda3d import rocket
from _rocketcore import *
from _rocketcontrols import *
# Dirty hack
event = None
this = None
document = None
class MyRocket( ShowBase ):
"""docstring for MyRocket"""
def __init__( self ):
ShowBase.__init__( self )
LoadFontFace( "data/DejaVuSansMono.ttf" )
self.region = rocket.RocketRegion.make( "PandaRocket", base.win )
self.region.setActive( 1 )
ih = rocket.RocketInputHandler()
base.mouseWatcher.attachNewNode( ih )
self.region.setInputHandler( ih )
self.context = self.region.getContext()
self.main_window = self.context.LoadDocument( "data/main_window.rml" )
self.modal_window = self.context.LoadDocument( "data/modal_window.rml" )
greet_btn = self.main_window.GetElementById( "greet-btn" )
greet_btn.AddEventListener( "click", self.Greet, True )
hide_modal_btn = self.modal_window.GetElementById( "modal-hide-btn" )
hide_modal_btn.AddEventListener( "click", self.HideModal, True )
if self.main_window:
self.main_window.Show()
def Greet( self ):
text_field = self.main_window.GetElementById( "name" )
greeter = self.modal_window.GetElementById( "greeter-lbl" )
greeter.inner_rml = text_field.value
if self.modal_window:
self.modal_window.Show()
def HideModal( self ):
self.modal_window.Hide()
rock = MyRocket()
rock.run()data/main_window.rml:
<rml>
<head>
<link type="text/css" href="master.rcss"/>
<title>Window</title>
</head>
<body class="main-window">
<p class="info-text">
Input your name in the text field and click the "Hello!" button and the program will greet you.
</p>
<button id="greet-btn" class="dumb-button">Hello!</button>
<input type="text" id="name" class="text-input"/>
</body>
</rml>data/modal_window.rml
<rml>
<head>
<link type="text/css" href="master.rcss"/>
<title>Greetings Window</title>
</head>
<body class="modal-window">
<p>
Hello, <span id="greeter-lbl"></span>
</p>
<button id="modal-hide-btn" class="modal-hide-btn">Close</button>
</body>
</rml>data/master.rcss
body{
width: 800px;
height: 600px;
margin: auto;
font-family: "Perspective Sans";
background-color: #DFD;
color: #000;
}
.dumb-button {
display: inline-block;
height: 25px;
width: 150px;
background-color: #3D3;
color: #050;
font-family: "Perspective Sans";
font-size: 20px;
text-align: center;
float: right;
margin-right: 10px;
}
.info-text {
font-size: 20px;
margin: 10px;
display: inline-block;
}
.modal-window {
background-color: #9F9;
color: #000;
width: 400;
height: 200;
font-size: 25px;
padding: 10px;
}
.text-input {
display: inline-block;
width: 600px;
height: 25px;
background-color: #8F8;
border-style: solid;
border-color: #000;
font-size: 20px;
margin-left: 10px;
}
.modal-hide-btn {
display: block;
height: 25px;
width: 150px;
background-color: #3F3;
color: #050;
text-align: center;
float: right;
margin-top: 145px;
}Don’t forget to create data folder in the same directory with script.py and put in than folder some handy font. If everything is done fine, you will see something like this:
I hope, this post will help you to start making some interfaces with RocketGUI.