search

publiclab / image-sequencer

A pure JavaScript sequential image processing system, inspired by storyboards
https://sequencer.publiclab.org
GNU General Public License v3.0
110 stars 208 forks source link

Alternative UI implementations (long-term) #708

Open jywarren opened 5 years ago

jywarren commented 5 years ago

I think we ought not to do this just yet, but part of the long term plan is to have different UIs be able to run Image Sequencer. I'm collecting a few ideas all in one place, but we have plenty of work before these seem to be a reasonable priority to take up.

(Many from https://github.com/publiclab/image-sequencer/issues/118)

jywarren commented 5 years ago

More!

harshkhandeparkar commented 5 years ago

@jywarren I'll try to change some basic looks using materialize. I have a bit of experience with that

harshkhandeparkar commented 5 years ago

@jywarren @publiclab/is-reviewers I just had a great idea in mind. How about making an image-sequencer desktop app? Using electron we can create that app. It will be cross platform and very easy to build too since we can easily copy the current website code and run it in electron. It can be a good example of ui implementation. It can be in a separate repository. Thoughts?

Divy123 commented 5 years ago

@jywarren One thing I want to suggest if we should change our UI code to React.js.

harshkhandeparkar commented 5 years ago

@Divy123 @jywarren how about creating a new repo for different image-sequencer ui implementations with reactjs, blockly, electron etc. While keeping the legacy ui in the current repo but planning a complete overhaul for that(stylewise only) because purejs/html is better for first timers. Thoughts?

vibhorgupta-gh commented 5 years ago

@jywarren I agree with @Divy123 about using frameworks for the long run. The UI is very light for now and pure JS and HTML are just about perfect to render it, but should the project UI get an overhaul with a very impressive UI/UX structure, we might need to look into frameworks to make our jobs easier and make the code more legible

harshkhandeparkar commented 5 years ago

@VibhorCodecianGupta the UI overhaul can be done stylewise by using some modern CSS framework like materialize to make the page look modern and flat and then the same UI can be copied over to react and just break the different parts of the page into different components. Thoughts?

On Thu 24 Jan, 2019, 11:06 PM Vibhor Gupta <notifications@github.com wrote:

@jywarren https://github.com/jywarren I agree with @Divy123 https://github.com/Divy123 about using frameworks for the long run. The UI is very light for now and pure JS and HTML are just about perfect to render it, but should the project UI get an overhaul with a very impressive UI/UX structure, we might need to look into frameworks to make our jobs easier and make the code more legible

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/708#issuecomment-457286998, or mute the thread https://github.com/notifications/unsubscribe-auth/AhKOn6jUof8wElGbnDupmmh4DBmx_LK8ks5vGe8zgaJpZM4aP3ru .

Divy123 commented 5 years ago

@HarshKhandeparkar agreed but there is more to it. Since as of now we are dealing with lots of UI states I think working with redux can be a great advantage. After employing react and redux together we can surely work on styles or rather we can work simultaneously on both.

harshkhandeparkar commented 5 years ago

@Divy123 you can work on React, I will work on styles. We can then merge both maybe?

Divy123 commented 5 years ago

Sure @HarshKhandeparkar that would be great. Lets know @jywarren thinks upon this.

harshkhandeparkar commented 5 years ago

@jywarren @Divy123 @publiclab/is-reviewers How does this look?

new-select

new-range

new-inputs

Divy123 commented 5 years ago

That's super cool!! Awesome !! While right now I am struggling with my npm . The npm install is too slow

harshkhandeparkar commented 5 years ago

Collapsible update! @jywarren @Divy123 @publiclab/is-reviewers

collapsible-new

Divy123 commented 5 years ago

I think #670 can be a part if we plan to use React and redux.

harshkhandeparkar commented 5 years ago

Update!!! @publiclab/is-reviewers @jywarren

Download! :

new-download

Insert Step! :

new-insert

If it looks like the animations are a bit stuttery, they are not. Its because the GIF frame rate is low. Thanks!

harshkhandeparkar commented 5 years ago

@publiclab/is-reviewers @Divy123 @jywarren Update!!

new header:

new-header

new footer:

new-footer

new range:

no-span-range

new responsive page design:

responsive-divs

new responsive step images:

responsive-step-img

new self-adjusting textareas instead of inputs:

responsive-textareas

Divy123 commented 5 years ago

Super awesome. Looks amazing @HarshKhandeparkar @jywarren please have a look and also I want to migrate the code to React and redux. Should I proceed ahead?

harshkhandeparkar commented 5 years ago

@Divy123 I have made some other general changes to the code as well. Please have a look at it if you haven't. Thanks!

https://github.com/HarshKhandeparkar/image-sequencer/commits/materialize-ui-overhaul

jywarren commented 5 years ago

I also love this 💕💕, but I really want to encourage folks to consider letting our codebase mature a bit more before attempting a new UI. I know it's exciting to try out but we have a lot of things to work on to flesh out and stabilize the codebase before I think we're ready for a new UI.

Make no mistake, i truly appreciate your energy and enthusiasm here. But let's look at a couple of the big projects we need to complete before opening a new one.

For example, the idea of truly standalone meta modules #315, or full UI testing, or per module comparison testing. And then of course the big project of a serverless express app to allow cloud-based processing. Also webassembly acceleration! Many are listed at https://github.com/publiclab/image-sequencer/labels/project

These are all critical projects and once we build them out we'll be in a much better place to take on a new big project because the core of our library will be stronger.

I'm 100% in support of this new UI, but I want to encourage us to think about it in the /next/ cycle of big projects, rather than right now. I hope that sounds reasonable and fair!!! What do you all think?

And once more, this is really impressive!!!!

On Tue, Jan 29, 2019, 2:03 PM Slytherin <notifications@github.com wrote:

Super awesome. Looks amazing. @jywarren https://github.com/jywarren please have a look and also I want to migrate the code to React and redux. Should I proceed ahead?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/708#issuecomment-458621637, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ9F9cKqlu7eO6izgFVV3OFjXzX0vks5vIH7agaJpZM4aP3ru .

Divy123 commented 5 years ago

Sure I will look into it and reach back to you right then @HarshKhandeparkar

harshkhandeparkar commented 5 years ago

@jywarren what I have done is I have deprecated bootstrap. Also I have added responsiveness and also refactored the code a little bit. It does not touch any other field. It just stabilizes the code in general

harshkhandeparkar commented 5 years ago

@jywarren Materialize is a very similar to bootstrap and even a bit simpler. It has no dependencies either. I have only used materialize instead of bootstrap. I have also fixed errors and redundancies in the index.html file. I have also tried to minimise custom styles. Also I have changed the js code and split it into two different folders one for DOM and one for sequencer actions. Also fixed a few code errors. All of the code is almost the same with a few changes, mostly changes in classes. I have replaced the bootstrap components with similar looking materialize components. The end result is that the UI looks better since equivalent materialize components look better than bootstrap. Also the inputs have been changed to reduce custom code and to increase esse of input(in case of textarea)

Divy123 commented 5 years ago

Sure @jywarren . Also I think the changes made by @HarshKhandeparkar are easily adoptable . The idea of using React can be postponed until the changes as said by you are done.

jywarren commented 5 years ago

Ok, well Harsh maybe share a PR, but I worry about the changes affecting the display of button state for many custom UI behaviors, and a number of UIs relied on bootstrap. Let's give it a good testing but I hope you understand my caution in this!

You can apart from opening a PR also push to your own gh-pages branch to let other people try it out. Thanks!

On Tue, Jan 29, 2019, 2:27 PM Slytherin <notifications@github.com wrote:

Sure @jywarren https://github.com/jywarren . Also I think the changes made by @HarshKhandeparkar https://github.com/HarshKhandeparkar are easily adoptable . The idea of using React can be postponed until the changes as said by you are done.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/708#issuecomment-458630279, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ54hBpuWUiYT00ZyIH-CTUTd0J9lks5vIIRSgaJpZM4aP3ru .

harshkhandeparkar commented 5 years ago

@jywarren sure. I think I will open a PR and any you can point out any concerning things? This is still a WIP though

harshkhandeparkar commented 5 years ago

@jywarren do my gh-pages link to harshkhandepsrkar.github.io? Or some other link? I haven't tried it before.

jywarren commented 5 years ago

That's fine! Even if we just leave it open as a PR for a while we can point to it as an alternative UI.

Although perhaps for future ones we might try to develop them im addition to our existing UI, rather than replacing it, that's part of the idea of having the UI be a separate layer that's swappable. Make sense?

On Jan 29, 2019 3:24 PM, "Harsh Khandeparkar" notifications@github.com wrote:

@jywarren https://github.com/jywarren sure. I think I will open a PR and any you can point out any concerning things? This is still a WIP though

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/708#issuecomment-458650750, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ7Q-hlU4lapy9H1IROT9paGG4yvFks5vIJGfgaJpZM4aP3ru .

jywarren commented 5 years ago

Yes it'll be that plus /image-sequencer/

🙌🏽

On Tue, Jan 29, 2019, 3:27 PM Jeffrey Warren <jywarren@gmail.com wrote:

That's fine! Even if we just leave it open as a PR for a while we can point to it as an alternative UI.

Although perhaps for future ones we might try to develop them im addition to our existing UI, rather than replacing it, that's part of the idea of having the UI be a separate layer that's swappable. Make sense?

On Jan 29, 2019 3:24 PM, "Harsh Khandeparkar" notifications@github.com wrote:

@jywarren https://github.com/jywarren sure. I think I will open a PR and any you can point out any concerning things? This is still a WIP though

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/publiclab/image-sequencer/issues/708#issuecomment-458650750, or mute the thread https://github.com/notifications/unsubscribe-auth/AABfJ7Q-hlU4lapy9H1IROT9paGG4yvFks5vIJGfgaJpZM4aP3ru .

harshkhandeparkar commented 5 years ago

@jywarren yess! That's a great idea. I am going to open a pr right now. Thanks for the help with gh-pages.

harshithpabbati commented 5 years ago

@HarshKhandeparkar a great work!! :+1:

harshithpabbati commented 5 years ago

May be few things need to be added to it.Fine will make them as issues after this get's merged

harshkhandeparkar commented 5 years ago

Thanks. I'm actually going to refactor the ui code by separating the sequencer part of it from the DOM part and I'm working on it here. This links to a branch in my fork. Please check out the ui/ folder and examples/ folder.

harshithpabbati commented 5 years ago

@jywarren we can make a big move by using react . I am interested in doing it. If you agree with it ?

Divy123 commented 5 years ago

I am also interested. May be we can collaborate?

harshithpabbati commented 5 years ago

Yeah we can once @jywarren agrees with it :smile:

harshithpabbati commented 5 years ago

@jywarren how about making it into a dynamic site we can have login system and once he get's into his account he can have all his data about the saved sequence and the images which he want for future use. What are your thought about it??

harshithpabbati commented 5 years ago

@jywarren we need your thoughts here.

YogeshSharma01 commented 4 years ago

@harshithpabbati nice idea about making it into a dynamic site.