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

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: Wed, 8 Mar 2023 21:56:53 +0530
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>.

πλοήγηση μηνυμάτων