Category: искусство

Mikail

Новые функции mm-vis-js (https://github.com/sushilshik/mm-vis-js) с хоткеями:

  • Alt+n — создать новую ноду. Теперь можно только с клавиатуры создавать списки нод с текстом. Нажимаете alt+n — появляется форма ноды, набираете текст, нажимаете ctrl+Enter, появляется набранные текст в ноде, опять нажимаете alt+n, открывается форма ввода второй ноды, набираете текст, нажимаете ctrl+Enter, вторая нода встает под первой и так далее. Все выравнивается учитывая многострочность нод. В VUE (не VUE.js), например, можно с помощью хоткеев ставить новые ноды под предыдущими, но высота многострочных нод не учитывалась и приходилось поправлять, сдвигать новые ноды вручную, а тут все выравнивается целиком, новые высокие ноды не загораживают ноды перед ними. По умолчанию первая нода в списке создается в центре экрана. Либо в качестве координаты начала списка берется точка последнего клика по экрану.

  • ctrl+alt+s — сохранить холст. Для работы функции сохранения должен быть запущен utils/mvj-serv.js.

  • ctrl+b — построить проект кода. Для этого надо выделить любую ноду в проекте. На странице может быть несколько проектов, поэтому надо указать нужный, выделив любую ноду в любом дереве кода проекта. Для постройки проектов должен быть запущен utils/mvj-serv.js.

  • В правом верхнем углу выводятся алерты при сохранении страницы и постройке проектов.

  • shift+alt+d — отдалить (zoom out).

  • shift+alf+f — приблизить (zoom in).

  • shift+alt+LeftArrow — выровнять выделенные ноды по левому краю.

  • ctrl+enter — сохранить и закрыть форму редактирования ноды.

  • alt+enter — сохранить форму редактирования ноды не закрывая ее.

  • esc — закрыть форму редактирования ноды.

  • Теперь можно редактировать ярлыки связей (edge). Нужно выделить связь мышкой и в верхнем меню кликнуть Edit Edge. Так можно задавать ярлыки «code» для связей нод в деревьях кода проектов.


  • C постройкой проекта и сохранением страницы с помощью хоткеев стало удобно вести постоянную разработку проекта mm-vis-js на его странице. Деревья кода проекта лежат в репозитории проекта https://github.com/sushilshik/mm-vis-js в файле app/index.html. (По ссылке https://sushilshik.github.io/ открываются копии файлов этого репозитория.) Открываю app/index.html в браузере из локальной копии репозитория, запускаю node utils/mvj-serv.js и работаю.

https://sushilshik.github.io/
Mikail

(no subject)

Теперь код mm-vis-js лежит на холсте mm-vis-js. И собирает сам себя. В общем, IDE мечты. Визуальное метапрограммирование. А можно еще и статьи так писать, главы книг.

Чтобы работало локальное сохранение холста и сборка проектов кода на холсте — нужно поставить node.js и запустить «node mvj-serv.js» в директории mm-vis-js/utils. Описание в схеме «Как пользоваться mm-vis-js». Масса возможностей открывается, просто рук на все не хватает.

https://sushilshik.github.com

mm-vis-js_code
Mikail

(no subject)

Новый холст — http://sushilshik.github.com/base.html. Доработан themeGraph. Хоткеи: ctrl+alt+d — сдублировать выделенное, ctrl+alt+c — связать несколько выделенных нод так, что крайняя слева станет родительской нодой — очень удобная функция. В схеме Wikipedia пример кода, который скачивает категории на холст. Можно запускать JavaScript код в нодах кнопкой runNodeCode в меню ноды.

index.data

base.data
Mikail

(no subject)

Теперь есть функция копирования нод на холсте окна браузера и между окнами. Выделяете с правой клавишей ноды, нажимаете в верхнем меню toJson и из выделенных нод создается нода с их json-кодом в качестве текста. Потом кликаете по этой ноде с json-кодом, нажимаете fromJson и кликаете на свободном участке холста — там построится копия нод. Сам json-код можно просто скопировать мышкой и вставить в ноду на другом холсте, чтобы там уже создать копию исходных нод. Теперь можно и участки схем копировать, и пересылать их друг другу.

Фунция добавления шаблона графа для изучения тем. Нажимаете в верхнем меню addThemeGraph, потом клик на холсте, куда надо поставить шаблон.

Добавил схемы на холст: Conceptual modeling, Human-Computer Interaction (HCI), Interfaces and graphs, Annotations, abstract and precis writing, Systems analysis, Schemes, graphs layout, mm-vis-js code development, Institutions and societies studying graphs layout, Визуализация в исторической информатике, Books layout, Concept mapping applications.

https://sushilshik.github.io/

new_theme_scheme_template
Mikail

(no subject)

mm-vis-js — редактор диаграмм связей, графов. Работает в браузере, как локально, так и в сети, без серверной части. Интерфейс сочетает визуальное редактирование и тектовый редактор кода схемы.

Теперь можно сохранять работу на страницах mm-vis-js. Список сохранений выводится прямо на холсте. Не нужно где-то логиниться или что-то скачивать. В браузере есть функция localStorage. Данные в localStorage хранятся и между перезагрузками браузера. В целом работает уже почти как десктопная программа.

Json-код схемы каждого сохранения можно посмотреть и скопировать. Основные его данные — список нод и связей между ними.

Получилось удобно, потому что работа с json представлением содержания холста специально вынесена в отдельный интерфейс. Можно изменять схему, редактируя json, то есть работать с графикой, как говорится, «по цифрам», а не только мышкой. Обновление схемы на основе json — уже есть, нужно было только еще сделать его сохранение и загрузку.

Чтобы сохранить, нужно кликнуть updateMenuFromScheme — json и в меню обновится, и сохранится в localStorage.
Чтобы выбрать, какое сохранение загрузить, нужно кликнуть по «Save/Load» в меню showData. Вид перейдет к списку сохранений на холсте. Клик на ноде с именем сохранения и клик на loadSavedProjectToMenu в меню слева.

mm-vis-js_save
Mikail

(no subject)

Новый интерфейс mm-vis-js. И примеры карт кода. Целиком код репозиториев (.c, .h, .cc, .py и т. п. файлы) Chromium, Firefox, ядра Линукс, Apache httpd, bash, Python, Emacs, gcc, texlive, vim, Visual Studio, Ruby, JDK, ghc, git, Hbase, Julia, mysql-server, neo4j, sbcl, Spark, spring-framework, Tomcat, vis-network, mm-vis-js. Список ссылок на карты в схеме «Карты программного кода».

Это, конечно, только вариант автоматической верстки кода. Масса возможностей открывается. Можно генерировать для каждого файла, каждого участка кода свои примечания, вспомогательную информацию. Например, историю изменений.

В современных IDE очень не хватает возможности редактировать блоки кода в таком виде на холсте.

В картах можно создавать ссылки для перехода к нужной точке карты с определенным масштабом просмотра. И добавлять примечания к коду прямо на холсте.

https://sushilshik.github.io — уменьшите масштаб, чтобы увидеть другие разделы.

2019-11-01_mm-vis-js

Пример карты 500 файлов кода chromium:

mm-vis-js_chromium_1

mm-vis-js_chromium_2

mm-vis-js_chromium_3
Mikail

(no subject)

http://www.nkbtr.org/down/mm-vis-js/code_examples/vis-network/vis-network_2019-10-30_19-13-59/vis-network.index.html
Пример карты кода.
Файл большой, поэтому может загружаться секунд 20.
Теперь можно в ссылке задать координаты на холсте, чтобы сразу открыть нужную точку. Это параметры scale, x и y в конце ссылки. Чтобы сохранить ссылку на текущий вид на холст в браузере, нужно нажать «updateMenuFromScheme» в правом меню, промотать его вниз и скопировать соответствующие параметры в ссылку. Работает без серверной части.

vis-network_project_code_map
Mikail

Схемы книг

Добавил еще пример схемы книги на холсте. Раньше уже выкладывал такие скриншоты. Но раньше работа шла в программе VUE (тезка js-фреймворка и не имеет к нему отношения), которую нужно было скачивать и ставить, да и на ее сайте нужно было регистрироваться, в общем, не удобно. Теперь нужен только браузер и текстовый редактор для работы с такими схемами.

У кого мышление визуальное, тем, думаю, так гораздо легче воспринимать большие тексты. Легче ориентироваться и запоминать, когда все содержание текста развернуто на одном холсте, карте. Ноды заметок к тексту становятся дополнительными визуальными ориентирами — очень помогают закреплять текст в памяти и разбираться.

Нужно еще много работы по оптимизации этого кода. Например, сейчас тормозит страница, если «отдалить» холст. И создавать заметки на холсте пока может быть лучше прямо через код страницы, а не с помощью меню — по той же причине.

https://sushilshik.github.io/examples/technicheskoe_risovanie_-_sherbina.html

mm-vis-js_book_1

mm-vis-js_book_2

mm-vis-js_book_3

mm-vis-js_book_4

mm-vis-js_book_5
Mikail

(no subject)

Пару месяцев назад взял наугад с полок книгу «А. А. Дельвиг. Сочинения» (редактор, критик в журналах «Северные цветы» и «Литературная газета»). Увлекательное вступление критика Вадима Вацуро — там на странице 17 (https://rvb.ru/19vek/delvig/03article/intro.htm) разница воспитательных механизмов произведений разного уровня культуры: «Воспитательная роль (масскультового) произведения достигается не логикой характеров и событий, а прямым публицистическим комментарием автора».

«Издатель „Северных цветов“ Дельвиг не мог возражать против того, что книга становится товаром, но он был против экспансии коммерции в область духовной культуры».

Я совсем не специалист. И этот пост не художественное произведение =) Поэтому все хорошо. Я только рад был встретить краткую, ясную формулировку, описание различия в уровнях и способах достижения воспитательной роли художественных произведений. В том числе потому, что понятие «воспитание» стало совсем уж удобным и мутным.

Прошло 200 лет (ахаха, прекрати). По моим ощущениям эта самая коммерция давно уже ушла в выси духовной культуры и активно работает на уровне логики характеров и логики событий. То есть давно применение логики характеров и логики событий стало товаром и, думаю, уже и на высоких уровнях качества, и на высоких уровнях общественных масштабов, пропаганды и т. п.