MythTV Upcoming Recordings Widget, with HTTP Bind, XML to JSON via XSLT and pagination display

Just wanted to share this widget although I suspect not many will adopt it as is but whilst building it it seemed to touch on quite a few bits and pieces that in themselves others might find useful so you can always pick them out.

If you do want to use the widget as is then you’ll need an instance of MythTV accessible somewhere with it’s DVR web API exposed.

MythTV Upcoming List

Summary

The summary process and setup is as:

  1. HTTP binding to call MythTV API
    1.1. result is XSLT transformed to values I want and stored in a String item
  2. Rule monitors that String item for update
    2.1 does an XML to JSON transform and stores in another String item
  3. Widget displays the JSON content with ng-repeat
    3.1 Uses one other Number item so it can provide pagination

Details

1 . HTTP binding to call MythTV API saved in $root/items/myth.items, change localhost to suit your MythTV server IP.

String mtv_MythTV_Upcoming_XML "MythTV Upcoming [%s]" (grp_Virtual, grp_MythTV) { http="<[http://localhost:6544/Dvr/GetUpcomingList?StartIndex=0&Descending=true:1800000:XSLT(mythtv_upcoming.xsl)]" }

1.1. Result is XSLT transformed, save this in $root/transform/mythtv_upcoming.xsl - make sure you take the .xml extension off, only way I can load it. You can easily modify the xsl to pull more data if desired but it’s got the basics I was interested in.
mythtv_upcoming.xsl.xml (1.5 KB)

2 . Rule monitors that String item for updates:

rule "MythTV Upcoming XML raw parsing..."
when
  Item mtv_MythTV_Upcoming_XML changed
then
  val String processed = transform("XSLT", "xml_to_json.xsl", mtv_MythTV_Upcoming_XML.state.toString)
//logInfo("MythTV", "Processed XML: " + processed)
  mtv_MythTV_Upcoming_JSON.postUpdate(processed)
end

2.1 As you can see the rules does an XML to JSON transform and stores in another String item. I am in no way claiming this bit as my work, I obtained the xsl file from Bojan Bjelic, there are others like this though so feel free to chose one to suit your preferences, just remember I’ve only tested with this one: again remove the .xml extension put in $root/transform
xml_to_json.xsl.xml (3.6 KB)

3 . Widget displays the JSON content with ng-repeat
paginated-list-mythtv.widget.json (2.6 KB)

The widget has some settings that should be pretty obvious:
Point the JSON one at mtv_MythTV_Upcoming_JSON
Point the index at pgn_MythTV_Upcoming_Idx
And then set your preference for items per page so you can control how many you want visible on this widget instance.

The items all the above will be looking for:

String mtv_MythTV_Upcoming_XML "MythTV XML"
String mtv_MythTV_Upcoming_JSON "MythTV JSON"
Number pgn_MythTV_Upcoming_Idx "MythTV Pagination Index"

I’m running standard OH2.1.0 release so it’s possible updates may work better or worse with some of the below things, time will tell.

Things to clean up:
Widget - Angular is new to me and I’m not strong on the syntax so where you see things like (item*1) it’s because I couldn’t get a Number type, it would constantly treat as String and that doesn’t work when you want to do arithmetic. So ‘times 1’ is a work around to force a type conversion, hopefully someone can educate me on the recommended way.

Widget - Look and feel is very basic so any one with better style skills is welcome to polish

Pagination text in Widget - Where it displays “Showing N1 to N2 out of N3” N2 can go out of range. Needs a little extra check < than TotalAvailable and enforcement.

Display - The widget content is usually empty for me after an F5 style refresh. But if I just switch to another dashboard and back it renders OK. Not sure why but as I only do F5 mostly whilst developing it’s not a big issue for me.

3 Likes

Any chance you could upload a screenshot of your widget please?

Have added a gif. As mentioned in the things to do “it’s not pretty” but it is functional and a little effort well make it stunning I’m sure!

The buttons aren’t really touch/tablet friendly either :hushed:

Ah, MythTV, that brings back memories. Great tutorial! Thanks for sharing!