Adam Procter

Dynamic naming of graphics and inspecting the canvas

Recommended Posts

I believe I have used name = to assign a dynamic name to each of my icons. However I am unsure and wanted to inspect the DOM but I couldn’t see a way to do this. I found a chrome browser extension but I don’t really want to have to install chrome. Is there no way to inspect the pixi canvas built in?

Edited by Adam Procter

Share this post


Link to post
Share on other sites

I'm not sure if this works for your use case, but I recently wrote about doing functional testing of the canvas element. This involved attaching arbitrary attributes to the Pixi render tree, and then attaching the Pixi application to the window object. From there you should be able to interactively look into that tree of objects, using your browser's dev tools for example. I'm using react-pixi-fiber but maybe the concepts translate to the particular setup you're using. Here's the post: https://medium.com/@zenblender/functional-testing-of-a-hybrid-pixijs-react-app-281ed5ea04b3

Share this post


Link to post
Share on other sites

Basically, if your PIXI.Application instance is not available in a global scope, or already attached to "window", you'd need to do that in your code when the app initializes. Then, using dev tools, you can navigate to the PIXI.Application's "stage" object, and inside there you'll see "children" arrays that you can traverse through the render tree.

Share this post


Link to post
Share on other sites

this code draw out  a circle in each position no problem but when I use an interaction event to grab the name from each circle I only see to get the last one in the array and so although it is drawing each circle separately I cannot see that it is naming each one separately at all - what am I doing wrong ? Thanks

      for (i = 0; i < Object.keys(this.myNodes).length; i++) {
        for (j = 0; j < Object.keys(this.configPositions).length; j++) {
          if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
            // THIS SHOULD NAME EACH Circle
            buttons.name = this.myNodes[i].node_id
            buttons.lineStyle(n++)
            buttons.beginFill(0xcab6ff, 1)
                   buttons.drawCircle(
              this.configPositions[j].x_pos + this.configPositions[j].width,
              this.configPositions[j].y_pos +
                this.configPositions[j].height / 2,
              15
            )
            buttons.endFill()

          }
        }
      }

here is the code where I try to see the name of each button / circle

 

buttons.interactive = true
buttons.buttonMode = true
buttons.on('pointerdown', onDragStart)

function onDragStart(event) {
        this.dragging = true
        // returns last name everytime (no matter which button/circle I click on first)
        console.log(this.name)
}

 

Edited by Adam Procter

Share this post


Link to post
Share on other sites

What is the data type of "buttons"? The naming would imply to me that it's an array of buttons rather than a single button. It almost looks like you are drawing all circles within a single interactive element rather than individual elements. In other words, how many onDragStart handlers are being attached?

 

Share this post


Link to post
Share on other sites

Ah sorry should have shown that piece, im new to pixijs - so maybe I am doing it completely wrong

So I am using one Graphics element ? and one ondragastart

The buttons all appear in the right places - the name just doesnt seem to work in the same way?

buttonsDraw() {
var i
var j
var n = 1
var ref = this

this.canvas = this.$refs.pixi
const stage = this.PIXIApp.stage
let buttons = new PIXI.Graphics()

 

Edited by Adam Procter

Share this post


Link to post
Share on other sites

I really think you want to have "buttons" be an array of Graphics instances. I am also new to PixiJS, but it doesn't make logical sense to me that there would be a single instance that has everything in it, yet with individual properties like names. I'd refactor this so that you loop through all the buttons you want to create, each one its own Graphics instance, and each one having its own drag handlers attached. Based on what you shared, it makes total sense that the last name wins, which was your initial question. In your refactor it might be useful to put the buttons in a Container: https://pixijs.download/dev/docs/PIXI.Container.html

Share this post


Link to post
Share on other sites

I cant seem to create a number of Graphic files dynamically it complains about buttons = new PIXI.Graphics()

      for (i = 0; i < Object.keys(this.myNodes).length; i++) {
        buttons[i] = [];
        var buttons[i] = new PIXI.Graphics()
        for (j = 0; j < Object.keys(this.configPositions).length; j++) {
          if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
            buttons[i].name = this.myNodes[i].node_id
            //console.log(buttons.name)
            buttons[i].lineStyle(0)
            buttons[i].beginFill(0xcab6ff, 1)
            // x, y, radius

            buttons[i].drawCircle(
              this.configPositions[j].x_pos + this.configPositions[j].width,
              this.configPositions[j].y_pos +
                this.configPositions[j].height / 2,
              15
            )
            buttons[i].endFill()
            // names it the last one only?
          }
        }
      }

 

Share this post


Link to post
Share on other sites
On 9/15/2020 at 10:20 AM, Adam Procter said:

This is the simplest version of what I am trying to do , this would draw 10 unique named and placed graphic circles.

But it doesn't as you cant do

buttons.[i] = new PIXI.Graphics()

https://www.pixiplayground.com/#/edit/a6ztud7gXnRoAnMU6kiUv

Ok sorry for late, i took a few days off.
This was not a pixijs issue but more a js issue.
I think you should take a look on basic js before.
Otherwise you will have difficulty progressing with pixi js.

You have many way to perform this kind of stuff, here fixe version of your demo.
https://www.pixiplayground.com/#/edit/a6ztud7gXnRoAnMU6kiUv


You also have a plugin for devtool thats help you to debug pixijs (basic only)
MQ8Czmxs_o.png

https://chrome.google.com/webstore/detail/pixijs-devtools/aamddddknhcagpehecnhphigffljadon

 

 

This is maybe not the best way to learn js, but it should help you.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript

 

hope this help

 

PS: IF YOU NEED find a specific pixijs display.Object, yes use the .name=identity are a good way.
I also use .name for connect some node ref with react app.
Then you can performe somwhere in your app 

const found = container.children.find(el => el.name ===  name);

 

pixijs have also it own search from display.Object
https://pixijs.download/dev/docs/PIXI.Sprite.html#getChildAt

container.getChildAt ()
 container.getChildByName ()
container.getChildIndex ()
Edited by jonforum

Share this post


Link to post
Share on other sites

Thank you this is really helpful am getting close now , the chrome extension wouldnt work on my mac at all - annoyingly as I would love to use that.

      const array = [...Array(Object.keys(this.myNodes).length)].map(
        (k, kk) => {
          const button = new PIXI.Graphics()
          button.lineStyle(0)
          button.beginFill(0xcab6ff, 1)
          const txt = new PIXI.Text('name:' + kk)
          button.name = String(kk)
       
          for (j = 0; j < Object.keys(this.configPositions).length; j++) {
            button.drawCircle(
              this.configPositions[j].x_pos + this.configPositions[j].width,
              this.configPositions[j].y_pos +
                this.configPositions[j].height / 2,
              15
            )
            // for (i = 0; i < Object.keys(this.myNodes).length; i++) {
            //   if (this.configPositions[j].node_id == this.myNodes[i].node_id) {
            //     // button.name = String(this.myNodes[i].node_id)
            //   }
            // }
          }

          button.addChild(txt)
          button.endFill()
          return button

        }
      )

      console.log(array)
      stage.addChild(...array) 

renders buttons in right places and the array shows all of the graphics named 1, 2,3 etc for length of this.myNodes which is great but cant quite yet get the dynamic name from the data yet it names them all the last node_id - however like you say my javascript skills are very very rusty / weak so am not fully understanding the ... Array yet :( - but hopefully I will soon :) 

Edited by Adam Procter

Share this post


Link to post
Share on other sites

i use Array() for the example only,  in your case this should work 
 

const array =  Object.values(this.myNodes).map( (node, index) => { //stuff... 
// you should have acces to id like this    const id = node.node_id; 

node will be the current obj inside the iteration, and index is the index (number) of the current node inside this.myNodes 

More info about map
https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map

 

 

 

 

Edited by jonforum

Share this post


Link to post
Share on other sites

Thanks I have ended up using an Object buttonMap { } like this

 var buttonMap = {}

      for (i = 0; i < Object.keys(this.myNodes).length; i++) {
        buttonMap[i] = new PIXI.Graphics()

...

 

Edited by Adam Procter

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.