Skip to content
This repository has been archived by the owner on Nov 4, 2021. It is now read-only.

Graphics

Álvaro Carrera edited this page Jun 18, 2013 · 1 revision

#summary Chapter 5 of Shanks User Manual

= Chapter 5 : Adding Graphics =

In this chapter we will explain how to add grapchis to the simulation. If you don't want to add graphics to the simulation you can skip this chapter and go to chapter five of the manual. Graphics aren't necessary to run the simulation properly.

== 5.1 Creating Device/Link Portrayals ==

A portrayal is a graphic representation used by MASON to represent the differents components. SHANKS adapt this class to make easier create graphics to the scenario. Different device can have the same portrayal, so you could only need to code one device portrayal class to represent all the devices and one link portrayal to represent all links. Device portrayal classes and Link portrayal classes are similar but have little changes in the way to code them. First we are going to explain how to code a device portrayal class. In the example project you will find Computer2DPortrayal in the package model.element.device.portrayal. (there is Router2DPortrayal too, but it is coded similar to Computer2DPortrayal). In a device portrayal class there is only one method:

{{{ public void draw(Object object, Graphics2D graphics, DrawInfo2D info); }}}

This method always is fill like the example, you only have to adapt it to your device states, and you change the line {{{graphics.fillOval(x, y, w, h);}}} into other form (rectangle, square, etc). Or if you preffer you can add an image instance of a abstract form. To do that use the next method:

{{{ this.putImage(path, x, y, w, h, graphics); }}}

Path is the direction where the image is saved. Now we teach you how to create a link portrayal. Go now to model.element.link.portrayal and open EthernetLink2DPortrayal. All the links portrayal have the same structure you only need to adapt it to your links states.

== 5.2 Creating the Scenario Portrayal ==

Once you have coded all the portrayal that you need you have to draw the scenario. We explain it following the LANScenario2DPortrayal that you will find in model.scenario.portrayal All the scenario portrayals have the same constructor:

{{{ public LANScenario2DPortrayal(Scenario scenario, int width, int height) throws ShanksException { super(scenario, width, height); } }}}

Next you have to fill the method {{{public void placeElements();}}} in order to put the elements in their respective postion. To place an element you have to code lines like this:

{{{ this.situateDevice((Device)this.getScenario().getNetworkElement("Computer 1"), 30, 30); }}}

In this case we put the “Computer 1” in the coordenates X = 30, Y = 30. To draw a link use the next line:

{{{ this.drawLink((Link)this.getScenario().getNetworkElement("L1")); }}}

In this case is not necessary to indicate the coordenates, SHANKS will draw it properly between the device that the link connects. At the begining it is hard to place the components properly so we recommend you to run the simulation after each change in the coordenates of the elements. The next step is indicate the portrayal for each class, you can do this in the next method:

{{{ public void setupPortrayals(); }}}

These two lines are always the same:

{{{ ContinuousPortrayal2D devicePortrayal = (ContinuousPortrayal2D) this.getPortrayals().get(Scenario2DPortrayal.MAIN_DISPLAY_ID).get(ScenarioPortrayal.DEVICES_PORTRAYAL); NetworkPortrayal2D networkPortrayal = (NetworkPortrayal2D) this.getPortrayals().get(Scenario2DPortrayal.MAIN_DISPLAY_ID).get(ScenarioPortrayal.LINKS_PORTRAYAL); }}}

And in the following lines you have to indicate the class and the portrayal for this class, for example:

{{{ devicePortrayal.setPortrayalForClass(Computer.class, new Computer2DPortrayal()); }}}

We want that all device that are Computers have the Computer2DPortrayal.

== 5.3 Adding the scenario portrayal ==

Finally you have to add the Scenario Portrayal to the scenario. You only have to code these few lines:

{{{ public Scenario2DPortrayal createScenario2DPortrayal() throws ShanksException { return new LANScenario2DPortrayal(this, 100, 100); } }}}

The numbers indicate the dimension of the grid where the device and links are represented, you can change it in order to make it bigger o smaller.

Clone this wiki locally