Jump to content

How's this for UI design - LOL


n d
 Share

Recommended Posts

Ergonomic? User-friendly? Nah, those things are for pussies! LOL!

uilol.png

So basically, I was getting tired manually adjusting the kerning of some fonts, and so I started thinking... could I write a plugin to write kerning-adjusted text?

So, quickly thinking, the first idea I got was to give a slider to each letter to adjust the kerning... so yeah, it sounded good in theory... but man, when I saw that huge stack of sliders I was like =O=O=O=O

...anyway, it works, but the UI is so horrible that I'm too embarassed to put it on the general plugins forum... if anyone wants to use this monstrosity, here you go:

Kerned text plugin

it also has x,y control and bold/italic options.

ps. Imagine, initially I was going to set the string maximum to 100! :lol:

  • Upvote 1
ndeee2.png
Link to comment
Share on other sites

why not have a drop down box for each character and just one slider? That way you can choose which letter to adjust the kerning on and adjust the slider for the chosen letter?

btw, i have no idea whether or not the above is possible, i'm just throwing out an idea here. :P

Merry Christmas

 

.::.My Gallery.::.Make Gold Text!.::.

Link to comment
Share on other sites

Worst UI ever, honestly ...

Then again, IndirectUI doesn't give you all the most complete bestest UI flexibility ever.

I'll take the liberty of taking that as a compliment ;)

why not have a drop down box for each character and just one slider? That way you can choose which letter to adjust the kerning on and adjust the slider for the chosen letter?

btw, i have no idea whether or not the above is possible, i'm just throwing out an idea here. :P

It's not possible with codelab...

It could be if I would export the source to visual studio and edit it there, but I'm not all too sure about the details ... :tardnoes:

btw I just added an anti-alias function (re-download if needed, the link is the same.)

ndeee2.png
Link to comment
Share on other sites

oh, ok then. Igonoring the UI, the plugin is fantastic. Saves a lot of selecting and moving text letters individually to get the right look. thanks! :D

Hope you wont mind some more suggestions, but i'll suggest anyway. :P

- add an open type font compatability.

- perhaps a kerning in the y axis option?

- scale the text from the centre of the text, not the top left?

anti-aliasing doesn't always work at larger font sizes if set to 2. it works pretty much all the time if set to 1.

Thats.. about it. :P

Great work though! Loving all of it, well, most of it. :D

Merry Christmas

 

.::.My Gallery.::.Make Gold Text!.::.

Link to comment
Share on other sites

oh, ok then. Igonoring the UI, the plugin is fantastic. Saves a lot of selecting and moving text letters individually to get the right look. thanks! :D

Glad you like it.

Hope you wont mind some more suggestions, but i'll suggest anyway. :P

I won't mind.

- add an open type font compatability.

It already is. At least, opentype fonts work on it on my computer. If they don't on yours... I honestly have no idea why that would be.

- perhaps a kerning in the y axis option?

You do realize this would double the amount of sliders? Are you sure you want this? ;)

- scale the text from the centre of the text, not the top left?

Hm. The Graphics.DrawString method uses the top left corner for the text placement, so I don't know - I might be able to do this with the y axis, but doing it with the x axis would be kinda complicated ....

anti-aliasing doesn't always work at larger font sizes if set to 2. it works pretty much all the time if set to 1.

So just use 1. ;)

Honestly, I'm not even sure what the 2 option is useful for, but decided to include it anyways...

Thats.. about it. :P

Great work though! Loving all of it, well, most of it. :D

Thanks.

Something I am going to add is an "overall" slider which adjusts the overall x-spacing of the letters... I noticed, with longer words and fonts that need lots of adjusting, the sliders may not go far enough... so this would fix this problem without making the sliders too big and hard to adjust (the UI is bad enough already...)

Edited by n d
ndeee2.png
Link to comment
Share on other sites

It could be if I would export the source to visual studio and edit it there, but I'm not all too sure about the details ... :tardnoes:

Create a new class library in VS, add the main PDN DLLs (Base, Core, Data and Effects) as references, run the save as DLL command in CodeLab and check view source, then paste it into your VS code file.

KaHuc.png
Link to comment
Share on other sites

Create a new class library in VS, add the main PDN DLLs (Base, Core, Data and Effects) as references, run the save as DLL command in CodeLab and check view source, then paste it into your VS code file.

Yep, I had gotten that far... I'm just not all too sure how to implement the drop-down + slider functionality on the plugin. Can I use the VS winforms designer to design the plugin interface?

Sorry, I'm quite a noob at this still..

ndeee2.png
Link to comment
Share on other sites

You can do whatever UI you want, but you'll have to stop using IndirectUI and implement all of the WinForms layout and data binding yourself. Not very fun, honestly. That's the whole reason I created IndirectUI.

The Paint.NET Blog: https://blog.getpaint.net/

Donations are always appreciated! https://www.getpaint.net/donate.html

forumSig_bmwE60.jpg

Link to comment
Share on other sites

Have you considered just using a slider to select which character to adjust? If you wanted to have a dropdown box listing every letter you'd presumably have to OCR the image.

Yeah, a slider would probably work. I can't believe I didn't think of that...

So, I should make two sliders. Let's name them Amount1 and Amount2 for simplicity...

Amount1 would control which character Amount2 moves.

So, every time Amount2 is changed my code should check the value in Amount1 and then it adjusts the number in the kerning array[Amount1] according to the value of Amount2.

So what I need to know, is there a method that can be used (in codelab if possible?) to check if the value of Amount2 changes?

Edited by n d
ndeee2.png
Link to comment
Share on other sites

Every time any IndirectUI value is changed the render method is automatically called.

One downside with the approach I suggested is IIRC you can't change the slider boundaries dynamically, so you'll have to make Amount1 relatively large and show an error message if it exceeds the number of letters.

KaHuc.png
Link to comment
Share on other sites

One downside with the approach I suggested is IIRC you can't change the slider boundaries dynamically, so you'll have to make Amount1 relatively large and show an error message if it exceeds the number of letters.

Hm. couldn't I also just transfer the string into an array of char and pad it with spaces, so it will always be long enough?

Edited by n d
ndeee2.png
Link to comment
Share on other sites

Well... personally I feel if the users can't understand that a slider that controls which character you move doesn't move anything if you set it on letter #20 on a 10-letter word, then I would recommend some basic math lessons before they even try to use a computer.

But yeah, if anyone can think of a better solution I'm all ears (or should I say eyes.)

ndeee2.png
Link to comment
Share on other sites

Not sure if this has already been mentioned, but why not convert the string to an array, get rid of spaces, and run a for (int i=0, i<array.length, i++) loop and declare a new array in the for code block and make the text under newArray be "character i"?

This could be horrendously stupid, I'm just wondering.

Edited by csm725
Link to comment
Share on other sites

CSM, that's similar to what I'm already doing, and doesn't really address the issue at hand - the problem isn't controlling the values, the problem is the user interface... I'm trying to figure out a way to implement this with a better interface - ie. less sliders.

Thanks though.

ndeee2.png
Link to comment
Share on other sites

Ok, as for the 2 sliders thing, apparently I can't do that on codelab. I would need to declare the array where the kerning values will be stored outside the render loop, so that it is declared only once when the effect is started. Otherwise the effect keeps resetting the array everytime the render loop is called...

So where should I declare the array?

edit. never mind, figured that out ;)

(I made a new public static class at the start of the effect and that seems to work.)

Edited by n d
ndeee2.png
Link to comment
Share on other sites

Now there's a new problem though:

Every time slider1 is moved, it automatically sets the kerning values to whatever slider2 happens to be at that time. So this would mean that the values would have to be adjusted in order, and you can't move back to change anything or you'll have to adjust everything in between again... not a big improvement from the previous UI.

Is there a way to move the sliders from inside the plugin? I would like the value that's stored in the array to be restored to the second slider when the first slider is moved. But can I do that, and if so, how?

Edited by n d
ndeee2.png
Link to comment
Share on other sites

One solution would be to replace the 2nd slider with increase and decrease buttons, although this obviously wouldn't be as convenient as a slider.

True.. it would be kinda inconvenient.

is there no way the value of the indirectUI controls can be manipulated from within the code? Do I need to create a winforms interface for this?

ndeee2.png
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...