Some of my users will be creating flowcharts..The idea is that at certain steps, the charts will allow the user to click on the text to go to another chart, or a manual or something.
My task will be to get these charts online.
The idea of hand coding these inside HTML seems crazy, so I was wondering if anyone had any suggestions?
Ideally, I would allow the users a tool to design the charts how they wish, and they could export it to something I could import into my page...They could either create linkable content inside the software, or if the html generated was neat enough I could do this bit myself.
Has anyone else come across a problem like this?
I've used Graphviz (link) to create flowcharts in HTML (an example of usage in real world: google wave used it to draw flowcharts in the waves). In the generated flowchart you can include links associated with nodes, edges, titles, etc. When a user clicks on a link, your software can re-render an image with the data of the new flowchart. Can be exported to png, svg, etc so is kind of easy to include it.
Related
I'm writting a code which shows two different Google Charts in one XHTML page. I need to put a button that export both graphs to the same PNG file, one above the other as they are shown.
To export one single chart is easy and is already done; Google documentation teaches that in here with only minor adjustments needed to show the button (done). The question now is how do I pick the information of both charts and print in the same PNG file.
I've considered a solution similar to the one shown in this link: pick the underlying canvas behind both images and tell to print that instead of the graphs per se. Problem is I have no idea how to do that and if that is even possible, even though a thread here in SO suggested something similar, suggesting it's possible, without going into the details on how to do it.
So how could I do that? I'm completely new to this web programming, so I'd be grateful for complete answers.
I am in the process of setting up a website via Enjin's web hosting for a game server I run. I have an HTML module that will display a map of the island our game server takes place on, with a grid overlay already.
What I am trying to do (if possible), is to create a dynamic grid with css and html (javascript if needed) that overlays the grid of the image and highlights each cell as a user hovers over it, with a small pop-up with details on a specific coordinate (such as any bases, or other special information about a specific area)
I have tried looking around via google, but all searches come up with creating a grid out of multiple images (which is not what I am after), or using the area tag without much explanation on how to turn it into a fullout grid.
I am unfamiliar with how to approach this problem, and would like any input or advice if possible. Thanks!
NOTE: For those wishing to see the map in question I am using, to better help understand my question and assist me, please see here.
I'm looking into creating a website that allows people to create their own designs for a certain product. This product can have straight lines, curves, squares, and various shapes. I would not only like these people to be able to free hand draw their own artwork, but also be able to drag and drop (or just click in an area) certain stock images onto the template. I started this project using HTML/Canvas, and have implemented the drawing of freehand/shapes/lines, but I've read a few places that say I should be using SVG for the images.
Reading that I should use SVG for images made me think that since I'm a novice on HTML and website design in general, that I should possibly be doing this differently. So I was wondering how some people would implement this. For a good concept, think of a web site that people can design their own T-Shirts. You just draw on a square canvas, circles/squares/lines/free hand, but can also stick stock photos on there. Thanks, and I'm not looking for code, just to know if I should be using a mix of HTML/SVG/Canvas, or something completely different that I don't know about.
to summarize....
svg, or canvas.......or both, or something else completely.
Okay this is how i imagine you want it to work:
Your customers select a tshirt size and style.
An embedded application within your website allows the users to draw
a nice design they want or import an image
A price is calculated based on the size of the tshirt and the size
of the print
Upon succesful payment, you receive on your backend an image of the
print, the order details and you feed that image into your T-shirt
printing thingy, you print it and you post it.
If this is right you should consider this: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html
You will probably want to remove some unnecessary tools from it and fire it up with different configurations based on what kind of tshirt the customer selected. One example is the t-shirt size. If a customer selects a small t-shirt you fire up a smaller drawing size. The list goes on.
You need to have some good JS skills however to be able to play around with SVG-edit because it is massive but from what i feel it fits perfectly to your purposes.
If you want to see the differences between SVG and Canvas read this: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/. Its pretty straightforward.
Now why did i suggest using SVG-edit? I don't know if there is any other application implemented using canvas that has so many tools and works so nice as SVG-edit.
It has everything you need, including a '''SAVE as PNG'' function which will serve your purposes in case your t-shirt printer doesn't print SVG images.
After browsing for a while for available solutions, it is really hard to choose the most appropriate tool for creating dashboard & populating it with plots. I would want to have an html page with multiple plots and tables depicted. I'm thinking to have data input stored in csv files, appropriately formatted.
The requirements are:
plot coordinates are showing on mouse hover
ability to show coordinates of points on a plotted line (points in
scatter plot or bar values for bar chart) 'sticking' to the nearest
lines on hover, with appropriate handling of multiple lines (show several y values for same x)
ability to interactively switch plotted data on/off
easily embeddable into html page, doesn't require additional plugins installed
a good variety of plot types
not too slow to load and stable, there could be ~50 plots on one page
(this is for internal use only, so quickness is not that important)
does it all with minimal effort
So far I checked out (by no means a final opinion, correct me if I'm wrong):
gnuplot+canvas - looks good, but samples on their page fail to work
well for me, not always getting mouse clicks right
python+matplotlib+mplh5canvas - feels a bit raw, as I understand
some of the stuff above I'd need to implement in Python myself
RGraph looks awesome at first glance, not sure if it is good since never heard of
it and don't have any experience in js, hard to customize(?)
some other random stuff which seemed bad enough
Suggestions?
RGraph looks awesome, and is awesome. It's not difficult to use and there are a lot of examples online.
Rgraph Example page
They've got 22types of graphs, correct me if I'm wrong, and as I already said, easy to use.
Documentation about possibilities and stuff for each type of graph is also available on the website.
I end up using Highcharts because of its very advance features and ready-to-use templates (in addition to the things mentioned in the question).
I am a flash developer who has worked mostly on small ActionScript projects, in particular websites, but I am dipping my toes into image manipulation with AS3. I have a project I'm working on to develop an application which would allow a user to upload their own picture into a swf, and then, using a slider, they can alter the image to make themselves look thinner or fatter. The condition is that it should require minimal user input - so ideally the most I could expect from the user would be a couple of control points identifying certain areas of the face in response to prompts e.g. 'click on the centre of the chin' and when the user clicks, the position would be stored, but this would need to be used sparingly, if at all.
So far, I have been able to use the FileReference class to handle the upload, and I am experimenting with using the DisplacementMap filter to edit certain parts of the uploaded image, but I am having serious trouble implementing this in a manner that would allow realistic deformation of the facial features in the image uploaded.
Is there anything that exists that might run along the same lines and that provides an explanation/source code I could look at to get a better idea of how to go around doing this? Or if there are any other ideas on how to manipulate and distort the image that doesn't use the DisplacementMap Filter?
Any feedback and help is greatly appreciated. Thank you for your time.
see http://sakri.net/technology/flash/flex/convolution_filter/ConvolutionFilterExplorer.html
(source code available)