I am trying to build an application that allows the user to set pre-defined regions over a map background. Rather than specifying X,Y coordinates I want them to be able to draw the regions on top of the map and then hit save. I then want to record those shapes to the database so I can present them again later on.
I have been looking at tutorials such as this one:
http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
How would I go about starting to create this kind of functionality? Where should I look? I understand it is a large question and perhaps a little too broad but a list of options to consider would be an amazing answer.
If anyone has any tips on where I can get started it would be much appreciated.
That's a job for javascript. Ruby and HTML cannot do this alone. Basically in your javascript code you will have to listen for some events that trigger your save action(the user resizes the image or drags it away), then collect the data that you want to save(image position & size I guess) and then send this to the backend via an AJAX request. Then you can store it in the db.
Related
I'm taking a beginning mobile development class, and my professor wants me to jump right in and help him with an app of his written in Objective-C, and I have 3 months. I have taken a few other CS classes so far, but no next to nothing about mobile app development.
This app is basically a songbook that holds many PDF files of music scores. The first (of multiple things) that he wants me to add is the ability for a user to annotate the music score with highlighter, pen, and eraser. Since there are many music scores, I would need to have the app save these annotations for each score, and allow editing by the user later if needed (i.e. allow the user to go back and erase stuff and add more annotations to a given score).
I'm in the planning phase and I'm trying to figure out the best way to do this. I was thinking of having the annotations occur on a second view layer, and then saving that layer as an image so that it can be overlaid back onto the music notes sheet at any time (for the user to view). My concern is, would the user be able to re-annotate this layer once it has been saved as an image (i.e. erase and add more annotations, then save it again)?
Or what's the best way to go about this? I would really appreciate any advice because I am in over my head!
Well This is very broad question to answer it but let me help you with some links and you will need to go through that like.
It will help you to start your requirements into app.
There are many 3rd party frameworks are there for PDF annotations:
PSPDFKit (Paid)
FastPDFKit
Poppler (OpenSource)
There are some SO Questions links which also helps you for PDF annotation
Add Annotation to PDF
Annotation on an PDF
Programmatically add annotations on PDF
Some Github Links
LazyPDF
Note: LazyPDFKit - (No longer maintained - Use the source code to fix
the bugs)
Hope this will helps you in your research.
I was searching on Google and StackOverflow to see if anyone have solution for my problem, but didn't found anyone with same problems.
So, currently I'm running Debian machine with Mapserver installed on it. The server also run webserver for displaying map data over the browser. The generation of map is dynamic, based on layers definition in database I built mapfile in PHP and based on that generated PHP the map is shown to user. The data is defined in database and as a SHP files (both combined in single mapfile).
It is fully dynamic, what I mean with that is that user can enable/disable any of layers or click inside polygon (select some points on map) it color the selection (generate new mapfile based on selection and re-generate tiles).
So the execution of all that code from selecting some area to coloring selected items somtimes take too much time for good user experience.
For solution I'd like to use some kind of temporary tiles cache, that can be used for single user, and to be able to delete it's content when user select some items on map or enable/disable one of the layers.
P.S. I already did all the optimizations provided from Mapserver documentation.
Thanks for any help.
It sounds to me like your problem is not going to be helped by server-side caching. If all of the tiles depend on user selections, then you're going to be generating a bunch of new tiles every time there's an interaction.
I've been using MapCache to solve a similar problem, where I am rendering a tileset in response to a user query. But I've broken up my tiles into multiple logical layers, and I do the compositing on the browser side. This lets me cache, server-side, the tiles for various queries, and sped up performance immensely. I did seed the cache down to zoom level 12, and I needed to use the BerkeleyDB cache type to keep from running out of inodes.
I'm using Leaflet.js for the browser-side rendering, but you should also consider OpenLayers.
After looking at the source code, I have some other ideas.
It looks like you're drawing each layer the same way each time. Is that right? That is, the style and predicate of a particular layer never change. Each user sees the image for that layer the same way, if they have selected the layer. But the combination of layers you show does change, based on OpenLayers control? If that's the case, you don't need per-user caching on the server. Instead, use per-layer caching, and let the user's browser figure out the client side caching.
A quick technique for finding slow layers is to turn them all of. Then reenable them one by one to find the culprit. Invoke Mapserver from the command line, and time the runs, for greater precision than you'll get by running it from your webserver.
You mentioned you're serving the images in Google 3857 while the layers are in Gauss-Kruger/EPSG 3912. Reprojecting this on the fly is expensive. Reprojecting the rasters on the fly is very expensive. If you can, you should reproject them ahead of time, and store them in 3857 (add an additional geometry column).
I don't know what a DOF file is--maybe Digital Obstacle File? Perhaps preload the DOF file into PostGIS too? That would eliminate the two pieces you think are problematic.
Take a look at the SQL queries that PostGIS is performing, and make sure those are using indexes
In any case, these individual layers should go into MapCache, in my opinion. Here is a video of a September 2014 talk by the MapCache project leader.
I am really just looking for the best way to accomplish this. I've seen the code how to do these individually, but is there a away to do it for say, 100 points? Or do i need to set the custom image and custom info for every point I create?
Also, is there a backend, say SQLite, that i could incorporate the help accomplish more efficiently?
The app I'm building could have 1000's of points, and I REALLY wouldn't want to code everyone of those...but i would!
Thanks
Consider using Google Fusion Tables - they support 100,000 points per layer and 5 layers, for 500,000 points altogether. You access them via an SQL-type language that runs on Google's servers - exactly where your data will be when you upload it and that makes them very fast.
The infowindows are programmable too.
You load your CSV into a Fusion Table (like an Excel spreadsheet) in your Google drive and get a key to that table and you then use the key in your Javascript.
I created the following website with Fusion Tables and I don't have a clue about Javascript! See Skyscan website here. I won't mind if you click View Page Source :-) By the way, if you click on Modern Collections on that page, you are actually turning on/off 25,000 markers and it is almost instantaneous. There is also Marker Clustering available which lets you de-clutter maps with massive numbers of markers and automagically replace them with a single "fatter" marker.
There is a good tutorial here.
First post on SO; hopefully I am doing it right :-)
Have a situation where users need to upload and view very high resolution files (they need to pan, tilt, zoom, and annotate images). A single file sometimes crosses 1 GB so loading complete file on client side is not an option.
We are thinking about letting the users upload files to the server (like everyone does), then apply some encryption on server side creating multiple, relatively small low resolution images with varying sizes. We then give users thumbnails with canvas size option on the webpage for them to pick and start their work.
Lets assume a user opens low grade image with 1280 x 1028 canvas size. Image will be broken into tiles before display, and when user clicks on a title it will be like zooming in to a specific tile. Client will send request to the server asking for higher resolution image for the title. Server will send the image which will be broken into titles again for the user to click and get another higher resolution image from server and so on ... Having multiple images with varying resolution will help us break images into tiles and serve user needs ('keep zooming in' or out using tiles).
Has anyone dealt with humongous image files? Is there a preferred technical design you can suggest? How to handle areas that have been split across tiles is bothering me a lot so not sure how above approach can be modified to address this issue.
We need to plan for 100 to 200 users connected to the website simultaneously, and ours is .NET environment if it matters
Thanks!
The question is a little vague. I assume you are looking for hints, so here are a few:
I see uploading the images is a problem in the firstplace. Where I come from, upload-speeds are way slower than download speeds. (But there is litte you can do if you need your user to upload gigabytes...) Perhaps offer some more stable upload than web. FTP if you must.
Converting in smaller pieces should be no big problem. Use one of the availabe tools. Perhaps imagemagick. I see there is a .net wrapper out: https://magick.codeplex.com/
More than converting alone I think it is important not to do it everytime on the fly (you would need a realy big machine) but only once the image is uploaded. If you want to scale you can outsource this to another box in the network.
For the viewer. This is the interessting part. There are some ready to use ones. Google has one. It's called 'Maps' :). But there is a free alternative: OpenLayers from the OpenStreetmap Project: http://wiki.openstreetmap.org/wiki/OpenLayers All you have to do is naming your generated files in the right way and a litte configuration.
Even if you must for some reasons create the tiles on the fly or can't use something like OpenLayers I would try to stick to its naming scheme. Having something working to start with is never a bad idea.
I am working on a project in which i have a database created using mysql and php. I want to advance it by connecting an image to it. every object in my database is going to be linked to a certain part of the image that will be highlighted.
I am not really sure how to do this.
As of right now, i have a search feature on my database that gives me the result.
I am willing to try any programming language that would make this easier.
My database has about maybe 1000 entries. They are all numbers that correspond to a certain location on my image.
My image is basically a map.
I'm not entirely sure what you are trying to do, but if you want to plot a graph you can use the HTML 5 canvas as some JavaScript. Or better yet, use tool that already exists like Google Charts. Maybe a scatter plot is what you're looking for?