Combine Scene and Ui module

Drizzel

Hey guys,
Does anyone know how I can combine a user interface using the Ui module and a game from the scene module? When editing the .pyui file there is the option of adding a custom view, but I don't know how to display a scene game in it

omz

In your pyui file (example.pyui here), add a custom view, and set its "Custom View Class" field to SceneView. Also set the name to something unique (I've used "sceneview" in the code below), so you can get a reference to the view more easily, after loading the UI. Load the UI, and set the scene attribute of the custom view. That's pretty much it.

from scene import *
import ui

class MyScene (Scene):
    def setup(self):
        pass
        # Define your scene like usual...

v = ui.load_view('example.pyui')
v['sceneview'].scene = MyScene()
v.present('fullscreen')

wolf71

#!python3
# _*_ coding:utf-8 _*_

from scene import *
import ui

class MyScene(Scene):
	def setup(self):
		self.background_color = 'midnightblue'
		self.ship = SpriteNode('spc:PlayerShip1Orange')
		self.ship.position = self.size / 2
		self.add_child(self.ship)

v = ui.load_view('UI_with_scene.pyui')
v['sceneview'].scene = MyScene()
v.present('sheet')

# how to run MyScene in the sceneview ?
!!! set its "Custom View Class" field to SceneView

Drizzel

Great, and you both :)

rownn

Hey everyone,

thanks for these snippets. They are very useful!
But I wonder how to get the value of a slider, for example a slider named ‚slider1‘, into the MyScene class.

Thanks for every hint
Rownn

rownn

Ok, think I got it, but I‘m not sure if it is the best way.

from scene import *
import ui

class MyScene (Scene):
    def setup(self):

        print (self.view.superview['slider1'].value)

        pass
        # Define your scene like usual...

v = ui.load_view('example.pyui')
v['sceneview'].scene = MyScene()
v.present('fullscreen') ```

brumm

setup() is only called once. You might like to call a function/method for changed values. Search for Slider Attributes => Slider.action

not tested:

def setup(self):
        slider = self.view.superview['slider1']
        slider.action = self.slider_changed

def slider_changed(self, sender):
        print(sender.value)

rownn

@brumm Perfect! Works great!

rownn

Hey,

another question, which still has to do something with combining scenes and UI ... so I keep asking here. It seems that the scene is part of the UI. What would be the best way to separate them? I mean, how could I achieve a hiding/unhiding UI? Or transforming the position of the UI. Or working with several UIs in one scene at all?

sorry for asking that much at once
rownn

rownn

Ok, I think I got it. After I recognized that it is possible to add UI elements to a CustomView via long pressing and SubViews I solved the stuff this way.

Pythonista makes fun! Great and nice app!!!

——————————————————————————————————-
——————————————————————————————————
*.py

from scene import *
import ui

class MyScene (Scene):
	
	width = 900
	height = 500
	activeNode = None
	handles = ()
	menu_collapse = True
	
	def setup(self):
		ground = Node(parent=self)
		ground.position = (self.size.w/2, self.size.h/2)
		
		self.ellipse = ShapeNode(ui.Path.oval(0,0, self.width, self.height), fill_color='clear', stroke_color='#b50000')
		self.handleWidth = ShapeNode(ui.Path.oval(0,0, 10, 10), fill_color='#b50000', stroke_color='clear')
		self.handleHeight = ShapeNode(ui.Path.oval(0,0, 10, 10), fill_color='#b50000', stroke_color='clear')
		
		menuShape = ui.Path.rect(0,0,32,2)
		menuShape.append_path(ui.Path.rect(0,-8,32,2))
		menuShape.append_path(ui.Path.rect(0,-16,32,2))
		self.menu = ShapeNode(menuShape, fill_color='white', stroke_color='clear')
		self.menu.position = (24,self.size.y-20)
		
		ground.add_child(self.ellipse)
		ground.add_child(self.handleWidth)
		ground.add_child(self.handleHeight)
		self.add_child(self.menu)
		self.add_child(ground)
		
		self.handles = (self.handleWidth, self.handleHeight, self.menu)
		
		self.ui01 = self.view.superview.subviews[1]
		self.ui01.x = -400
		
		self.sliderW = self.ui01['slider-01']
		self.sliderW.action = self.sliderW_changed
		self.sliderH = self.ui01['slider-02']
		self.sliderH.action = self.sliderH_changed
		
		self.updateStuff()
		
		
	def updateStuff(self):
		self.ellipse.path = ui.Path.oval(0,0, self.width, self.height)
		self.handleWidth.position = (self.width/2,0)
		self.handleHeight.position = (0, self.height/2)
		self.sliderW.value = round(self.width/1000,2)
		self.sliderH.value = round(self.height/1000,2)
		self.ui01['label-01'].text = str(self.width)
		self.ui01['label-02'].text = str(self.height)		
		
		
	def checkTouchAndSetActiveHandle(self, touch):
		l = touch.location
		detectSize	= 20
		
		for node in self.handles:
			p = node.point_to_scene((0,0)) #.position
			if (p.x-detectSize < l.x < p.x+detectSize) and (p.y-detectSize < l.y < p.y+detectSize): 
				self.activeNode = node	
				
		
	def touch_began(self, touch):
		self.checkTouchAndSetActiveHandle(touch)
		if self.activeNode == self.menu:
			if self.menu_collapse == True: 
				self.menu.position = (424, self.size.y-20)
				self.ui01.x = 0
				self.menu_collapse = False
				
			else: 
				self.menu.position = (24, self.size.y-20)
				self.ui01.x = -400
				self.menu_collapse = True
			
		elif self.activeNode == self.handleWidth:
			self.handleWidth.path = ui.Path.oval(0,0, 50, 50)
		
		elif self.activeNode == self.handleHeight:
			self.handleHeight.path = ui.Path.oval(0,0, 50, 50)	
			
					
	def touch_moved(self, touch):
		x = touch.location.x
		y = touch.location.y
		
		if self.activeNode == self.handleWidth:
			self.width = max(0,self.handleWidth.parent.point_from_scene((x,y)).x)*2
			self.updateStuff()
			
		elif self.activeNode == self.handleHeight:
			self.height = max(0,self.handleHeight.parent.point_from_scene((x,y)).y)*2
			self.updateStuff()
		
		
	def touch_ended(self, touch):
		self.activeNode = None
		self.handleWidth.path = ui.Path.oval(0,0, 10, 10)
		self.handleHeight.path = ui.Path.oval(0,0, 10, 10)
		
		
	def sliderW_changed(self, sender):
		value = round(sender.superview['slider-01'].value*1000,2)
		sender.superview['label-01'].text = str(value)
		self.width = value
		self.updateStuff()
		

	def sliderH_changed(self, sender):
		value = round(sender.superview['slider-02'].value*1000,2)
		sender.superview['label-02'].text = str(value)
		self.height = value
		self.updateStuff()
		
		
v = ui.load_view('test-03_SceneWithUI.pyui')
v['sceneview'].scene = MyScene()
v.present('fullscreen')

——————————————————————————————————-
——————————————————————————————————
*.pyui file

[
  {
    "nodes" : [
      {
        "nodes" : [

        ],
        "frame" : "{{0, 0}, {1024, 768}}",
        "class" : "View",
        "attributes" : {
          "flex" : "WHRB",
          "alpha" : 1,
          "custom_class" : "SceneView",
          "frame" : "{{150, -10}, {100, 100}}",
          "tint_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "class" : "View",
          "uuid" : "94D2E098-8578-4C00-89C7-CFB241F4AB69",
          "background_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
          "name" : "sceneview"
        },
        "selected" : false
      },
      {
        "nodes" : [
          {
            "nodes" : [

            ],
            "frame" : "{{0, 0}, {400, 768}}",
            "class" : "View",
            "attributes" : {
              "alpha" : 0.20000000000000001,
              "flex" : "WH",
              "frame" : "{{150, 334}, {100, 100}}",
              "class" : "View",
              "background_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
              "uuid" : "863D3F2F-3606-48E0-907A-83F59724AB15",
              "name" : "view1"
            },
            "selected" : false
          },
          {
            "nodes" : [

            ],
            "frame" : "{{110, 30}, {193, 34}}",
            "class" : "Slider",
            "attributes" : {
              "flex" : "",
              "continuous" : true,
              "frame" : "{{79, 194}, {200, 34}}",
              "uuid" : "668C42E2-A62F-4A49-9460-E3150C231B61",
              "class" : "Slider",
              "value" : 0.5,
              "name" : "slider-01"
            },
            "selected" : false
          },
          {
            "nodes" : [

            ],
            "frame" : "{{310, 30}, {70, 34}}",
            "class" : "Label",
            "attributes" : {
              "font_size" : 18,
              "text_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
              "frame" : "{{104, 195}, {150, 32}}",
              "uuid" : "BED64DBB-5A87-491A-BE29-FEE43749DC87",
              "class" : "Label",
              "alignment" : "left",
              "text" : "0.5",
              "name" : "label-01",
              "font_name" : "<System>"
            },
            "selected" : false
          },
          {
            "nodes" : [

            ],
            "frame" : "{{25, 30}, {75, 34}}",
            "class" : "Label",
            "attributes" : {
              "alpha" : 1,
              "font_size" : 18,
              "text_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
              "frame" : "{{125, 64}, {150, 32}}",
              "uuid" : "4796A6EA-2337-4F70-8E9E-09B097F7B271",
              "class" : "Label",
              "alignment" : "left",
              "text" : "Width",
              "name" : "label1",
              "font_name" : "<System>"
            },
            "selected" : false
          },
          {
            "nodes" : [

            ],
            "frame" : "{{25, 80}, {75, 34}}",
            "class" : "Label",
            "attributes" : {
              "alpha" : 1,
              "font_size" : 18,
              "text_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
              "frame" : "{{125, 64}, {150, 32}}",
              "uuid" : "AD165DAE-C1EE-42EB-8035-5DCE2BFFFDF2",
              "class" : "Label",
              "alignment" : "left",
              "text" : "Height",
              "name" : "label2",
              "font_name" : "<System>"
            },
            "selected" : false
          },
          {
            "nodes" : [

            ],
            "frame" : "{{110, 80}, {192, 34}}",
            "class" : "Slider",
            "attributes" : {
              "flex" : "",
              "continuous" : true,
              "frame" : "{{100, 63}, {200, 34}}",
              "uuid" : "F61A2731-DA26-4E24-9648-45B15D58D991",
              "class" : "Slider",
              "value" : 0.5,
              "name" : "slider-02"
            },
            "selected" : false
          },
          {
            "nodes" : [

            ],
            "frame" : "{{310, 80}, {70, 34}}",
            "class" : "Label",
            "attributes" : {
              "font_size" : 18,
              "text_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
              "frame" : "{{125, 64}, {150, 32}}",
              "uuid" : "A30D7411-95D9-4E3D-8AAF-EC1264C70D86",
              "class" : "Label",
              "alignment" : "left",
              "text" : "0.5",
              "name" : "label-02",
              "font_name" : "<System>"
            },
            "selected" : true
          }
        ],
        "frame" : "{{0, 0}, {400, 768}}",
        "class" : "View",
        "attributes" : {
          "flex" : "H",
          "alpha" : 1,
          "frame" : "{{462, 334}, {100, 100}}",
          "tint_color" : "RGBA(1.000000,0.347826,0.021739,1.000000)",
          "uuid" : "B1E5A256-9CE8-4B7E-962E-FD577172D67D",
          "class" : "View",
          "name" : "menu-01"
        },
        "selected" : true
      }
    ],
    "frame" : "{{0, 0}, {1024, 768}}",
    "class" : "View",
    "attributes" : {
      "flex" : "",
      "custom_class" : "",
      "enabled" : true,
      "tint_color" : "RGBA(0.000000,0.478000,1.000000,1.000000)",
      "border_color" : "RGBA(0.000000,0.000000,0.000000,1.000000)",
      "background_color" : "RGBA(1.000000,1.000000,1.000000,1.000000)",
      "name" : ""
    },
    "selected" : false
  }
]

cvp

@rownn said:

Pythonista makes fun! Great and nice app!!!

That's sure

Drizzel

@rownn I never tried moving UIs, except for using the bring_to_front() and move_to_back() option. Thanks for positing the solution to your questions, might help me at some point :)

Oh, and Pythonista definitely is a great app

Tey

@rownn

Hi, I’d like to try your example

Tey

@rownn I’d like to run your example posted two months ago but I don’t know how to convert the text for the .pyui file into an actual .pyui file. I’m brand new to Pythonista.

wnMark

@Tey rename the file extention in pyui

Tey

@wnMark
So simple. Thanks!