Topic: Javascript FF4 Text Converter

[Phoenix]

I'm about ready to start writing dialogue and events for my hack, and while I have conversion tools written for myself in Applescript, they're not instantaneous (or useable by other OS's). So, I decided to write a Javascript tool based on my original one, with a few more bells and whistles. Please take a look and tell me what you think, especially if the Unicode characters aren't showing up right or you can think of any improvements. The link is here:

http://phoenix.hacks.googlepages.com/FF4TextConverter.html   Edit: No longer on that page, but the new version is attached below

The textareas are (roughly) 26 characters wide because that's the width for dialog windows. Some of the Unicode characters will screw this up a little. There's a few other things to keep in mind: first off, I haven't coded HTML since about 9th grade, which means I had a lot to catch up on in terms of scripting and CSS. Pointers on CSS (or javascript) would be appreciated if you know how to do something more elegantly.

Secondly, I tested this Camino, Safari, and Firefox, but if something comes up in another browser let me know. There's a few browser-specific kinks I couldn't figure out:
1. In Mozilla browsers, a single string of characters (such as the hex data) scrolls horizontally in textareas. I could fix it by inserting spaces, but that defeats the purpose of having a copy and pasteable version of the hex data. I did a lot of search on this one, and it doesn't appear to be easily fixable (yet).
2. In Camino specifically, some of the buttons show up as squares instead of rounded. They work in Firefox 3, so it'll probably be fixed in a future version of Camino. Probably won't bother anyone but me, but if you find another browser that does this let me know. This has to do with the font for input buttons. (Lucida Grande causes this for some reason.) Camino also doesn't display a few of the Unicode characters. Edit: Turns out it doesn't load the Apple Symbols font. I assume no one else will have this font, so there will probably be problems with the display of a few buttons.
3. In Safari, if you insert a character via a button at the start of a line, it will insert a new line before it.

Thanks for any advice/comments/help! 

[Dragonsbrethren]

Nice little app, I probably won't have much use for it (I use Atlas for script editing/insertion and TheCheat for formatting) but I could see it coming in really handy for others. One suggestion add a way to disable DTE, so people could use it for menu text and battle dialogue as well.

As for testing, the layout's a bit messed up in IE7, I don't have IE6 to test with but I'd imagine it'd be the same:



Try adding this to the site's CSS:

Code: [Select]

*{
  margin: 0;
  padding: 0;
  border: none;}
90% of the problems I've had with page layouts in IE are related to it using different default values for those three things. It looks like the buttons are just a little too big which I'd imagine is related to the default padding value. If it's something other than that I wouldn't bother fixing it, it's completely functional (Works better than it does in Firefox, actually, because of the line issue you mentioned). I'm not sure what's causing the heading texts to get cut in half though.

I don't have Opera installed to test with, seems like every time I uninstall it something comes up that I need it for again.



Another (Perhaps simpler depending on what IE's problem is) solution would be to replace the button text with the images of the actual icons.

[Phoenix]

Thanks for the suggestions. The problem you mention in IE occurs in other browsers if you resize the window too small. It's one of the problems with the way I worked the CSS. I tried your solution, but it still allows the window to be resized too small. I'll try and fix it with a more stable solution.

I originally considered using the icons as images, but used Unicode characters instead because the images won't show up in a textarea. The cut and paste functionality also wouldn't work if there were images in the text block. The buttons were originally just a list in the middle as a key, but I changed it to buttons so the Unicode characters could be inserted easily.

I should download Opera to test with it as well, but I figure the only people who will use it are people here, and they'll tell me if it doesn't work.  Thanks again

[Deathlike2]

This is what I see in the latest non-beta version of Opera (9.51).

[Phoenix]

Thanks for the picture. It looks like it works, other than the Apple Symbols font (as I thought). I'll replace the characters used by that font with other characters.

 
Replaced. They work for me in Camino, Safari, and Firefox 3. Deathlike2's screenshot of Opera also had the flat H, M, and P not working. Anyone else encounter this?

[Phoenix]

Updated the page to include an option to turn DTE off/on. I figured that most people would be using text input with hex output, so clicking the checkbox recalculates the hex portion instead of the text portion. It should work fine, but can be easily changed if it annoys anyone.

[Dragonsbrethren]

The flat M, H, and P are working fine in both Firefox 3 and IE7 for me.

[Phoenix]

Thanks for the info. I saw that they were fine in the IE7 screenshot, so I had hoped they would work on most of the browsers. I couldn't find any letters that were small and bottom-aligned, which is why the MHP are top-aligned. At least the width looks right. If anyone else comes across characters that don't work, let me know.

[Phoenix]

UPDATED

For the dialogue on my hack, I've been coding the pointers by hand, which is a pain. So I decided to update my Javascript Text Converter with a few more features. Notably, it now automatically calculates the window number, the starting offset of the dialogue, and the pointer for it. You can also switch between this view (which I've called "full text") with the original view without offsets/pointers (which I've called "quick text"). There's also a box with the all pointers in a list, so you can just copy and paste them into a hex editor.

The browsers it works with:
- Safari 4
- Firefox 3
- Camino 1.6 (formatting is a little off for Camino)

The browsers it doesn't work with:
- Opera 10
- IE 6
- IE 7 (most likely)
- IE 8

I'll add to this list if people try it out and let me know.

The only minor bug is that you can only add a line to the end in the "full text" box. The work-around is to cut and paste a line and then edit it, or just switch to the "quick text" box and edit it there. In any case, these changes should make the Text Converter much more useful for people writing dialogue for FF4 hacks, since you can then just cut and paste both the dialogue data and the pointer data into a hex editor.

 

[Dragonsbrethren]

It completely breaks in IE8 when adding a new textbox.

 

Nevermind, just hitting enter breaks it. I thought it was the asterisk that did it at first.

[Phoenix]

Yeah, that's what happens in IE 6 and Opera 10. Not sure what's going on with the Javascript there, but I probably won't take the time to fix it since it isn't readily apparent. One other bug that I'm working on fixing: the character names don't appear to be working. For instance, if you enter "Cecil" it used to put 0400 in the hex data, but for some reason that's not working right now. I'll post the fixed version once I figure it out.


Fixed the naming issue, as well as a few other small bugs. I recommend using it with Safari, as I did the formatting with it in mind since it's the browser I use for development. I also like how Safari doesn't put the hex data on one line. Anyway, if anybody finds any other bugs, let me know.


Fixed a small bug, and got the right default offsets for Dialogue Bank 1 (for some reason I had put in the event data offsets). I forgot to mention, the Text Converter is designed to work with Dialogue Banks 1 and 3; Bank 2 requires some special pointer coding. Eventually I'll probably rework it for that, but for now it still gives all the dialogue appropriately.