Glitch in rendering node

[vilimek-jakub]

Hi, I have one glitch during rendering node with png graphics in FX. There is 1 px wide 'boarder' on sides of the node, like on the image There are in fact two on the left node, one above the node and the other on the left side. When I move the camera (mouse, keyboard), the glitch simetimes dissappeares, sometimes remains, as you can see on the right node. For setting image I used the following code:

try (FileOutputStream fos = new FileOutputStream( file )) {
        fos.write( symbol.getPngSymbol() );
      } catch (IOException e) {
        log.error( "Can't write to temp file", e );
      }
node.setAttribute( "ui.style", String.format( "fill-image: url('%s');", file.getAbsolutePath() ) );
Image image = new Image( new ByteArrayInputStream( symbol.getPngSymbol() ) );

node.setAttribute( "ui.style", String.format( "size: %dpx, %dpx, 0px;",
                                              MathUtils.round( (image.getWidth()) / 5 ),
                                              MathUtils.round( (image.getHeight()) / 5 ) ) );
node.setAttribute( "image.xoffset", String.format( "%dpx",
                                                   MathUtils.round( symbol.getOffsetX() / 5D ) ) ); 

I couldn't figure out how to set byte[] to node, so I have to create temp file and set node url to the temp file. But the file exists and everything is ok. The dividing by 5 is because we have too big images and I have to scale them a little bit. I also used this css for styling:

graph {
        canvas-color: #42424288;
        fill-color: #424242;
    padding: 60px;
      }
node {
        fill-mode: image-scaled;
        shape: box;
        size-mode: normal;
        stroke-mode: none;
        shadow-mode: none;
        icon-mode: none;
        text-style: normal;
        text-font: 'Droid Sans';
        text-size: 12;
        text-alignment: under;
        text-color: #FFF7FA;
        text-background-color: #424242;
        text-background-mode: plain;
        }

Should I use different way to set fill-image? Or set different css for graph or node? Rendering is modified by

System.setProperty( "gs.ui.renderer", "org.graphstream.ui.j2dviewer.J2DGraphRenderer" );

We use our own framework for FX, the graph is inside BorderPane/VBox/BorderPane Many thanks for any reply.

[hichbra]

If you work on JavaFX, firstly I will recommand you to switch on graphstream 2.0 alpha and gs-ui-javafx. The version you use is made for swing interface and we know that can cause some issues.

With that, you can find many tests. Normally I use in my CSS file :

fill-mode: image-scaled;
fill-image: url('"+URL_IMAGE+"');

With URL_IMAGE the absolute link to your image.

[vilimek-jakub]

I'm sorry that I put it in core. Of course I use gs-ui-javafx and 2.0 alpha. I can't use css for this, because these images can change over time. So I need to change them in the code...

[hichbra]

If you use ui-javafx then you should use System.setProperty("org.graphstream.ui", "javafx"); as property. You said the glitch disappear sometime when you move ? Check if you correctly refresh your view. If you build your own view, then you need to call ViewerPipe on a recurring basis as you can see in the examples.

[vilimek-jakub]

Ok, I added this property. At first I pumped just once and the graph was rendered once. After changing nodes/edges it refreshed fine, except the glitch. Now I added pumping mechanism and I call ViewerPipe.pump(); every 100 ms and the behaviour is still the same. I think, there is some problem with rendering node/fill-image or css... Any more suggestions?

[hichbra]

Use an another image to see if it's the problem. If that don't work, provide us a simple and self contained example (SSCCE) so we can try to work at it.