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

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 15:18:12 +0530
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>.