Opacity in print tool

817
9
Jump to solution
09-04-2012 11:13 PM
MatejSkerjanc
Occasional Contributor
I made a print widget out of print task. After few prints i noticed the opaque symbols are rendered non transparent.
Are more complex symbols not supported?
0 Kudos
1 Solution

Accepted Solutions
derekswingley1
Frequent Contributor
I modified the print sample to use your symbols:
<!doctype html> <html lang="en">   <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title></title>     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/nihilo/nihilo.css">     <style type="text/css">       html, body {          height: 100%; width: 100%;         margin: 0; padding: 0;       }        body{         background-color: #fff; overflow:hidden;          font-family: sans-serif;       }        label {         display: inline-block;         padding: 5px 5px 0 5px;         font-weight: 400;         font-size: 12pt;       }       #header {         padding-top: 4px;         padding-right: 15px;         color: #444;          font-size:16pt; text-align:right;font-weight:bold;         height:55px;         background: #fff;         border-bottom: 1px solid #444;       }       #subheader {         font-size:small;         color: #444;         text-align:right;         padding-right:20px;       }       #header, #subheader {         text-shadow: 1px 1px 1px #cee1f0;         filter: dropshadow(color=#cee1f0, offx=1, offy=1);       }       #rightPane{         margin: 0;         padding: 10px;         background-color: #fff;         color: #421b14;         width: 180px;       }        .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }       #ds-h div { width: 100%; }       #ds-l div, #ds-r div { height: 100%; }       #ds-r div { right: 0; }       #ds .o1 { filter: alpha(opacity=10); opacity: .1; }       #ds .o2 { filter: alpha(opacity=8); opacity: .08; }       #ds .o3 { filter: alpha(opacity=6); opacity: .06; }       #ds .o4 { filter: alpha(opacity=4); opacity: .04; }       #ds .o5 { filter: alpha(opacity=2); opacity: .02; }       #ds .h1 { height: 1px; }       #ds .h2 { height: 2px; }       #ds .h3 { height: 3px; }       #ds .h4 { height: 4px; }       #ds .h5 { height: 5px; }       #ds .v1 { width: 1px; }       #ds .v2 { width: 2px; }       #ds .v3 { width: 3px; }       #ds .v4 { width: 4px; }       #ds .v5 { width: 5px; }        /* make all dijit buttons the same width */       .dijitButton .dijitButtonNode, #drawingWrapper {         width: 160px;       }            </style>     <script>var dojoConfig = { parseOnLoad: true };</script>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>     <script>       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("dijit.form.Button");       dojo.require("dijit.form.CheckBox");       dojo.require("esri.map");       dojo.require("esri.toolbars.draw");       dojo.require("esri.dijit.Print");              var app = {};       app.map = null, app.toolbar = null, app.circle = false, app.symbols = null,        app.printer = null;       function init() {         esri.config.defaults.io.proxyUrl = "/~dswingley/esri_js/proxy/proxy.php";          var initialExtent = new esri.geometry.Extent({"xmin":-10399332,"ymin":3440549,"xmax":-9801289,"ymax":3705938,"spatialReference":{"wkid":102100}});         app.map = new esri.Map("map", {           extent: initialExtent,           wrapAround180: true         });         dojo.connect(app.map, 'onLoad', function() {           dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize);           app.toolbar = new esri.toolbars.Draw(app.map);           dojo.connect(app.toolbar, "onDrawEnd", addToMap);         });          // print dijit         app.printer = new esri.dijit.Print({           map: app.map,           url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"         }, dojo.byId("printButton"));         app.printer.startup();          var url = "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";         var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url, { "id": "Ocean" });         app.map.addLayer(tiledLayer);          // add census boundary dyn map svc         var dynUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";         var dynLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynUrl, { "id": "Boundaries" });         app.map.addLayer(dynLayer);          // create a check box         dojo.forEach(["Boundaries", "Ocean"], function(id) {           new dijit.form.CheckBox({             id: "cb_" + id,             name: "cb_" + id,             checked: true,             onChange: function(bool) {               bool ?                  app.map.getLayer(this.id.split('_')[1]).show() :                 app.map.getLayer(this.id.split('_')[1]).hide();             }           }, dojo.create('input', { id: 'lyr_' + id })).placeAt(dojo.byId('layerToggle'));            // create a label for the check box           var label = dojo.create('label', {              "for": "cb_" + id,             "innerHTML": id           });           dojo.place(label, dojo.byId('layerToggle'));           dojo.place(dojo.create('br'), dojo.byId('layerToggle'));         });           // set up symbols for the various geometry types         app.symbols = {};         var es = esri.symbol;         var dc = dojo.Color;         app.symbols.point = new es.SimpleMarkerSymbol(es.SimpleMarkerSymbol.STYLE_SQUARE, 20, null, new dc([255, 255, 0, 0.5]));         app.symbols.polyline = new es.SimpleLineSymbol("dashdot", new dc([255, 0, 255]), 5);         app.symbols.polygon = new es.SimpleFillSymbol(es.SimpleFillSymbol.STYLE_SOLID, new es.SimpleLineSymbol("dashdot", new dc([255, 0, 0]), 5), new dc([255, 255, 0, 0.25]));          // find the divs for buttons         dojo.forEach(dojo.query(".drawing"), function(btn) {           var button = new dijit.form.Button({             label: btn.innerHTML,             onClick: function() {               activateTool(this.id);             },             style: { "width": "100%", "margin": "3px auto", "textAlign": "center" }           }, btn);         });       }        function addToMap(geom) {         app.toolbar.deactivate();         app.map.showZoomSlider();         var graphic = new esri.Graphic(geom, app.symbols[geom.type]);         app.map.graphics.add(graphic);       }        function activateTool(type) {         app.toolbar.activate(type);         app.map.hideZoomSlider();       }        dojo.ready(init);     </script>   </head>   <body class="nihilo">     <div id="mainWindow"           data-dojo-type="dijit.layout.BorderContainer"           data-dojo-props="design:'headline',gutters:false"          style="width: 100%; height: 100%; margin: 0;">       <div id="header"             data-dojo-type="dijit.layout.ContentPane"            data-dojo-props="region:'top'">         Print Dijit:  Out of the Box Printing for the ArcGIS API for JavaScript         <div id="subheader">Requires ArcGIS Server 10.1</div>       </div>       <div id="map" class="shadow"             data-dojo-type="dijit.layout.ContentPane"            data-dojo-props="region:'center'">          <!-- drop shadow divs -->         <div id="ds">           <div id="ds-h">             <div class="ds h1 o1"></div>             <div class="ds h2 o2"></div>             <div class="ds h3 o3"></div>             <div class="ds h4 o4"></div>             <div class="ds h5 o5"></div>           </div>           <div id="ds-r">             <div class="ds v1 o1"></div>             <div class="ds v2 o2"></div>             <div class="ds v3 o3"></div>             <div class="ds v4 o4"></div>             <div class="ds v5 o5"></div>           </div>         </div> <!-- end drop shadow divs -->                    </div>       <div id="rightPane"            data-dojo-type="dijit.layout.ContentPane"            data-dojo-props="region:'right'">          <div id="printButton"></div>         <hr />                  <div id="drawingWrapper">           Add some graphics:           <div id="point" class="drawing">Point</div>           <div id="freehandpolyline" class="drawing">Freehand Polyline</div>           <div id="freehandpolygon" class="drawing">Freehand Polygon</div>         </div>         <hr />         <div id="layerToggle">           Toggle Layers: <br />           <!-- checkbox and labels inserted programmatically -->         </div>       </div>     </div>   </body> </html>???


The print output from that page honors symbol transparency.

In your initial post, you said "After a few prints". Does the issue you're describing happen when hitting your print button multiple times? Is it possible that you're adding graphics multiple times which cause them to appear less transparent than you're expecting?

View solution in original post

0 Kudos
9 Replies
derekswingley1
Frequent Contributor
Can you provide an example? The JS used to create your symbol would be helpful, as well as the JSON sent to the print task.
0 Kudos
MatejSkerjanc
Occasional Contributor
well the styles for symbols are like this:
pointStyle: new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, null, new dojo.Color([255, 255, 0, 0.5])),
polyStyle: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255, 0, 0]), 5), new dojo.Color([255, 255, 0, 0.25])),
lineStyle: new esri.symbol.SimpleLineSymbol("solid", new dojo.Color([255, 0, 255]), 5)

And i think this is the JSON you were looking for
f:json
Web_Map_as_JSON:{"mapOptions":{"extent":{"xmin":357989.5552217045,"ymin":18511.5409952209,"xmax":443317.8508782958,"ymax":64482.98710477979,"spatialReference":{"wkid":102060}},"spatialReference":{"wkid":102060},"scale":250000},"operationalLayers":[{"id":"base0","url":"http://mars.xxx.local:6080/arcgis/rest/services/Skupni/OK_GDKarta/MapServer?token=xxx.","title":"base0","opacity":1},{"id":"operational0","url":"http://mars.xxx.local:6080/arcgis/rest/services/Skupni/GDDynamic/MapServer?token=ALYn5wXeQi7MVaZQwWx....","title":"operational0","opacity":1,"visibleLayers":[14,30,31,39],"layers":[]},{"id":"graphicsLayer0","url":"http://mars.xxx.local:6080/arcgis/rest/services/Skupni/GDDynamic/MapServer/5?token=ALYn5wXeQi7MVaZQw....","title":"graphicsLayer0","minScale":0,"maxScale":0,"layerDefinition":{"drawingInfo":{"renderer":{"type":"simple","symbol":{"color":[255,255,0,64],"outline":{"color":[255,0,0,255],"width":3.75,"type":"esriSLS","style":"esriSLSDashDot"},"type":"esriSFS","style":"esriSFSSolid"}}},"objectIds":[8]}}],"exportOptions":{"outputSize":[800,1100],"dpi":96},"layoutOptions":{"titleText":"Title1","authorText":"Author1","copyrightText":"All rights reserved - plati eure","scaleBarOptions":{"metricUnit":"Meters","metricLabel":"m","nonMetricUnit":"Feet","nonMetricLabel":"ft"},"legendOptions":{"operationalLayers":[{"id":"operational0","subLayerIds":[14,30,31,39]},{"id":"graphicsLayer0"}]}}}
Format:png32
Layout_Template:A4 Portrait
token:xxxx
0 Kudos
derekswingley1
Frequent Contributor
I modified the print sample to use your symbols:
<!doctype html> <html lang="en">   <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>     <title></title>     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/nihilo/nihilo.css">     <style type="text/css">       html, body {          height: 100%; width: 100%;         margin: 0; padding: 0;       }        body{         background-color: #fff; overflow:hidden;          font-family: sans-serif;       }        label {         display: inline-block;         padding: 5px 5px 0 5px;         font-weight: 400;         font-size: 12pt;       }       #header {         padding-top: 4px;         padding-right: 15px;         color: #444;          font-size:16pt; text-align:right;font-weight:bold;         height:55px;         background: #fff;         border-bottom: 1px solid #444;       }       #subheader {         font-size:small;         color: #444;         text-align:right;         padding-right:20px;       }       #header, #subheader {         text-shadow: 1px 1px 1px #cee1f0;         filter: dropshadow(color=#cee1f0, offx=1, offy=1);       }       #rightPane{         margin: 0;         padding: 10px;         background-color: #fff;         color: #421b14;         width: 180px;       }        .ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }       #ds-h div { width: 100%; }       #ds-l div, #ds-r div { height: 100%; }       #ds-r div { right: 0; }       #ds .o1 { filter: alpha(opacity=10); opacity: .1; }       #ds .o2 { filter: alpha(opacity=8); opacity: .08; }       #ds .o3 { filter: alpha(opacity=6); opacity: .06; }       #ds .o4 { filter: alpha(opacity=4); opacity: .04; }       #ds .o5 { filter: alpha(opacity=2); opacity: .02; }       #ds .h1 { height: 1px; }       #ds .h2 { height: 2px; }       #ds .h3 { height: 3px; }       #ds .h4 { height: 4px; }       #ds .h5 { height: 5px; }       #ds .v1 { width: 1px; }       #ds .v2 { width: 2px; }       #ds .v3 { width: 3px; }       #ds .v4 { width: 4px; }       #ds .v5 { width: 5px; }        /* make all dijit buttons the same width */       .dijitButton .dijitButtonNode, #drawingWrapper {         width: 160px;       }            </style>     <script>var dojoConfig = { parseOnLoad: true };</script>     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>     <script>       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("dijit.form.Button");       dojo.require("dijit.form.CheckBox");       dojo.require("esri.map");       dojo.require("esri.toolbars.draw");       dojo.require("esri.dijit.Print");              var app = {};       app.map = null, app.toolbar = null, app.circle = false, app.symbols = null,        app.printer = null;       function init() {         esri.config.defaults.io.proxyUrl = "/~dswingley/esri_js/proxy/proxy.php";          var initialExtent = new esri.geometry.Extent({"xmin":-10399332,"ymin":3440549,"xmax":-9801289,"ymax":3705938,"spatialReference":{"wkid":102100}});         app.map = new esri.Map("map", {           extent: initialExtent,           wrapAround180: true         });         dojo.connect(app.map, 'onLoad', function() {           dojo.connect(dijit.byId('map'), 'resize', app.map, app.map.resize);           app.toolbar = new esri.toolbars.Draw(app.map);           dojo.connect(app.toolbar, "onDrawEnd", addToMap);         });          // print dijit         app.printer = new esri.dijit.Print({           map: app.map,           url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"         }, dojo.byId("printButton"));         app.printer.startup();          var url = "http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";         var tiledLayer = new esri.layers.ArcGISTiledMapServiceLayer(url, { "id": "Ocean" });         app.map.addLayer(tiledLayer);          // add census boundary dyn map svc         var dynUrl = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";         var dynLayer = new esri.layers.ArcGISDynamicMapServiceLayer(dynUrl, { "id": "Boundaries" });         app.map.addLayer(dynLayer);          // create a check box         dojo.forEach(["Boundaries", "Ocean"], function(id) {           new dijit.form.CheckBox({             id: "cb_" + id,             name: "cb_" + id,             checked: true,             onChange: function(bool) {               bool ?                  app.map.getLayer(this.id.split('_')[1]).show() :                 app.map.getLayer(this.id.split('_')[1]).hide();             }           }, dojo.create('input', { id: 'lyr_' + id })).placeAt(dojo.byId('layerToggle'));            // create a label for the check box           var label = dojo.create('label', {              "for": "cb_" + id,             "innerHTML": id           });           dojo.place(label, dojo.byId('layerToggle'));           dojo.place(dojo.create('br'), dojo.byId('layerToggle'));         });           // set up symbols for the various geometry types         app.symbols = {};         var es = esri.symbol;         var dc = dojo.Color;         app.symbols.point = new es.SimpleMarkerSymbol(es.SimpleMarkerSymbol.STYLE_SQUARE, 20, null, new dc([255, 255, 0, 0.5]));         app.symbols.polyline = new es.SimpleLineSymbol("dashdot", new dc([255, 0, 255]), 5);         app.symbols.polygon = new es.SimpleFillSymbol(es.SimpleFillSymbol.STYLE_SOLID, new es.SimpleLineSymbol("dashdot", new dc([255, 0, 0]), 5), new dc([255, 255, 0, 0.25]));          // find the divs for buttons         dojo.forEach(dojo.query(".drawing"), function(btn) {           var button = new dijit.form.Button({             label: btn.innerHTML,             onClick: function() {               activateTool(this.id);             },             style: { "width": "100%", "margin": "3px auto", "textAlign": "center" }           }, btn);         });       }        function addToMap(geom) {         app.toolbar.deactivate();         app.map.showZoomSlider();         var graphic = new esri.Graphic(geom, app.symbols[geom.type]);         app.map.graphics.add(graphic);       }        function activateTool(type) {         app.toolbar.activate(type);         app.map.hideZoomSlider();       }        dojo.ready(init);     </script>   </head>   <body class="nihilo">     <div id="mainWindow"           data-dojo-type="dijit.layout.BorderContainer"           data-dojo-props="design:'headline',gutters:false"          style="width: 100%; height: 100%; margin: 0;">       <div id="header"             data-dojo-type="dijit.layout.ContentPane"            data-dojo-props="region:'top'">         Print Dijit:  Out of the Box Printing for the ArcGIS API for JavaScript         <div id="subheader">Requires ArcGIS Server 10.1</div>       </div>       <div id="map" class="shadow"             data-dojo-type="dijit.layout.ContentPane"            data-dojo-props="region:'center'">          <!-- drop shadow divs -->         <div id="ds">           <div id="ds-h">             <div class="ds h1 o1"></div>             <div class="ds h2 o2"></div>             <div class="ds h3 o3"></div>             <div class="ds h4 o4"></div>             <div class="ds h5 o5"></div>           </div>           <div id="ds-r">             <div class="ds v1 o1"></div>             <div class="ds v2 o2"></div>             <div class="ds v3 o3"></div>             <div class="ds v4 o4"></div>             <div class="ds v5 o5"></div>           </div>         </div> <!-- end drop shadow divs -->                    </div>       <div id="rightPane"            data-dojo-type="dijit.layout.ContentPane"            data-dojo-props="region:'right'">          <div id="printButton"></div>         <hr />                  <div id="drawingWrapper">           Add some graphics:           <div id="point" class="drawing">Point</div>           <div id="freehandpolyline" class="drawing">Freehand Polyline</div>           <div id="freehandpolygon" class="drawing">Freehand Polygon</div>         </div>         <hr />         <div id="layerToggle">           Toggle Layers: <br />           <!-- checkbox and labels inserted programmatically -->         </div>       </div>     </div>   </body> </html>???


The print output from that page honors symbol transparency.

In your initial post, you said "After a few prints". Does the issue you're describing happen when hitting your print button multiple times? Is it possible that you're adding graphics multiple times which cause them to appear less transparent than you're expecting?
0 Kudos
MatejSkerjanc
Occasional Contributor
there's only one graphic, no cascading

I think i read about printing not supporting complex symbols, but dont know if source was reliable


oh...just tested your example and it works... Now i have no clue what could be causing it but the dimnished opacity due to cascading was a good call, but it's not the issue here
0 Kudos
MatejSkerjanc
Occasional Contributor
marked as an answer since i noticed that if i zoom in enough i can see the item is transparent to some extent but really hardly visible. I guess ill have to tone up the opacity factor. Thank you!
0 Kudos
MatejSkerjanc
Occasional Contributor
http://i50.tinypic.com/14csf7s.png

this is the problem i was refering to, now it's not opaque at all. And i know i had a polygon and i made it opaque once. Now i'm really confused
0 Kudos
derekswingley1
Frequent Contributor
http://i50.tinypic.com/14csf7s.png

this is the problem i was refering to, now it's not opaque at all. And i know i had a polygon and i made it opaque once. Now i'm really confused


Should the yellow squares be semi-transparent? How do the symbols used to generate that print output differ from what you posted previously in this thread?
0 Kudos
MatejSkerjanc
Occasional Contributor
they dont
Let me show you best example


http://tinypic.com/r/10y2equ/6

left is the application right is the printed png
0 Kudos
JohnGravois
Frequent Contributor
in a tech support call, Matej and i isolated a problem in REST in which transparency for featureLayer selectionSymbols is not honored in the output created by 10.1 print services.  the issue was documented as [#NIM085074  Opacity supplied via a selectionSymbol color tag is not honored in exported web maps. ].  please don't hesitate to contact support if you would like to have your name added to the list of customers affected by the issue.

in the meantime, the best workaround i can think of in this situation is to work with a normal graphics layer instead.
0 Kudos