All,
I have a requirement to enable users of our web page to download jpeg images of the Bing maps that we have put on our forest fire simulation dot net aspx web page. The page in question presently displays a Bing map and up to 96 shapes in as many layers which can take up to 20 seconds to load completely. I could put all these shapes on one layer if it would help - but I an not sure that it would and I thought I would ask here first.
Apparently, any "complicated" client side actions (like ALT-print screen, print from the web page, mwsnap3, or other third party solutions) will not suffice, so I am told to implement a button on the page that will download (or make available) a jpeg image document/image when it is pressed on the page.
I started with a great thread at Convert webpage to image from ASP.NET. ,which is really close to what I want, but the page gets rendered on the browser.ReadyState != WebBrowserReadyState.Complete transition, which fires off before my shapes are loaded on the Bing canvas. I tried to render the page on the DocumentTitleChanged event (and then tried to change the title when my shaped completed loading), but this did not work either.
I tried to force the "Print screen" character with javascript (see Is it possible to simulate key press events programmatically?), but this translated into a comma (decimal 44) and did not work as expected.
I also see that HTLM5 has some support for this ( http://www.nihilogic.dk/labs/canvas2image ) but while this worked in FireFox, it did not work in IE, which is the browser of choice. I also want to run this on mobile devices, which might not support HTML5 for some time either.
I have a few questions:
1 - Is there another (simple) way to print the contents of the web page that I am missing?
2 - Is there some other WebBrowser event that I can fire that will make more sense)?
3 - Would it help if I stated with some other control then put the maps and shapes on this control for subsequent printing?
4 - Does this go against the grain of web browsing and is just a bad idea (seems that if I can force a 'print screen' then evil web sites could force a Ctrl-Alt-Delete button sequence)?
Thanks - Steve
It might not be an approach you want to do as it will require you to repeat alot of the functionality you already have in a different way but the only truely full proof way to do this is to get the map as an image from the bing maps static imagery service and use GDI+ to draw onto the map yourself then just serve that image direct to the user. Gets round any browser issues but a fair amount of work depending on your requirements:
http://rbrundritt.wordpress.com/2009/02/22/drawing-routes-with-the-ve-web-service/
Related
So the situation is that I have a media PC (Ubuntu, kodi, mythtv, chrome) and I have a chrome launcher for things like netflix to open up. However, this creates an issue when trying to browse with the remote (using an xbox 360 media remote).
I think the easiest way to get around this would be somehow be able to use the arrow and OK keys to navigate around different elements on the site (so in the main screen the different shows/movies, and in them the different episodes etc). There are 2 ways I see to approach this:
1) A generic solution. This means it would work for all websites, and may be a page with javascript that loads the required webpage into a frame or something similar, or it may be a chrome extension.
2) A site specific option. So code written just to be run on the netflix page and could be run from something like CJS (https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en).
I think one of the hardest things would be to work out where elements are on the page to be able to go left/right as well as up/down.
Any ideas?
I am working on a Titanium Appcelerator iOS app that contains an initial Dashboard screen and 2 separate screens that can be accessed from the Dashboard.
I have set up my app to use a navigation controller and everything is controlled from a main.js file using custom event listeners. I do this so that I can separate the code for each screen into separate files.
The problem is that with each screen that loads, I have to open the window on the nav stack and then add all the elements to it. This is fine for one of the screens because it just contains a few views and labels. However, the other screen has a MapView and it takes 3 seconds or so to load after the user sees the screen open.
What is the right way to handle this? Is there a way to preload the window before opening but to keep my current architecture?
I asked this question in a much more confusing and specific way, here but I think that this general question is applicable to more people as the architecture style I am using is fairly common.
I think your approach is fairly typical...unfortunately I don't know of any way to preload the content of your window. You may be able to improve the user experience as the map view loads by including a static image of the map canvas (in the same way Apple's UI guidelines recommend that the Default.png be an image of the app itself's basic interface to give the impression that it's loading quickly). You can also add a loading spinner in the form of a Ti.UI.ActivityIndicator. Both of these can be added by default to the window, then hidden as you show the map on the map view's load event. I think they'd probably help make that 3 second wait seem less painful.
I noticed in your other post that you observed the map still took a long time to load even when you weren't actively getting the user's GPS location. While true, you might be able to save some time by getting the location immediately upon app launch, then passing it to your map window with the custom event you're using, so the map could then be initialized directly on the user's location, rather than a dummy location.
for the navigation controller i started using https://github.com/vuinguyen/NavController
it works very well for ios/android and the git code was straight forward and easy to follow. its an enhanced version of the one Kevin Whinnery put out quite some time ago. I have been using it in 3.0 without any specific complaints. I've added the ability to suppress native ios navigation headers but aside from that it dropped right in.
I don't think so using the exact same architecture. Upon initial load of the app, you could load all your views within one window, instead of using multiple windows. Then, modify the one that is currently being shown by altering the zIndexes
The title is very self-explanatory, but I'll get into a deeper explanation here. I have a Firefox extension for my image hosting site (which is currently down).
It currently has two features:
Right click on image and remote upload
Right click on image, get a Javascript popup to enter new width and upload
What the extension still needs is a feature (or two) which allows the user to upload the current visible things on the browser or a full capture of the browser (including what's under the scrollbar).
What I have tried:
I have tried copying various pieces of code from other extensions and combine them with my own. They included stuff such as canvas which I did not really understand. I was able to get a base64 image string somehow (I don't exactly remember how). With that string, I thought the best way to achieve my goal is send it to my image host via XMLHttpRequest and create the image in my host. The ResponseText would be a link to the image.
As you can see, I was doing too much here - I obviously don't need to do extra handling in my server side for this issue. I think there are ways to handle everything from the extension only, without extra coding in my server-side (correct me if I am wrong).
Actual issue
This is the add-on: https://addons.mozilla.org/en-US/firefox/addon/imgit/
As you can see the two context menus that get added by the extension, I need a third context menu, which has an arrow to the right to open another menu with the two new options I need:
Capture visible screen and upload
Capture full screen and upload
The first option should capture and upload what's visible in the browser, excluding what's under the scrollbar. The second option should capture everything and upload it to my website, including what's under the scrollbar.
Adding the context menus is not a big deal, but making them behave the way I want is the problem I have. I have no idea how to start and my research around the web couldn't get me further. Creating the image via Javascript somehow (using canvas which I don't know how) and sending a base64 encoded string to my website could actually work, but taking the snapshot and making it base64 encoded is the problem. I'm also unsure if Firefox extensions actually let me use Ajax to send/receive data.
What I need from you
I need a logical approach to this issue. If you have an idea, please answer and showing code snippets would be really appreciated. I'm not a Javascript guru, but with some information on how to start, I could get myself out of this mess.
What is the best way to achieve what I want?
Check out the grabScreen function of the devtools' screenshot command.
I have been struggling with this issue for days now. I am implementing an application for Android and iOS using Sencha Touch. I want to be able to click on a link (a list item) which can point to a html or an image or maybe even PDF documents (for iOS). This file can be either local or on another domain.
I have found two different approaches so far, but haven't got any of them to work perfect. One approach is to change "window.location" and go to a html page containing a frame with a back button and another frame with the file I want to display. Scrolling and zooming works fine but when the user wants to go back the whole application has to be reloaded (all javascript files and so on..).
The other approach is to fetch the desired file using an ajax request and add the response text inside a panel. The problem with this is that the zooming is not working. I tried to listen for a pinch event and then scale the panel but then the scrolling stops working...
So the question is: How do i display external content such as HTML pages and pictures but still preserve the scroll and zoom capabilites and allow the user to go back without having to reload the whole application again?
I am grateful for all information i can get! /Christian
Add the following to your apps onCreate() method:
WebSettings settings = this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
It won't work if your ROM does not support mulit-touch but since it is already working in your browser this should do it.
If you are using PhoneGap, you can try to the ChildBrowser plug-in: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/ChildBrowser
For a pure mobile web app, use the HTML5 cache manifest to avoid reloading when you move between frames and pages: http://diveintohtml5.ep.io/offline.html
I want my users to be able to take a screenshot of the webpage (or me defining the size of the screenshot) and then allowing them to save it to their computer.
Does anyone know of a good JS lib that allows you to do this?
I know there are addons for the browser, but i wanted something pure JS so that the user can just click in a button and a "save as" link apears with a screenshot of what they are looking at.
Thanks for the help.
/fmsf
Browsers don't expose APIs that allow this to web pages, so there is no way to achieve this using plain JavaScript running in a page.
The only way to achieve this would be to have screen grabs prepared on the server, and a normal download link pointing to the appropriate one.
This can't be done in JavaScript. Taking screen shots outside the current document/domain is a potential security problem and is not possible. See my question about getting the pixel colour from the current mouse position for more background.
If you need to transmit the screen shots onto your server, look into external applications that interact with your web site. Open-source bug tracker Mantis for example has a screenshot application for Windows.
If the screenshot and the saving of the file are both to take place on the client computer, check out Fireshot for Firefox. It doesn't seem to offer any interaction capabilities with a pre-defined web site but may be the right tool for your users.
HTML2Canvas (http://html2canvas.hertzen.com/) recreates the rendered HTML into a canvas. And you can save the canvas as an image. That could do the trick, although it's not 100% accurate (and for good reasons - that would open security holes in browsers if that was possible, see https://stackoverflow.com/a/1936084/1333479).