dW

Expecto Patronum

Responses Closed

For quite some time now (well ever since I read the first book) I’ve wanted to do some sort of Harry Potter illustration. Especially after the movies and their vagrant attempts to rewrite the books more than necessary to translate each volume to film I’ve wanted to do something that is more accurate to Jo’s descriptions in the book. This is the result of about a month’s work and quite a bit of research which included listening to each of the books while working.

This doesn’t illustrate any scene in the books. To any Harry Potter fan what is going on is quite obvious. The illustration consists of Harry, Ron, and Hermione battling dementors with their patronuses which are a stag, Jack Russell terrier, and an otter respectively. I couldn’t think of a scene from the books where the three were together, over 13 years of age, casting some cool spells, and without any other main characters around them. Naturally it had to be obvious as well what was going on. It probably portrays each of the characters as 16 year olds. They could pass for seventeen (and Hermione probably is by that point), but from much of the descriptions in the last book they weren’t at times even wearing robes at all. Their school uniform matches the plain black robes with no embellishments worn by students at Hogwarts as described in the books. At times the robes are described as being pulled over the head, so I made them appear as if the only way to put them on is to put it on over your head like a big sweater or something.

In the movies they decided to stray differently than how Rowling describes the wands. Each of their wands should appear to be the correct length, but due to the lighting only a bit of Hermione’s could be spotted. They’re smooth, cyllindrical sticks of wood with a bit of engraving and craftsmanship to them.

Ron is quite a bit taller than Harry with a longer nose and freckles, but in this lighting and angle it’s hard to denote how long his nose is or see much of the freckles I painted on there; they’re there. Hermione is shorter than both of them with the typical bushy hair. Oddly enough after drawing them each one of them resembles their movie actor counterparts in some way or another, especially Ron. I’d like to say that was intentional, but it wasn’t at all.

The image is dark, blue, and misty due to the description of the dementors’ magical abilities to turn the sky completely dark, generate immense cold, and generate a cold low-lying mist. Blue seemed to be a natural color for it. The ratio of the image is quite horizontal simply because I wanted an image I could stretch across my two monitors. No real deep thought went into choosing the dimensions. The image up top is a hyperlink to the image’s page on Flickr. Larger sizes are viewable from there. Well, I could talk about it some more, but I think I’m tired of writing this post. I’ll stop here for today.

Tweet from Opera’s Address Bar 2

Responses Closed

A week ago I wrote about tweeting from Opera’s address bar and presented a method for doing so without aid for external scripts or services such as a method given a couple of months ago. Since then my method has made its way across the interwebs even being posted on My Opera, but there’s a better way to do it.

The method I presented was ugly, but it worked. The jist of it was that it used a data URI to feed Opera a ready-made document. It’s long-winded and difficult to modify. The reason why I did it that way was because I tried using a javascript URI when a blank document or Speed Dial was open, and I’d get nothing as it didn’t have a document to modify. I didn’t think to set a variable to create a new document as this solution provided for me.

I decided to take the time to expand upon it quite a bit. One problem that could occur to users is that they have no way to know how many characters they’re typing without counting them manually, so if you go over 140 the user would have a truncated tweet or if they went over 160 their tweet would be rejected. I’ve solved that by displaying a form in certain situations allowing the user to modify his/her tweet without having to retype it:

It’s similar to Twitter’s own form. I have programmed support for submitting sources, but I have to submit the application form to Twitter to be accepted first. It definitely should be easier to maintain than that mess of junk. EDIT: Fixed a bug where it wouldn’t redirect when the script was being operated off the web form.

javascript:(function(u,p) {var d=document;var str="%s".replace(/\+/g,' ');var t=d.createElement("title");var s=d.createElement("style");t.innerHTML="Opera Address Bar Twitter Client";s.setAttribute("type","text/css");s.innerHTML="iframe{visibility:hidden;width:0;height:0;}";var h=d.getElementsByTagName("head")[0];h.appendChild(t);h.appendChild(s);var f=d.createElement("form");var i=d.createElement("iframe");f.method="post";f.action="http://"+u+":"+p+"@twitter.com/statuses/update.xml";f.target=i.name='tweet';var fs=f.appendChild(d.createElement("fieldset"));t=fs.appendChild(d.createElement("textarea"));h=fs.appendChild(d.createElement("input"));h.setAttribute("name","source");h.setAttribute("type","hidden");h.setAttribute("value","operasaddressbar");t.name="status";t.value=str;document.body.appendChild(i);if(str.length>140) {if(str.length<160) {if(confirm("Your status update contains more than 140 characters. The full update will only be viewable on the web. Cancel to edit and resubmit or click OK to continue.")) {f.submit();i.onload=function(){window.location="http://twitter.com/"+u;};}} s.innerHTML+="iframe,html,form,body,fieldset,p,h1,h3{margin:0;padding:0;border:0;}html{background-color:#9ae4e8;}body{width:510px;padding:20px;background-color:white;margin:40px auto 0 auto;}form{position:relative;}h1{font-weight:normal;font-size:20px;line-height:36px;letter-spacing:-1px;}h2{font-weight:normal;color:#ccc;font-weight:bold;font-size:29px;position:absolute;top:45px;right:0;font-family:Georgia,serif;line-height:0;}body,textarea,button{font:normal 12px/18px \"Lucida Grande\",\"Trebuchet MS\",sans-serif;}textarea{width:496px;height:45px;padding:5px;}button{float:right;font-size:14px;color:#444;background-color:#f5f5f5;border:1px solid #dadada;padding:10px 32px;margin-top:4px;}button:enabled{cursor:pointer;}button:enabled:hover{background-color:#e3e3e3;border:1px solid #b9b9b9;}button:disabled{opacity:0.5;}p{margin-bottom:1em;height:30px;}";var h1=d.createElement("h1");h1.innerHTML="What are you doing?";var h2=d.createElement("h2");var strlen=str.length;h2.innerHTML=str.length;var b=d.createElement("button");b.setAttribute("type","submit");b.innerHTML="update";var p=d.createElement("p");fs.insertBefore(h2,t);fs.insertBefore(h1,h2);fs.insertBefore(p,h1);fs.appendChild(b);if(str.length>160) {p.innerHTML="Your status message contained more than 160 characters. Shorten it to 140 or 160 characters to have it truncated and viewable only on the web.";} else {p.innerHTML="Modify your message to contain less than 140 characters and/or hit submit to resubmit.";} document.body.appendChild(f);i.onload=function(){window.location="http://twitter.com/"+u;};var limit=false;t.onkeyup=function() {tlen=t.value.length;if(tlen==0) {b.setAttribute("disabled","disabled");} else if(b.getAttribute("disabled")=="disabled") {b.removeAttribute("disabled");} h2.innerHTML=tlen;if(tlen<strlen&&!limit) {limit=true;} if(tlen>160&&limit) {t.value=t.value.substring(0,160);h2.innerHTML=160;}};} else {f.submit();i.onload=function(){window.location="http://twitter.com/"+u;};}})('ook','eek');

Still ugly, but it at least makes sense! The directions are identical to what they were before:

1. Copy the long javascript URI into a text editor and replace “ook” with your twitter username.
2. Replace “eek” at the end with your password.
3. Go to Tools → Preferences (or Opera → Preferences on Mac OS X).
4. Click on the Search tab then click the Add… button.
5. In the input box labeled Name type in Twitter.
6. Type in a suitable keyword in the Keyword field. I use tw.
7. Paste in the javascript URI from your text editor into the Address field and click OK.

Type tw Tweet! and it should send a tweet if you do not include quotation marks in your tweet. I cannot fix that as Opera’s text replacement doesn’t escape quotes. Perhaps this can be fixed in a future version of Opera. Enjoy. It’ll probably be the last time I’ll take a crack at it. I’ll at least update if there’s an update on my source name approval process. EDIT: It’s been approved, and the code above has been updated to reflect the new source name. When updating the status it should show “Opera’s Address Bar” linking back to this article.

Tweet from Opera’s Address Bar

Responses Closed

EDIT: This is outdated information. I provided a better solution a week later.

A few weeks ago my good friend Oleg Melnychuck thought it’d be awesome to have Twitter integration in Opera. I agree wholeheartedly, but I don’t think Opera would add it. I thought that sending a tweet using Opera’s custom search feature would work by right-clicking on the update form on my Twitter and going to “Create Search”. That will work as long as there’s an active auth session, so it’s not usable unless you’ve already logged in.

Yesterday afternoon it came to me that I could use JavaScript and XMLHTTPRequest to send the POST data. Well, that didn’t work because cross-site requests aren’t allowed. I was about to give up when it came to me to use an object element (standards replacement for iframe) that contained a document with a form and some JavaScript to automatically submit the form. Then after that is done the script would redirect to the user’s Twitter page. The document within the object element is included using a data URI so I could include the %s required by Opera to substitute the query text. I initially tried to use it as pure JavaScript with a javascript URI, but it didn’t work all the time in Opera because if typed into the address bar when a blank document or Speed Dial was active nothing would happen as the JavaScript didn’t have a document to replace as neither the blank document nor Speed Dial is markup. My only other option was to make it be a data URI. It’s ugly, but it does work:

data:text/html,%3C%21DOCTYPE%20html%3E%3Chtml%20lang%3D%22en%22%3E%3Chead%3E%3Cmeta%20charset%3D%22UTF-8%22%3E%3Ctitle%3ETweet%3C%2Ftitle%3E%3Cstyle%20type%3D%22text%2Fcss%22%3Eobject%7Bvisibility%3Ahidden%3B%7D%3C%2Fstyle%3E%3C%2Fhead%3E%3Cbody%3E%3Cscript%20type%3D%22text%2Fjavascript%22%3Efunction%20enc%28text%29%7Breturn%20encodeURI%28text%29.replace%28%2F%5C%2B%2Fg%2C%27%2520%27%29%3B%7D%20var%20tweet%3Denc%28%27%s%27%29%3Bvar%20username%3Denc%28%27ook%27%29%3Bvar%20password%3Denc%28%27eek%27%29%3Bdocument.write%28%27%3Cobject%20data%3D%22data%3Atext%2Fhtml%2C%253C%2521DOCTYPE%2520html%253E%253Chtml%2520lang%253D%2522en%2522%253E%253Chead%253E%253Cmeta%2520charset%253D%2522UTF-8%2522%253E%253Ctitle%253ETweet%2521%2520Tweet%2521%253C%252Ftitle%253E%253C%252Fhead%253E%253Cbody%253E%253Cform%2520method%253D%2522POST%2522%2520action%253D%2522http%253A%252F%252F%27%2Busername%2B%27%253A%27%2Bpassword%2B%27%2540twitter.com%252Fstatuses%252Fupdate.xml%2522%2520name%253D%2522tweet%2522%253E%253Ctextarea%2520name%253D%2522status%2522%253E%27%2Btweet%2B%27%253C%252Ftextarea%253E%253Cinput%2520type%253D%2522submit%2522%253E%253C%252Fform%253E%253Cscript%2520type%253D%2522text%252Fjavascript%2522%253Edocument.tweet.submit%2528%2529%253B%253C%252Fscript%253E%253C%252Fbody%253E%253C%252Fhtml%253E%22%3E%3C%2Fobject%3E%27%29%3B%20window.location%3D%27http%3A%2F%2Ftwitter.com%2F%27%2Busername%3B%3C%2Fscript%3E%3C%2Fbody%3E%3C%2Fhtml%3E

To use it follow these directions:

1. Copy the long data URI into a text editor and do a text replacement for “ook” then replace it with your twitter username.
2. Do a text replacement for “eek” and replace it with your password.
3. Go to Tools → Preferences (or Opera → Preferences on Mac OS X).
4. Click on the Search tab then click the Add… button.
5. In the input box labeled Name type in Twitter.
6. Type in a suitable keyword in the Keyword field. I use tw.
7. Paste in the data URI from your text editor into the Address field and click OK.

Now you should be able to type tw Tweet! and update your status on Twitter with “Tweet!”. As this is just a proof-of-concept it can be expanded to do more such as display an error if you’ve typed in more than 140 characters among other things. I just thought I’d challenge myself to see if it could be done.

iTunes 8 Store Arrow Links

Responses Closed

When this was introduced in whatever version of iTunes it came out on I thought that “feature” was superfluous and stupid. Most of the time when the links were clicked they were clicked accidentally. Thankfully they could be easily removed by going to iTunes’ preferences. Well for stupid reasons that are beyond me Apple decided to take this preference setting out of iTunes 8’s preference dialog, leaving the setting unreachable except by intermediate and advanced users of Mac OS X or Windows. Within minutes of iTunes 8’s release Mac OS X Hints released an article telling people how to remove the annoying links for Mac OS X by opening a Terminal window and typing this in:

defaults write com.apple.iTunes show-store-arrow-links -bool FALSE

Now I’m going to be uncommonly nice to Windows users here and state how to get rid of them on Windows as well. I ran a quick search and couldn’t find a quick place to find out the information on Windows, so I figured it out myself. Changing the setting is a bit more difficult in Windows. There are some requirements. You need a decent text editor because the preference file is stored with Unix line endings (LF) so Notepad isn’t capable of handling line breaks other than Windows (CRLF). If you do not have one TextEdit would do.

Make sure iTunes is closed and open C:\Documents and Settings\User\Application Data\Apple Computer\iTunes\iTunesPrefs.xml in your preferred text editor and do a search for User Preferences. In-between the dict element that comes after the key element containing User Preferences type:

<key>show-store-arrow-links</key>
<data>False</data>

See? I’m not mean to Windows users all the time.

Amazon’s Universal Wish List & Opera

Responses Closed

A lot of times from relatives and friends I get asked repetively what they could get me, and my response is a link to my wish list on Amazon or simply a coupon or something for Amazon. I’m forever buying books or whatnot from Amazon, so frequently that it’s worth my while to be an Amazon Prime member. Not too long ago Amazon added a new feature they call Universal Wish Lists here people could put items from other websites to their existing wish lists by adding a bookmarklet to your bookmarks bar and pressing it when on a wanted product’s page. While this works in Opera, Opera has much better methods of user interface customizing than using bookmarklets.

In Opera it is possible to create an actual button that can reside anywhere in the interface. The possibilities are almost endless. You can even execute JavaScript (or external programs for that matter). What can be better than that? One-click button installs come to my mind, at least:

Add to Wish List

Clicking that button in Opera will prompt a dialog box asking for permission to install the button. After that Opera will allow you to drag that button anywhere you wish. Personally I don’t add too many custom buttons, especially for something I won’t use on a daily basis. Opera allows for menu customization as well. All of the main menus and each of the right-click toggled drop down menus are customizable. What I thought would be interesting when I first set out to figure out how to get this to work using Opera’s UI customization features was that it’d be nice to be able to right-click on a web page and click on a menu item that’d allow me to add it to my Amazon wish list. The button was a secondary thought, but considering the capabilities to one-click install the button it’s a lot cooler to showcase than code. Editing menus are quite a bit more difficult to do, but menu customization isn’t anything so difficult that it’d be beyond the scope of the average user. It’s just that it’s not entirely obvious as to how to do it which is unfortunate as it is an amazing feature of Opera’s.

Menu customization is stored in an ini file in the Menu folder in your profile folder. The location of the profile folder depends on how it’s installed and what platform you’re on. A quick way to find out is to type opera:config and either search for “Opera Directory” or go to User Prefs then to Opera Directory. It’ll show you the location of your profile. More than likely there won’t be a menu folder there, so the easiest way (without having to explain the differences between platforms) to remedy that is:

1. In the main menu go to Tools → Preferences (or Opera → Preferences on Mac OS X).
2. Click on the Advanced tab and in the dialog’s sidebar click on Toolbars.
3. Under Menu setup click on Opera Standard and then click the duplicate button.

Doing so will create an exact copy of the default toolbar’s setting file in the Menu folder in your profile folder. Go there and open that file in your favorite text editor. Search for “[Document Popup Menu]” and paste the following under that heading somewhere.

  Item, Add to Amazon Wishlist="Go to page, "javascript:(function(){var w=window,l=w.location,d=w.document,s=d.createElement('script'),e=encodeURIComponent,x='undefined',u='http://www.amazon.com/gp/wishlist/add';if(typeof s!='object')l.href=u+'?u='+e(l)+'&t='+e(d.title);function g(){if(d.readyState&&d.readyState!='complete'){setTimeout(g,200);}else{if(typeof AUWLBook==x)s.setAttribute('src',u+'.js?loc='+e(l)),d.body.appendChild(s);function f(){(typeof AUWLBook==x)?setTimeout(f,200):AUWLBook.showPopover();}f();}}g();}())""

Figuring out where the new item would reside when the toolbar is loaded should be obvious, so place this snippet of code where you’d personally like the menu item to be. Save it as a different file than the one you’re editing in that folder and restart Opera. Repeat the directions above to get to the Menu setup preferences and select the new menu setup file you just edited. Now when you right-click on a web page you should see a menu item allowing you to add that page to your wish list.