Here's what I'm looking to do:
I have an image, let's say of a room. This is going to be a static image.
I want the user to be able to do the following:
1. add a set of images, like a chair, desk, etc.
2. move items which are already on the image.
3. edit text attached to an image.
I need this image to be stored on the server, as well, so other users can see the updates.
Any ideas? TIA.
Edit
I want to basically have a google maps type interface, where instead of being read only, users can add / edit / move items from a given set. So, for example, I want to let them pick up a "chair" image and slide it onto the image of the room wherever the chair actually is. I've seen bits and pieces done in JQuery, but havevn't found a good example. Hope that makes sense.
Edit2
Found something along the lines of what I was looking for. In case anyone else needs to do something like this, I'm looking at OpenLayers, which mimics GoogleMaps in a JS Framework.
You could do this by using the transparent png hack on IE and native support of 24 bit pngs by most modern browsers. Store positions in database. Store pngs on the server.
You could implement this making use of the canvas element, but browser support is inconsistent.
as Kane pointed out in the comments you're better off doing this in something like Flash (not Silverlight as, again, it isn't supported by all major browsers)
Related
I am creating an Accounting software on C# WPF and I want this kind of arrow pointing to buttons like a flow structure in the picture.
And want that to be responsive.
I tried using png images of different sizes to show but its very hard and a lot of hard codes and some don't work as expected.
Please tell me a way to create it.
I know path class little bit but don't know how to make resize according to the screen size
I have a couple of images that I would like to create an interactive map of in Silverlight and WPF. The pictures are of States and counties. I tried doing some search on how this is done but have not been able to find a good example on how to go about accomplishing this. So I would appreciate your help. Thanks in advance.
I was involved in creating a Xaml World map from scratch (below) and that alone took nearly a day for a stylised polygon version (no fine detail)....
I have since purchased a Wacom Bamboo tablet & stylus and found that to be about 5 times faster to work with compared with a mouse.
Quoting myself: "You import a map as a background image and use the pen tool to dot-to-dot trace around the country. Combine all those path segments into a single path. Then create a separate poly-path for each state (close them to allow for a fill)."
Once you create them you can name the individual country polygons and connect up mouse logic to make them all glow on mouse over or change colour on press etc.
Basically all the other stuff on that screen are user controls and custom controls. Work out the behaviour you want and create controls to suit your own needs.
In your instance you can use less accurate polygons as they will only be for hit-testing and highlighting and you will want to retain the actual map images under the polygons.
We want to create a multipurpose seating web.
The administrative portion is where our super users can either define a location as a numbers of rows, with a number of seats in each ( ie a cinema/concert lokale). The other option they have should be a much more flexible "seating" arrangement. Here we want the superuser to be able to upload an image and then draw places (ie a camping place).
The user portion is either a simple page with all the rows of seats drawn or a view of the image with the drawn places overlaid. The user should then be able to choose a number of "tickets" and select places. For the fixed map, we want the tickets to be sticky (ie if you choose 3, they should be seated besides each other if possible).
My question is what is the best technology to create something like this in? We were hoping mvc + jquery could be a good solution, but we are also looking on silverlight (or flash).
If we where to use html/jquery, how would you implement it?
SVG is the way to go. So your fronted stack would be
HTML/CSS
javascript
SVG (VML)
Try this: http://raphaeljs.com/
Don't use Silverlight or Flash. There's no need, they'll exclude iOS and perform poorly on mobile browsers that do support them.
I would check if there is already and SDK / Library available (e.g. http://www.jgraph.com/mxgraph.html).
In Silverlight you have several choices that cold save you tons of work (SyncFusion ,yWorks), we have develop and SDK that is being use by some third parties (e.g. seats reservation on a football stadium), if you want to check a demo: http://silverdiagram.net/Scripts/SD.Editor.html
Cheers
Braulio
i recommend dojo if you want to create easy gui for mobile and desktops
http://dojotoolkit.org/widgets
http://dojotoolkit.org/grids-charts
I don't want to use flash because it won't allow me to dynamically modify (add, remove) the pictures through my application so I thought about javascript (JQuery Plugins). but the problem is visitors can save the pictures and I don't want that to happen! .. so any ideas ?
Edit
I really appreciate your help and honesty but is JavaScript to have a dynamic modifiable SlideShow for my websites ? .. I don't care about screenshots, what's important is the original picture that I think will be downloaded to the visitor temp files!
The best you can do is a mild deterrent. I've written an HTML5 slideshow used by many. It offers right-click warning to those using it, but it is best referred to as a warning rather than a protection.
First off, if a browser can display an image, any viewer can get them too - no matter what you do - that's just the way the web works. If you really need them protected, then you need to use a significant semi-transparent watermark that touches important parts of the image or limit the viewing only to people who you trust.
If you're interested in a mild deterrent that can still be bypassed quickly by anyone who understands how a browser works, but might slow down non-sophisticated users, then you can implement a couple forms of click protection that make it harder to right-click save your images. Right click protection works best when the actual image you are displaying is not the top level image. This can be done by displaying a transparent image over the top of your slides. This will not be seen, but if a viewer succeeds in getting to a right-click-save menu, all they will succeed in saving is the empty transparent image on top. You can literally use a 1x1 transparent gif image which is tiny and then scale it up to the size of your image to cover it. It will not be seen, but it will defeat right-click save.
It is also common to also put in some javascript that attempts to intercept the right-click operation to prevent that, though this protection is blocked by more and more browsers now (like Firefox 4+) and is far from foolproof. It should not be relied upon.
In the end, these extra steps are only a mild deterrent and will only work with non-sophisticated viewers who aren't very determined. Because, even with the maximum protection in place, one can still look at the media list in the browser and see all the image URLs in the web page or look at the source or DOM or network trace of the web page to see what the URL is of the images that are being displayed. Once the URLs are known, the images can be saved easily. The danger of this kind of protection is that content owners believe it's real protection and they put images at risk that they shouldn't (without good watermarks on them). But, if you fully understand what you're getting (and not getting), you can do it.
It is impossible to Really protect them. If the user can see the image, then the user's browser has downloaded it. So the user has the image on their computer and can do anything they want with it.
There are lots of ways of making it harder for the user though. Disabling right clicking is one way.
If you really need to hide them badly you could use the data uri scheme too, but it really won't stop someone who really wants to get it:
http://en.wikipedia.org/wiki/Data_URI_scheme
You will not be able to protect your images unless you use a watermark which not what you're looking for as I understand you.
You need to remember that the user will always have his printscreen button and many tools that can do the job and that you can't control anyway
Break up your images into pieces, or possibly even embed them in larger junk images. Then use CSS to display the multiple overlapping divs with appropriate background styles to position the pieces where they need to be so to the user they look like one image, kinda like how google maps looks like one large image but is actually made up of many small ones. The user won't know the difference, but if they try to save them locally they'll just get one piece at a time.
Of course, that only works until they realize they can do a print-screen, but it's something. :-)
It is impossible to completely protect your images.
Seriously, if the user can see it in their browser they can save it to their computer.
You are fighting a losing battle here.
Even if you watermark your images, a good graphics program can countact that.
The best thing to do is only display small, low quality images that people wouldn't want to keep anyway.
I am a student and my final project in graduate study of Computer engineering is design and development a map viewer web application that must be used for an AVL tracking system.
I am trying with applet in java.
First, map images format are GIF/JPG with big/large amount size(100MB).
Now, I want to find, how I break map images into smaller size and is true if I tiling images in order to showing on viewer, and how?
I program a coordinating application to convert lat/lng to pixels and vice versa,
Now I must to find what to doing with maps and find a method that is recommended to showing images of map in viewer.
If you have any idea to tiling or know about it.. or you recommend another method please help me
thanks
I would suggest you have a look at JAI for Java which has a class that implements tile based images. I have not used it much so i cannot get into specifics but what i know is that if you are looking for tile based images in Java JAI is the way to go.
So Google JAI and take it from there.
i may be completly off-track, but since you got long/lat, why don't you use a google map ? with a simple javascript timer, you could have quiclky a near real-time display.
the only problem would be the license and/or daily limit (this may not be a problem if this is not a live/productive system).
regards,
Guillaume