We are getting ready for a trade show early next month where we will not have Internet access on the show floor. We've put together machines with local installations of apache, mysql, etc. and are using host files to mimic the various domains we access.
But, one feature of our software is using Google maps to get directions from one address in the system to another. In order to show this, I need to be able to spoof a map or two.
I don't need to zoom in or do anything with the map image for the show. Just need to show the rendered map page with the directions list, etc.
I'm not having any luck with browser extensions to capture the entire page to an image. They either crash, or don't get the part of the map below the scroll.
Does anybody have any thoughts on how to get this rigged up for the show - either programatically or using tools that you've tried and found to work?
Amy
just do a screen capture of the whole page
edit: saw the part about not having luck with browser extensions. On a PC, you can try SnagIt, which has a scroll-and-capture functionality. Or, just do it manually and stitch together in photoshop. It can't be that long of a page....
Related
I have a react app that has many image references ( tags <img src=... /> and css background:url(...)) type.
These images are hosted on Azure Storage.
To speed up my App loading time on various devices (desktops and mobile), I need to resize these images before they hit the client, ie, on the server somewhere.
So far, I can think of the following options:
Pick each image, and produce multiple versions of them for various standard device sizes. Then, pick up each <img src=... /> tag, and, using JS alter the image name, such that the right size of image gets served. This will not work with css.
Use Azure CDN to automatically resize images. I was hoping that resizing would happen automatically, as the CDN portal retrieves the user-agent from the device. Does anyone know if this is true?
Serve images through an Azure function, resizing them on the fly (as suggested here)
Can someone suggest other options they can think of, or a pros / con of the above.
Since you're using javascript, use the window tag. For browsers, the window tab measures the resolution of the browser and you can set the height and width of your image to window.innerHeight and window.innerWidth. There are multiple other ways to do this but this is the easiest and most optimised if your coding project needs to be efficient with the least lines of code necessary.
More info about the window object here : https://www.w3schools.com/js/js_window.asp
P.S. this is only a solution for desktop, for mobile you can use screen.width, screen.height. This might not work on desktop but on a macOS Big Sur device it works, I tried it (This might be because macOS Big Sur is like a mobile optimised interface given that you can even run iOS apps on it but we don't know unless we try). That might be a better option as it is most likely common across all your devices.
More info about the screen object here : https://www.tutorialrepublic.com/faq/how-to-detect-screen-resolution-with-javascript.php
On the off-chance that none of them are common across all of your target devices, try making a detector program with which you can detect the device type and store that in a variable. Then create 2 if statements saying
if(deviceType = iOS){
<img src=..., screen.width, screen.height/>
}else if(deviceType = Windows){
<img src=..., window.innerWidth, window.innerHeight/>
}
Obviously this code won't work but it's just there to show you the flow where you can sort of understand what I meant. You need to integrate it your own way but this was just a way to make it easier as many times people mention that my answers are not easy to understand, just as a safety measure.
The best part of these options is that instead of remade copies of the image itself, this will resize the one, which saves storage space and eliminates the chance of the user using an unexpected display output like a 49" Samsung Odyssey G9 monitor where the resolution is extremely far from what you might have expected and resized. This also means you don't have to create a separate file just to make image resizing code, just the one to detect the OS (not necessary if the screen object works) which would've already been done since this is Azure we're talking about and they always detect their user base.
If you have any queries, please reply back.
Good luck!
I am planning to develop a hybrid mobile app using ionic. One of the features i need is offline google map. Is there a way how to do it?
It depends on the requirements of your application whether this will be possible. Are your users on "modern" devices A.K.A is HTML5 fully supported? Do your users need to view/edit the map globally, or just in a specific area? Does the map really need to be provided by google? I'll address some issues below to point you in possible takes on this problem.
Do you really need google maps? (Most optimal scenerio)
First of, do you really need google maps? Also relevant: how far do your users need to zoom their maps? If it can be any maps, and zooming is not really of high priority (if it is, including all map tiles will make the app eat all storage), you could probably use map-tiles as a packaged part of your app, and display them with a library like http://leafletjs.com/. The library is well documented, and provides a map-interface for a variety of map-providers. It will be do-able to configure this to use your own local map-tiles. You could include map-tiles for multiple zoom levels if necessary, and limit the min/max zoom-levels to the tiles you actually have available. This will make your maps work offline.
I can't or don't wan't to provide my own tiles make sure that you really looked into the option, there is systems out there that provide map-tiles you could use (check https://www.mapbox.com/ for example)
Okay, so you really don't want to do what I suggested. What are the options now? Javascript mapping-solutions typically render tiles based on the location of the map you want to see and the zooming level. These tiles are requested to the tile-provider. I do not know how to implement this for google exactly, you might need some research on this - I'll try to help you see a direction. There will be requests to get the tiles from the servers. I checked with http://maps.google.com what images are loaded when trying to navigate the map: (example (click)). Find out what url's are used in your situation, we will need these kind of url's later (just inspect the network tab in your browser console and see which requests are made when scrolling in your map). When we only need our users to work in a certain area when offline we could use service workers to cache the responses of these requests when we are online, and serve those caches when we are offline. Read more on service workers here (click).
Advantage: Real offline map-functionality for any tile you visited before (as long as your cache wasn't overflown, depending on your implementation of the service workers, and for service-worker supported browsers/devices).
Disadvantages: No support for tiles that were never put in the cache (AKA: never seen before). Another one: this will only work for devices that support service workers. Might be an option in situations where you either don't care about users using "older" devices, or where you can control the user's device choices. Note that using crosswalk could ease your developing efforts here, since you only have to consider one browser-runtime then: but crosswalk also doesn't support older devices.
However: This solution could be fine for people that will need to work in a specific area, which might be true for the case provided by #vipul-r If you or your users know in advance where they need their maps to work, you can instruct/help them in loading & caching their maps correctly.
If you can't work on either of these 2 solutions, then I highly doubt there will be a way to do it. I don't see any other way to the best of my knowledge.
I've been asked to create a stand-alone site/app that's not connected to the web (all on a local server).
One part of it is to have a map of a natural reserve with a bunch of links that will show footpaths, different animals habitat areas, visitor centres and such.
So there's a map (static picture) and when you click on it some overlay goes on top of it.
At least that's the way I see it now.
I've looked here: http://www.carto.net/williams/yosemite/ but it just looks mucho ugly.
Getting Maps Premium is not an option as it's not that cheap. And the reason they don't want to use Maps/Earth free API is because internet connection is still very slow there (sattelite internet only and when optic cable will be hooked up nobody knows).
Looking for some recommendations as to how to proceed there. Drawing paths/areas on the picture of the maps seems extremely insufficient and time consuming.
I'd need some way to use coordinates to automatically draw areas and lines over the map (and then somehow export that as a graphis file (or SVG) that'll be layered on top of original map simply using ajax.
Will ARCGIS pro edition be the way to go or should I start learning SVG. Do you know some good SVG books/tutorials (as related to mapping)? Maybe there's some other way around altogether...
They do have detailed maps of the area in ARCGIS (whatever format they are in I don't know yet).
Just looking for some ideas, any help will be appreciated. Thanks in advance.
Do you know GeoServer? More or less all-in-one, compatible with different types of datasets, widely customisable.
Starting from "raw" SVG and write the whole thing yourself will probably be prohibitively time consuming.
If you have very little data (say less than 50 geometries) that is fixed, you could also use OpenLayers without any backend server.
For the data you could use a OpenLayers.Layer.Image if your (overlay-) map consists of a small raster image. For vector data, you can use OpenLayers.Layer.Text or a OpenLayers.Layer.Vecor together with protocols OpenLayers.Layer.KML or .JSON.
You can click through the current release examples.
I admit that this is not an easy task for a beginner, but it's fun hacking the maps together.
I want to create wayfinder/pathfinder mobile application. it will route visitors in our buildings. we have 20 buildings and each at least have 4 floor.
We want to develop our own wayfinder ex:http://www.wayfinderkiosk.com/
It should use Lat/Long coordinates to locate the people. and help to find its route.
So where should i start. Does any one have any idea for that. and it is going to be mobile.
I can develop app/site based on these platforms ( Mobile Web/Iphone/Adroid /Symbian/Windows )
But i need a start point. and i need your help.
Thanks
You want to use lat/long inside of a building? Assuming these visitors are going to be using their own unmodified devices, you may have trouble with GPS. Unless you somehow get reliable GPS signal despite being under a four-story building, that's probably not going to work.
An RFID-tagged badge and sensors placed throughout the building seems more likely to work. Put a unique QR-code on each badge that directs the phone's browser to a tracking page for that specific badge.
edit: and now that I re-read your question and see that multiple buildings are involved, the GPS bit could certainly work for routing them from one building to another.
background
I need to be able to display charts that can capture what the user has clicked on. So for a pie chart, if a user clicks on a pie piece, I should be able to capture which piece he selected. Scatter plot should capture what plot, etc. Access-UI can't capture these things, only that a user clicked on the graph. So I need a different solution.
problem
We do not have access to a web server. The front end needs to connect directly with the access database. So what front end solutions can I use that will give me the UI flexibility I need to solve my problem?
possible solutions?
Use silverlight in access (http://desktopweb.blogspot.com/2010/12/using-silverlight-with-access-part-ii.html)
Winforms that connects to Access database via ADO
Is there anything that allows me to use HTML/JS or flash? HTML/JS would be the best solution, followed by flash just due to its wide support. I was researching Web Browser Control but I am not completely clear on whether it is opening local HTML files or browsing through http. I also wasn't clear if it supports JS or can load Flash.
When you first said about the click though capability my first thought was the reporting that is possible using SSRS. The easiest way is to have a reporting server and have the reports available through a browser. However you say you can’t have a web server so I’m guessing that a reporting server is also out.
You could however still use BIDS or report builder to make your reports and then the report viewer control in a flavour of .net to display the reports. Note that you have to convert them to RDLC files and feed the data to them.
That’s my 2p worth, I won’t comment on flash or silverlight as I don’t know enough about them to make an informed recommendation
The web browser control that's usable in Access can use any resource that can be reached via a URL, or you can assign a string of HTML (valid, of course) to it. I forget the exact property you use for the latter, but it's doable (I didn't know this the last time I implemented a web browser control to display HTML from an Access app, so created a temp file, and never went back to replace that with just assigning the HTML directly once I learned how -- so I forgot how, of course!).