topic Re: Screenshot Widget in Web AppBuilder Custom Widgets Questions

Screenshot Widget

Anonymous User — Tue, 10 Jan 2017 20:43:24 GMT

Screenshot (WAB 1.x works / WAB 2.x unknown)

This widget is designed to take a screenshot of the entire viewport of the WebApp window. Widget bar and all. It then prompts the user to open or save it as an image file. Note: this wdget requires PHP.

Screenshot widget at kevinsagis/ScreenshotDemo · GitHub

Widget demo at: screenshotwidget

Why is Screenshot useful? Maybe your users want to see "exactly what you are seeing" which was my user request. This is powered by html2canvas, canvas to blob, and filesaver.js, Credits in documentation.

Status: 1.0 b 1 -- Screenshot works now, as in this link, with WebApp Builder 1.x. It is unknown if working in WAB 2.x. Note sometimes there are minor graphical oddities like the button's CSS but these limitations are well explained by the html2canvas author Niklas. Also, minor caveat, at small-scale levels, i.e. zoomed out farther than 20,000, sometimes esri basemap tiles will not load. this appears to be a caveat with html2canvas and sporadic. Report results back. For our purposes this widget now works great! I may turn it into a 'feedback' widget in the future.

I am using this proxy: brcontainer/html2canvas-php-proxy · GitHub

Note as this uses PHP. There are also Python and ASP.NET proxies. These do not work inside WebApp Builder! WebApp Builder runs on node.js. PHP will run inside node.js but only after you install some other libraries. The simple solution I elected to follow is to put this widget into your application after Downloading it out of WebApp Builder, and tweak it after downloading, if desired.\

Screenshot "Alternate Version" 1.0: If you need a true screenshot, use this:

Demo site: screenshotaltvers

Git: kevinsagis/ScreenshotAlternateVers · GitHub

It is just About with text instructing users to leverage the screenshot capability built in to the operating system (Windows). For Mac, you'd add the text to press "Command (⌘)-Shift-3". This is probably a better method anyway if you need a true screenshot. Javascript can never really do a true screenshot, by design, for security. The Screenshot 1.0 original version just copies the DOM to a new canvas object, then other code pipes it to a Save As. This 'alternate' widget has users leverage the screenshot Windows / MacOS provide. You can edit the text easily in this because it is actually just the About widget.

Re: Screenshot Widget

MichaelRobb — Tue, 10 Jan 2017 23:53:38 GMT

Not sure I 'get' the screen shot widget. Id much prefer to use some other 3rd party tool such as GreenShot to do a faster screen shot and also have the added benefit ability to highlight, mark up, create arrows or even obfuscate sensitive data.

Re: Screenshot Widget

Anonymous User — Wed, 11 Jan 2017 17:21:07 GMT

There was a user request for us to replicate the Adobe Flash 'Screenshot' widget from Flex builder, if you have seen that. Of course it is impossible to grab a screenshot through Javascript, it being a security issue. However, what this does is replicate it a shadow regeneration of the DOM. This sometimes causes issues. It may or may not be useful to folks though, as it should re-create the toolbar etc. However, I settled upon directing users to employ the Windows screenshot key with a 'hint' in an About widget with instructions. I posted this here in case it is of use to others..

Re: Screenshot Widget

NicoLuus — Wed, 25 Jan 2017 14:00:09 GMT

Hi Kevin, thanks for the app. It was very easy to implement with your instructions. All panes, pop-ups & the basemap captures perfectly.

However for some reason the layers are not pulled through. Also if I have a chart widget open the values don't pull through and it will show "null" values. Have you come across this yet and have any idea to fix it?

Re: Screenshot Widget

CCWeedcontrol — Thu, 26 Jan 2017 21:51:32 GMT

This widget is nice, although i can't get it to work with Web Appbuilder 2.2.

Re: Screenshot Widget

NicoLuus — Thu, 09 Feb 2017 09:44:14 GMT

Hi 2CDSD 2C,

Up to which point do you come that you say the widget does not work for WAB 2.2?

I find that whenever I add the widget to the list.json, all the other widgets also dissapear in the WAB "Choose Widget" screen.

Re: Screenshot Widget

Anonymous User — Thu, 09 Feb 2017 19:35:32 GMT

2CDSD 2C‌ Nico Luus‌ I will look in to it! I am currently porting a variety of 1.x sites to WAB with much customization.

Re: Screenshot Widget

AdamGebhart — Mon, 27 Jul 2020 16:37:06 GMT

Kevin MacLeod‌ - do you have a version of this that works with 2.13? The custom widget list indicates compatibility with 2.x versions is or was unknown.

I downloaded the code I could find on GitHub and added it to an app but I don't think it's actually taking a screenshot. I did update the proxy line (42) in widget.js to the full path of my app + /widgets/Screenshot/tml2canvasproxy.php.

Re: Screenshot Widget

Anonymous User — Mon, 27 Jul 2020 22:11:28 GMT

Hi Adam Gebhart It's been a long time. It was working great with earlier versions like 2.5 or 2.6. However, the main issue was it was not a "screen shot" per se, but a re-creation of the DOM. It would sometimes be missing elements. A more modern approach with React and virtual DOM (VDOM) might work great. This one was 90%-ish and so while it may work for very simple use cases, for heavily customized WebApp Builder Developer it may not be appropriate. The "goal" was to re-create the old Screenshot widget in Flash. The reason it worked well in Flash was that Flash punched a hole in the browser security model and actually allowed for a true screenshot. Of course JavaScript alone can't command the OS-level of a screenshot. And using the open source libraries to re-create the DOM I had hoped would work well enough but frankly, while it mostly works, with older 2.x WebApp versions, I would recommend starting from scratch and looking into ReactJS and VDOM.