UI/UX of the plugin

[mustafaGFX]

hi
we can start developing the UI/UX of this plugin as soon as possible :)

[yikuansun]

@mustafaGFX
Sure! What are your ideas?

[mustafaGFX]

my ideas about the user experience aren't very deep and Not affecting the general programming of the plugin, and the user interface as well, so what do you think of start improving the UX/after finishing The basics of the plugin

cus I notice that it's not giving The expected outcome

[mustafaGFX]

My thoughts about the UX are related to the:

• result preview
• layout
• ease of using
• blending options

My thoughts about the UI are related to the:

• branding
• icons design
• Design style

but I think that the priority is back to the back end first, I don't want you to get distracted by the front end while the back end still needs some working

[mustafaGFX]

look
I will tell you my thoughts about the user experience development, in case you needed them

as for the result preview
I noticed that the result takes a while to be done when updating it or even when open the plugin for the first time.... and sometimes it go slow In the case of large documents

and I believe that The size of the preview image does not need to be the same size as the final result layer,
Not only in our case, but in all cases the preview is so much smaller than the final result to make the using process easier and faster

so what do you think of adding a finish button next to the update the document button?
and this finish button tells the plugin to send the final high-quality image with the same size of the document to photopea And swap it with the preview image

.
.
.
.

if that was done, we can dispense the update the document button and make the document updated automatically after completing the task (Raise the mouse button or press Enter)

[mustafaGFX]

when I said :

and make the document updated automatically after completing the task (Raise the mouse button or press Enter)

I was mean that :

[mustafaGFX]

almost all the input boxes and the buttons will be replaced with sliders and icons, butwe can make them buttons as an elementary form for now and let the UI to the end

[yikuansun]

if that was done, we can dispense the update the document button and make the document updated automatically after completing the task (Raise the mouse button or press Enter)

Almost done with this... lowering the resolution makes the preview smaller, I am planning on making it resize the preview to be big enough but for some reason the layer.resize script isn't working

[mustafaGFX]

great work :)

Almost done with this... lowering the resolution makes the preview smaller, I am planning on making it resize the preview to be big enough but for some reason the layer. resize script isn't working

ask iavn
maybe he can help you

but I have an idea and I'm not sure if it can make any sense or not,
Instead of lowering the resolution of the original image to make it smaller, why doesn't it create a different image with a small size and send it first, I mean the preview image has nothing to do with the final image

and after the user finish the editing and ask for the final image you generate the final image for the first time
I'm not sure if this makes sense or can be done, but I thought it might help you

[mustafaGFX]

oh sorry
I miss understood

I am planning on making it resize the preview to be big enough but for some reason the layer.resize script isn't working

now I got it
maybe Ivan can help you

[yikuansun]

@mustafaGFX

I fixed the problem, now the low quality preview is fully functional, the preview is added automatically after values are changed, and there is only a finish button which sends the high quality image.

What should we do next?

[mustafaGFX]

great
really great❤️
the next step is the ease of use, and let's let the layout to the end (UI design stage)

ease of use includes some points which are :

Control places by clicking:

• it was really helpful to control the light point by clicking it, but it would be perfect to put a full visual control for basic render elements, which are the point of light, the point of multi iris light (from XY - to XY ), and the ring radius
  so instead of having the ability to set the light point, we need to be able to set The general dimensions of the flare.

here is my idea :
when the mouse curser get close to the light point, the visual control appears (like a hover), and the same thing happens to the point of multi iris light

Untitled.video.Made.with.Clipchamp.1.mp4

• in the previous video, it's not as smooth as I imagine it, but I think you got the idea :)
  I'm not sure if we should use icons in this feature, but if it would be better with icons I will design an original full icons pack for the plugin in the UI stage, but I think it would be better with just simple lines as photoshop does in some filters :

ales-krivec-4miBe6zg5r0-unsplash.jpg.@.50.RGB_8._.2021-06-09.22-57-18.mp4

.
.
.

regarding the ring, its visual control works in the same way, but with a ring instead of a line

sliders :

It's tiring to put every value by typing, we can use the sliders instead of that, we can use the same default browser sliders as photopea does without any look customization

I will start working on the UI design and the branding and visual identity of the plugin, it will be highly professional :)
also, I have some ideas like safe settings as default, save preset, and chose the flare look (by blending modes), but for now, Ease of use is worth working on

[mustafaGFX]

What should we do next?

so the next steps are:

• ( light )point visual control
• (to) point visual control
• ( ring) circle visual control
• sliders

BTW I found the best points visual control is just a little circle like photoshop

https://www.photopea.com/#iTN68GlKH

[yikuansun]

@mustafaGFX Great, I'll start working on these! The point controls seem easiest so I'll probably roll those out first.

You mentioned that you had ideas about save preset... in my non-plugin version (I developed the plugin so that there is flexibility to use the same code for a standalone app), which you can see at https://yikuansun.github.io/progenflares/, I have a very primitive save system. One of the export options is JSON, and you can copy the text in the outputted file into the landing page. As I said, this is very primitive (and it doesn't even work in the plugin version), so I'm open to your ideas. 😃

[mustafaGFX]

One of the export options is JSON, and you can copy the text in the outputted file into the landing page

yea I have tried that, and I think it can be very much better,
I have a good idea that can solve this problem efficiently and get two birds by one stone, but I'm not sure if it can be done

my idea is to save the last values that the user has set to the next time, the next time the user changes these values is updated itself to the next time... And so on...
I have read an article about how to set default values in javascript
https://dev.to/samanthaming/3-ways-to-set-default-value-in-javascript-2253

we can add an extra feature (and I think it the easiest) if the user clicks on (save as default) the values become default until he clicks on the button again

regarding the preset export, we can use JSON files as the file extension for the preset, when the user drag and drop the JSON that has each value, the plugin import it and set the values automatically, and when he clicks on save preset the plugin export a JSON file that has all values

• now we would have 3 buttons:
  finish
  save as default
  save preset

save preset is an extra feature, which means we can put the button into a menu or by a small icon, we will reach the perfect look and experience after the UI stage,

now I work on the branding, and after I finished I will start developing the UI, I have a little experience with HTML and CSS, would you like me to work on it, or would you rather type all codes by yourself?

I'm not sure if my skills in coding allow me to work on a full project, but I can try and if I couldn't I will tell you

[yikuansun]

@mustafaGFX I added save as default and save as preset. save as default Isn't perfect 'cause it uses the cookies API, which is pretty horrible. I also added both of the visual point controls (not the ring yet, though).

You may write the HTML and CSS on your own and use a fork and pull request. This may be a bit difficult, especially since some of the UI is JS controlled. If you find it to be too hard, you can send pictures of the layout and I will implement them.

[yikuansun]

Also, I noticed that video editors like Hitfilm have "invisible sliders" - you can drag input boxes left and right to change the number value, as if there was an invisible slider on top of the box. Do you think that using this kind of control, rather than normal sliders, would work okay? I think they are good in terms of space and they don't have upper and lower bounds.

[mustafaGFX]

added save as default and save as preset. save as default Isn't perfect 'cause it uses the cookies API, which is pretty horrible

that's pretty mind-blowing, but I think that the save as default doesn't work with the plugin version, I am not even sure that it can be work with the plugin version, but it would be super useful if w find some way to do that
.
.
.
.

ou may write the HTML and CSS on your own and use a fork and pull request. This may be a bit difficult, especially since some of the UI is JS controlled. If you find it to be too hard, you can send pictures of the layout and I will implement them.

I find it more difficult than I was thinking. I will design the UI and send you the link, BTW it would be so much better to send the full UI/UX instead of sending pictures, I will send you a link that has the whole plug-in experience and you can try it before implementing them. and I will send it as soon as can, but I want to start working on the branding first

.
.
.
.

lso, I noticed that video editors like Hitfilm have "invisible sliders" - you can drag input boxes left and right to change the number value, as if there was an invisible slider on top of the box. Do you think that using this kind of control, rather than normal sliders, would work okay? I think they are good in terms of space and they don't have upper and lower bounds.

photopea has both, also photoshop and affinity design. we can use both too, the regular sliders for beginners "cuz it's clear", and the invisible sliders for all

[mustafaGFX]

we can use both too

[mustafaGFX]

any news?

[yikuansun]

any news?

@mustafaGFX The input box dragging system is now fully operational so you can grab the numbers and drag to change, I made the preview faster by using lower-quality JPG for the preview and full size PNG for the final, and I also made some more technical improvements that will help me write code but do not make changes noticeable by normal users. For the web app version I made JPG an export option.

The sliders have been a technical challenge for me due to code structure. Basically, my code updates values by checking all of the input boxes, and this system does not allow for multiple inputs changing the same value. I am thinking about changing the system and I will try my best to get in those sliders :)

[yikuansun]

@mustafaGFX One more thing... while reading about the JPG export, I learned that you can change the quality of the JPG rendered using Javascript, and therefore I am using this method for the low quality preview. Much better than my old way of making an image with actual smaller dimensions and scaling it up, which took a little time. The preview feels much smoother and faster now.

[mustafaGFX]

One more thing... while reading about the JPG export, I learned that you can change the quality of the JPG rendered using Javascript, and therefore I am using this method for the low-quality preview. Much better than my old way of making an image with actual smaller dimensions and scaling it up, which took a little time. The preview feels much smoother and faster now.

yes I have been thinking about this for a long time... at the very beginning, it was taking 1 step to preview the result by just sending the final image.... then we made the preview smaller but it took 2 steps (send and scale-up)... and it wasn't very efficient
now it's perfect, I tried it now, and it just surprised me, super-fast, super smooth :)

BTW, if it too hard to use multiple inputs sliders because of the way you write the code at the beginning, I feel the visual slider has the 1st priority, which makes the plugin has the same feeling as the original program (photopea)

today a new plugin has been published by @hxim and it was the same look and feel of photopea, I feel that is a cool thing, what do you thing

also, I am planning to make the plugin has its own identity, but a little bit close to photopea as well, I will start on that after finishing my exams :(

[mustafaGFX]

today a new plugin has been published by @hxim and it was the same look and feel of photopea

you can try this plugin by going to window>more>QR code maker

[yikuansun]

@mustafaGFX I saw that plugin yesterday, it is very good. I like the mimicking-Photopea aesthetic, but I don't think our plugin has to be exactly the same. I actually think that the mimicking-Photopea aesthetic also falls a part a little bit when different themes or configurations are used (even when I set my Photopea theme to super dark instead of dark, it looks a tad bit strange). Also, my plugin has a standalone version, so it'd best not be 100% reminiscent of Photopea. I like your idea of "make the plugin has its own identity, but a little bit close to photopea as well."

[yikuansun]

@mustafaGFX I added the sliders! In case you ever want to use linked slider/number input in your own projects, the JS library is here: https://github.com/yikuansun/advanced-slider

[mustafaGFX]

fantastic
I can't wait to finish my exams to enjoy working on this project and some ideas :(