topic Re: eDraw widget in Web AppBuilder Custom Widgets Questions

eDraw widget

JeremieCornet1 — Tue, 24 Feb 2015 09:17:02 GMT

Ehanced draw widget for WebApp Builder for Arcgis

UPDATE 2018/05/09 (new Release v2.8.1) :

refactoring
use esri/geometry/projection (available since esri js api 3.24) instead of proj4js (external libs)
systematic use of geometry engine (no more mercator utils, geometry server...)
for polyline, the user can now add an arrow (available since esri js api 3.23)
live measure while drawing
WARNING : this release needs Esri API >= 3.24

Release 2.8.1 on Github

(Direct zip link : https://github.com/magis-nc/esri-webappbuilder-widget-eDraw/releases/download/v2.8.1/eDraw.zip )

Demo : https://apps.magis.nc/demo/eDraw/

Github :

https://github.com/magis-nc/esri-webappbuilder-widget-eDraw

Wigdet's Features (improvments of standard Draw widget) :

add name and description fields on drawings
enable infowindow on drawings (selection)
on text drawing, no insert if no name.
on modification : enable geometry update (with snapping if wanted : CTRL) and preview symbology changes on the fly
list
- add list of all drawings
- actions on each drawing : modify / delete / [up / down] / zoom
- all drawings : zoom, copy, delete, export
- on drawing infowindow -> select drawing in list
- on zoom on a drawing -> select drawing on map (and show infoWindow)
- re-order graphics with drag&drop
import/export : allow users to export or import drawings (json format)
- import can be done with file drag&drop in import popup
localStorage
- dynamic saving on each drawing add/delete/update
- on widget load : load drawings saved in local Storage
draws plus (initially from Larry Stout https://geonet.esri.com/people/Larry_Stout)
- preview under mouse when adding text or point
- for text, add font choice, font angle, bold, italic, placement and underline options.
- add arrow menu for polyline
checkbox to hide drawing's layer (and therefore widget UI)
add of Nautical unit
measure's for points/polylines/polygons with automatic update on element's update (or delete). Measure's can be indidualy disabled/enabled on any graphic.
"On the fly" measure when drawing
defaults symbols can be specified in config's file
use of builtin projection engine (available since esri js api 3.24) instead of proj4js library

This message was updated by Jeremie Cornet (New Release)

Re: Some opinion on a beta eDraw widget

RobertScheitlin__GISP — Tue, 24 Feb 2015 14:01:36 GMT

Jeremie,

Great work.

My initial comment have to do with UI, and most will just be my preferences/opinions

I don't use Alerts in any of my widget (I just don't like them). In WAB there is a Message dijit that I would use instead.
Your save, cancel, and reset buttons look like they are disabled but are not and they could use some padding-bottom in your css (see GUI-1.jpg)
Your buttons when you complete a drawing the pencil, delete, up, down, zoom should have a title attribute so that they display a tooltip to the use to know what they do before clicking on them (see GUI-2.jpg).

Re: Some opinion on a beta eDraw widget

JeremieCornet1 — Tue, 24 Feb 2015 22:20:06 GMT

Thanks for your answer Robert.

(I just edit the post...)

1. I didn't find documentation on jimu/dijit/Message so i use it just for information message (like in widget loading if there are drawings saved in local storage).

For example, the type 'error' wich is mentionned in source code doesn't work (when passing type:error in constructor parameters).

2. Ok.

It just jimu-input class now. I will add css to have better experience with these buttons.

3. Ok.

Thanks

Re: Some opinion on a beta eDraw widget

LarryStout — Thu, 26 Feb 2015 18:14:18 GMT

Jeremie,

I love the widget. I second all of Robert's comments, plus I have a few of my own:

A. Can't change the name or location when exporting a file.

B. Can't enter text. The text preview is always the same as drawing name

C. Not sure what I am saving. If only one drawing, then how do I select another drawing to export?

D. The drawings should be selectable on the widget as well as on the map.

That said, I've copied a few goodies from my Flex Viewer to the Esri Draw Widget for text. You can select the font, make the font bold, italic, and/or underlined, rotate the text, and best of all the text floats over the map with your cursor when you place it. I'm planning to add a checkbox for a text halo, too.

Some of these enhancements should also work for point symbols. I never want the user to be surprised with the placement of text or points when they click on the map to place them.

Larry

Re: Some opinion on a beta eDraw widget

LarryStout — Thu, 26 Feb 2015 18:15:28 GMT

P.S. My draw widget is here. I didn't change any of the Esri code. It's all done with dojo/aspect.

Re: Some opinion on a beta eDraw widget

LarryStout — Thu, 26 Feb 2015 18:16:28 GMT

PPS ArcGIS Web Application

Re: Some opinion on a beta eDraw widget

JeremieCornet1 — Thu, 26 Feb 2015 22:49:24 GMT

Larry,

A. Changing target location depends on your browser's settings.

For the default file name, 2 options i think :

1) Let the user modify it in a text field

2) In widget config (i prefer this one)

B. Yes, it's a choice. Therefore it can be discussed !

C. The file exported contains all drawings.

D. I have added the map selection yesterday ! (i hav'nt yet update the demo)

Your text's options are great ! We could merge our 2 widgets.

Could you send me the code ?

Are you familiar with git ? We could work on the same github repository !

Re: Some opinion on a beta eDraw widget

JeremieCornet1 — Thu, 26 Feb 2015 23:49:35 GMT

It was hard to find but I've pick your code up in http://gis.hamiltoncounty.in.gov/mapviewer/index.html

To include your text improvments, i think i will extend the jimu/dijit/SymbolChooser class in a widgets/eDraw/MySymbolChooser class and call this new class in eDraw widget instead of jimu/dijit/SymbolChooser.

And i will correct a bug i found in jimu/dijit/SymbolChooser in this extended class.

Re: Some opinion on a beta eDraw widget

LarryStout — Fri, 27 Feb 2015 14:28:55 GMT

I'm in the process of implementing dynamic placement of points, triangles, circles and ellipses also, I think the user should never be surprised at what he is drawing. I'll keep you posted.

I'm also going to add a halo option for text.

Larry

Re: Some opinion on a beta eDraw widget

BrandonKeinath1 — Fri, 27 Feb 2015 14:43:52 GMT

Hi Larry,

Is the code for the widget transparency functionality somewhere I could look at? It seem helpful.

Thanks,

Brandon

Re: Some opinion on a beta eDraw widget

LarryStout — Fri, 27 Feb 2015 15:00:44 GMT

Brandon,

The widget opacity is a mixin that can be added to any panel widget by reference. It's one of the few enhancements I've made that requires editing the widget code, but it only affects three lines of code. I have put my mixin in my Acme Widget folder just for convenience. It can be anywhere you want.

I've attached the Widget Opacity Mixin and what little documentation I have written so far (includes all of my WAB enhancements).

The documentation is in its very early stages, so feel free to ask follow-up questions.

Larry

Re: Some opinion on a beta eDraw widget

MichaelJenkins — Fri, 27 Feb 2015 18:32:16 GMT

This is great! Both custom draw widgets are an improvement over the out of the box widget, and combining your efforts is going to make this an awesome draw widget.

Someday we will even be able to edit the shapes once they have been drawn, I have no doubt.

Kudos! Jeremie Cornet‌ and Larry Stout‌

Re: Some opinion on a beta eDraw widget

BrandonKeinath1 — Sat, 28 Feb 2015 20:48:58 GMT

Thanks Larry,

I will read through your documentation and let you know any thoughts/comments.

Best,

Brandon

Re: eDraw widget

DanielStoelb — Wed, 06 May 2015 20:15:50 GMT

Jeremie,

I'm having issues working with this tool in the IE environment. It appears to be working fine when using Chrome, but when trying to export the drawing file, it opens up a separate tab on the browser with the text that should be in the .json file. The specific version of IE I'm using is IE 11. Any thoughts on how to resolve?

Re: eDraw widget

JeremieCornet1 — Mon, 11 May 2015 00:28:27 GMT

Hi Daniel,

I will work on this problem this week.

At this time, the browser choose to open it as a file or in a tab. I will try to force it as a file.

Re: eDraw widget

JeremieCornet1 — Sun, 17 May 2015 23:57:17 GMT

It's now ok for IE >= 10 and could work on IE 9 (depending on IE security's settings).

(HTML5 browsers with support for data in href were allready OK)

Re: eDraw widget

JeremieCornet1 — Mon, 18 May 2015 00:03:30 GMT

New release (see first post)

Re: eDraw widget

PingYang — Fri, 22 May 2015 16:21:46 GMT

I am kind of in struggling in simplifying the eDraw example widget for a simple use. What I plan to do is:

1) Draw polygon on the map

2)Turn the draw result (graphics) into feature set, I have seen some code like this:

var featureSet = new FeatureSet();
var features = [];
features.push(map.graphics.graphics[0]);
featureSet.features = features;

3) use derived featureset to clip with other layers(e.g. another polygon layer or point layer) for spatial analyses.

However I couldn't figure out how can I accommodate this code into the existing example.

Could you provide some hints?

Thanks,

Peter

Re: eDraw widget

JeremieCornet1 — Mon, 25 May 2015 22:27:38 GMT

Hi,

You may start "from scratch".

For the polygon drawing, use the draw toolbar directly :

Draw | API Reference | ArcGIS API for JavaScript

(The draw widget uses a wab dijit : drawBox which is too advanced for your simple needs).

PS : in a wab widget, you can access the map with this.map

Re: eDraw widget

PingYang — Tue, 26 May 2015 21:36:05 GMT

Thanks for the suggestion.

I got something confused which is how to turn the ArcGIS API for JavaScript Sandbox into a widget code,

especially when I plan to have the two functions initToolbar and addGraphic:

function initToolbar() {

tb = new Draw(map);

tb.on("draw-end", addGraphic);

// event delegation so a click handler is not

// needed for each individual button

on(dom.byId("info"), "click", function(evt) {

if ( evt.target.id === "info" ) {

return;

}

var tool = evt.target.id.toLowerCase();

console.log(tool);

map.disableMapNavigation();

tb.activate(tool);

});

}

in this function, tb.on("draw-end", addGraphic); I don't know how to invoke the "draw-end" function by calling the addGraphic.

function addGraphic(evt) {

//deactivate the toolbar and clear existing graphics

tb.deactivate();

map.enableMapNavigation();

// figure out which symbol to use

var symbol;

if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {

symbol = markerSymbol;

} else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {

symbol = lineSymbol;

}

else {

symbol = fillSymbol;

}

map.graphics.add(new Graphic(evt.geometry, symbol));

}

I am trying to understand the enableMapNavigation() function, it seems that there is not such function anymore.

Any idea?

Thanks,