I shouldn’t care about this because I don’t use JavaFX. But it bugs me so I’ll rant a bit.
A while ago (probably around version 1.2) the language caught my eye. I especially liked its literal declarative syntax for creating tree structures and data binding. I thought I heard that Oracle was discontinuing JavaFX but version 2.0 is in beta. I now realize that it is only JavaFX Script that is canned — JavaFX is alive and well. (JavaFX Script lives on in visage.) The features of JavaFX are available as APIs that can be used from Java or other languages on the JVM. This is a good architecture.
Writing procedural code to construct a scene graph looks as ugly and cumbersome as JavaFX Script was elegant. To “fix” this problem FXML was invented. FXML is a XML dialect for declaring a scene graph.
From what I have read there are two main motivations for using XML:
Familiarity — from the getting started with FXML page: “One of the advantages of FXML is that it is based on XML and is therefore familiar to most developers”
No need to compile (presumably changes to FXML are made on the fly without having to restart the app). This is fair but doesn’t imply that XML is a good answer.
The familiarity argument is false. It confuses syntax with semantics. Yes many developers are familiar with the syntax of XML but just because someone knows XML Schema doesn’t mean they will have any understanding of XSLT. One must still learn the semantics of FXML and that’s the hard part.
Here is what I think is bad about FXML:
XML is just not a convenient language for source code. It is verbose and cumbersome. It has lots of little things that get in the way such as entity references. New programming languages including declarative ones should not be XML.
Use of character case in element names to distinguish between instances and properties is ugly.
Properties can be represented by either XML attributes or XML elements. This is practical but confusing and stems from using the wrong tool for the job (XML).
Type coercion.
And a few things I liked:
Use of XML processing instructions.
Built-in support for string translation. But it doesn’t go far enough. It should eliminate the need for maintaining resource property files and support format substitutions.
Concept of static properties.
What FXML shows is the importance of having a literal representation for data. It looks like FXML could be used to build arbitrary heterogeneous object trees which is generally useful. What I think is really needed is an object literal syntax for Java similar in concept to what JavaScript has. The syntax used by JavaFX Script would make a great starting point.
For my last video project I used Blender. It is a very capable video editor but it has a steep learning curve and is complex. I wanted something easier that I could show the kids how to use. They have had some exposure to iMovie at school. Ubuntu 10.04 (Lucid) comes with a few more video editing options than past releases. I decided to give PiTiVi a try.
Over all PiTiVi is fairly good for such a young product. It has lots of potential to be both powerful and easy to use. The documentation is good, straight forward, and easy to understand. It does leave out some background or supplemental information which I had to figure out on my own. This is not a tutorial, just some information that may be useful to others trying it out.
The video project I choose is a marble timer built with K’NEX that my daughter Isabella and I made for a school project of hers last year. The video was shot with a Flip HD camera.
I installed the latest PiTiVi version. There really is good reason to use a newer version than the one that comes with the Lucid software sources. There are many improvements and new features. The PiTiVi download page gives instructions on how install from the Ubuntu PPA (Personal Package Archive). I used version 0.14.0-2.
The Flip takes nice video but the HD resolution (1280×720) can make it difficult to work with on underpowered computers. I have an old Z61m ThinkPad with a 64MB ATI Mobility Radeon x1300 video card. It has no problem playing back HD video but it could not handle editing.
The PiTiVi documentation talks about friendly video formats. It says frame-independent compression formats such as MJPEG will perform better. I figured editing may work better if I convert my Flip video, which uses a H.264 / AVC codec to MJPEG or even uncompressed. I tried both. The uncompressed AVI files were huge and didn’t perform any better so I stuck with MJPEG. It took me a while to figure out how to convert the files. Since PiTiVi is based on GStreamer I decided to try using it. There may be other tools for this. I had to learn a lot about Gstreamer and its command line program gst-launch. The command line I finally figured out is this (just change the src and sink file names):
The performance was better with these files. If there was only one clip I could scrub and play back with no problem but as soon as I added another clip the video was choppy. I could have tried reducing the resolution of the video but I really wanted the result to be in HD otherwise what is the point of taking video in HD in the first place. I decided since my video would be fairly simple and short that I could manage to edit it with choppy video. I could advance a frame at a time to check fades and transitions. Audio playback was in real time.
The titles were made with GIMP. When added as a clip they are automatically turned into video.
The most complicated thing about my video is the timer overlay. To do this I created a solid green frame using GIMP brought it into a new PiTiVi project added it as a clip and made it 30.5 seconds long. Then I rendered this to MJPEG. This gave me a green screen video 30 and a half seconds long. Then I used the pango timeoverlay plugin in the following command to add the timer.
I added the resulting timer.avi file as a clip above the marble track video and used the alpha filter effect so that the green was transparent. This gives a counting timer overlaid on the marble video. All that remained was to start it when the marbles started and trim it when the last marble hit the table.
PiTiVI has plenty of effects. The one I wanted to use was Bulge. I would have used it on the main title screen but I wanted it to move across the screen. The effects will be much better once they can be animated over time with the key frames. Also if the pango plugin was available in the effect library perhaps I wouldn’t have needed to use a command line.
One problem the video has that I couldn’t find a way to fix is an audio glitch at the beginning and end of each voice over. The voice over quality in general is not that good probably due to a cheap microphone. The voice was recorded separate from the video. I used Audacity to cleanup the audio some.
I tried rendering in a few different formats. 1) MP4, FFmpeg PEG-4 part 2, ACC. This produced a very small file (16MB) and rendered quickly but the video quality was very poor. 2) Ogg, Theora, Vorbis. This produced very good quality video. Render time was about 20min. The file size is 187MB. 3) AVI, FFmpeg motion jpeg, ACC. The video quality was not very good the file was large (127MB) but the render time was very fast (~7min). 4) WebM, On2 VP8, Vorbis. The video quality was very good, the file was small (22MB) but it took about 44 min to render. Uploading the WebM format to youtube didn’t work so I uploaded the Ogg format. There are many other rendering options but these are the only ones I have tried so far. The audio glitch was present in all rendering formats.
My wish list for PiViTi:
The documentation should include more information on preferred video formats for editing and how to use external tools to do the conversion. Even better would be built-in tools do do the conversion.
The documentation should give advice on different rendering combinations. There are many containers each with different options for video and audio codecs. It would be nice to have a simplified dialog that chooses a recommended output format based on high level choices such as what do you plan to do with the video (burn to DVD, upload to YouTube etc.) and other choices like do you prefer open standards.
The render dialog should remember the last folder I rendered into.
I recently watched a video about a cool new technology called <angular/>. It looks like a great way to create web applications. It caught my attention because I saw in it some parallels with some of my recent writings and what I am currently working on.
The video was very good but in the beginning Misko Hevery struggled a bit to describe it and at the end admitted the biggest problem was explaining to people what <angular/> is. To me it is clearly a language, and an extensible one at that. It is (or at least contains) as he describes an HTML compiler. Doesn’t a compiler imply some language to compile. The source is clearly more than just HTML so it must be more than just an HTML compiler. I wonder if there is some reason he avoids calling it a language. The fact that it can be extended to handle new behaviors, widgets, etc. just makes it a better language. Is there some fear that calling it a language would put people off? It doesn’t bother me since I previously said that higher level languages will provide the biggest productivity gains.
The parallels I was talking about are:
Its a declarative language
The language is designed to be extended
It has two way data binding
Two way data binding is a very important aspect in simplifying the creation of web apps. The first time I ever saw data binding was back in the the late ’80s. I was visiting a friend that was working on a maser, which is cool (literally) in its own right, but what caught my eye, as he showed me around his lab, was some software running on an old Mac. That software was LabView. The fact that a line drawn between a sensor and a gauge meant that any time the senor value changed the gauge was updated really impressed me. More recently I noticed that data binding is built in to the JavaFX language. I haven’t written any programs in LabView or JavaFX so I’m not sure if the bindings can be bidirectional but I’m pretty sure at least in JavaFX that bidirectional changes can be accomplished.
It is the two way data bindings that most notably distinguish <angular/> from template languages. I used to be a big fan of template languages, and StringTemplate was my favorite. Lately I have found them to be less useful. One reason is that in my recent work I have found that procedural logic far outweighs the amount of template text. The bigger reason is that most template languages don’t automatically protect you from script injection (XSS). There are many JavaScript template languages available now and I don’t have a need for any of them. But <angular/> is different — it is not a template language and it looks like it protects against script injection by default.
I have been so busy at work lately that since wrapping up the climbing robot I haven’t had time for any substantial personal projects. What I’ve been working on is a declarative DSL for implementing a web application based on ideas I previously wrote about. Like I said its a work project so I can’t go into any details. I will say that I’m working with ANTLR v3 and jQuery, which are technologies I really like. My point in mentioning it is that if you read that post and wondered, like I did, if those ideas would work I believe the project is far enough along that I can say that they do.
Way back in January I watched a Google tech talk video Lego Engineering: from kindergarten to college. The talk stresses the importance of teaching engineering in schools. A few days later at breakfast I started talking with my oldest daughter, Alexandria, about engineering and what it is that engineers do. I said that engineers use what they know about science and how things work to find solutions to challenges. I threw out a challenge as an example: Build the tallest possible tower that fits in our house and then build a robot to climb it. It was just an example but she got really excited about the idea. “Can we build it. Can we. Can we.” she said. I said “sure”.
In March I posted a preview of the robot with a picture and promises of more details to come. Its taken me way to long to finally write it up. The robot has been done since May and has made a dozen or so ascents. Making the video is what caused the delay.
Using positioned background images (a.k.a CSS Sprites) has a number of benefits:
Performance. One of the performance recommendations made by Yahoo’s performance team is to reduce HTTP requests. One way to do this is using the CSS Sprite technique — combining many images into a single background image.
Skin-ability. With the img tag the image URL is in HTML markup where it is hard to change. With CSS Sprites the image URL is in a CSS file making it more convenient to change. Sure you can change the contents of the original file but there are reasons for changing the URL. It is not as easy to move the images to a different server or group them in different image files when the URL is not in CSS.
However there are drawbacks. The biggest is accessibility, specifically high contrast mode. In high contrast mode all background images and colors are ignored — replaced with high contrast colors such as white on black or black on white. The other issue is that background images are not always printed.
The prevailing accessibility advice is to not use background images for functional images. The underlying problem is that there is no way in HTML/CSS to identify a background image as being functional. They are all considered decorative. It is also true that not all img tag images are functional but again there is no way to distinguish them for the purpose of high contrast mode. So high contrast mode makes a reasonable assumption that background images are decoration to be removed and img images are functional and must be shown. From here on I’ll call functional images icons. They either convey important information or are interactive (like a toolbar button for example).
I have seen recommendations that functional background images should be replaced with text when high contrast mode is detected. This does not seem right to me at all. A desktop app does not change its toolbar button icons to text in high contrast mode. The assumption is that icons are already designed to have reasonable contrast.
It also just feels right to me that the icon URLs should come from CSS.
Since I care about performance and accessibility I’m not happy with this conflict. I want a solution that puts the icon URL in CSS, works in high contrast mode and allows me to combine icons into a single image file. Here is what I came up with. Continue reading…
