Wednesday, May 16, 2012

Update: QML, Monterey and Source Code Analyzer

I've been pretty busy lately working on a few things (other than school and AP exams, of course!).  Other than menial updates to Catalina (my robotics team's topside application), I've written plenty of C++ and QML code for my team's Android/Windows/OSX/Linux application for this year's MATE competition (someone else on the team is working on the iOS version).  I'd say that it's looking pretty sharp so far!  Here's a screenshot!

The iOS developer made that ROVotics logo and he also came up with the color scheme for our team, so I used them for the Android (and Windows/OSX/Linux) application.  I got that compass backdrop and outer ring from the QFlightInstruments project.  I made my own ROV image for the center of the compass.  On the right hand side of the application, there is an "About Us" button that switches the UI's state to the "about" QML state, which has instructions, a team photo, website URL and a scrollable text field that loads text from a plain text file to display.  Underneath the "About Us" button are some lights that change based on values sent from Catalina.  The communication light turns orange when ROVotics establishes communication with Catalina (and turns back to the current grey when the communication is lost).  The relay indicators are going to have real labels ("Lights" instead of "Relay0") when this application ships.  On the right, there is the mission timer which is updated by Catalina and turns orange when the time is up.  Underneath the mission timer is a "Vector Decoder" (creative name, huh?) that takes the motor values sent from Catalina and adds them up as vector values to show how the ROV will respond to the joystick input.  It's really handy for debugging incorrect motor code!  That little white bar between the compass and the vector decoder is the vertical thrust value indicator.  It simply shifts up and down depending on the applied vertical thrust.  Finally, on the far right is the depth indicator.  Catalina sends ROVotics the maximum depth of the pool as well as the ROV's current depth.  ROVotivs takes that value and calculates the depth of the ROV as a percentage of the maximum depth.  The orange bar then slides up and down to the correct percentage value, which gives the user a graphical representation of the depth.

The entire UI is scalable (although there is a minimum screen resolution), so it should work on everything from phones to tablets to laptops with varying screen resolutions.  Let me tell you... Making a UI that scales across that wide variety of screens with this many elements is a pain.  It's simple to do (just a little math), but it's still a pain to have to set all of the x, y, width, and height values for each widget added.

Overall, I've really enjoyed working with QML so far, so I do plan on writing more UI's with it.  As a bonus over normal QWidgets, QML forces me to have better form with programming because it makes it harder to store variable values in the UI.  I'm taking what I've learned from this and applying it to Monterey to make the code top notch.

Speaking of Monterey, it's coming along nicely so far!  I still have to add joystick support (with optional bilinear reading).  I'm going to avoid mapping buttons and hats right now because in my experience, it's easier just to reach over and tap a keyboard shortcut.  However, if people ask for certain joystick mappings, I'll add them.  I am still planning on hitting my June target date!

Finally, I found out about this really awesome Qt application called cppcheck which is a very useful opensource C++ source code analyzer.  It catches those mistakes that the compiler won't catch (like not assigning a default value to a variable).  I've already gone through much of my code with it and have used it to help me spot errors.

Thanks for stopping by!

Chris K

No comments:

Post a Comment