8000 Feature-Request: PI Program Board with Red Strings · Issue #3392 · wekan/wekan · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Feature-Request: PI Program Board with Red Strings #3392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
dbt4u opened this issue Dec 11, 2020 · 30 comments
Open

Feature-Request: PI Program Board with Red Strings #3392

dbt4u opened this issue Dec 11, 2020 · 30 comments
Labels
Feature:Drag-and-drop

Comments

@dbt4u
Copy link
dbt4u commented Dec 11, 2020 •
edited
Loading

Hello Dear Wekanist,

we use Wekan keen as a Tool for our SAFe PI Planings. We are missing a possibility to visualize dependencies at a glance.
It could be a "layer" on top, where we manual create "Red String" connections via drag and drop.

If this "drag and drop" flow goes in concrete field values would be nice, but the visual overview is for the PI-Planing Use-Case more important.

See attached some Example-Screenshot from other tools, like

Dependencies-Kendis-SAFe-LeSS
2020-12-11 12_05_36-piplanning app
F3-Program-Board
@xet7
Copy link
Member
xet7 commented Dec 12, 2020

@CodeFreezr

Is any of this kind of "Red String" code Open Source?

Please email support@wekan.team with info about how much you are currently paying for these features, and what it would be worth to you to have this feature in Wekan. I'll then think do I dare to try to implement this.

@xet7
Copy link
Member
xet7 commented Dec 12, 2020

I asked at Freenode IRC sandstorm channel, some similar to "Red String" code, for drawing on top with SVG, has been made by isd at https://github.com/zenhack/dndgrid . Client code is in src/elm/ , and probably 8000 want to look at Lines.elm and references to StartDraw/StopDraw in Main.elm .

@dbt4u
Copy link
Author
dbt4u commented Dec 14, 2020

I'm not sure if parts of this "Apache v2" licensed Code could help: https://github.com/jgraph/drawio

@dbt4u
Copy link
Author
dbt4u commented Dec 14, 2020

This solution doesn't seem to support curved lines and seems a bit dated. Perphaps as inspiration? https://github.com/alexgheorghiu/diagramo

@dbt4u
Copy link
Author
dbt4u commented Dec 14, 2020 •
edited
Loading

Another different solution, but with a strong js drawing lib inside: https://github.com/bpmn-io/bpmn-js. Very active project with an own OSS-like license.

@dbt4u
Copy link
Author
dbt4u commented Dec 14, 2020 •
edited
Loading

If you would ask me, what is the best "Drag and Drop Red String" UX beside Kendis and piplaning.io overall? I would say: miro app. This "Realtime- Whiteboard" Solution is really awesome, but as I have understand, the core-libs are not OSS, or? But there are a lot of (SDK) stuff around on github, perhaps some inspirations? https://github.com/miroapp

@dbt4u
Copy link
Author
dbt4u commented Dec 14, 2020

Ok, this above solutions do much, much more then only drawing "Red Strings". But perhaps there is some code inside we could use as a starting point?

@xet7 xet7 mentioned this issue Jun 12, 2021
Closed
@xet7
Copy link
Member
xet7 commented Jun 12, 2021

Added to Roadmap

@xet7
Copy link
Member
xet7 commented Dec 11, 2021

It seems here are some CSS curved lines.

TODO: Check is something similar possible with HTML4 using NetSurf browser.

HTML:

<div id="upper-line"></div>

<div id="lower-line"></div>

<div id="content-1">content 1</div>

<div id="content-2">content 2</div>

<div id="content-3">content 3</div>

CSS:

#upper-line {
    border: solid 1px #000;
    width:80%;
    height: 250px;
    border-radius: 50%;
    left:55px;
    border-right: none;
    border-top: none;
    border-bottom: none;
    position: absolute;
    top: 100px;
}

#lower-line {
    border: solid 1px #000;
    width: 80%;
    height: 250px;
    border-radius: 50%;
    top: 340px;
    left: -60px;
    border-left: none;
    border-top: none;
    border-bottom: none;
    position: absolute
}

#content-1 {
    position: absolute;
    left: 180px;
    top: 75px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: orange;
}

#content-2 {
    position: absolute;
    left: 40px;
    top: 200px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: #98879A;
}

#content-3 {
    position: absolute;
    left: 400px;
    top: 400px;
    width: 100px;
    height: 100px;
    line-height: 100px;
    border-radius: 50%;
    text-align: center;
    background-color: #637DBA;
}

@dbt4u
Copy link
Author
dbt4u commented Jan 7, 2022 •
edited
Loading

Here an additional Description for this Feature-Request:

Generally speaking, the requirement is this:

  • One card can have “must be started after” type dependencies to 1:n other cards.
  • These dependencies can be added and deleted in the detailed view of a card (i.e. selectable by a “search by title” functionality).
  • The dependencies are maintained and ideally synced if a card is moved or copied to different boards.
  • Whenever cards that are dependent to each other are on the same board, a visual connection is drawn between the cards
    • Ideally, the connection is always drawn from the right edge of the prerequisite card to the left edge of the dependent card to give further visual indication of which card depends on what.
    • f a card has dependencies to multiple cards on the same board, they’re all drawn.

Differentiation

  • Having one or multiple dependencies to cards on the same board must not limit the columns on which a card can be moved.
  • This is to say: If board columns signify Scrum Sprints, weeks or “phases”, it would be possible to place the prerequisite card after the dependent card. We believe it would be an unnecessary complexity to enforce “good” dependency management via software and we welcome the freedom during planning to temporarily place items in any column.

@dbt4u
Copy link
Author
dbt4u commented Mar 16, 2022

Any news here?

@xet7
Copy link
Member
xet7 commented Mar 16, 2022

@CodeFreezr

Development is In Progress. When I get it working, feature will be added to Meteor WeKan or Multiverse WeKan.

Multiverse WeKan will use SQLite or some other database. It will support also HTML4 browsers like Netsurf/Lynx/Links/ELinks/w3m , Amiga webbrowsers like AWeb and iBrowse, etc with minimal HTML/CSS. Example static html page with additional background image feature is at https://wekan.team/test/

@dbt4u
Copy link
Author
dbt4u commented Mar 24, 2022 •
edited
Loading

Thx for your Feedback. At the moment the Meteor WeKan is ours. Multiverse WeKan ist too simplified. Did you receive our offering for a live meeting?

@xet7
Copy link
Member
xet7 commented Mar 24, 2022

@CodeFreezr

Please re-send your offer by email. Thanks!

@dbt4u
Copy link
Author
dbt4u commented May 20, 2022 •
edited
Loading

Dominiques resends the email. And yes, my first name is Detlef^^

Nice 8000 to know that others see a need here too. #3860

@xet7
Copy link
Member
xet7 commented Jun 19, 2022

Some progress.

I figured out how to add some svg code temporarily to board title, so it shows red line:

<style type="text/css">
.redlines {
  position: fixed; /* or position: absolute */
  top: 220px;
  left: 250px;
  width: 50px;
  height: 2px;
  pointer-events: none; /* so that below cards can be clicked */
}
</style>
<div class="redlines">
<svg height="210" width="500">
  <line x1="0" y1="0" x2="270" y2="150" style="stroke:rgb(255,0,0);stroke-width:2" />
  Sorry, your browser does not support inline SVG.
</svg>
</div>

Redlines

At WeKan input fields, any Javascript is not run, it's sanitized for XSS reasons by dompurify, so SVG images at WeKan board can not include Javascript inside SVG like this SVG dragging example. So I'll try setting positioning in WeKan code itself some way. I presume it could be similar like relative positioning when dragging cards, sorting, etc.

I found video about Red Strings from this piplanning YouTube video:
https://www.youtube.com/watch?v=RgNdEUmkQXo

That video seems to be all about realtime sync of all board members collaboration, like current Meteor WeKan.

@xet7 xet7 mentioned this issue Jul 25, 2022
Open
@dbt4u
Copy link
Author
dbt4u commented Aug 22, 2022 •
edited
Loading

Perhaps, if it is too complex to implement red strings direct into Wekan GUI, perhaps we find a way to export/sync a board, perhaps as background for e.g. into excalidraw (a better FOSS Miro-Board). Then, after finishing drawing the connection, analyse excalidraw and add "CustomField" with UID-Links and Relative Position Coords on related cards?

I do this at the moment sometimes "manual" via a sliced screenshot and than work with a "bitmap" per card on excalidraw. It's not really genius but it works a bit more or less.

excalidraw Homepage: https://excalidraw.com/
excalidraw Upstream: https://github.com/excalidraw/excalidraw

@xet7
Copy link
Member
xet7 commented Sep 10, 2022

@CodeFreezr

Thx for your Feedback. At the moment the Meteor WeKan is ours. Multiverse WeKan ist too simplified. Did you receive our offering for a live meeting?

Current Meteor WeKan GUI is too heavy. When both server and client computers have 32 GB RAM, it's too slow. 10 MB of Javascript is too much.

Only way to add even more features to WeKan is to continue developing Multiverse WeKan like UI https://wekan.team/test/ where at browserside is only HTML4/CSS, without any Javascript. That Multiverse WeKan is not simplified, it has some more features that current Meteor WeKan does not have.

Perhaps, if it is too complex to implement red strings direct into Wekan GUI...

It is not too complex to implement red strings directly into Multiverse WeKan GUI.

@xet7
Copy link
Member
xet7 commented Sep 15, 2022

More details about Multiverse at #4578 (comment)

@xet7
Copy link
Member
xet7 commented Oct 31, 2022 •
edited
Loading
  1. Connected boxes examples, VML+SVG, partially works also at Internet Explorer:
  1. Raylib
  1. macOS/iOS related cross platform
  1. Progressive enhancement

4a) Svelte

4b) wt C++ web framework, uses progressive enhancement

4c) Haxe UFront

@xet7
Copy link
Member
xet7 commented Dec 15, 2022

Moved to here from #4777

From @hw-p

Feature Request: Whiteboard
It will be amazing to have whiteboard.

From @xet7

Yes, when I get it working. In Progress.

@xet7 xet7 mentioned this issue Dec 15, 2022
Closed
@xet7
Copy link
Member
xet7 commented Jan 1, 2023 •
edited
Loading

About Apple's new app Freeform for macOS and iOS:

  • If copying from Freeform directly to Inkscape, it copies as bitmap
  • If exporting from Freeform to PDF, and then Importing PDF to Inkscape, it is vector graphics, objects of drawing can be independently moved, resized, edited etc.

@xet7
Copy link
Member
xet7 commented Jan 13, 2023

Visual Prolog

visual-prolog

Discussion about Visual Prolog

Discussion mentioned Unreal Engine Blueprints, in organized case

https://forum.unity.com/threads/unreal-engine-5-game-changer.889501/page-26#post-5879353

blueprints-organized

Unreal Engine Blueprints, in non-organized case, less information density than code

blueprints-non-organized

Could be similar like this, when less cables

cable-man

But what if there is more cables, and one color?

cable-one-color

Questions

  • If coding this kind of Red Strings myself, what would be good way to select some Red String when there are many of them?
  • Should there be some kind of automatic reorganization of Red Strings?
  • Should there table where is listed: where from, where to, name, description, color?
  • Should each Red String have some name and description, and then search for that text?
  • Or should I just try to add Excalidraw somehow?

@helioguardabaxo
Copy link
Contributor

Hi, @xet7 !
Is this a dependency 8000 relation between cards?
Why not create some type for a "Dependency" field to link to another card like:

  • related to #
  • blocks #
  • is blocked by #
  • fixes #
  • is fixed by #

To help in user experience, would be good if I can to customize icon and color fields on minicard.
Filters by "Dependency" field would be good too.

@xet7
Copy link
Member
xet7 commented Jan 22, 2023

@helioguardabaxo

Kind of. Also direction of dependency relation would need to be saved, those arrows at first screenshot of first comment on this issue #3392 (comment)

This feature has already been paid. I will figure out how to code it.

@xet7 xet7 mentioned this issue Aug 16, 2023
Closed
@xet7
Copy link
Member
xet7 commented Sep 29, 2023

Someone thinking about many lines/strings:

Related to dragging:

@xet7
Copy link
Member
xet7 commented Dec 22, 2023

Related:

@TimUnverzagt
Copy link

Hi @xet7
Is this feature still in development?

@xet7
Copy link
Member
xet7 commented Oct 1, 2024

@TimUnverzagt

Yes. This feature has been paid, and development is in progress.

@xet7
Copy link
Member
xet7 commented Oct 1, 2024

In general, every paid feature will be added to WeKan.

@xet7 xet7 mentioned this issue Mar 6, 2025
Open
This was referenced May 12, 2025
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Feature:Drag-and-drop
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@xet7 @dbt4u @TimUnverzagt @helioguardabaxo
0