Ankimobile. Now with BLING!

Registered: 2008-12-10 Posts: 169

Just to confirm, at the moment there is no way of adding graphics for offline use with an unbroken Ipod touch?

shinyclef Member

From: Japan Registered: 2009-02-27 Posts: 17

I think it's possible! I just tried with a picture in my media folder with hash.
a9e6bef9b50d0374d9702dbd6950d2b6.jpg to be precise! That file is used in my deck in the answer field so it was uploaded to my ipod via a media sync.

Try putting this in your card template's question field, replace my hash file pic with a file that's in your media folder.

<img src="a9e6bef9b50d0374d9702dbd6950d2b6.jpg" style="position: absolute; top: 0px; left: 0px; z-index: -1;">

Can someone please do this and tell me if it works for them? I think It should, which means pics should be accessible to everyone!

Blahah Member

From: Cambridge, UK Registered: 2008-07-15 Posts: 715 Website

@shinyclef yes that works perfectly. I made a card with all my background images in for that deck, then synced it, then suspended the card on the desktop.

JapanesePod101 Sponsor

stevesayskanpai Member

Registered: 2008-12-10 Posts: 169

Sorry for my tardy reply.

I'm probably being an idiot, but I still can't get this to work. I added two files, named Anki1 and Anki3, and put the code you provided with these two names after I'd added the two pictures to a new card- but then when the deck loads the files are replaced by question marks.

Where do you get the code for the picture you have added- i.e. is it just the filename? And where is the media folder?

shinyclef Member

From: Japan Registered: 2009-02-27 Posts: 17

steve, I just updated the original post. Follow the instructions there.
Anki renames your files to hash file names, so they are not named Anki1 and Anki3 unless you copied them manually with a jailbreak. They are named in hash (long string of letters and numbers). The media folder should either be next to your deck, or if you are using dropbox for media, it's in your public dropbox folder. If your decks dont' even have any media, then just follow the instructions in the first post and a media folder will be created next to your anki file. You can email me if you need specific detailed help too. I'm on skype and all.

stevesayskanpai Member

Registered: 2008-12-10 Posts: 169

Sorry once again for my tardiness in replying. I got it working, using the Dropbox method. Thanks a lot for all your help dude! Much appreciated.

jettyke Member

From: 九州 Registered: 2008-04-07 Posts: 1194

A very good way to tune Anki.

Last edited by jettyke (2011 March 18, 5:06 am)

nest0r Member

Registered: 2007-10-19 Posts: 5236 Website

Having played around with the layout a bit when looking at ruby markup, I've now come back to this idea of adding background images and suchlike to decks (desktop version of Anki). For most of my Japanese decks I'm using this on the question side with my desktop wallpaper as the image, and removed the question/answer divider on cards:

<body background="drivepathimage.jpg" bgproperties="fixed"> Edit: Adding style="background-repeat:no-repeat;" seems to prevent tiling when the image is small.

Now that I can see you can embed animated .gifs, videos, various iframe elements (such as a world clock), etc., the possibilities seem endless. For now I'll probably just add custom backgrounds that are thematically related to various non-Japanese subjects.

Maybe for subs2srs decks I'll add images related to the media content.

I wonder if it might be possible to embed annotated flickr images, hmm. (Using mbedr.)

Edit: Yes, that works: http://www.elsewhere.org/mbedr/?p=2735369504&v

Now to figure out how to use fields to customize...

Ahha! Add a field for the URL (such as http://www.elsewhere.org/mbedr/?p=2735369504&v), then stick that field in the embed code with triple curly braces. Voila. I guess that works for most URLs in iframe code? Will test it with streaming videos...

Previously: http://forum.koohii.com/viewtopic.php?pid=97767

Last edited by nest0r (2011 March 21, 10:27 pm)

Oniichan Member

From: 名古屋 Registered: 2009-02-02 Posts: 269

Also, if you are using a netbook or tablet, you can install the 'hideui' and 'toggle fullscreen' plugins. This will give you a true fullscreen display and a lot more real estate for the Q and A sides for things like MCD, glosses etc.

I combined the scripts and assigned different triggers (F11 and F12), which works fine for most of my decks, but creates restrictions that prohibit me from using it on other decks. The problem I've run into is that the hideui script disables other keystrokes (except 'space', '1-4', etc.) This means that I can't use things like the hint plugin, F5 (audio replay) or even direct-input. Would anyone mind taking a peek at the plugin script to see what's causing the behavior? It would help me, and perhaps others, out quite a bit.

---------------------------------------------------------------------------------
# -*- coding: utf-8 -*-
# Author: Daniel P. Wright <dani at dpwright dot com>
# Based on: Toggle Fullscreen, by Damien Elmes
# License: GNU GPL, version 3 or later; http://www.gnu.org/copyleft/gpl.html
#
# hideui plugin
#
# Hides UI elements for a cleaner, keyboard-driven experience

from PyQt4.QtGui import *
from PyQt4.QtCore import *
from ankiqt import mw
from anki.hooks import addHook

menuAction= QAction(mw)
isHidden = False

oldEventHandler = mw.keyPressEvent
def onFullScreen():
mw.setWindowState(mw.windowState() ^ Qt.WindowFullScreen)

a = QAction(mw)
a.setText("Toggle Full Screen")
a.setShortcut("F11")
mw.mainWin.menuTools.addAction(a)
mw.connect(a, SIGNAL("triggered()"), onFullScreen)

def setUIHidden(hide):
if ((mw.state == "showQuestion") or (mw.state == "showAnswer")):
global isHidden
isHidden = hide
mw.mainWin.menubar.setHidden(hide)
mw.mainWin.toolBar.setHidden(hide)
mw.mainWin.statusbar.setHidden(hide)
mw.mainWin.buttonStack.setHidden(hide)

def uiToggle():
setUIHidden(not isHidden)

def uiToggleKey(evt):
if (isHidden and (evt.key() == Qt.Key_F12)):
uiToggle()
evt.accept()

return oldEventHandler(evt)

def onCardUpdated():
setUIHidden(isHidden)

def onCardStateExit():
mw.mainWin.menubar.setHidden(False)
mw.mainWin.toolBar.setHidden(False)
mw.mainWin.statusbar.setHidden(False)

mw.keyPressEvent = uiToggleKey

menuAction.setText("Hide UI")
menuAction.setShortcut("F12")
mw.mainWin.menuTools.addAction(menuAction)
mw.connect(menuAction, SIGNAL("triggered()"), uiToggle)

addHook("preFlushHook", onCardUpdated )
addHook("disableCardMenuItems", onCardStateExit )

mw.registerPlugin("hideui", 0)
-----------------------------------------------------------------------------------------

nest0r Member

Registered: 2007-10-19 Posts: 5236 Website

I got excited about the FullScreen plugin at first but didn't like the way the negative space extended to the sides, so I'm glad to know about the Hide UI plugin. I also couldn't use the Replay button but when I removed: mw.mainWin.menubar.setHidden(hide) it works again. Of course, that leaves the thin strip across the top, but it's better than nothing?

Oniichan Member

From: 名古屋 Registered: 2009-02-02 Posts: 269

Ahh, Thank you! I can live with that.

jettyke Member

From: 九州 Registered: 2008-04-07 Posts: 1194

Sorry for such a big pic, but this is my current design. Looks nice, I think. Share your ideas too!

wahnfrieden Member

From: Boston Registered: 2008-08-19 Posts: 56

That seems very difficult to read...

jettyke Member

From: 九州 Registered: 2008-04-07 Posts: 1194

It's because of the jpg format or something. The real screen looks okay to read.

Unfadeable Member

From: Taiwan Registered: 2011-09-06 Posts: 16

Hi all,

I'm trying to install a nicer Chinese font on my jailbroken iphone 3g using these instructions, but haven't been successful. I'm at the end of my rope here and have no idea what I'm doing wrong! So I'm using fugu to transfer the files, no problems there. I am using the Mac font Kai for all my flashcards on Anki desktop, so I copy the Kai.ttf over to the main font folder (I also decided not to make a separate folder).

I've copied the .plist over to my desktop, but when I use that converter to change it to xml it just produces a blank document (I tried opening it in textedit and word and firefox--it was just white space). I know someone said that on Mac they could just edit the .plist directly, but from what I understand Lion no longer has a built-in plist editor (I believe you need to download a developer's toolkit, but it's 1.6gb so I haven't bothered with that yet). So I downloaded a free app called Pref Setter, which works great for opening and editing the .plist. I've edited in exactly the way the tutorial describes, however once I've reloaded the .plist on the iphone, my decks still display with the basic ugly font. All the other fonts are displaying fine so it's not like I made some larger error. My .plist is available here if anyone wants to check it out: http://dl.dropbox.com/u/10711866/CGFontCache.plist

Did I miss something? I tried turning my phone on and off to see if that would "initialize" the font but no luck. Really could use some help, thanks in advance!

Edit: Ok so I realized there are 12 plist files in addition to the CGFontCache--the guide doesn't say anything about editing those, but I noticed on another forum someone said they had to edit CGFontCacheReduced_UH_.plist in order to get the fonts working. So I did that and to be safe edited all of the other .plist files with the appropriate code--still nothing!

Also, I was trying to find ways of testing my fonts in other programs to see if the problem was somehow with Anki, but frankly I can't figure out how to do so. I tried viewing Word and Pages documents through dropbox on my phone, but I don't think they're giving me an accurate picture; none of the fonts (Chinese or Roman) I installed show up in Word (the iphone's pre-installed fonts, however, do show up), and all of them show up in Pages (even ones I haven't installed, which leads me to believe Pages is somehow communicating a picture of the original document to my iphone rather than the original text information). Can anyone think of some other applications for me to test fonts? Sorry, I've only had the iphone for 3 days, still a noob. I'm pulling my hair out over here!

Oh and one more thing, what font is that the Blahah was using back on page one, the blue one? It's sick! Wonder if there's a chinese equivalent..?

Last edited by Unfadeable (2011 October 20, 7:09 am)

RuRuKo New member

From: Akita Registered: 2010-01-11 Posts: 7

I used informations from here, but did not change CGFontCache.plist, as this is only a symlink to CGFontCache_H.plist. It worked (iOS 4.3.3) with editing those 4 files:
CGFontCache_H_.plist
CGFontCacheReduced_H_.plist
CGFontCacheReduced_UH_.plist
CGFontCache_UH_.plist

It is important to use the correct font family name, and there seems to be an error in that tutorial, under

Code:

<key>TraitMappings</key>

the entry is not

Code:

<key>Font Family Name</key>
<dict>
<key>Plain</key>
<string>Full Font Name</string>

it should be

Code:

<key>Font Family Name</key>
<dict>
<key>Plain</key>
<key>Full Font Name</key>

To check if the font works, I used the app "FontPicker".
I don't know why, but not all (Japanese) fonts I wanted to install worked for me, so you just have to try.

jettyke Member

From: 九州 Registered: 2008-04-07 Posts: 1194

I find it much more attractive to learn new things with a background that has some kind of
a connection with the stuff you're learning

In this case I'm learning prefectures and the reason why I'm learning is that I plan to travel a lot in Japan so sooner or later I will need that knowledge.

And palm trees with the sun symbolize discovering new amazing places, chillax lifestyle and traveling for me.

CODE

<style type="text/css">
body {background-image:url('http://upsidesounds.com/wp-content/uploads/2011/08/Air-France-Sky.jpg');}
</style>

Does somebody know what would the code look like, if I want to let's say take 5 pictures and rotate them randomly from card to card?

ryuudou Member

Registered: 2009-03-05 Posts: 406

Amazing thread and amazing idea. Makes me wonder how else to make SRSing more fun.

Currently doing this on Anki 2 beta 18. Eventually will get something better looking.

insanelysick New member

From: Nottingham Registered: 2010-12-21 Posts: 4

Fancy posting your styling and templates?

ryuudou wrote:
http://img1.uploadhouse.com/fileuploads … 435282.png

Amazing thread and amazing idea. Makes me wonder how else to make SRSing more fun.

Currently doing this on Anki 2 beta 18. Eventually will get something better looking.

anritsi Member

Registered: 2010-07-06 Posts: 50 Website

jettyke wrote:
Does somebody know what would the code look like, if I want to let's say take 5 pictures and rotate them randomly from card to card?

This is kinda a late answer, but I was curious myself, so. There's probably a prettier way of doing this, but oh well... this should work. >_>

Code:

<script type="text/javascript"> 
var num=Math.floor(Math.random()*4);
var bkgd = '_' + num.toString() + '.png';
document.body.style.backgroundImage='url("'+bkgd+'")';
</script>

If using Anki 2, you should put the above code in your Front Template and Back Template. The images should be inside your collection.media folder and named _0.png, _1.png, _2.png, _3.png, & _4.png.

The underscores are to make sure the images sync with AnkiMobile. Speaking of, here's what my setup looks like nowadays:

delta Banned

Registered: 2012-09-15 Posts: 226

@anritsi That looks a·w·e·s·o·m·e.
Would you share the code?

anritsi Member

Registered: 2010-07-06 Posts: 50 Website

delta wrote:
@anritsi That looks a·w·e·s·o·m·e.
Would you share the code?

Sure, no problem. I ended up not using the background randomizing because I was getting distracted wondering how random it was, haha.

My styling looks like this:

Code:

.card {
 font-family: calibri;
 font-size: 12px;
 background: url('_wood.jpg'); 
 background-attachment:fixed;
 margin: 20px 15px 50px 15px;
 }

.encl { padding:15px; background-color:#fff; border-radius:6px; }
.exp { font-family: 小塚ゴシック Pro B; font-size: 35px; }
.word { font-family: 小塚ゴシック Pro B; font-size:40px; font-weight:bold; background:#BDE5F8; color:#00529B; padding:0 5px; border-radius:10px; }
.color { color: #0c6efa; font-size:14px; }
.trans { color: #24a555; font-weight:bold; }
.edict { color: #b89696; font-weight:bold; }
.def { color: #9d9d9d; }
.mini { color: #bbb; font-size: 10px; }
ruby rt { font-size:17px; opacity:0.3; margin-bottom:-3px; font-weight:bold; } 
b ruby rt { opacity:0.5; }
b { color: #0c6efa; }
hr { border:dashed 1px #eee; background-color:#fff; margin: 8px -15px; }

and the back template looks like this:

Code:

{{sentence audio}}

<div class=encl>
<table ><tr>
<td><span class=word>{{Word}}</span> </td>
<td>&nbsp; &nbsp;</td>
<td>{{# Meaning}}<b>{{WordMeaning}}</b>{{/ Meaning}} 
{{# TransIntrans}}&nbsp;<span class=trans>({{TransIntrans}})</span>{{/ TransIntrans}} 
<span class=edict>{{edictgrammar}}</span>
{{#WordDefinition}}<br><span class=def>{{WordDefinition}}</span>{{/WordDefinition}}   
{{# uk}}<br><span class=def>{{uk}}</span>{{/ uk}}</td>
</tr>
</table>
</div><br>

<div class=encl>
<span class=exp>{{furigana:Reading}}</span>
<br><span class=color>{{Meaning}}</span>
<hr><span class=mini>{{hint:Gloss}}</span>
</div>

It uses a lot of fields, but I'm using the sentences from the CorePlus deck, which has all these fields anyway.

delta Banned

Registered: 2012-09-15 Posts: 226

Thank you!

bimspramirez Member

Registered: 2012-12-07 Posts: 43

I should have designed my Anki before I started RTK! Thanks everyone, this definitely adds some spice to my reviews. I am combining this with AnkiEmperor so that I will not get bored easily.

My Anki Desktop (simple one but better than plain white lol):

Last edited by bimspramirez (2013 April 14, 11:41 am)

Hashiriya Member

From: Georgia Registered: 2008-04-14 Posts: 1072

Glad to see another fan of Sword Art Online

Index » Learning resources

Code:

Code:

Code:

ryuudou wrote:

jettyke wrote:

Code:

delta wrote:

Code:

Code: