Image-sequencer: Alternative UI implementations (long-term)

[jywarren]

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.

• "node-and-line" style UI - like a flow-based program (Quartz Composer, Pure Data, node red (javascript!), etc)
  
  
  
  • visual nodes-and-lines UI: https://github.com/flowhub/the-graph
  
  
  • https://flowhub.github.io/the-graph/examples/demo-simple.html
  
  
  • Possible web-based commandline interface: https://hyper.is/?
  
  
  • (for node-and-line style UIs) non-linear sequences with Y-splitters -- ability to split an image into two sequences! (whoa)
  
  

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

[jywarren]

More!

• https://developers.google.com/blockly/
• Materialize?

[harshkhandeparkar]

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

[harshkhandeparkar]

@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]

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

[harshkhandeparkar]

@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?

[VibhorCodecianGupta]

@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]

@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 <[email protected] 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]

@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]

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

[Divy123]

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

[harshkhandeparkar]

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

[Divy123]

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

[harshkhandeparkar]

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

[Divy123]

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

[harshkhandeparkar]

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

Download! :

Insert Step! :

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

[harshkhandeparkar]

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

new header:

new footer:

new range:

new responsive page design:

new responsive step images:

new self-adjusting textareas instead of inputs:

[Divy123]

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]

@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]

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 <[email protected] 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]

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

[harshkhandeparkar]

@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]

@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]

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]

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 <[email protected] 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]

@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]

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

[jywarren]

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" [e-mail]
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]

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

🙌🏽

On Tue, Jan 29, 2019, 3:27 PM Jeffrey Warren <[email protected] 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" [e-mail]
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]

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

[harshithpabbati]

@HarshKhandeparkar a great work!! :+1:

[harshithpabbati]

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

[harshkhandeparkar]

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]

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

[Divy123]

I am also interested.
May be we can collaborate?

[harshithpabbati]

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

[harshithpabbati]

@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]

@jywarren we need your thoughts here.

[YogeshSharma01]

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