topic Re: Opacity in print tool in ArcGIS JavaScript Maps SDK Questions

Opacity in print tool

MatejSkerjanc — Wed, 05 Sep 2012 06:13:42 GMT

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?

Re: Opacity in print tool

derekswingley1 — Wed, 05 Sep 2012 14:25:16 GMT

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.

Re: Opacity in print tool

MatejSkerjanc — Thu, 06 Sep 2012 04:53:05 GMT

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=ALYn5wXeQi7MVaZQwWxd12TPqcEzd2uCi8M4aSdZjik.","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=ALYn5wXeQi7MVaZQwWxd12TPqcEzd2uCi8M4aSdZjik.","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

Re: Opacity in print tool

derekswingley1 — Thu, 06 Sep 2012 11:46:34 GMT

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?

Re: Opacity in print tool

MatejSkerjanc — Thu, 06 Sep 2012 12:08:44 GMT

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

Re: Opacity in print tool

MatejSkerjanc — Tue, 11 Sep 2012 09:58:34 GMT

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!

Re: Opacity in print tool

MatejSkerjanc — Wed, 12 Sep 2012 06:22:32 GMT

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

Re: Opacity in print tool

derekswingley1 — Wed, 12 Sep 2012 13:32:38 GMT

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?

Re: Opacity in print tool

MatejSkerjanc — Wed, 12 Sep 2012 14:37:01 GMT

they dont
Let me show you best example

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

left is the application right is the printed png

Re: Opacity in print tool

JohnGravois — Fri, 21 Sep 2012 15:29:11 GMT

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.