Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm trying to develop a HTML/JS based "(computer) network diagram". By this I mean boxes linking to other boxes, and more importantly, boxes contained inside the bounds of other boxes.
Simplified Use Case - to explain the layout requirements
The use case is VPC (huge box) with AZ inside (2 or 3 big boxes stacked next to each other), and subnets inside each of those (boxes stacked on top of each other), and EC2s inside that (lots of small boxes next to each other).
While I've tried a number of methods (see below) I haven't found a suitable layout for my diagram and am wondering if my needs are so unique that I need to roll my own.
What I want help with...
I'm wondering if I'm missing something obvious in my research (in terms of options for a HTML5/JS solution)
Am I taking the right approach looking for a framework or are these requirements too special?
Should I consider writing my own layout (or does someone have a good idea for a good layout to start with)
Is there a framework that does visual grouping well (e.g draw a big box that contains smaller boxes, maybe a few levels deep)
My Research:
Webcola (can use with d3) http://marvl.infotech.monash.edu/webcola/
D3 http://d3js.org/
JointJS http://www.jointjs.com/demos/devs
Webcola
I originally tried Webcola as the following example seemed the most promising:
http://marvl.infotech.monash.edu/webcola/examples/smallgroups.html
I found the documentation to be lacking, a few of the links are dead, and when trying to combine the "Layout with hierarchical grouping" with "Alignment constraints with guidelines" the page failed to load.
D3.js
This appears to have lots of documentation, although I couldn't find a single example that came close to what I wanted to build.
https://github.com/mbostock/d3/wiki/Pack-Layout
Pack Layout seems the closest, with nesting used to represent the hierarchy.
The problem with this method is the size of each node is not uniform (I can just set them all to 1) and the example uses circles (this appears to be a hard rule with this layout, I think).
JointJS
http://www.jointjs.com/demos/devs
This appears to have a nice example with what appears to be a group and inputs/outputs (although the node can escape the bounds of its parent which isn't ideal.
If I did undersand your problem well, it can be done with HTML/CSS only :
the VPC div (container) is in position relative the and float left
position relative too inside an again float left with clear left if
you want to create another line
Beware of the width of the div
Related
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm a beginner in web animations(canvas and svg). I have seen some work and examples in Chrome Experiments and am really excited to dive in. However, whenever I'm trying to do anything remotely decent or following any tutorial that seems a little bit interesting, the sheer amount javascript that has to be put in is proving to be a huge turn off.
For example, if I want to do any simple svg animation, I have to manually place the co-ordinates to achieve the effects. If there were any GUI tool to work with SVG or Canvas that would produce the initial movements(i.e. If I want to move an object from A to B, I'd like to do it by hand rather than counting the pixels) then the subsequent tweaking would be a lot easier. Are there any tools that help you achieve the effects? If not, what's the standard way to draw and animate svg graphics/canvas animation today?
Hype, Sencha Animator , Adobe Edge Animate are tool you might want to use if your purpose is to do animation with web technologies.
The problem with the link you provided is many of the exemples involve quite a lot of programming. It's not like Flash where you could do crazy stuffs with little programming knowledge. So you are not going to do crazy stuffs with any of the program I cited. By the way flash now exports to web techs so you might want to look into that.
You will have to write some javascript to make a decent animation with Canvas or SVG, as most of the previous software work with the DOM.
But you can cheat, a lot of agencies now use video (from After Effect) for animation directy, and you can manipulate video through canvas, do compositing etc ... the problem will be the size in that case.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about a specific programming problem, a software algorithm, or software tools primarily used by programmers. If you believe the question would be on-topic on another Stack Exchange site, you can leave a comment to explain where the question may be able to be answered.
Closed 9 years ago.
Improve this question
I've been working on a D3 Gantt chart; it has a brush view, column labels for the tree grid view (I need this for my application), and tooltip. The chart allows you to expand and shrink nodes using the tree view, by clicking on the node in the tree hierarchy.
With respect to the issues I have encountered, there is a noticeable slowdown in brush scrolling over time, and I originally thought it was possible I was not removing nodes that I should be and it was causing the slow down, but I did spend time checking this issue and it doesn't seem to be the case. It doesn't yet support clipping and the activity bars in the chart overlap with the tree grid when you scroll the brush. It seems to slow down, and is a bit slow in firefox, but if you shrink and expand the top level node in the tree grid view, scrolling of the tree brush becomes faster again.
I need assistance with the following issues:
clipping; I'm not sure how to modify the code to make this work.
delayed scrolling of the chart view when the brush is used, so the brush doesn't call update on every move.
some guidance on how I can resolve the slow down that occurs over time when the brush is used.
You can see it here (full screen) : http://bl.ocks.org/d/4704709/
I added the full screen view, as the normal bl.ocks view is too small to fit it.
and it's on github here for those that want to branch it and do something far better with it than I am capable of doing :
https://gist.github.com/4704709
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I'm looking for a in-browser image editing solution to integrate with my project: http://code.google.com/p/django-ray/
I got it working with Pixlr quite easily and the editor is fantastic .. however it's a hosted service, which means I must be connected to Internet for it to work ..
Is there any other solution like Pixlr but that are not hosted service ?
Updates
Editors found so far:
AIE: http://www.ajax-image-editor.com/ (feels clunkier than Gimp..)
Pixidou: http://github.com/asvinb/pixidou (no working demo found..)
And a good list of editors that are hosted: http://www.lifeclever.com/10-free-web-based-alternatives-to-photoshop/
Adobe has discontinued the creativeSDK Image Editor UI
This solution appears to no longer be viable. Sorry :(
Adobe deprecation announcement
Previous answer:
Aviary (acquired by Adobe) offers a free feature-rich on-page editor called Feather. It is hosted, however, in that you must perform a GET to retrieve the final full-size edited image. It's features include:
enhance (new): Autocorrect your photo with one of four basic enhancements.
effects (new): Choose from a variety of effects and filters for your photo.
stickers: Choose from a variety of stickers you can resize and place on your photo.
orientation (new): Rotate and flip your photo in one tool.
resize: Resize the image using width and height number fields.
crop: Crop a portion of your photo. Add presets via API. Fixed-pixel cropPresets perform a resize when applied (new).
brightness: Adjust the overall image brightness.
contrast: Adjust the overall image contrast.
saturation: Adjust the overall image saturation.
sharpness (new): Blur or sharpen the overall image in one tool.
draw: Add doodle overlays with a brush.
text: Add custom, resizable text.
redeye: Remove redeye from your photo with a brush.
whiten: Whiten teeth with a brush. (Not supported in IE7-IE8)
blemish: Remove skin blemishes with a brush.
I'm currently integrating it in a site and there are a few gotchas (they might be my fault.) I can't ever get it to perform a POST callback to my URL with the finished image URL, so instead I use the objects .onSave handler which provides the same info. Also, in current chrome/firefox, there is a security exception when Feather modifies canvas data directly from your site. So instead provide the url option (causing Feather to request the image at that URL and then provide it back to the widget on your page.)
I've just been looking at JCrop, a JQuery plugin which looks great and works beautifully - on most modern browsers, so check your target platform is supported.
You can see it in action and download the scripts from here
http://deepliquid.com/content/Jcrop.html
and you will need the JQuery script framework, available from jquery.com
It's all free and Open Source, so you can customise it as much as you like.
Rob
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
I am looking for a lightweight jQuery script for tooltips that is lightweight and can be easily used with image maps... Ideally it would automatically take the 'title' of each the area tag to function as a tooltip. The reason this is an issue is I have hundreds of areas (its a world map) and a line of code for each tooltip will soon add up in file size.
qTip can do this... but its 38kb... which is more than even jQuery itself. Any recommendations?
Not sure if it's exactly what you're looking for but check out Tipsy:
http://onehackoranother.com/projects/jquery/tipsy/
9 KB uncompressed
4 KB minified
vTip might be a good candidate (see demo). It's a bit outdated, but it's dead simple and should work.
You just mark your DOM element by adding class="vtip" on it, e.g.
Tooltip test
Uncompressed JS file is only 4KB.
If you want to handle your tooltips in more dynamic way, consider creating your own simple tooltips.
I use the imaginatively-titled "jQuery Tooltip": demo here. Works well with image maps, and is easy to customize with CSS.
(Coincidentally, I tried qTip with image maps and found a weird bug when combined with the Map Hilight plugin).
PowerTip
http://stevenbenner.github.io/jquery-powertip/
PowerTip features a very flexible design that is easy to customize
Supports static tooltips as well as tooltips that follow the mouse
Ability to let users mouse on to the tooltips and interact with their content
Mouse follow tooltips are constrained to the browser viewport
Lightweight JS ~10KB, CSS ~2KB
Tipsy
http://onehackoranother.com/projects/jquery/tipsy/
It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.
Lightweight JS ~10KB, CSS ~2KB
After big research none of answers to this question gave me satisfaction.
I needed one solution that is lightweight, is not abandonware as Tipsy (last update years ago, 63 bug fixing pull requests ignored by author) and I can use as typical tooltip as hint for form fields on hover, but also for dynamic field validation after form submit.
Really good one is as mentioned earlier PowerTip, but there is big issue with it: you can only have one tooltip visible at once. For me it's disqualification, I checked resources and this is basic assumption of author - only one tooltip at once, there is one single DOM object for all tooltips etc.
Tooltipster
After loosing another hour I found solution that is exactly what I needed: Tooltipster. It's really easy to implement (very similar to PowerTip) but it allows you to prepare and show many tooltips at once. Another advantage is fact of not using images at all, it's only js (~12k) and css.
Hope this will save many hours of research to someone.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I'm interested in seeing a good diff algorithm, possibly in Javascript, for rendering a side-by-side diff of two HTML pages. The idea would be that the diff would show the differences of the rendered HTML.
To clarify, I want to be able to see the side-by-side diffs as rendered output. So if I delete a paragraph, the side by side view would know to space things correctly.
#Josh exactly. Though maybe it would show the deleted text in red or something. The idea is that if I use a WYSIWYG editor for my HTML content, I don't want to have to switch to HTML to do diffs. I want to do it with two WYSIWYG editors side by side maybe. Or at least display diffs side-by-side in an end-user friendly matter.
There's another nice trick you can use to significantly improve the look of a rendered HTML diff. Although this doesn't fully solve the initial problem, it will make a significant difference in the appearance of your rendered HTML diffs.
Side-by-side rendered HTML will make it very difficult for your diff to line up vertically. Vertical alignment is crucial for comparing side-by-side diffs. In order to improve the vertical alignment of a side-by-side diff, you can insert invisible HTML elements in each version of the diff at "checkpoints" where the diff should be vertically aligned. Then you can use a bit of client-side JavaScript to add vertical spacing around checkpoint until the sides line up vertically.
Explained in a little more detail:
If you want to use this technique, run your diff algorithm and insert a bunch of visibility:hidden <span>s or tiny <div>s wherever your side-by-side versions should match up, according to the diff. Then run JavaScript that finds each checkpoint (and its side-by-side neighbor) and adds vertical spacing to the checkpoint that is higher-up (shallower) on the page. Now your rendered HTML diff will be vertically aligned up to that checkpoint, and you can continue repairing vertical alignment down the rest of your side-by-side page.
Over the weekend I posted a new project on codeplex that implements an HTML diff algorithm in C#. The original algorithm was written in Ruby. I understand you were looking for a JavaScript implementation, perhaps having one available in C# with source code could assist you to port the algorithm. Here is the link if you are interested: htmldiff.codeplex.com. You can read more about it here.
UPDATE: This library has been moved to GitHub.
I ended up needing something similar awhile back. To get the HTML to line up side to side, you could use two iFrames, but you'd then have to tie their scrolling together via javascript as you scroll (if you allow scrolling).
To see the diff, however, you will more than likely want to use someone else's library. I used DaisyDiff, a Java library, for a similar project where my client was happy with seeing a single HTML rendering of the content with MS Word "track changes"-like markup.
HTH
Consider using the output of links or lynx to render a text-only version of the html, and then diff that.
What about DaisyDiff (Java and PHP vesions available).
Following features are really nice:
Works with badly formed HTML that can be found "in the wild".
The diffing is more specialized in HTML than XML tree differs. Changing part of a text node will not cause the entire node to be changed.
In addition to the default visual diff, HTML source can be diffed coherently.
Provides easy to understand descriptions of the changes.
The default GUI allows easy browsing of the modifications through keyboard shortcuts and links.
So, you expect
<font face="Arial">Hi Mom</font>
and
<span style="font-family:Arial;">Hi Mom</span>
to be considered the same?
The output depends very much on the User Agent. Like Ionut Anghelcovici suggests, make an image. Do one for every browser you care about.
Use the markup mode of Pretty Diff for HTML. It is written entirely in JavaScript.
http://prettydiff.com/
If it is XHTML (which assumes a lot on my part) would the Xml Diff Patch Toolkit help? http://msdn.microsoft.com/en-us/library/aa302294.aspx
For smaller differences you might be able to do a normal text-diff, and then analyse the missing or inserted pieces to see how to resolve it, but for any larger differences you're going to have a very tough time doing this.
For instance, how would you detect, and show, that a left-aligned image (floating left of a paragraph of text) has suddenly become right-aligned?
Using a text differ will break on non-trivial documents.
Depending on what you think is intuitive, XML differs will probably generate diffs that aren't very good for text with markup.
AFAIK, DaisyDiff is the only library specialized in HTML. It works great for a subset of HTML.
If you were working with Java and XHTML, XMLUnit allows you to compare two XML documents via the org.custommonkey.xmlunit.DetailedDiff class:
Compares and describes all the
differences between two XML documents.
The document comparison does not stop
once the first unrecoverable
difference is found, unlike the Diff
class.
I believe a good way to do this is to render the HTML to an image and then use some diff tool that can compare images to spot the differences.