I recently had an opportunity to give a talk at 360|Flex along with Randy Troppmann. Slides and code examples are posted below. Video of the session will come sometime in the unforeseen future as they have many hours of other sessions to post-process before getting to mine.
I had the privilege of speaking to the Indy Flex User Group last night on the topic of Degrafa. While I’m not one of the architects or contributors to the project, I do make extensive use of Degrafa in most of my personal and consulting development work. Below is presentation material and example code I used during the presentation. All the examples have view-source enabled. Just right-click.
Simple Circle Example:
Button Skinning Example:
Component Development Speedometer Example:
Smith Chart Example
ChromaPassword FXG Example:
MiniShapeDesigner Example (note, not mine):
In the new version of ObjectHandles2, we have the ability to use Sprites as the drag handles to resize and move objects around the screen. I was recently made a committer on the project and have added some functionality to allow Degrafa to be used to draw the handles and rotate them along with the object. Check out Example7 that highlights this new functionality.
ObjectHandles2Example View Source is enabled
I was at 360|Flex Indy in the session on the Axiis Data Visualization Framework presented by Tom Gonzales and Michael VanDaniker. Axiis is a framework built on top of degrafa that allows you to develop new and unique data visualizations that can go way beyond the simple column, bar, and pie charts available in the standard Adobe Flex charting libraries.
One of Tom’s first slides showed a Smith Chart. Tom mentioned jokingly that Axiis didn’t yet do something this complicated. For me sitting in the room, I was a bit taken aback. In my WCAP project, I have an open enhancement ticket from a customer asking for a smith chart visualization for transmission lines. They want to be able to click on a transmission line and view the directionality of the data on a smith chart. My original plan for accomplishing this ticket was to simply use an image for the smith chart background and draw my data on top of it. I must admit, I took Tom’s admission that Axiis couldn’t do a Smith chart as a throwing down of the gauntlet of sorts. I talked to him afterward to let him know I wanted to take on the challenge.
To date, I’ve only been working in Degrafa to get the basics of everything down. I’ll need to solicit Tom and Michael’s help in porting the work I’ve done over to Axiis and open-sourcing the code once I get a little further with it. So far, the most difficult part was calculating the arc angles and radii for each line on the smith chart based on the smith chart coordinates where the arc started and stopped. I still have a way to go in adding the various text labels along the curves as well as porting my work into a more reusable Axiis container.
The image above is the from-impedance(red) and to-impedance(blue) data across a 50 ohm transmission line with a sweep from 0.98mHz to 1.02mHz using a data point every 0.001mHz.
Hopefully, this little endeavor will benefit my WCAP customers as well as the open-source Flex community at the same time.
The last two weeks, I’ve been working on an AIR project called WCAP Pro. It stands for Westberg Circuit Analysis Program and has been around in some form since the 80s. It started out as an MS-DOS program written in Fortran 77 by my father. He has a background in electrical engineering and mathematics. There was no such thing as a computer science degree at most universities at the time, so it was a nice big bowl of spaghetti code with goto statements aplenty. To run it, you create a specially formatted text file that describes the Resistors, Capacitors, Inductors, and Current Sources along with the connections between them. When you run the DOS program, it spits out a text file with the results of the circuit analysis. The DOS program still has a small but loyal community using it to this day.
Since that time, the algorithm for WCAP has been incorporated in two software applications written in Microsoft Visual C++. Phasor Professional allows the user to design a circuit used in AM Radio that directionalizes the radio signal. This circuit sits between the transmitter and the towers of an AM Radio station. The second was called Diplex Professional and helped the user design a circuit that allowed two radio stations to share the same tower. The WCAP algorithm was converted to C++ and used internally by both of these applications.
The most recent evolution for WCAP is again as a standalone application. It has been completely rewritten using Adobe AIR 1.1 technology. Much of the work has been focused on the user-interface for this application. Many tools in the electrical engineering arena are heavy on algorithms and complexity. I wanted to make this application’s UI so smart that it would be truly FUN to use.
I started with two open-source projects, Flexlib, and Degrafa. I used the DragScrollingCanvas component from flexlib because I wanted the user to be able to pull the schematic around the screen as if they were manipulating a piece of drafting paper. I submitted an enhancement to DragScrollingCanvas to allow me to exclude certain children from causing canvas dragging. Doug McCune cleaned up my code and incorporated this concept into Flexlib. Degrafa was used to draw all of my schematic components.
I also incorporated a commercial product called Nitro-LM to handle the licensing of my application. This was kind of a no-brainer for me since I consult for Simplified Logic working on the Nitro-LM licensing product. It will allow me to keep track of who is using the software and also have enough control to shut someone off if they don’t pay their maintenance.
Most schematic-building applications have a “snap-to-grid” feature that lines up components. To me, this always seemed a bit abrupt from a UI standpoint. Any component placed in my schematic slides into place using standard Flex move effects. Another feature I disliked about other programs is how they connect components together. You have to draw each line segment between components and if you move a component, you need to re-route. I created a pathing algorithm that keeps the connector lines attached even if you move a component. Also, if you drop a component so it’s touching another, they are automatically connected up.
Rotating components in standard schematic tools usually involves selecting the part and then hunting for some type of rotate toolbar button. I provided a toolbar button to do it, but I also allow the user to hover over a component and mouse-wheel down to swing the component down, or wheel-up to rotate the component back to horizontal.
Another unique UI feature I designed for this application was an Eraser tool. It works just like a pencil eraser and you drag it back and forth across lines and components to highlight them for deletion. A confirmation box (dummy warning) then confirms the action.
The final UI feature I created was the Probe tool (seen in the screenshot above). I took my voltage tester and placed it on a piece of green paper in my driveway and snapped a photo of it with my wife’s digitial camera. The green contrasted nicely with the black and red of the voltage probes so I could make the image transparent fairly easily. Whenever the probe tool is dragged over connecting wires or parts, the outputs from the WCAP algorithm are displayed at the center frequency for analysis. I wanted this to have a similar familiarity to an actual engineer diagnosing a circuit in real life. If the probe is double-clicked on a connecting wire or part, all the details about that part at ALL frequencies analyzed are displayed in a data grid.
The application is still beta quality and is lacking about 2 key features. I hope to have everything complete before unveiling the application at the NAB AM Antenna Computer Modeling Seminar on November 20th.
This video shows some of the UI behaviors I’ve described above.
Since attending 360Flex in Atlanta, I wanted to learn a bit about skinning with Degrafa. For one of my own personal projects, I needed to create some nice scrollbars that would go with my black and purple color scheme. Now keep in mind that I am NOT a designer. Most of my coding experience before learning Flex/AIR centered around backend Java Servlets and other hidden technology. View-Source is enabled if you wanted to see how it’s done. I still don’t know how to get rid of the stupid white box between the two scrollbars. If someone would like to comment and let me know, that’d be great.