ΕΕΛΛΑΚ - Λίστες Ταχυδρομείου

Re: Fwd: Development of an interactive flow visualization tool for visual / blockly programming

  • Subject: Re: Fwd: Development of an interactive flow visualization tool for visual / blockly programming
  • From: nilay gupta <nilaygupta3003 [ at ] gmail [ dot ] com>
  • Date: Thu, 9 Mar 2023 18:47:25 +0530
Yes exactly there are so many aspects to it. Got a whole lot of reading to
do. I'm on it! Thanks.

On Thu, 9 Mar 2023, 18:15 Sarantos Kapidakis, <sarantos [ dot ] kapidakis [ at ] gmail [ dot ] com>
wrote:

> Try to have no blank spots on your proposal.
>
> What are the mechanisms for coding?
> Is it aboutreading json files?
> Making a graphical interactive application?
> Analyzing graphs?
> Displaying graphs on the screen?
> Making a web application?
> There are certainly many aspects.
>
> Python has many libraries - explore them to see the ones that can be used.
> Try to verify if the libraries work the way you expect them to,
> by making a demo application.
> The demo application will have minimal functionality,
> possibly generic and not related to the project,
> but will try to engage all the necessary libraries.
>
> On Thu, Mar 09, 2023 at 03:18:12PM +0530, nilay gupta wrote:
> > Yes, I agree.
> > I will start working on the proposal. Just one more thing, I get the
> > problem and can think on possible solutions, but to make such tool, i
> find
> > myself a bit lost regarding the execution and the coding part of it. I'm
> > thinking of using python because of its huge libraries, but am still
> > confused about the inner machanism of how we will be coding a tool like
> > this.
> >
> > On Thu, 9 Mar 2023, 03:06 Sarantos Kapidakis, <
> sarantos [ dot ] kapidakis [ at ] gmail [ dot ] com>
> > wrote:
> >
> > > I think you understand enough about the problem now.
> > > We do not try to find answers to all challenges now.
> > >
> > > You must start preparing your proposal, include all interesting plans
> > > and we can still discuss any essential directions on the way.
> > >
> > > In the prosposal you must include:
> > > The programming language/platform you find appropiate
> > > Main program characteristics (e.g. if it will be interactive)
> > > The main features you plan to implement
> > > What will be first steps
> > > The project milestones
> > > etc
> > >
> > > When the project starts, there will be many more decisions to take,
> > > but here we will focus (with possible approaches) on the ones that
> > > really affect the design or the implementation of the proposal.
> > >
> > > You can also mention less significant issues, as example features,
> > > but they can be considered later, so we do not have to describe best.
> > >
> > > On Wed, Mar 08, 2023 at 09:56:53PM +0530, nilay gupta wrote:
> > > > Ok then, I think that we need to do some more brainstorming for the
> > > > layouts. Apparently we are gonna have different kinds of such maps
> > > > according to the user specification or the length of code.
> > > >
> > > > On Wed, 8 Mar 2023, 03:37 Sarantos Kapidakis, <
> > > sarantos [ dot ] kapidakis [ at ] gmail [ dot ] com>
> > > > wrote:
> > > >
> > > > > It is nice to have more ideas. This is one possible layout.
> > > > > But it goes all the way down the largest column ...
> > > > > Maybe it is better ot have the horizontal lines at the top or in
> some
> > > > > middle places of the layout.
> > > > > The above may be used for long-distance arrows, and use direct
> arrows
> > > for
> > > > > local ones (like arrows among the same or adjacent columns).
> > > > > We do not try to avoid arrow intersections, as long as we do not
> > > confuse
> > > > > their continuation (e.g. using colors).
> > > > >
> > > > > Maybe this layout does non make obvious the connections of the
> arrows,
> > > and
> > > > > is more appropiate in an interactive tool where the system can (on
> > > demand)
> > > > > highlight the arrows of interest.
> > > > >
> > > > > The user may be able to select the order of the columns (so that
> they
> > > have
> > > > > a logical sequence), and that will affect the arrows.
> > > > > But we have more freedom on the position on the code blocks inside
> the
> > > > > column.
> > > > > Normally they have a time-sequence order: top parts are executed
> before
> > > > > the bottom parts, and most arrows are expected to point downwards.
> > > > >
> > > > > But some columns will usually be much longer than the others.
> > > > > And we should try to save space - to make a (as much as possible)
> > > compact
> > > > > view.
> > > > > The visualization will be affected by the ammound of code that us
> > > > > presented.
> > > > > For minimal code, the result will be more beautiful and easy to
> read.
> > > > > Otherwise, we should be able to make some compromises.
> > > > > E.g.
> > > > >   * ignore the (global or column) time-sequence alignment
> requirement.
> > > > >   * distribute the code blocks of a long column to two real columns
> > > > >   * relocate long parts of a column to the column bottom (and they
> will
> > > > > seem like *procedure calls*)
> > > > >   * fold code blocks with a single (super) block, with the
> appropiate
> > > name
> > > > >       * The user may unfold the block interactively
> > > > >   * ...
> > > > >
> > > > > We may also proceed to an interactive tool. An interactive tool
> could:
> > > > >   * change the column order
> > > > >   * change the order of the code inside a column
> > > > >   * add names, icons, ...
> > > > >   * follow arrows interactively (e.g. by highlighting)
> > > > >   * change the path of an arrow
> > > > >   * have pop-up names for code blocks and arrows
> > > > >   * filter (using different conditions) some of the code blocks or
> > > arrows
> > > > >       * e.g. to those reachable by an event
> > > > >       * or to those that are related to a variable
> > > > >       * or to some sprites only
> > > > >   * save/load the (interactively set) configuration
> > > > >       * to apply it later to the same or a modified program
> > > > >       * to make custom layouts (printed on many pages)
> > > > >   * ...
> > > > >
> > > > > Starting from the visualization, we can make a tool that will help
> the
> > > > > user to understand small or large programs, and trace program
> > > execution or
> > > > > variable usage/assignments on them. On the way, we can think and
> > > implement
> > > > > many useful cases. We will deal with them when we have a working
> > > prototype.
> > > > >
> > > > > On Tue, Mar 07, 2023 at 11:03:16PM +0530, nilay gupta wrote:
> > > > > > I have made an enhanced version with better  readability. The
> idea
> > > > > clicking
> > > > > > my mind is that we have a calling wire running through the
> bottom of
> > > the
> > > > > > columns for each broadcast and receive type, which would be color
> > > coded
> > > > > for
> > > > > > easy understanding of the calling and receiving block. We would
> have
> > > all
> > > > > > blocks of one section in one column and have the next one as an
> empty
> > > > > space
> > > > > > for upcoming wires, which would be connecting the blocks to the
> > > wire/line
> > > > > > running at the bottom of the column. By this way, the whole
> > > visualisation
> > > > > > would be more easy to understand and process. visualisation
> attached
> > > > > below.
> > > > > >
> > > > > > On Tue, 7 Mar 2023 at 12:32, Sarantos Kapidakis <
> > > > > > sarantos [ dot ] kapidakis [ at ] gmail [ dot ] com> wrote:
> > > > > >
> > > > > > > The video is not important, from the technical point of view.
> > > > > > > It explains why the code flow diagram is useful, and gives some
> > > > > instruction
> > > > > > > and examples for its creation. For us, the display of the
> examples
> > > can
> > > > > > > provide
> > > > > > > some new ideas.
> > > > > > > Focus on the code arrangement/layout, so that the
> interconnections
> > > are
> > > > > > > better demonstrated.
> > > > > > >
> > > > > > > On Tue, Mar 07, 2023 at 10:40:11AM +0530, nilay gupta wrote:
> > > > > > > > Greek is really hard for me to understand, can you please
> share
> > > some
> > > > > > > > document/resource which I can translate and read for my
> ease, the
> > > > > video
> > > > > > > > itself is purely in Greek with no subtitles.
> > > > > > > >
> > > > > > > > On Tue, 7 Mar 2023, 02:30 Sarantos Kapidakis, <
> > > > > > > sarantos [ dot ] kapidakis [ at ] gmail [ dot ] com>
> > > > > > > > wrote:
> > > > > > > >
> > > > > > > > > Here is a how-to video, but it is in Greek:
> > > > > > > > >
> > > > > > >
> > > > >
> > >
> https://drive.google.com/drive/folders/1UqtPMiclFZ8fNl0ZCWFzGiNUbk8-LJUL
> > > > > > > > >
> > > > > > > > > I believe you got the main idea - there are other issues to
> > > > > consider
> > > > > > > too.
> > > > > > > > > The layout of the code flow - a compact (if possible)
> design
> > > with
> > > > > > > (almost)
> > > > > > > > > best code (node) placement.
> > > > > > > > > The next thing to consider is how to make the resulting
> graph
> > > more
> > > > > > > > > readable.
> > > > > > > > > The code can be rearranged (with some restrictions -
> keeping
> > > the
> > > > > code
> > > > > > > of
> > > > > > > > > the
> > > > > > > > > same sprite in one column) so that the flow is easier to
> > > follow,
> > > > > (the
> > > > > > > > > pieces
> > > > > > > > > of code that are connected by arrows will be nearby), and
> they
> > > > > must be
> > > > > > > > > connected with different style and color of arrows, to
> make the
> > > > > > > connections
> > > > > > > > > clear.
> > > > > > > > > Also, it may be better if the arrows go around (and not
> above)
> > > the
> > > > > > > pieces
> > > > > > > > > of code.
> > > > > > > > >
> > > > > > > > > On Mon, Mar 06, 2023 at 02:30:12PM +0530, nilay gupta
> wrote:
> > > > > > > > > > Yes sir sure, but before that I need to do some research
> for
> > > the
> > > > > > > > > > achievement of such output, could you suggest me some
> points
> > > > > where I
> > > > > > > can
> > > > > > > > > > start of.
> > > > > > > > > >
> > > > > > > > > > On Mon, 6 Mar 2023, 12:44 Sarantos Kapidakis, <
> > > > > > > > > sarantos [ dot ] kapidakis [ at ] gmail [ dot ] com>
> > > > > > > > > > wrote:
> > > > > > > > > >
> > > > > > > > > > > Dear Nilay,
> > > > > > > > > > >
> > > > > > > > > > > You got the idea of what we want the results should be.
> > > > > > > > > > > Now you should prepare a proposal of how to achieve it.
> > > > > > > > > > >
> > > > > > > > > > > On Mon, Mar 06, 2023 at 12:27:32PM +0530, nilay gupta
> > > wrote:
> > > > > > > > > > > > Hello there!
> > > > > > > > > > > > As far as I am able to grasp the problem statement,
> it
> > > > > basically
> > > > > > > > > means
> > > > > > > > > > > that
> > > > > > > > > > > > we need the flow of a blockly programming language
> like
> > > > > scratch
> > > > > > > > > > > visualised,
> > > > > > > > > > > > that is which function or block is being executed
> after
> > > which
> > > > > > > one.
> > > > > > > > > > > > I have created a flow visualisation of a snake game
> as
> > > asked
> > > > > by
> > > > > > > mr
> > > > > > > > > > > Sarantos.
> > > > > > > > > > > > link of code:
> > > > > https://scratch.mit.edu/projects/780204439/editor/
> > > > > > > > > > > > visualised document attached below:
> > > > > > > > > > > >
> > > > > > > > > > > > On Sun, 5 Mar 2023 at 08:49, Sarantos Kapidakis <
> > > > > > > > > > > > sarantos [ dot ] kapidakis [ at ] gmail [ dot ] com> wrote:
> > > > > > > > > > > >
> > > > > > > > > > > > > Dear Nilay,
> > > > > > > > > > > > >
> > > > > > > > > > > > > Thank you for your interest in the programming flow
> > > > > > > visualization
> > > > > > > > > tool.
> > > > > > > > > > > > > You have to describe how you will attack the
> problem by
> > > > > making
> > > > > > > a
> > > > > > > > > full
> > > > > > > > > > > > > proposal according to GSOC rules and I will help
> you to
> > > > > answer
> > > > > > > all
> > > > > > > > > your
> > > > > > > > > > > > > questions on the way.
> > > > > > > > > > > > >
> > > > > > > > > > > > > But before that, lets make sure that we see the
> same
> > > > > > > challenges!
> > > > > > > > > > > > > To begin with, can you provide an example output?
> > > > > > > > > > > > > The input should be obvious from the output.
> > > > > > > > > > > > >
> > > > > > > > > > > > > I have added more information in the
> > > > > > > > > > > > > https://sarantos.no-ip.org/codeflow
> > > > > > > > > > > > >
> > > > > > > > > > > > > Please use the gsoc-developers [ at ] ellak [ dot ] gr list for
> the
> > > > > public
> > > > > > > > > > > communication.
> > > > > > > > > > > > >
> > > > > > > > > > > > > Regards,
> > > > > > > > > > > > >
> > > > > > > > > > > > > Sarantos
> > > > > > > > > > > > >
> > > > > > > > > > > > > On Sat, Mar 04, 2023 at 06:58:53PM +0530, nilay
> gupta
> > > > > wrote:
> > > > > > > > > > > > > > Hello mr.Kapidakis,
> > > > > > > > > > > > > > Myself Nilay Gupta, I feel really inclined
> towards
> > > this
> > > > > idea
> > > > > > > of
> > > > > > > > > yours
> > > > > > > > > > > > > > mentioned on the gsoc page.
> > > > > > > > > > > > > > I would love to know further prerequisites and
> flow
> > > of
> > > > > the
> > > > > > > > > project as
> > > > > > > > > > > > > well.
> > > > > > > > > > > > > > I'm new to open source but have a fair amount of
> > > > > knowledge in
> > > > > > > > > > > > > programming.
> > > > > > > > > > > > > > my github: https://github.com/g4ze
> > > > > > > > > > > > > >
> > > > > > > > > > > > > > Awaiting your response.
> > > > > > > > > > > > > > Thnakyou.
> > > > > > > > > > > > >
> > > > > > > > > > >
> > > > > > > > > > >
> > > > > > > > > > >
> > > > > > > > >
> > > > > > >
> > > > >
> > > > >
> > > > >
> > >
>
----
Λαμβάνετε αυτό το μήνυμα απο την λίστα: Λίστα αλληλογραφίας και συζητήσεων που απευθύνεται σε φοιτητές developers \& mentors έργων του Google Summer of Code - A discussion list for student developers and mentors of Google Summer of Code projects.,
https://lists.ellak.gr/gsoc-developers/listinfo.html
Μπορείτε να απεγγραφείτε από τη λίστα στέλνοντας κενό μήνυμα ηλ. ταχυδρομείου στη διεύθυνση <gsoc-developers+unsubscribe [ at ] ellak [ dot ] gr>.