Back

Reviewing the Kanji iPhone application.

#26
Here is the first snapshot of the Kanji browser for the iPhone application. This turned out to be a little more involved than I thought because I had to write a tool (similar to tables_kanji.pl) to convert the kanji database to a plist, which then could be read into core data.


Here is a picture:
[Image: screen-shot-2010-04-06-at-24554-am.png]

Here is the video:
http://krnl.net/videos/KanjiStudy_conv.html
Reply
#27
coming along nice, really looking forward to it!
Reply
#28
Looks good John! I see you added readings for the auto complete, that's a good idea, I'll have to think about it for the main site. Did you use all the ON readings for that?

Can't wait to see what you did with the stacks and/or flashcards. I see some effects code in the repo, but to be honest I can't make much of it. I used to do a lot of C programming, but this looks quite different; I'm still very new to Apple OS and Mac development.
Reply
May 16 - 30 : Pretty Big Deal: Save 31% on all Premium Subscriptions! - Sign up here
JapanesePod101
#29
I really look forward to the application! I am also an iPod Touch user and will be happy to test it if you need any help.
Reply
#30
Fabrice,

I tried adding the on/kun readings, but the search was becoming too slow with my OR predicated query.

I really need to sit down and plan how I will do these searches... my thoughts as of now are this:

English characters will look up the "keyword"
Hiragana will look up kun-yomi
Katakana will look up on-yomi
Numbers = frame number

Then I have a separate key set for each of those sorted in the most helpful manner, with the values being a commonly shared Kanji object with all the details. So the keywords will be alphabetically sorted, numbers numerically sorted, on/kun yomi lookups will just be slow. I could have a one to many for the readings but I'm not sure if that would help or not.

Thanks for the good word Kimya! At some point I may request your iPod Touch UUID so that I can issue a certificate that will let you run it on your Touch. That goes for anyone else looking to test. I can test up to 100 devices a year so I doubt I'll run even close to that before I release. (If I do it is a good thing!)

Thanks again for all the support.
Reply
#31
Looking really good johnrb, I'm also happy to test on my iPhone if you need it.
Reply
#32
just curious, is there going to be a section in this where you can trace the kanji with your finger when you review it? (it doesn't have to be a mandatory trace) and it would also be nice if you could look up kanji by drawing them with your finger as well... just my 2 cents

good luck with it Smile
Reply
#33
Yep! I've actually planned on the tracing with a finger from the beginning. That was one of the main things I wanted.

Regarding the kanji-recognition, I've been looking at adapting the Tomoe library and thinking about adapting it to the iPhone. It could be a not insignificant amount of work so I'm not sure if the demand is high enough for doing that.

There is always the option of using the built in Traditional chinese input which will recognize most of the characters. You can use that to look up characters in the Kanji browser. But as for validating whether the kanji you wrote is the answer to the card automatically, not quite yet!
Reply
#34
This is fantastic. How can I help? I don't have a developer kit unfortunately, but I do have an iTouch.
Reply
#35
Using the build in Chinese input shouldn't be too hard, entering a kanji produces text which you can just [input isEqualToString: answer] check to see if its the correct kanji.

The question is whether that is desirable. I barely use the Chinese input method myself since I think it's rather inaccurate, at least compared to the DS dic. It never really gives me the kanji I attempt to draw. This could be because of inexperience using that input system, but still it would be annoying and a huge slowdown during kanji reps.

Instead I would suggest to just make a simple option to draw the kanji but skip the recognition, letting the user himself compare the kanji and either fail or pass it. Users are used to grade themselves already anyways if they use RevTK, plus it forgoes annoyances with the input system.
Reply
#36
Thanks so much for developing this! I'm also an iPod Touch user, and would be happy to help test it as well.
Reply
#37
Boring update but most of the work I did was making the kanji lookup asynchronous (which is now done!) This will help considerably when doing on/kun reading lookups.

Now for story retrieval! I'll post a building guide later today.

John
Reply
#38
These are the latest screenshots and a movie showing what the kanji practice might look like. If you have any comments please let me know!

[Image: kanjistudy2.png]
[Image: kanjistudy1.png]

http://krnl.net/videos/KanjiStudy2_conv.html
Reply
#39
Boot screen! I just threw this together so if anyone else has any ability at all to use photoshop, or whatever it is you guys use, please let me know!

I still need an application logo, and if you think you have a better idea for the boot screen please let me know! (Or just post the ideas on this thread Big Grin )

Thanks a lot, image following:

[Image: default.png]
Reply
#40
Hj John,

Kanji practice screen looks nice. Good idea about the shaded character, I would suggest to use the "serif" version of the font instead, or perhaps a toggle? The sans-serif (kaishou style) is good in that it's thick. The serif (minchou style) gives more information, the thickness, and the tapered ends, shows the direction of the strokes. Looking closer at the screenshots it looks like the kaishou style font has very subtle thickness variation on the ninth stroke.. but the third stroke (tree branch) is a good example where minchou style font would give a pointed end. If both fonts are readily available perhaps a small icon in top right/top left to toggle font, or perhaps if the serif style font is thick enough as a guide, you could use that one as default?

Photoshop help.

Could you post exact pixel dimensions, color depth for the boot screen, and for the application logo as well. Do you need a PNG for the application logo with alpha transparency? Do you need multiple sizes (in which case either Illustator, or I would try a big size and then reduce in photoshop). Do you have a link maybe of an Apple page with a sample icon that I could use as a base? Are there in the SDK somewhere with the background shape already?
Reply
#41
Problem with the character is that I'm limited to the fonts the iPhone provides. Version 4 of the iPhone SDK allows embedding of fonts in the application so we might have more leeway when that comes out.

Re: Background image it is 480x320, 160ppi I believe., Color depth is 18bit

The icons rounded edges and glass are an effect applied by the iphone, you only need to make a square image.



http://developer.apple.com/iphone/librar...mages.html

To ensure that your icon can take advantage of the visual enhancements iPhone OS provides, produce an image in PNG format that:

Measures 57 x 57 pixels, with 90 degree corners (if the image measures other than this size, iPhone OS scales it)
Does not have any shine or gloss


When you submit your application, you must include a 512 x 512 pixel version of your application icon for display in the App Store. Although it’s important that this version be instantly recognizable as your application icon, it should be subtly richer and more detailed. In other words, you should not simply scale up your application icon to create an icon for the App Store.

You must also provide a 512 x 512 pixel version of your application icon if you’re developing an application for ad-hoc distribution (that is, to be distributed in-house only, not through the App Store). In the ad-hoc case, name the icon file iTunesArtwork (no file extension) and place it at the top level of your application bundle. This icon identifies your application in iTunes.
Does not use alpha transparency

Every application should supply a small icon that iPhone OS can display when the application name matches a term in a Spotlight search.

Applications that supply settings should also supply this icon to identify them in the built-in Settings application.

Your small icon should clearly identify your application so that users can easily recognize it in a list of search results. To do this, create a streamlined, attractive icon that:

Uses the PNG format.
Measures about 29 x 29 pixels.
Edited: 2010-04-10, 3:58 pm
Reply
#42
Also I could generate a png image for every kanji and package that with the application if the you think that would help. What about also including this:

http://sites.google.com/site/nihilistorguk/ as a third option?

Stroke Order Kanji / Kanji Only / Blank


OR this:


http://kanjivg.tagaini.net/

That way we might get an animated stroke order... possibly maybe

But in the meantime I'm going to move on and try to get stories to work.. that involves some more server work (I'm not sure if I even remember what I did.. I've slept since then!)

How should we handle the syncing of stories? Only store the stories that the person favorited/copied into his account? It's difficult to keep my own copy of what has been favorited, starred, etc since the time I did the initial sync. I say we just keep one story, and when they study the kanji they see the other available kanji as well.

When you are adding stories to your cards you'll need to have internet. Is that too big a requirement? Would people rather have ALL the stories, and sync them all when the app loads? Thoughts?
Edited: 2010-04-10, 5:31 pm
Reply
#43
Hey, this is a great idea. I have an iPhone so I can test the app, I'd happily do so.
Reply
#44
Hi John, thank you for the data.

I'm about to post soon a PSD file with some ideas. Writing now not to forget:
- "Boot Screen" layer with boot screen idea, you can tweak the text layers, gradient colors and so on.
- "iPhone OS" top layer contains the top bar to toggle on/off
- "Wireframes" > "SiteNews" layer contains the news with updated logos
- "Kanji Practice Shodou" > kanji drawing screen calligraphy style, with paperweight at the top of the screen. This shodou setup is the idea behind the screen, to give a traditional calligraphy feel
- iRevTK-appl-logo.psd should be resized to 57x57 before you save to the application icon exact format you need ("Save for Web..."). Recommended to keep the bigger size format, only resize down temporarily for saving to PNG.

Hmmm.. Apple developer page says the launch image should not be used as a splash screen or about page. Added an idea for home menu screen.. moving the logo up to give space for a menu below?

- iRevTK-icon-29x29 : select the icon area > crop > Save to Web... (then undo, keep the original PSD format). Without shine or gloss that comes with the button.

Application store 512x512 : I can help create one later, when we'll have a better idea of what the app looks like? I'm not sure how it shows in the store, if it"s meant to be a sample screen of the app, or a logo.

EDIT:
Sample
[Image: iRevTK-thumbs.jpg]

Photoshop files download: iRevTK-designs.zip
Reply
#45
johnrb Wrote:When you are adding stories to your cards you'll need to have internet. Is that too big a requirement? Would people rather have ALL the stories, and sync them all when the app loads? Thoughts?
I'd suggest to keep it simple and spend time on new feature like the kanji drawing screen, which is kind of an exclusive of the iPhone app, not just because it's new, but because the device is better suited for it.

Imho, it's overload to maintain all stories offline. There was also a question we discussed on the territory covered by the offline app. I think the offline app should allow editing and reviewing one's stories but not really browse or study as such. Are you really going to study kanji on the move? So, you could in fact display just the user's story, and have plenty more space for kanji meta data below.The user can go online via browser or computer, and copy the stories they like(when they dont edit their own). Then those stories will be synched for the offline app. So basically I'm suggesting that you simply store the user's stories and nothing else. The offline "study" page is a way to review one's story and make amendments to it when you find a problem during review, you'll synch that back to the full site eventually.

I don't think the app should be designed as a copy of the online site. Rather as something that can be used on the move, with a focus on reviews. Thus there is no need to download all stories or even top stories.

edit: It's not so much a question about how to implement but whether some features need be implemented at all, we have to think about how this will be used, who will use it. So I really wonder, will iPhone users really study kanji on the iPhone? Or do they want to be able to review on the go, especially when stuck in traffic, train, etc? In the second case, it's helpful to be able to review one's story.

So for the Study page I would direct the search result to a STORY screen where you can view/edit your story and see the related kanji data:
- Maybe you can put the stroke order font/animation there so you can keep the kanji draw simple and with a standard kaishou/minchou font
- Stroke count, other indexes, radical name and so on you can add below the story

During a flashcard review, it could have a button to view/edit story, which would jump to the screen described above. In that case there could be a back button to go back to review if one is in progress.

In other words on the iPhone, I think it would be a better experience to jump directly from the flashcard screen to the story screen and be able to jump back, rather than have some kind of popup like the online site. That's because it will be really fast on the app.
Reply
#46
This app looks really nice (from the photos). I want to help out with testing, but I can't seem to log in. Does this use our real account or not yet?
Reply
#47
Hey Tyler!
Currently it is not configured to run with the live server because live isn't running the fork that has the REST api changes. I should probably talk with Fabrice in cloning the user database so we can test the application with actual data (stories, users, etc.)

Re: Status: I just completed the rest api stuff for retrieving stories so now the iPhone application loads the stories when you are viewing a kanji during study. (Currently just top 5 best rated stories). The iPhone application is not meant as a replacement for the website so I would advise you do most of your story adding/deleting/editing on the computer for kanji. While the iPhone application will support some of the features for editing/managing, etc of cards it will not be optimized for it.

Fabrice: Any chance I could get those images pre-cut? I don't have any image editing software ;( Sorry! They look awesome!
Reply
#48
Oh my God, I was so hoping for an iPhone app after spending many, many hours without luck getting iAnki to run ... thank's for working this out!!!

Will there be any possibility to get the German keywords instead of the English words?
Reply
#49
One thing I've found useful in my own home-made kanji database is the ability to look up kanji via primitives. E.g. typing in "flower & taskmaster" would give 敬警驚蔽薮.

It's a handy alternative when you can't remember the keyword. The data I use is in the penultimate column of this spreadsheet. It's not intended as a perfect reference, just useful when you get stuck.

Whether it would be useful/easily implementable in an iPhone app, I don't know.
Reply
#50
johnrb Wrote:Fabrice: Any chance I could get those images pre-cut? I don't have any image editing software ;( Sorry! They look awesome!
You're gonna have to tell me which ones you want, dimensions, format, alpha or not. For example for the kanji draw background, do you need the top too (probably not)? -- Btw the third screen is just a proposition, so I didnt draw the buttons. Thats' because Apple page says boot screen shouldnt be used as a Splash screen. So if you use as in third screenshot, you can add the buttons and text on top when it's loaded, while the rest remains as it is.Do you want the third screen without the text? Then I suppose you could paste icons on top of the 3 boxes? Please send an email.
Reply