search

ankidroid / Anki-Android

AnkiDroid: Anki flashcards on Android. Your secret trick to achieve superhuman information retention.
GNU General Public License v3.0
8.19k stars 2.17k forks source link

Ankidroid wont fetch from media folder. #5412

Closed TowelSniffer closed 4 years ago

TowelSniffer commented 4 years ago
Reproduction Steps

  1. create a card template using Hanzi writer. https://github.com/chanind/hanzi-writer

  2. Reference character data from the media folder

    I have the following code:

var writer = HanziWriter.create('character-target-div', '{{Kanji}}', { width: 150, height: 150, strokeColor: '#DDD', padding: 0, showCharacter: false, showOutline: false, showHintAfterMisses:3, drawingWidth:50, charDataLoader: (char, onLoad, onError) => {

fetch('_{{Kanji}}.json')

.then(res => res.json())

.then(onLoad)

.catch(onError); }

}); writer.quiz();

Expected Result

on desktop fetch('_{{Kanji}}.json') seems to load the data fine and the script works.

Actual Result

the character data won't load on ankidroid

Debug info

Refer to the support page if you are unsure where to get the "debug info".

Research

Enter an [ x ] character to confirm the points below:

[x] I have read the support page and am reporting a bug or enhancement request specific to AnkiDroid

[x] I have checked the manual and the FAQ and could not find a solution to my issue

[x] I have searched for similar existing issues here and on the user forum

mikehardy commented 4 years ago

The best information we have is here, did you work through all of it? https://github.com/ankidroid/Anki-Android/wiki/FAQ#instead-of-the-correct-character-to-display-a-square-is-shown-why-is-that

TowelSniffer commented 4 years ago

Honestly I don't think these issues are related. I have custom fonts but it isn't that a character fails to display. fetch(_{{kanji}}.json) does not seem to load the file from my media folder. It does with no issues on the desktop client however.

On Tuesday, August 20, 2019, Mike Hardy notifications@github.com wrote:

The best information we have is here, did you work through all of it? https://github.com/ankidroid/Anki-Android/wiki/FAQ#instead-o f-the-correct-character-to-display-a-square-is-shown-why-is-that

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ankidroid/Anki-Android/issues/5412?email_source=notifications&email_token=AMNG7RWZD2X3S5X4DG4WGDTQFPW35A5CNFSM4INTRSOKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4WJO6Q#issuecomment-523016058, or mute the thread https://github.com/notifications/unsubscribe-auth/AMNG7RVCUJWRD4O6KHDJEP3QFPW35ANCNFSM4INTRSOA .

mikehardy commented 4 years ago

I didn't think they were exact, however they are all over the idea of loading files. If you've got files in general loading (custom fonts) then you might need to look at the HTML/JS output to see what's going on - there are a couple ways to do that - https://github.com/ankidroid/Anki-Android/wiki/Development-Guide#html-javascript-inspection

TowelSniffer commented 4 years ago

yeah I can't seem to find a problem with the HTML/JS. but with this scenario: fetch("_氷.json") with _氷.json in my media folder, it seems that it won't work on ankidroid only on desktop.

TowelSniffer commented 4 years ago

AAre you saying I could somehow load in the file the same way as with fonts like: @font-face { font-family: myfont; src: url('_arial.ttf'); }

mikehardy commented 4 years ago

Honestly I'm not sure - I'm saying we have some HTML/JS dev tools available that let you connect straight to the Chrome WebView (in 2.9 at least) and you'll have to experiment :-)

TowelSniffer commented 4 years ago

Alright thanks for your help.

On Wednesday, August 21, 2019, Mike Hardy notifications@github.com wrote:

Honestly I'm not sure - I'm saying we have some HTML/JS dev tools available that let you connect straight to the Chrome WebView (in 2.9 at least) and you'll have to experiment :-)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ankidroid/Anki-Android/issues/5412?email_source=notifications&email_token=AMNG7RT2VKRI2YKJRTEKD4TQFU44DA5CNFSM4INTRSOKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4ZTEKA#issuecomment-523448872, or mute the thread https://github.com/notifications/unsubscribe-auth/AMNG7RRQE5NG3U23L4BJE4LQFU44DANCNFSM4INTRSOA .

krmanik commented 4 years ago

It may help. To load localhost data into ankidroid front or back side of cards. #5890

github-actions[bot] commented 4 years ago

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

krmanik commented 4 years ago

I have found some working answer for this. To get character data in AnkiDroid card templates

As we can access js and image file using this

<script src="some-js-file.js"></script>
<img src="some-image.png"></img>

To access json I have tried same steps but getting CORS error so I used next steps.

<script src="我.json" type="application/json"></script>

With example, To access 我.json file

1. Copy contents of 我.json into a javascript file, with any variable name

var chr_data = {"strokes":["M 350 571 Q 3....}

2. Add following tag to access that js file

<!--  Note : file type & name -->
<script src="我.js" type="text/javascript"></script>

3. Now also change code in _hanzi-writer.min.js

To change code, first beautify code using this https://beautifier.io, then make following change a) Remove the link to load from internet
b) Change this 200 != r.status and replace/add this JSON.parse(JSON.stringify(chr_data)) ( May more good replacement can be done here )

change_code

....
....
// Note :  chr_data variable come from 我.js file
r.overrideMimeType && r.overrideMimeType("application/json"), r.open("GET", "", !0), r.onerror = function(t) {
....
....
 4 === r.readyState && (200 != r.status ? i(JSON.parse(JSON.stringify(chr_data))) : 0 !== r.status && n && n(r))
....
....

4. So final script will be like this

Front side of card

{{Pinyin}}

<div id="character-target-div"></div>

<script src= "我.js" type="text/javascript"></script>
<script>
var data = JSON.stringify(chr_data);
console.log(data);
</script>

<script src="_hanzi-writer.min.js"></script>

<script>
var writer = HanziWriter.create('character-target-div', '我', {
  width: 150,
  height: 150,
  showCharacter: false,
  padding: 5
});
writer.quiz();
</script>

Above all the steps are for single file 我.js It may not work on Anki Desktop because I have tried and sometime working sometime not working. To access other character repeat the same.

For similar issues view my code https://github.com/infinyte7/Anki-xiehanzi https://github.com/infinyte7/hanzi-writer-data-in-javascript

Stonehomecai commented 2 years ago

AAre you saying I could somehow load in the file the same way as with fonts like: @font-face { font-family: myfont; src: url('_arial.ttf'); }

Hello Towelsniffer, I am wondering if you have finally solve your problem? That is font display normally in Anki windows platform but not on ankidroid.

I have same issue and google out this history link.

mikehardy commented 2 years ago

https://github.com/ankidroid/Anki-Android/wiki/FAQ#how-can-i-use-custom-fonts