|
| Author |
Message |
Minckster
Joined: 02 Oct 2008
Posts: 58
|
 Posted: Thu Jul 30, 2009 2:46 pm Post subject: Make pyTivo's HTML interface iPhone-friendly |
 |
|
I got tired of double-tapping and stretching so that I could read the text in pyTivo's HTML interface with my iPod Touch, so i added one line to a few files to make that interface iPhone-friendly.
(Using an iPhone, one can push files from the computer running pyTivo to a networked TiVo, view the Now Playing List, or pull files from a networked TiVo to the computer running pyTivo.  )
The line for iPhone-friendliness is: | Code: | <meta name="viewport" content="width=device-height"/> |
and it goes within the <header> section. I added it to - templates/info_page.tmpl
- plugins/video/templates/container.xsl
- plugins/togo/templates/npl.tmpl
For example, here's the beginning of my plugins/video/templates/container.xsl file: | Code: | <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8"/>
<xsl:template match="TiVoContainer">
<xsl:variable name="tivos" select="Tivos"/>
<html>
<head>
<meta name="viewport" content="width=device-height"/>
<title>pyTivo/<xsl:value-of select="Details/Title"/></title>
</head>
<body style="background-color: rgb(250, 250, 250);">
<p align="center"><font size="6">
<a href="/" title="pyTivo Control Panel">pyTivo</a><xsl:text> </xsl:text>
<xsl:value-of select="Details/Title"/>
</font></p> |
I'd like to disable or redirect the "Download" links on the "ToGo" pages, so users wouldn't download .tivo files to their iPhone. Any ideas?
I'm using wmcbrine's branch dated "Thu, 30 Jul 2009 01:37:53."
| Description: |
| FYI: Here's an pyTivo icon for iPhone's home page. Google for apple-touch-icon.png for instructions, but you can use the href of this image. |
|
| Filesize: |
33.48 KB |
| Viewed: |
1012 Time(s) |
|
Last edited by Minckster on Mon Aug 03, 2009 2:50 am; edited 4 times in total |
|
| Back to top |
|
 |
wmcbrine
Joined: 04 Jan 2008
Posts: 2029
Location: Maryland
|
| Posted: Thu Jul 30, 2009 3:13 pm Post subject: |
|
|
I assume this has no effect on any non-iPhone browsers?
Is there some kind of iPhone simulator I could test with? I don't like to commit code I can't test... (I'll move this to "pyTivo" or "Hacks", depending on the answer; IMHO it doesn't belong in "Support".)
Edit: OK, I read up on this, and it appears safe. But I'd still like to see it...
_________________
My pyTivo fork . My page |
|
| Back to top |
|
|
Minckster
Joined: 02 Oct 2008
Posts: 58
|
| Posted: Thu Jul 30, 2009 5:03 pm Post subject: |
|
|
| wmcbrine wrote: | I assume this has no effect on any non-iPhone browsers?
Is there some kind of iPhone simulator I could test with? I don't like to commit code I can't test... (I'll move this to "pyTivo" or "Hacks", depending on the answer; IMHO it doesn't belong in "Support".)
Edit: OK, I read up on this, and it appears safe. But I'd still like to see it... |
Sorry to post and run, causing you to do your own Googling on "viewport".
That meta tag shouldn't affect any browsers other than iPhones and iPod Touches. It would be nice if it affected all handheld browsers, but I didn't find anything simple for that.
The only iPhone emulators that I could find aren't down-loadable. They run through the internet, e.g., http://iphonetester.com/ Turning on my iMac's webserver and opening the appropriate ports on my router seems like a lot of work.
>> Would screen shots from my iPod Touch both with and without the "viewport" tag suffice? <<
Although it's obvious to you -- no doubt -- I'll mention that the way that I got the pyTivo HTML-interface working on my iPod Touch was to change the bookmarked URL on Safari from "localhost:9032" to "<ip-address>:9032", where <ip-address> is the IP address of the computer running pyTivo. (I actually used its Bonjour address, which I set to "iMac-username.local:9032".) When I synced that bookmark into my iPod Touch, it goes to my iMac though my local network.
I considered whether to post to "pyTivo" or "Hacks", and thought I had clicked on "pyTivo," not "Support." I apologize for my mis-click. I guess it fits in "pyTivo" if you incorporate it into your fork, and "Hacks" otherwise. It would be a hack, except for that it's so simple.
[FYI: I noticed that my TiVo's Bonjour address isn't random, as I had assumed. It's "dvr-wxyz.local", where wxyz are the last four characters of my TiVo's tsn. You may find that information useful from time-to-time, instead of looking up possibly changing IP addresses.]
Last edited by Minckster on Thu Jul 30, 2009 9:57 pm; edited 2 times in total |
|
| Back to top |
|
|
Minckster
Joined: 02 Oct 2008
Posts: 58
|
| Posted: Thu Jul 30, 2009 6:48 pm Post subject: |
|
|
pyTivo central images. The screen shots are about 50% wider and 50% taller than the actual display.  (BTW, is that 50% larger overall or 100% larger?)
Two more pairs of screen shots to follow.
| Description: |
| pyTivo Central,with viewport meta tag |
|
| Filesize: |
25.95 KB |
| Viewed: |
1085 Time(s) |
|
| Description: |
| pyTivo Central,without viewport meta tag |
|
| Filesize: |
23.09 KB |
| Viewed: |
1084 Time(s) |
|
Last edited by Minckster on Thu Jul 30, 2009 6:58 pm; edited 2 times in total |
|
| Back to top |
|
|
Minckster
Joined: 02 Oct 2008
Posts: 58
|
| Posted: Thu Jul 30, 2009 6:50 pm Post subject: |
|
|
ToGo pages.
One more pair of screen shots to follow.
| Description: |
| ToGo page with viewport meta tag |
|
| Filesize: |
62.41 KB |
| Viewed: |
1083 Time(s) |
|
| Description: |
| ToGo page without viewport meta tag |
|
| Filesize: |
66.35 KB |
| Viewed: |
1083 Time(s) |
|
|
|
| Back to top |
|
|
Minckster
Joined: 02 Oct 2008
Posts: 58
|
| Posted: Thu Jul 30, 2009 6:53 pm Post subject: |
|
|
Push screens. This is the pair showing the biggest difference. I should have led with it.
| Description: |
| Push screen with portview meta tag |
|
| Filesize: |
66.11 KB |
| Viewed: |
1082 Time(s) |
|
| Description: |
| Push screen without portview meta tag |
|
| Filesize: |
63.87 KB |
| Viewed: |
1082 Time(s) |
|
|
|
| Back to top |
|
|
Minckster
Joined: 02 Oct 2008
Posts: 58
|
| Posted: Thu Jul 30, 2009 6:57 pm Post subject: |
|
|
pyTivo configuation screen. I haven't investigated yet why the middle part doesn't display.
I haven't added the viewport meta tag to this page, because it's not useful on an iPhone anyways.
| Description: |
| pyTivo Configuation Page. |
|
| Filesize: |
44.73 KB |
| Viewed: |
1080 Time(s) |
|
Last edited by Minckster on Thu Jul 30, 2009 8:55 pm; edited 1 time in total |
|
| Back to top |
|
|
rdian06
Joined: 12 Apr 2008
Posts: 1420
|
| Posted: Thu Jul 30, 2009 8:08 pm Post subject: |
|
|
I thought there was an iPhone simulator in the iPhone SDK from Apple? Though you'd need to run it on a Mac (or something running Mac OS X...)
Wonder how it looks on a Blackberry and Windows Mobile. Couldn't we detect the browser User Agent string like a lot of mobile aware sites do?
|
|
| Back to top |
|
|
Minckster
Joined: 02 Oct 2008
Posts: 58
|
| Posted: Thu Jul 30, 2009 8:32 pm Post subject: |
|
|
The best that I can tell, the cheapest iPhone SDK is $99. "For developers who are creating free and commercial applications for iPhone and iPod touch and want to distribute applications on the App Store." (emphasis added) I don't see a free version of the iPhone SDK and can't find an iPhone simulator in Xcode 3.1.3 (which by no means ensures that they're not there).
http://developer.apple.com/iphone/program/apply.html
| rdian06 wrote: | Wonder how it looks on a Blackberry and Windows Mobile. Couldn't we detect the browser User Agent string like a lot of mobile aware sites do? |
I'm nearly certain that the viewport meta-tag will be recognized only by iPhones and iPod touches.
The viewport meta-tag is just one line in three files. I like that simplicity. Is there something similarly simple for other handhelds? Wouldn't detecting the User Agent string be followed by serving different CSS files to the different handhelds?
|
|
| Back to top |
|
|
Minckster
Joined: 02 Oct 2008
Posts: 58
|
| Posted: Thu Jul 30, 2009 9:44 pm Post subject: |
|
|
I edited my first post to simplify the viewport meta tag. After playing around with different values, a page-width of around 480 pixels looks best to me, in both portrait and landscape modes. 480 pixels is the height of the screen, so I'll use that. Initial-scale and minimum-scale don't seem particularly important for our simple pages, so I left them out.
I'm left with the following viewport meta tag for the three pages: | Code: | <meta name="viewport" content="width=device-height"/> |
FYI: Apple's page on Apple-specific meta tags.
|
|
| Back to top |
|
|
gonzotek
Joined: 12 Jan 2008
Posts: 64
|
| Posted: Thu Jul 30, 2009 11:06 pm Post subject: |
|
|
I can't find a definite answer one way or the other after a few searches, but android-based devices might recognize the viewport meta tag as well, since their browser is also based on webkit. Anyone able to test? (or does google offer an android simulator?)
If they do support viewport, it makes this a more attractive item for inclusion(versus a hack), imo. I'd rather not have to edit multiple files every time wmcbrine updates since I use an iphone, but I appreciate that not everyone wants to use a phone with Apple's App Store T&C attached.
_________________
Follow @pytivo on Twitter for project updates and more! http://twitter.com/pytivo |
|
| Back to top |
|
|
krkeegan
Site Admin
Joined: 04 Jan 2008
Posts: 458
Location: Los Angeles, CA
|
| Posted: Fri Jul 31, 2009 12:39 am Post subject: Blackberry Already Works Fine |
|
|
Most of the admin pages already work fine on the Blackberry Bold, screenshots are below. The pages look like this without any zoom necessary. I use it periodically to confirm that something recorded.
I would post shots of the configuration pages, but i am getting the raw HTML all of a sudden for some reason. As in I see the HTML code rather than a rendered page, and it does this even from a browser. I guess I have to look into that later
| Description: |
| ToGo Screen on Blackberry Bold |
|
| Filesize: |
44.8 KB |
| Viewed: |
1050 Time(s) |
|
| Description: |
| Main screen on Blackberry Bold |
|
| Filesize: |
15.85 KB |
| Viewed: |
1050 Time(s) |
|
|
|
| Back to top |
|
|
krkeegan
Site Admin
Joined: 04 Jan 2008
Posts: 458
Location: Los Angeles, CA
|
| Posted: Fri Jul 31, 2009 12:57 am Post subject: |
|
|
OK here is the Config screen. (I had to muck with the admin plugin to add a content-type header, not sure when that went bad, more likely than not it is caused by my failure to update frequently)
It looks like the BB cannot handle the Javascript properly either. I will confess I suck at JS coding and I am sure there is a better way to program the config screen to make it work on everything.
Oh, and the Blackberry does not handle the zoom on this page properly.
| Description: |
|
| Filesize: |
14.25 KB |
| Viewed: |
1047 Time(s) |
|
|
|
| Back to top |
|
|
rdian06
Joined: 12 Apr 2008
Posts: 1420
|
| Posted: Fri Jul 31, 2009 1:06 am Post subject: |
|
|
| Minckster wrote: | The best that I can tell, the cheapest iPhone SDK is $99. "For developers who are creating free and commercial applications for iPhone and iPod touch and want to distribute applications on the App Store." (emphasis added) I don't see a free version of the iPhone SDK and can't find an iPhone simulator in Xcode 3.1.3 (which by no means ensures that they're not there).
http://developer.apple.com/iphone/program/apply.html
|
Yeah, that's Apple for you. The latest iPhone 3.0 SDK can be download for free. You just need to register for a free Apple Developer Connection account. The same account I used to download Xcode 3.1.3 allows me to download iPhone 3.0 SDK. I don't think they even charged the fee prior to the release of iPhone 3.0, but I can't remember exactly.
See http://developer.apple.com/iphone/
Notice where it says:
| Quote: | To access iPhone SDK 3.0 and additional technical resources and information, log in with your Registered iPhone Developer Apple ID and password, or sign up as a free Registered iPhone Developer today. |
I don't think you can do anything with the App Store without paying, but there is definitely a simulator in the package because the Whats New section of the release notes PDF says:
| Quote: | iPhone OS 3.0 Simulator uses frameworks more closely matching the device |
|
|
| Back to top |
|
|
Minckster
Joined: 02 Oct 2008
Posts: 58
|
| Posted: Fri Jul 31, 2009 3:06 am Post subject: |
|
|
pyTivo looks good on a BB. Even with the viewport tag, the pages don't look nearly as good on an iPhone.
| krkeegan wrote: | It looks like the BB cannot handle the Javascript properly either. I will confess I suck at JS coding and I am sure there is a better way to program the config screen to make it work on everything. |
Neither Firefox on my desktop nor Safari on my iPod touch are throwing any JavaScript errors *; however, the page does generate several suspicious HTML-validation errors:
| Quote: | Validation Output: 45 Errors
1. Error Line 129, Column 34: required attribute "ACTION" not specified
<form name="select_section">Sections
2. Error Line 147, Column 26: required attribute "ACTION" not specified
<form method="post">
3. Error Line 415, Column 26: value of attribute "ID" invalid: "_" cannot start a name
<input size="20" id="_tivo_HD.optres" name="_tivo_HD.optres"
[S N I P : #4 - #40 : S I M I L A R T O #3 ]
41. Error Line 953, Column 45: value of attribute "ID" must be a single token
<input type="hidden" name="TV Shows" id="TV Shows" value="section-2">
This attribute can not take a space-separated list of words as a value, but only one word ("token"). This may also be caused by the use of a space for the value of an attribute which does not permit it.
[S N I P : #42 - #45 S I M I L A R T O #41 ] |
Ooops! I forgot. I already fixed an error in my settings.tmpl. The div for "leftframe" wasn't closed.
* For JavaScript errors, I'm looking at Firefox's "Error Console" and Mobile-Safari's "Debug Console". I think those are the right places to look.
Last edited by Minckster on Fri Jul 31, 2009 3:34 am; edited 4 times in total |
|
| Back to top |
|
|
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Log in to check your private messages
Log in
