Visual UI

[emil14]

Should be like a good 2d-video-game, animations and sound welcome

Loader

Some cool loader with music, a screen picture with some advice (let's track what user saw and what he haven't so). Loading bar. Important! Loader is skipable. Game settings allows to disable it completely. Loader should also be animated. 3-4 loading themes will be cool.

Company

To teach how to FBP there will be a company with some story.

Component settings.

Inports, Outports - сетка как в рпг, у клеток ховеры и активы. в клетке имя и иконка типа. при клике открывается port view.

Port View - single/array тумблер. Type Expression view - цвет определяется сабтайпом типа. Описание типа, если есть. Клик по тему открывает type selector view

Nodes - тоже сетка. вкладки - все, порты, компоненты, константы, триггеры. Каждая вкладка с ховером с подсказкой.
Клик по узлу - port view | component view | generator view | trigger view

Connections.

===

Icons

boolean - black and white, 0 and 1, инь и янь
integer - 1 голубой
float - 1.0 , синий
string - текст string, желтый
list - array elements with indexes, зелёный
dict - фиолетовый
struct (multi-type dict with static set of keys) - оранжевый

Types View (without filter):

Tabs - all (default sort - native, package level, imports level), native, local, global
Sorting - default, by name, by subtype

Click on data-type:

boolean - yes/no view, two items - True and False. Select and props.onSelect({type: bool, value: t|f})
list - a numbered items in a row. Click -> "dimensions: (1)" , types: opens new type select view

===

Runtime view

read-only visualization of runtime program. может быть как-то связано с версией компилятора чтоб дать макс инфы, инсайты.

---

Related to #260

[emil14]

Different view modes

Debug view

Highlight (possible), remember and show current messages values (state)

[emil14]

Example https://cdn.selinc.com/video/solutions/FLISR-Screen-Recording_02.mp4

https://selinc.com/solutions/software/flisr/