I would want to allow user to draw semi-transparent basic shapes (rectangle, circle) with user defined text over an image. The basic idea is to have a map underneath and users could mark certain areas of from it. It has been a while since doing web development and I'm quite uncertain which approach would be the best. It should work even on older browsers.
Any help would be appreciated!
First, forget about old browsers, it's 2012 after all. You won't be able to draw circle without having such css properties as "border-radius".
Second, no matter what, you'll have to use javascript in order to do the "drawing". jQuery + jQuery UI would be great for that. It appears like you'd need at least following plugins:
Draggable - to drag your shapes around
Resizable - to resize shapes
Dialog - to put text into the shape (there must be a textarea within the dialog. After you fill textarea and click Ok text will be put into the shape).
There's another way to put text into shapes, but that'll require some serious development efforts.
Now, how to create shapes. There are couple of ways:
Button which you'll have to click and which will create a box with set parameters
Use boxer plugin
That's the gist of it.
Rendering of the saved shapes is quite a different thing and i believe it shouldn't be problematic. Just fetch data from DB and based on it's properties render shapes.
Related
How does one implement functionality similar to the one shown in this gif in a website?
Specifically, the part where the user clicks on a (non-rectangular) area of the image and that area then changes colour.
A long, long time ago when the internet was still young, there was something called image maps. Is that still the preferred approach? I heard about svg, does that provide this type of functionality? What about canvas?
I don't know about image maps to get them in this shape of hit areas.
But I recommend using canvas for these type of applications.
You have multiple options for doing that, being image maps one of them. However, I wouldn't do it with it, nowadays, there are better solutions.
You can either use canvas, as suggested before, for example using a canvas library like http://fabricjs.com/ or, maybe a bit easier, using SVG elements.
The benefit of SVG is that they render as normal DOM elements in a website, so you can debug then in the inspector, attach normal click events to them, style them using CSS, etc.
multiple options for this.
SVGs + CSS
CANVAS animations
FLASH( wouldn't recommend this option.,Pretty outdated)
Plain html css (But this wont be customisable in future for different shapes, a lot of time consuming when compared to other ways and confusing unless written with good documentation.)
html+css way: you can always make most of the geometrical shapes with css and html. But, curves we have svgs to go for and use css/svg transitions for visuals
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
I am trying to make a webpage, where I want to plot points with which I can associate Mouse events (Jquery).
So, I guess I want them to be dom objects and not want to just paint them. (Please suggest if we can paint using html5 and still treat them as dom elements)
So essentially I have a text files with x,y co-ordinates and I want to plot those but want to associate Jquery events with them. for example: on left clicking them a graph appears or right clicking them a menu appears depending on which node I clicked.
Imho, it would be a very silly approach, to write DOM elements with lines and dots.. For instance, how would you make a round line - you could create diagonal lines with border CSS styling but.. Well - there are many options available! Another approach could be Highslide.
jqueryui-visualize
jQuery top5 graphing tools
http://www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/
Demo
Dojo Toolkit
Since you for some reason have tagged this with dojo, check out this blog entry;
http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
2dChart Demo
Read about Scrolling / Zooming here
Zoom Demo
Here's a nice little introduction slideshow from an apache user
Well, several approaches.
You can take your coords and create absolute positioned elements on the DOM using those points. Using jQuery you can set 'top' and 'left' points to position them. This method may be easiest for you because jQuery can easily apply click events.
You can use the HTML5 canvas and draw shapes onto it using the coords from your file. With this method you would either need to write your own event library or use libraries already written such as kinetic.js. Also styling these is going to be a bit less dynamic and extensive than using DOM objects and CSS as with the first method.
I have a canvas in which I need to draw text on in javascript, and then test whether given points overlap the text.
I am wondering if this is possible using the canvas (context.fillText(...)) and then some kind of test (if (overlap(textobject, {x:12, y:10{}) ) or whether I will need to draw the characters in SVG so I have the co-ordinates and can sort it from there?
I'm sure there are libraries out there that have started to pop up for this kind of thing but am having trouble with my google skills today.
I could think of a couple ways around this unless you are needing the text to be drawn to canvas for some type of pixel manipulation...
One way is float the text over the canvas element (position: absolute;) then test a hover event with jQuery. Another way is to create a box around the text in your canvas element, then detect when the mouse is within those bounds.
If you are looking for the most accurate test, svg would be the way to go.
You might also try out a library and see if they have already created this functionality. easel js
Update: Being an open web fan and OOMG HTML5, I had completely ignored Flash. Turns out that it is the best medium for what i'm trying to do. And as actionscript and JS are so similar, the logic was a copy paste job.
Thanks heaps for the answers, it ended up being a huge ask, so I drew my characters in Illustrator, turned on the grid, created an array of where the grid crossed the character and where it didn't - and then turned that into a JS array. I'll publish a link once it's finished.
i am building a workout website that tracks exercises. Each exercise has a mapping to a certain part of the body (bench press --> Chest)
I am trying to figure out a way to visualize this and i thought of the idea of putting an image of a person "highlighting" the affected muscles. Sort of like This:
(source: aquaviews.net)
Assuming i have found a good picture without any areas highlighted, is there anyway to dynamically "highlight" areas in a picture (the red section) with javascript (client side) or C# (server side) or do i need a seperate picture for every exercise?
You COULD overlay the the base image with SVG or a <canvas> element.
But then you have cross-browser issues, possible alignment problems, and probably a cheesy look.
I'd have an artistically inclined person do the highlights as a separate graphic for each exercise.
But rather than have these as separate images, keep/combine them in a single file -- as a CSS Sprite. Then you get a professional appearance, great cross-browser support and easy, minimal coding.
You can use css to position your links over said muscle group and use a rollover to show the highlighed part...
Edit:
Sorry I guess I should have elaborated. You can absolutely position the elements with CSS and use an image rollover to swap out that section of the image to the highlighted section of that image. You can either do this by putting each muscle group into it's own div and putting an image of the corresponding muscle group into the background image. Then swap it out on rollow over. or you can use z-index and absolutely position the rollover elements where they need to be and change the z-index when needed.
Interestingly enough, I used to be a personal trainer and I did this same thing but did it in flash. That's my recommendation.
However, if you want to do it with JS and CSS, Brock's suggestion of the sprites is likely the way to go.
What you could do, very simply, would be to have an image map that for certain areas called a js function to swap about the background image with the same version of that image with the highlighted sections. Rather than several small images, you have the same image but with one part highlighted.
One question though, will you be doing compound exercises that would require you to have two sections highlighted? For instance, an incline press would highlight part of the chest and part of the delts. This makes the whole proposition more complicated due to the specificity of your roll overs.
i think you seeking a way to do this without requiring separate images, and if so - the answer is No - you are going to need to create separate images for at least the highlighted areas. Short of perhaps using a CANVAS element which has cross-browser issues, I don't believe there is any way to impose a filter to an arbitrary region of an image element.
And even if you Could apply an alpha filter, you would still need the geometry of every shape, so the effort/work is perhaps the same...
Once you have the various images there are sundry ways to approach the problem after that...
This is a simple implementation as i have done this highlighting with a county map. Use an image map. Then find a highlighting script like (mapper.netzgesta.de) mapper.js. All you need to do is have a properly set up image map (image must be suuounded by a div) and a link to this script. The highlighting starts immediately. Please check the license. Ther are several other that scripts that use javascript css and jquery to achieve this same effect. Just research highlight image map in google. Sorry i cant give you a link to my implementation of this as it is on a secure site for work. Good Luck.