RECENT TOPICS » View all
Ankimobile. Now with BLING!
Index » Learning resources
Ok, so that whole 'bling' thing... I didn't come up with it. Damien said it first. 
Well, anyway, I've been playing around with this idea for the past few hours about getting a little pic into the corner of my deck. After looking at gimp tutorials on layers and gradients and shadows and then tutorials on custom css and stuff (which turned out simpler than anticipated), I present to you, Ankimobile Pimped Edition.
And one for the desktop:
http://dl.dropbox.com/u/7590004/Screens … ithpic.png
Please note that this version of ankimobile is still in beta. So the only thing I added was the little anime picture. This beta shouldn't take too long to be released, so, patience grasshopper.
Well, it's try number 1, and it's not gonna satisfy most of you guys cause the pic is linked by internet url, not locally. Good news is that locally will be able to work, I just haven't figured out the specifics. It will involve sending a pic over via a media sync and linking to it that way, but damien has mentioned javascrpt will be required.
---
EDIT: Now it's local and it works on non-jailbroken phones/pods too! No Javascript is required! It's pretty simple! See the end of the post for instructions!
---
Well, here's all I did.
I added this to the question field of my card template:
<img src="http://dl.dropbox.com/u/7590004/Pics/ankicorner1.png" style="position: absolute; top: 0px; left: 0px; z-index: 5;">
That z-index part is just to make sure the pic is on top of the background colour. This also means the pic will be on top of TEXT. I'm no pro so you guys can figure out the rest but, I've been talking with Damien and it's a simple matter to get the pic on top of the background and under the text. Although I think something was mentioned about removing the background info from fonts and putting it all in the template. That way you can specify the z-index I guess. But anyway, if you have plenty of white space up top (or bottom) you can do this no problem.
If you are jailbroken, you should be able to just drop a file into the resources folder of anki and it should link directly just fine.
Edit--------------------
If you are not jailbroken, follow these steps:
1: Drop the pics you want to use into a card to media sync them over to your phone/pod.
2: Sync.
3: Suspend that card so it doesn't come up in review.
4: Go to your media folder to find the files you need and copy the file names. They will be in hash. something like this but unique for your files: a9e6bef9b50d0374d9702dbd6950d2b6.jpg
5: Use that filename in your templates. Put the code in the question field of your card template.
Something like this:
Code:
<img src="a9e6bef9b50d0374d9702dbd6950d2b6.jpg" style="position: absolute; top: 0px; left: 0px; z-index: -1;">
You can have multiple pics in your deck using this method. See posts below for more.
---------------------
Now, who's got the best idea of what little pics, graphics, borders or whatever we can use to pimp out anki? 
Last edited by shinyclef (2010 June 28, 12:25 pm)
After experimenting with css backgrounds, you can easily set them using this code:
Code:
<style type="text/css">
body {background-image:url('http://dl.dropbox.com/u/6415847/stripe1.png');}
</style>This one uses a stripe pattern I made using the CSS stripe generator. Screen shot on the iPhone:
Oh, and the background from this site (http://forum.koohii.com/img/koohii/body_bg.gif) also works very nicely on AnkiMobile...
Last edited by Blahah (2010 June 11, 6:43 pm)
But of an update here. I've been decorating a bit, and thinking about how this is gonna work, but you know what, I can't figure out how this is gonna work offline for non-jailbreaks. T_T At one stage I thought I had the answer, but I think I was wrong. I'm not sure, I'll need to double check.
Anyway, I got this working with all files local. No need for net connection.
The rest of the screens are here.
http://dl.dropbox.com/u/7590004/Screens … obile1.png
http://dl.dropbox.com/u/7590004/Screens … obile3.png
http://dl.dropbox.com/u/7590004/Screens … obile5.png
http://dl.dropbox.com/u/7590004/Screens … obile6.png
http://dl.dropbox.com/u/7590004/Screens … obile7.png
This is the code I used.
Code:
<img src="ankicorner2.png" style="position: absolute; top: 0px; left: 0px; z-index: -1;"> <img src="ankicorner2.png" style="position: absolute; bottom: 0px; right: 0px; z-index: -1;"> <img src="ankicorner3.png" style="position: absolute; bottom: 0px; left: 0px; z-index: -1;"> <img src="ankiback.png" style="position: absolute; bottom: 0px; right: 0px; z-index: -2;">
It's big a messy but I just put a couple of lines after it before where my card infomration goes to make it clear. You can put this code at the bottom too if you prefer.
These are the pics I used.
http://dl.dropbox.com/u/7590004/Japanes … orner1.png
http://dl.dropbox.com/u/7590004/Japanes … orner2.png
http://dl.dropbox.com/u/7590004/Japanes … orner3.png
http://dl.dropbox.com/u/7590004/Japanes … kiback.png
Now, my pod is jailbroken. All I did was drop the files linked there directly into each media folder of my decks that use them. That's all. I also put them into my destop media folder of course. Now, if you're thinking, why can't I use these by linking the hash files names and just media syncing them across... go ahead and try but I think there's something about anki stripping some code if you do so.
Actually, I thought I had that working... but I can't remember now. I'll test it out again later, or you can go ahead and try if you want.
If you're a phone user with internet connection, this method will work by just typing out a web address, as we have already seen in this thread by blahah's nice work there .
Anyway I just wanted to get this out there to demonstrate that pretty much anything is possible here...
This is an idea I played around with but decided not to go with so it never made it to my phone lol.
http://dl.dropbox.com/u/7590004/Screens … esktop.png
Anyway, it IS possible to do this offline for non-jailbreaks, but if the easy way I mentioned above doesn't work, then a little bit of javascript may be necessary, and that's something I don't know how to do, so I wouldn't be able to take it further.
Is this something people would wanna try if it were easy to do offline?
My theme may be a 'little bit' cluttered lol, but I kinda like it now ^^;; although I do miss that little anime girl lol.
I'm using Epson Kaisho for the green questions and Epson Gyosho for the blue
answers.
You can find them here in the EPSON pack. Don't download yet...
http://www.wazu.jp/gallery/Fonts_Japanese.html
Installing custom fonts on iPod touch/iPhone requires a jailbreak.
Next step, the actuall font installation, is a little bit harder...
Firstly, you'll need fonts without japanese characters in the font names for them to work on iPod, which means you'll need to edit the font names, or, download these! The ones you want are EPSONTruePrint (Kaisho) and EPSONSemiCursive (Gyosho).
https://dl.dropbox.com/u/7590004/Fonts/ … enames.htm
Now, the hard part is the actual installation. This tutorial should cover it pretty well.
http://blog.gauravgiri.com/2008/08/tuto … to-iphone/
With the part where you need to edit the CGFontCache.plist file...
The two entries for these fonts at the end of the first section should look something like this:
Code:
<key>EPSONTruePrint</key>
<string>/System/Library/Fonts/Cache/EPSONTruePrint.ttf</string>
<key>EPSONSemiCursive</key>
<string>/System/Library/Fonts/Cache/EPSONSemiCursive.ttf</string>And at the end of the second section something like this:
Code:
<key>EPSONTruePrint</key>
<dict>
<key>Plain</key>
<string>EPSONTruePrint</string>
</dict>
<key>EPSONSemiCursive</key>
<dict>
<key>Plain</key>
<string>EPSONSemiCursive</string>
</dict>The end of the file will include an additional two </dict> lines. Make sure you keep them in without getting yourself mixed up ^^;
The entire end of my file starting from my custom fonts (I have three customs) looks like this:
Code:
<key>EPSONTruePrint</key>
<dict>
<key>Plain</key>
<string>EPSONTruePrint</string>
</dict>
<key>EPSONSemiCursive</key>
<dict>
<key>Plain</key>
<string>EPSONSemiCursive</string>
</dict>
<key>EPSONThickTextbook</key>
<dict>
<key>Plain</key>
<string>EPSONThickTextbook</string>
</dict>
</dict>
</dict>
</plist>The tutorial I linked says to create a new folder for your custom fonts, but I didn't do that. I just dumped them in the same folder as the rest, and my code reflects that with my file path (/System/Library/Fonts/Cache/EPSONTruePrint.ttf). Just make sure if you copy mine, you dump the fonts into that Cache folder. If you wanna make your own folder then update that filepath.
But seriously, once you've done this once, it'll become easy if you wanna install fonts in the future. But I haven't found the need for new fonts for a long time. Read the guide, it's good. .
So edit the plist file, drop the fonts into the fonts folder via SSH or however you navigate, choose the font in your deck and anki will display it.
Let me know if it works, and post a pic or something .
For you jailbreakers, the above 'themes' idea works totally offline, so if you give that a try, post a pic or two!
PS. Here is an alternative for the broken link in step 6.
http://iappcat.com/plist/bin2xml
Last edited by shinyclef (2013 March 07, 6:58 am)
