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

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: Mon, 20 Mar 2023 14:17:02 +0530
How do i make IRC nickname on #sugar?


On Tue, 14 Mar 2023 at 09:51, nilay gupta <nilaygupta3003 [ at ] gmail [ dot ] com> wrote:

> yeah, that makes sense, understood
>
> On Tue, 14 Mar 2023 at 00:58, Sarantos Kapidakis <
> sarantos [ dot ] kapidakis [ at ] gmail [ dot ] com> wrote:
>
>> Every block (command) is represented in a (json) record.
>> We are mostly interested on the blocks that *broadcast* messages
>> and on the blocks that *receive* (When I receive ...) them
>> The block contains all relevant parameters (e.g. the *message*),
>> so that we know which blocks should be connected.
>> Right?
>>
>> My approach would be to make a graph, with (some of) the blocks as nodes
>> and connected by the edges that correspond to the messages.
>>
>> On Mon, Mar 13, 2023 at 10:08:23PM +0530, nilay gupta wrote:
>> > hi!
>> > I did some research about scratch jsons and projects, i'm kind of stuck
>> at
>> > how reading the jsons would tell us the flow?
>> >
>> > On Thu, 9 Mar 2023 at 18:47, nilay gupta <nilaygupta3003 [ at ] gmail [ dot ] com>
>> wrote:
>> >
>> > > 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>.

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