How to add pop-out annotations in Graphviz? - graph

I am a newbie learning to use graphviz.
Is it possible to generate interactive pop-out annotations when you move cursor around the graph? For example, hovering a node/edge will pop-out message box showing more information about it.
And if so, how?
Thank you so much for the help.

Depending on the output format, there are some possibilities:
You may create a png image and an image map and serve it as a html page. The world of html and javascript offers endless possibilities to make this interactive, use popout messages, etc.
If you prefer svg, some information is already included in the output as <title>, and again, if served within a browser, javascript may prove useful to enrich the output (not sure if it's possible to use existing svg with raphaeljs, but it sure shows nicely what's possible with svg + javascript).
You may simply have graphviz render the positions of all nodes and parse it's output to present it in your custom application

Related

Nodal graph in Qt for Programmable Flow Charts

I was wondering if there was a nice way to allow users to create nodal graphs (with restrictions) as with LabView.
Something like this:
I have seen http://www.pyqtgraph.org/, which seems to have something similar, and I do intend to use PyQt as my base (though I do not mind linking in C++ code), but it doesn't quite have the look and feel I wanted.
Any pointers to the right direction would be great.
There is a Diagram Scene Example which uses the Graphics View framework to make flowchart diagrams. It is an application in which you can add flowchart shapes and text and connect the shapes by arrows. The shapes, arrows, and text can be given different colors, and it is possible to change the font, style, and underline of the text.
You can take a look at the code and see how to create custom graphics items and handle mouse events and movement of items. Then change the look and behavior as you like.
Check another diagram editor here.
[not enough reps. to comment]I too had a similar task to implement. For me it was a large and complex block diagram. It was really hard to implement using QGraphicsScene. I posted a question on SO and instantly gained enough downvotes. No one gave any useful hints. So I did the hardway. Created images of lines with transparent background and changed the style-sheet dynamically. I don't know weather this is the right way. It will be really helpful if someone gave insights on this.

UIAccessibility implementation with a large flowchart- ios

I am trying to make my app accessible in ios. I have some large complex images (flowcharts and tables). How would I go about making this image accessible if there are different elements within the image? I want them to be able to click on different parts of the image to hear different accessibility hints, rather than one hint for the whole image which may not be very helpful.
I thought about making blank labels and placing them over the image in the right places and writing the hints in these blank labels, but just wondering if there is a better way to do it.
Any suggestions?
You are trying to make the contents of an image accessible. The best solution would be to adopt the UIAccessibilityContainer protocol and return accessibility elements representing each node in the flowchart. The Accessibility Programming Guide for iOS contains a section titled, Make the Contents of Custom Container Views Accessible. By adopting the UIAccessibilityContainer protocol, you can describe arbitrary regions of the flowchart as you would any view.

Accessing coordinates within each curve of SVG

I am using Qt framework to develop a desktop application. I want to load, do some modification and save. So I basically need to access some coordinates within each curve (i.e. control points for Bezier curves, or just even vertices of polylines). I thought of using SVG format, loading it with QtSvg. Now the question is, after I load SVG (with QGraphicsSvgItem?), how can I look into it, i.e. access separate elements and their coordinates?
Thanks!
But could not find a class that allows me to do manipulation to an existing SVG image. So may I know is it possible to do manipulation directly in Qt?
It is not possible to edit with QtSvg. It is only for reading.
That is also the reason why the Calligra project had their own way of doing this. There is some SVG support available with webkit, and that may be able to manipulate, but that may also be an overkill for your project.

Multi-Layered SWF with dynamic animation

I'm new to Flash and I trying to do something as following:
I need the ability run several layers of animation (image sequences) in a single file (ex. SWF) which will be loaded and accessed dynamically by Flex - I need to change the content (image sequence) in runtime in order to customize my animation.
What would be the best approach in this case?
Is it the correct direction?
Should I consider creating a SWF for each animation and load it dynamically into my layered SWF?
When you say you need to adjust the image sequence, do you mean customise the order of individual frames, or simply select between a selection of set sequences?
If it's the former, the answer will be a bit more in-depth, if it's the latter and there aren't too many you're probably best off exporting as SWFs, or even as a video file to compress them, then loading them in dynamically. If they're small enough not to add significant weight to your SWF, you could export them as MovieClips in a SWC and create instances of them directly in the code without having to load them in.
Hope this helps (sorry if any of the above is confusing!) - could you give a bit more detail on what you're trying to achieve?

Printing barcode labels from a web page

I am working on an ASP.Net web application that must print dynamically created labels on standard Avery-style label sheets (one particular size, so only one overall layout). The labels have a variable number of lines (3-6) and may contain either lines of text or a graphic barcode image.
Our first cut, that I inherited, used monospaced fonts to reduce the formatting issues, but that did not allow enough text to the fit on the labels and the customer was dissatisfied. Basically it was formatted text.
My next version used TABLEs, DIVs, CSS, and a bit of JavaScript calculations to format the labels using proportional fonts. It still required a bit of tweaking (the user had to set their print margins correctly and turn off the print headers and footers), but it seemed to work.
However, it seems that there are some variations on how different printers render the text (WYS ain't WYG), so even though we tested on different browsers using at least two different printers (an inkjet and a laser printer), some user's labels don't line up. Slight margin variations can be adjusted by adjusting the margins on the page setup dialog, but the harder problem is that the inter-label spacing can be off by a tiny fraction of an inch, so that if the first label is pretty well centered, by the end of the page the label text and images have crawled off the top or bottom of the labels.
We are about to the point of switching to generating Word, Excel, or PDF output which is going to take quite a bit of development time and possible add extra steps in the printing process.
So, does anyone have any suggestions on how to do an HTML/CSS layout that will precisely render on different types of printers? I don't really care if the line/word breaks are a bit different, but I need to be able to predictably position the upper left corners of each label area.
Right now the labels flow down the page in a table and we have been tweaking the box model of the cells and internal DIVs to make them a uniform height. I suspect that using absolute positioning of each element may be the best answer, but that is going to be tricky as well due to the ASP.Net generation of the label elements. If I knew for sure that would work, I would rather try it than throw away everything we have to go to a different generation method.
Slight Update:
Right now I'm doing some tests with absolute positioning - setting only the top and left coordinate of a containing block element. So far there are minor variations on the offset onto the page (margins, paper alignment, etc.), but all browsers and printers tested put the elements in exactly the right spots relative to each other. I appreciate the PDF tips, but does anyone know of additional "gotchas" on using absolute positioning this way?
Update:
For the record, I rewrote the label printing portion using iTextSharp and it works perfectly - definitely the way to do this in the future...
Forget HTML and make a PDF. HTML printing is extremely variable - not just across browsers but across different versions of the same browser. PDF is a lot easier.
Even if you get it exactly right with one browser / font setup / printer / phase of the moon, it will be the most fragile thing you've ever had to maintain. No matter how long you think it will take to make a PDF (and it's not really that hard as there are some free libraries out there), HTML will ultimately take a lot more of your time. PDF readers are widely deployed and print more consistently than even Word files.
The web is not a format that is guaranteed to get consistent print results. Given the standard support for label printing with MS Word, and the relative ease of automation and generation, I would strongly recommend going that route.
I'm not aware of ANY method to get percise printing across all types of browsers, operating systems, and printers when using web content.
"precisely" and "printing" aren't two words that really work together that well. I did an OCR/OMR application a year or so ago, and even when building a PDF I saw significant differences between different print drivers and such. Because of that, my gut is to tell you that you might not have 100% success.
If CSS and layout issues don't work that well for you, you might need to resort to building the labels as images using GDI+ -- at least that way you can use GetFontMetrics() and such.
Good luck!
I had a similiar issue and the answer is you can't do it. Instead, I generated a PDF file in realtime using iTextSharp and passed that to the response.
Using SQL Server Reporting Services, I generate a PDF to send to the printer, but it can be seen as HTML on the screen using the control you can include in your web pages. There are RDLC files that are available on the internet to print to various Avery formats.
I rewrote the SharpPDFLabel code that was mentioned back in 2011 this week as I needed it to be a lot more flexible (and to work with the current iTextSharp library).
You can get it here:
https://github.com/finalcut/SharpPDFLabel
I added the ability to specify the contents of each individual label if you want (or to continue creating a sheet of identical labels too). By extending the LabelDefinition class you can specify the layout of your labels pretty easily.
I also struggled with the HTML/CSS approach due to the inconsistent printing behaviour across browsers.
I created a C# library to produce Avery Labels from ASP.NET which I hope you might find useful:
https://github.com/wheelibin/SharpPDFLabel#readme
You can add images and text to the labels, and it's easy to define more labels types.
(I use it for barcode labels, the barcode is generated as an image and then added to the label using this library.)
Cheers
Add a few options to your app that let users adjust spacing for their particular configuration. You could include this right on the label if you want, and style it away via media selectors, but you'll probably want to persist them somewhere, too.
Flash is also good method to push a printable like a label albeit a little more complex to implement and maintain. In most cases it displays much quicker than a PDF and you can embed it into the design of the page and simply add a "Print" button within the flash.
I did this several years ago when we were using HTML and PDF to generate confirmation receipts. HTML is "ok" but is at the mercy of the end users web browser so we quickly dumped that method. PDF's are good as long as they have a PDF reader, which to our surprise a lot of our customers did not. So that was dumped as well after we switched to a FLASH version using a simple flash movie that included a few dynamic text areas and a "print" button. I communicated the data between the page and flash using a few flash vars. You can also use web service.
When I need something more than just simple text I use the free community edition of the PDF Generator component from DynamicPDF.com. It works great and is very quick.
I just went through the same thing. Ended up switching and making a short little JSF app (running on Glassfish) that uses JasperReports to print directly to the lable printer. Push button, instant label at the printer, don't even have to view it on-screen if you don't want to since Jasper can directly output to printer (as well as PDF in browser).

Resources