Changeset 172

Timestamp:

08/31/11 16:51:42 (13 years ago)

Author:

vmipsl

Message:

Interface _ plusieurs graphs possible sur le même quicklook

Location:

ether_megapoli/trunk/web

Files:

• resources/css/ether.css (modified) (1 diff)
• resources/css/visu_parameter_by_pf.css (modified) (3 diffs)
• resources/js/Button.js (modified) (7 diffs)
• resources/js/Select.js (modified) (7 diffs)
• resources/js/etherClasses.js (modified) (4 diffs)
• src/ApplicationResources.properties (modified) (3 diffs)
• src/ApplicationResources_en.properties (modified) (3 diffs)
• src/com/ether/Controller.java (modified) (5 diffs)
• visualization/visu_parameter_by_pf-script.jsp (modified) (10 diffs)
• visualization/visu_parameter_by_pf.jsp (modified) (5 diffs)

ether_megapoli/trunk/web/resources/css/ether.css

@@ -4 +4 @@
 
 .pair,.impair {
-        width: 234px;
+        width: 210px;
         padding-top: 3px;
         padding-bottom: 3px;

ether_megapoli/trunk/web/resources/css/visu_parameter_by_pf.css

@@ -2 +2 @@
 #containerPlateforms, #containerParameters, #containerCalendar {
     margin-top: 10px;
+}
+
+.containerParameter {
+    width: 250px;
 }
 
@@ -14 +18 @@
 }
 
+#containerOptionTitle, #containerOptionType, #containerOptionCalendar {
+    margin-bottom: 25px;
+}
+
 #containerOptionTitle {
-    margin-top: 25px;
-    margin-bottom: 25px;
+    margin-right: 22px;
 }
 
 #containerButtons {
     margin-top: 25px;
+}
+
+#containerOptionPlotsSelect {
+    margin-bottom: 15px;
+    margin-top: 10px;
 }
 
@@ -67 +79 @@
 }
 
+.messages_number_parameters {
+    color: #806159;
+    font-weight: bold;
+    vertical-align: middle;
+    font-size: 80%;
+    margin-top: 2px;
+}
+
+.select_plot_option .select_item_middle:hover {
+    background-color: #ffffff;
+    color: #70739C;
+}
+
 /** ************************************ **/
 /** ************ CALENDAR ************** **/

ether_megapoli/trunk/web/resources/js/Button.js

@@ -11 +11 @@
 //********************************************************
 
-var Button = Class.create({
+var Button = Class.create( {
     initialize: function( param )
     {
@@ -21 +21 @@
         this.classNameText = param.classNameText ? param.classNameText : false;
         this.callbackOnClick = param.onClick ? param.onClick : false;
+        this.callbackOnMouseOver = param.onMouseOver ? param.onMouseOver : false;
+        this.callbackOnMouseOut = param.onMouseOut ? param.onMouseOut : false;
         this.boolDisabled = false;
         this.boolSelected = false;
@@ -26 +28 @@
 
         // Create button elements
-        this.divContainer = $(document.createElement("button"));
-        if(this.className)
-                this.divContainer.className = this.className;
+        this.divContainer = $( document.createElement( "button" ) );
+        if( this.className )
+            this.divContainer.className = this.className;
         this.divContainer.atMe = this;
         this.divContainer.id = this.id;
         if( this.parent )
-            this.parent.appendChild(this.divContainer);
+            this.parent.appendChild( this.divContainer );
 
-        this.divText = $(document.createElement("div"));
-        if(this.classNameText)
-                this.divText.className = "button_text";
+        this.divText = $( document.createElement( "div" ) );
+        if( this.classNameText )
+            this.divText.className = "button_text";
         this.divText.innerHTML = this.value;
-        this.divContainer.appendChild(this.divText);
-        
+        this.divContainer.appendChild( this.divText );
+
         // Define button events
-        Event.observe(this.divContainer, 'click', this.onClick.bindAsEventListener(this));
-        Event.observe(this.divContainer, 'mouseover', this.onHover.bindAsEventListener(this));
+        Event.observe( this.divContainer, 'click', this.onClick.bindAsEventListener( this ) );
+        Event.observe( this.divContainer, 'mouseover', this.onHover.bindAsEventListener( this ) );
+        Event.observe( this.divContainer, 'mouseout', this.onOut.bindAsEventListener( this ) );
     },
 
@@ -51 +54 @@
         return this.divContainer;
     },
-    
+
     isDisable : function()
     {
         return this.boolDisabled;
     },
-    
+
     isSelected: function()
     {
         return this.boolSelected;
     },
-    
+
     setValue : function( value )
     {
@@ -67 +70 @@
         this.divText.innerHTML = this.value;
     },
-    
+
     setCallbackOnClick : function( value )
     {
         this.callbackOnClick = value;
     },
-    
+
     // Actions ********************************************************
 
@@ -78 +81 @@
     {
         this.boolDisabled = true;
-        this.divContainer.addClassName("disable");
+        this.divContainer.addClassName( "disable" );
     },
-    
+
     enable : function()
     {
         this.boolDisabled = false;
-        this.divContainer.removeClassName("disable");
+        this.divContainer.removeClassName( "disable" );
     },
-    
+
     select : function( value )
     {
         this.boolSelected = value;
         if( this.boolSelected )
-            this.divContainer.addClassName("selected");
+            this.divContainer.addClassName( "selected" );
         else
-            this.divContainer.removeClassName("selected");
+            this.divContainer.removeClassName( "selected" );
     },
-    
+
     show : function()
     {
@@ -117 +120 @@
                 this.callbackOnClick();
         }
-        Event.stop(event);
+        Event.stop( event );
     },
 
     onHover : function( event )
     {
-        Event.stop(event);
+        if( !this.isDisable() && this.callbackOnMouseOver )
+            this.callbackOnMouseOver();
+
+        Event.stop( event );
+    },
+
+    onOut: function()
+    {
+        if( !this.isDisable() && this.callbackOnMouseOut )
+            this.callbackOnMouseOut();
     }
-});
+} );

ether_megapoli/trunk/web/resources/js/Select.js

@@ -3 +3 @@
 // Display a Select
 //
-// obj objParam: {id, [parent], [specificClass], [maxOptionSize], [isDisable], [isDisplayed], [arrayData]}
+// obj objParam: {id, [parent], [specificClass], [maxOptionSize], [isDisable], [isDisplayed]}
 //    int objParam.id: id of the dom element
 //    [dom objParam.parent]: in which dom element to draw the button
@@ -10 +10 @@
 //    [int objParam.isDisable]: is the Select disable by default?
 //    [int objParam.isDisplayed]: is the Select opened by default?
-//    [arr objParam.arrayData]: array of data to display
 //
 // Public functions
@@ -38 +37 @@
         this.indexOption = 0;
         this.isHover = false;
-        this.arrayData = objectParameter.arrayData ? objectParameter.arrayData : $A();
         this.arrayOptions = $A();
+        this.className = objectParameter.className ? "select_container " + objectParameter.className : "select_container";
+        this.classNameOption = objectParameter.classNameOption ? "select_choicelist " + objectParameter.classNameOption : "select_choicelist";
 
         // Select div
         this.divSelect = document.createElement( "div" );
         this.divSelect.id = this.id;
-        this.divSelect.className = "select_container";
+        this.divSelect.className = this.className;
 
         this.divSelectLeft = document.createElement( "div" );
@@ -63 +63 @@
         this.divOption = document.createElement( "div" );
         this.divSelect.id = this.id;
-        this.divOption.className = "select_choicelist";
+        this.divOption.className = this.classNameOption;
         this.parent.appendChild( this.divOption );
 
@@ -90 +90 @@
     },
 
+    getSize: function()
+    {
+      return this.arrayOptions.size();
+    },
+
     // private
     toggleOption:function()
@@ -139 +144 @@
 
     // public
+    /**
+     * This method indicates if the itemValue is already in the array
+     */
+    content: function( itemValue )
+    {
+        var resu = false;
+        this.arrayOptions.each( function( divOption )
+        {
+            if( divOption.itemValue == itemValue )
+            {
+                resu = true;
+                throw $break;
+            }
+        }.bind( this ) );
+        return resu;
+    },
+
+    // public
     add: function( itemValue, itemName, callback )
     {
-
         var divOption = document.createElement( "div" );
         divOption.className = "select_item_middle";
@@ -177 +199 @@
             this.arrayOptions = this.arrayOptions.without( divOption );
         }.bind( this ) );
+    },
+
+    // public
+    /**
+     * This method changes only the content of the divSelect without add the item to the array
+     * @param itemValue
+     * @param itemName
+     * @param callback
+     */
+    changeSelectMiddle: function( itemValue, itemName, callback )
+    {
+        this.add( itemValue, itemName, callback );
+        this.select( itemValue, callback );
+        this.remove( itemValue );
     },
 

ether_megapoli/trunk/web/resources/js/etherClasses.js

@@ -109 +109 @@
             if( objectParameter.isExpiredTitle )
                 this.isExpiredTitle = objectParameter.isExpiredTitle;
+            this.onMouseOverContainer = objectParameter.onMouseOverContainer ? objectParameter.onMouseOverContainer : false;
+            this.onMouseOutContainer = objectParameter.onMouseOutContainer ? objectParameter.onMouseOutContainer : false;
         }
     },
@@ -137 +139 @@
     },
 
-    onClickContainer: function( event )
+    onHoverContainer: function( event )
     {
         if( !event || (event.detail == undefined || 1 == event.detail) )
@@ -143 +145 @@
     },
 
+    onClickContainer: function( event )
+    {
+        if( !event || (event.detail == undefined || 1 == event.detail) )
+            this.executeListenersFunction();
+    },
+
     selectWithParameter: function( classNameValue )
     {
@@ -167 +175 @@
         if( this.divContainer )
             Event.observe( this.divContainer, 'click', this.onClickContainer.bindAsEventListener( this ) );
+        if( this.divContainer && this.onMouseOverContainer )
+            Event.observe( this.divContainer, 'mouseover', this.onMouseOverContainer.bindAsEventListener( this ) );
+        if( this.divContainer && this.onMouseOutContainer )
+            Event.observe( this.divContainer, 'mouseout', this.onMouseOutContainer.bindAsEventListener( this ) );
     },
 

ether_megapoli/trunk/web/src/ApplicationResources.properties

@@ -428 +428 @@
 inWork=Page en cours de construction..
 all.visualization=Visualisation
+data.visualization.add=Ajouter
 
 data.visualization=Des donn\u00E9es
@@ -448 +449 @@
 data.visualization.Unvalid_Period=P\u00E9riode non valide !
 data.visualization.titleChoice=Title
-data.visualization.axe=Axes
+data.visualization.type=Type de trac\u00E9
+data.visualization.graph=Quicklook final :
+data.visualization.graph.noPlot=Aucun quicklook
 data.visualization.button.clear=Effacer
+data.visualization.button.init=Initialiser
 data.visualization.button.visualize=Visualisation
 data.visualization.button.download=T\u00E9l\u00E9chargement
@@ -455 +459 @@
 data.visualization.loading.data=Chargement des donn\u00E9es
 data.visualization.quicklook=Quicklook
+data.visualization.parameter=param\u00E8tre(s)
+data.visualization.parameter.add=Ajouter le param\u00E8tre s\u00E9lectionn\u00E9 au quicklook final
+data.visualization.parameter.init=Vider la liste des param\u00E8tres
 
 data.visualization.axeType.TimeLine=S\u00E9rie temporelle (ligne)

ether_megapoli/trunk/web/src/ApplicationResources_en.properties

@@ -427 +427 @@
 inWork=Work in progress..
 all.visualization=Visualization
+data.visualization.add=Add
 
 data.visualization=Datas
@@ -447 +448 @@
 data.visualization.Unvalid_Period=Unvalid periode !
 data.visualization.titleChoice=Titre
-data.visualization.axe=Axes
+data.visualization.type=Plot's type
+data.visualization.graph=Final quicklook :
+data.visualization.graph.noPlot=No quicklook
 data.visualization.button.clear=Clear
+data.visualization.button.init=Init
 data.visualization.button.visualize=Visualization
 data.visualization.button.download=Download
@@ -454 +458 @@
 data.visualization.loading.data=Data downloading
 data.visualization.quicklook=Quicklook
+data.visualization.parameter=parameter(s)
+data.visualization.parameter.add=Add the selected parameter to the final quicklook
+data.visualization.parameter.init=Remove the parameters list
 
 data.visualization.axeType.TimeLine=Time serie (ligne)

ether_megapoli/trunk/web/src/com/ether/Controller.java

@@ -6 +6 @@
 import com.medias.database.objects.Parametre;
 import com.medias.database.objects.Plateforme;
+import com.medias.database.objects.TypePlateforme;
 import net.sf.json.JSONObject;
 import org.apache.commons.logging.Log;
@@ -29 +30 @@
     /** *********************************************************** **/
     /** *********************** VIEWS ***************************** **/
-    /** *********************************************************** **/
+    /**
+     * ********************************************************** *
+     */
     // Default view if methodName is unknown
     public ModelAndView home( final HttpServletRequest request, final HttpServletResponse response )
@@ -49 +52 @@
     {
         final List<Plateforme> plateforms = _etherService.getAllPlateforms();
+//        final List<Plateforme> plateforms = new ArrayList<Plateforme>();
+//        final TypePlateforme type = new TypePlateforme( 1, "FIXE" );
+//        final Plateforme pf = new Plateforme();
+//        pf.setPlateformeId( 1 );
+//        pf.setPlateformeNom( "LHVP" );
+//        pf.setTypePlateforme( type );
+//        plateforms.add( pf );
+//        final Plateforme pf2 = new Plateforme();
+//        pf2.setPlateformeId( 2 );
+//        pf2.setPlateformeNom( "SIRTA" );
+//        pf2.setTypePlateforme( type );
+//        plateforms.add( pf2 );
 
         final Map<String, Object> model = new HashMap<String, Object>();
@@ -59 +74 @@
     /** *********************************************************** **/
     /** *********************** CALLS ***************************** **/
-    /** *********************************************************** **/
+    /**
+     * ********************************************************** *
+     */
     @ControllerMethod(jsonResult = true)
     public JSONObject searchParametersByPlateform( @Mandatory @ParamName(ParameterConstants.PARAMETER_ID) final Integer plateformId )
@@ -65 +82 @@
     {
         final List<Parametre> parametersByPlateform = _etherService.getParametersByPlateformId( plateformId );
+//        final List<Parametre> parametersByPlateform = new ArrayList<Parametre>( 2 );
+//        final Parametre p1 = new Parametre();
+//        p1.setParametreId( 1 );
+//        p1.setParametreNom( "JNO2" );
+//        parametersByPlateform.add( p1 );
+//        final Parametre p2 = new Parametre();
+//        p2.setParametreId( 2 );
+//        p2.setParametreNom( "CO2" );
+//        parametersByPlateform.add( p2 );
 
         final JSONObject result = new JSONObject();

ether_megapoli/trunk/web/visualization/visu_parameter_by_pf-script.jsp

@@ -18 +18 @@
         this.beginDate = false;
         this.endDate = false;
+        this.numberParameterToDisplay = 0;
 
         /** *********** CONTAINERS *********** **/
@@ -24 +25 @@
         this.containerButtons = $( "containerButtons" );
         this.containerOptionCalendar = $( "containerOptionCalendar" );
-        this.containerOptionAxe = $( "containerOptionAxe" );
+        this.containerOptionType = $( "containerOptionType" );
+        this.containerOptionPlotsSelect = $( "containerOptionPlotsSelect" );
+        this.containerOptionPlotsButtons = $( "containerOptionPlotsButtons" );
 
         /** *********** LOADING *********** **/
@@ -70 +73 @@
         } );
 
-        this.clearButton = new Button( {value:interfaceTexts["data.visualization.button.clear"], parent:this.containerOptionCalendar, id:"button_clear", className:"small", onClick:this.onClickClear.bind( this )} );
+        this.clearCalendarButton = new Button( {value:interfaceTexts["data.visualization.button.clear"], parent:this.containerOptionCalendar, id:"button_clear_calendar", className:"small", onClick:this.onClickClear.bind( this )} );
 
         // Buttons and axe's types
         this.createButtons();
-        this.createListAxes();
+        this.createListTypes();
+        this.createListPlots();
     },
 
@@ -85 +89 @@
     },
 
-    createListAxes: function()
+    createListTypes: function()
     {
         var paramSelect = new Object();
         paramSelect.id = "select_axes";
-        paramSelect.parent = $( "containerOptionAxe" );
+        paramSelect.parent = this.containerOptionType;
         this.selectAxes = new Select( paramSelect );
+    },
+
+    createListPlots: function()
+    {
+        var paramSelect = new Object();
+        paramSelect.id = "select_plots";
+        paramSelect.parent = this.containerOptionPlotsSelect;
+        paramSelect.classNameOption = "select_plot_option";
+        this.selectPlots = new Select( paramSelect );
+        this.selectPlots.add( null, interfaceTexts["data.visualization.graph.noPlot"] );
+        this.selectPlots.selectFirst( false );
+
+        this.selectPlotsPlateformType = false;
+
+        this.addPlotButton = new Button( {value:interfaceTexts["data.visualization.add"], parent:this.containerOptionPlotsButtons, id:"button_add_plot", className:"small", onClick:this.onClickAddPlot.bind( this ), onMouseOver:this.onMouseOverAddPlot.bind( this ), onMouseOut:this.onMouseOutAddPlot.bind( this )} );
+        this.addPlotButton.disable();
+        this.initPlotButton = new Button( {value:interfaceTexts["data.visualization.button.init"], parent:this.containerOptionPlotsButtons, id:"button_init_plot", className:"small", onClick:this.onClickInitPlot.bind( this ), onMouseOver:this.onMouseOverInitPlot.bind( this ), onMouseOut:this.onMouseOutInitPlot.bind( this )} );
     },
 
@@ -130 +151 @@
     displayParameters: function()
     {
-        this.parameters = new ListParameters( this.jsonParameters, new Object() );
+        var objectParameter = new Object();
+        objectParameter.onMouseOverContainer = this.onMouseOverParameter;
+        objectParameter.onMouseOutContainer = this.onMouseOutParameter;
+        this.parameters = new ListParameters( this.jsonParameters, objectParameter );
 
         this.parameters.addOpenListener( this.onSelectParameter.bind( this ) );
@@ -156 +180 @@
             this.selectedParameter = false;
 
-        // Change plateformType's select
+        // Change axe's list select
         this.updateListAxes();
+
+        this.addPlotButton.disable();
 
         $( "textareaTitle" ).value = this.selectedPlateform.getName();
@@ -176 +202 @@
         this.selectedParameter.select();
 
+        // Change title
         $( "textareaTitle" ).value = this.selectedPlateform.getName() + " - " + this.selectedParameter.getName();
+
+        // Update number and list of parameter to display
+        this.updateNumberAndListParameterToDisplay( 1 );
+
+        // Enable/disable addPlot's button
+        if( !this.selectPlotsPlateformType || this.selectPlotsPlateformType == this.selectedPlateform.jsonElement.type )
+            this.addPlotButton.enable();
+        else
+            this.addPlotButton.disable();
+
         this.testAllFields();
+    },
+
+    onMouseOverParameter: function()
+    {
+        this.divContainer.innerHTML = this.jsonElement.name + " (" + this.jsonElement.code + ")";
+    },
+
+    onMouseOutParameter: function()
+    {
+        this.divContainer.innerHTML = this.jsonElement.name;
     },
 
@@ -206 +253 @@
     },
 
+    onClickInitPlot: function()
+    {
+        this.updateNumberAndListParameterToDisplay( 0 );
+    },
+
+    onMouseOverInitPlot: function()
+    {
+//        this.initPlotButton.setValue(interfaceTexts["data.visualization.parameter.init"]);
+    },
+
+    onMouseOutInitPlot: function()
+    {
+//        this.initPlotButton.setValue(interfaceTexts["data.visualization.button.init"]);
+    },
+
+    onClickAddPlot: function()
+    {
+        this.updateNumberAndListParameterToDisplay( 2 );
+    },
+
+    onMouseOverAddPlot: function()
+    {
+//        this.addPlotButton.setValue(interfaceTexts["data.visualization.parameter.add"]);
+    },
+
+    onMouseOutAddPlot: function()
+    {
+//        this.addPlotButton.setValue(interfaceTexts["data.visualization.add"]);
+    },
+
     onClickVisualize: function()
     {
 //        this.plotWindow.getContent().innerHTML = '<div class="loadingPlot"><img src="/Megapoli/resources/icons/loading_datas.gif"/></div>';
 
-        var url = "visualization/plotEther?plateformId=" + this.selectedPlateform.getId()
-                + "&parameterId=" + this.selectedParameter.getId()
+//        var url = "visualization/plotEther?plateformId=" + this.selectedPlateform.getId()
+//                + "&parameterId=" + this.selectedParameter.getId()
+//                + "&dateBegin=" + this.beginDate
+//                + "&dateEnd=" + this.endDate
+//                + "&title=" + encodeURIComponent( $( "textareaTitle" ).value )
+//                + "&axeType=" + this.selectAxes.getValue();
+
+        var url = "visualization/plotEther?plateformId=14"
+                + "&parameterId=90"
                 + "&dateBegin=" + this.beginDate
                 + "&dateEnd=" + this.endDate
@@ -217 +301 @@
                 + "&axeType=" + this.selectAxes.getValue();
 
-//        var url = "visualization/plotEther?plateformId=14"
-//                + "&parameterId=90"
-//                + "&dateBegin=" + this.beginDate
-//                + "&dateEnd=" + this.endDate
-//                + "&title=" + encodeURIComponent( $( "textareaTitle" ).value )
-//                + "&axeType=" + this.selectAxes.getValue();
-
         this.plotWindow.getContent().innerHTML = '<img src=' + url + ' />';
+
+//        this.plotWindow.getContent().innerHTML = '<applet width="500" height="200" code="AppletPlot.class">Now somewhere in the black moutains...</applet>';
         this.plotWindow.setSize( <%=EtherPlotServiceImpl.getMaxWidth()%>, <%=EtherPlotServiceImpl.getMaxHeight()%> );
         this.plotWindow.show();
@@ -285 +364 @@
 
         this.selectAxes.selectFirst( false );
+    },
+
+    /**
+     * action = 0 --> init list
+     * action = 1 --> select parameter
+     * action = 2 --> add parameter
+     */
+    updateNumberAndListParameterToDisplay: function( action )
+    {
+        switch( action )
+        {
+            case 0:
+                // INIT
+                if( this.selectedPlateform && this.selectedParameter )
+                {
+                    this.selectPlots.clear();
+                    this.selectPlotsPlateformType = false;
+                    this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
+
+                    this.numberParameterToDisplay = 1;
+                    $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
+                }
+                else
+                {
+                    this.selectPlots.clear();
+                    this.selectPlots.add( null, interfaceTexts["data.visualization.graph.noPlot"] );
+                    this.selectPlots.selectFirst( false );
+                    this.selectPlotsPlateformType = false;
+
+                    this.numberParameterToDisplay = 0;
+                    $( "messages_number_parameters" ).innerHTML = "";
+                }
+                break;
+            case 1 :
+                // SELECT
+                if( 0 == this.numberParameterToDisplay )
+                {
+                    this.selectPlots.clear();
+                    this.numberParameterToDisplay = 1;
+                }
+
+                this.selectPlots.changeSelectMiddle( this.selectedPlateform.getId() + "-" + this.selectedParameter.getId(), this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
+                $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
+                break;
+            default:
+                // ADD
+                var plotValue = this.selectedPlateform.getId() + "-" + this.selectedParameter.getId();
+                if( !this.selectPlots.content( plotValue ) )
+                {
+                    this.selectPlots.add( plotValue, this.selectedPlateform.getName() + " - " + this.selectedParameter.getName() );
+                    this.selectPlots.select( plotValue, false );
+                    this.selectPlotsPlateformType = this.selectedPlateform.jsonElement.type;
+
+                    this.numberParameterToDisplay = this.selectPlots.getSize();
+                }
+
+                $( "messages_number_parameters" ).innerHTML = this.numberParameterToDisplay + " " + interfaceTexts["data.visualization.parameter"];
+                break;
+        }
     }
 
-} );
+} )
+        ;
 
 </script>

ether_megapoli/trunk/web/visualization/visu_parameter_by_pf.jsp

@@ -62 +62 @@
 
         <div class="span-25">
-            <div id="generalContainerPlateforms" class="span-7 colborder">
+            <div id="generalContainerPlateforms" class="span-6 colborder">
                 <div id="messages"><bean:message key="data.visualization.selectPf"/></div>
 
@@ -74 +74 @@
             </div>
 
-            <div id="generalContainerOptions" class="span-10 last">
+            <div id="generalContainerOptions" class="span-11 last">
                 <div id="containerOptionCalendar" class="span-10">
                     <div id="messages" class="messagesHeight"><bean:message
@@ -82 +82 @@
                 </div>
 
-                <div id="containerOptionTitle" class="span-8">
+                <div id="containerOptionTitle" class="span-5">
                     <div id="messages" class="messagesHeight"><bean:message key="data.visualization.titleChoice"/></div>
-                    <textarea id="textareaTitle" cols="37" rows="2"></textarea>
+                    <textarea id="textareaTitle" cols="25" rows="1"></textarea>
                 </div>
 
-                <div id="containerOptionAxe" class="span-8">
-                    <div id="messages" class="messagesHeight"><bean:message key="data.visualization.axe"/></div>
+                <div id="containerOptionType" class="span-5">
+                    <div id="messages" class="messagesHeight"><bean:message key="data.visualization.type"/></div>
+                </div>
+
+                <div id="containerOptionPlots" class="span-10">
+                    <div id="messages" class="messagesHeight span-4"><bean:message key="data.visualization.graph"/></div>
+                    <div id="messages_number_parameters" class="messagesHeight messages_number_parameters"></div>
+                    <div id="containerOptionPlotsSelect" class="span-10"></div>
+                    <div id="containerOptionPlotsButtons" class="span-10"></div>
                 </div>
 
@@ -107 +114 @@
             interfaceTexts["data.visualization.Unvalid_Period"] = "<bean:message key="data.visualization.Unvalid_Period"/>";
             interfaceTexts["data.visualization.quicklook"] = "<bean:message key="data.visualization.quicklook"/>";
-            interfaceTexts["data.visualization.titleChoice"] = "<bean:message key="data.visualization.titleChoice"/>";
-            interfaceTexts["data.visualization.axe"] = "<bean:message key="data.visualization.axe"/>";
             interfaceTexts["data.visualization.button.today"] = "<bean:message key="data.visualization.button.today"/>";
             interfaceTexts["data.visualization.button.clear"] = "<bean:message key="data.visualization.button.clear"/>";
@@ -119 +124 @@
             interfaceTexts["data.visualization.selectHour"] = "<bean:message key="data.visualization.selectHour"/>";
             interfaceTexts["data.visualization.selectMinute"] = "<bean:message key="data.visualization.selectMinute"/>";
+
+            interfaceTexts["data.visualization.graph.noPlot"] = "<bean:message key="data.visualization.graph.noPlot"/>";
+            interfaceTexts["data.visualization.add"] = "<bean:message key="data.visualization.add"/>";
+            interfaceTexts["data.visualization.button.init"] = "<bean:message key="data.visualization.button.init"/>";
+            interfaceTexts["data.visualization.parameter"] = "<bean:message key="data.visualization.parameter"/>";
+            interfaceTexts["data.visualization.parameter.add"] = "<bean:message key="data.visualization.parameter.add"/>";
+            interfaceTexts["data.visualization.parameter.init"] = "<bean:message key="data.visualization.parameter.init"/>";
+
 
             interfaceTexts["<%=AxeTypeForFixedPlateform.TIME_LINE%>"] = "<bean:message key="data.visualization.axeType.TimeLine"/>";