Форум программистов, компьютерный форум, киберфорум
Наши страницы
C# под Web, ASP.NET
Войти
Регистрация
Восстановить пароль
 
 
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
#1

Визуализация HTML - C# ASP.NET

28.01.2018, 10:12. Просмотров 598. Ответов 39
Метки нет (Все метки)

Приветствую.
Пишу систему HTML интерфейса для игр.
Использую html парсер AngleSharp.

Вот в чем вопрос, есть ли информация, по которой было бы четко и ясно понятно как строить визуализацию.

Например в CSS есть свойства которые не работают вместе, т.е. заменяют друг друга.

Понятно что есть спецификация WC3 и WHATWG. Но открыл сайт WC3 и офигел.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.01.2018, 10:12
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Визуализация HTML (C# ASP.NET):

Визуализация и ввод/вывод двумерного массива
Подскажите пожалуйста какой контрол и как использовать для ввода/вывода...

Быстрая визуализация и C#
Здравствуйте, хоть похожие вопросы уже есть на форуме, ни в одном из ответов,...

Xna визуализация
как можно улучшить визуально 2д игру? ну например можно ли как то наложить на...

Визуализация методов сортировки
Подскажите пожалуйста. Как можно графически(например в виде шкал или...

Визуализация занятости программы
Всем здравствуйте! Подскажите плз, как справиться со следующей проблемой......

Визуализация WAV файла
Здравствуйте! У меня следующая проблема - нужно сделать визуализацию WAV-файла...

39
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
31.01.2018, 11:58  [ТС] #21
Usaga, вы походу не понимаете, что библиотека AngleSharp может делать абсолютно(ну или почти) все что и браузер, только картинку рисовать должен я.

Визуализация и так не самая простая задача, а вы предлагаете еще и разбираться с тем как парсить документы?) Еще кучу времени убить зазря, потому что есть готовые и идеальные решения, которые написаны по стандартам WC3.
0
Usaga
Эксперт .NET
3672 / 2968 / 542
Регистрация: 21.01.2016
Сообщений: 11,748
Завершенные тесты: 2
31.01.2018, 12:04 #22
NovaEiz, чтобы визуализировать DOM вам его на руках иметь надо. А строить DOM - на порядок (а то и на два) проще, чем его визуализировать. Ведь DOM - тупо дерево. Вы же умеете строить и обходить деревья? Если нет, то чтение материала на эту тему в течении пары вечеров и готово. А вот визуализировать его (особенно с учётом CSS) - уже совсем другая песня (о чём я с самого начала и сказал).

Т.е. вам не получится схалявить отдав разбор документа AngleSharp-у. Это вам тупо ничего не даст.

Добавлено через 3 минуты
Если вам захотелось декларативного описания интерфейсов в вашей игре, то не обязательно брать за основу HTML. Вы можете выдумать что-то своё, XML-подобное, что будет существенно проще. Вам же один чёрт всё придётся писать самому, так не лучше ли будет взять за основу простую XML-ку со своим набором инструкций?
0
8Observer8
2037 / 1327 / 216
Регистрация: 05.10.2013
Сообщений: 4,215
Записей в блоге: 56
31.01.2018, 12:07 #23
Цитата Сообщение от NovaEiz Посмотреть сообщение
Проект на Unity3D.
Вы собираете проект в WebGL сборку?
0
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
31.01.2018, 12:08  [ТС] #24
Usaga, Хех)
html документ:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta name=viewport content="" initial-scale=1, minimum-scale=1, width=device-width "">
    <title>Error 404 (Not Found)!!1</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a#mod {
            background-color: black;
            color: white;
            align-content: flex-start;
            justify-content: right;
            vertical-align: middle;
            margin: 3px;
            padding: 3px;
        }
        div {
            display: block;
            position: static;
            left: 10px;
            top: 20px;
            width: 100%;
            height: 100px;
            background-color: pink;
        }
    </style>
 
    <script>
        document.title = 'Simple manipulation.22..';
        document.write('<span class=greeting>Hello World!</span>');
 
        function asd() {
            document.title = 'Simple manipulation.33..';
            document.getElementById("mod").innerHTML = "Okey";
 
            return 1+3;
        }
    </script>
</head>
<body>
 
        <a id="mod" href=//www.google.com/ style="align-content: flex-start;">
            <span id=logo aria-label=Google></span>
        </a>
        <div>
            <a>asd</a>
            
        </div>
</body>
 
</html>
<
Когда AngleSharp его распарсит документ станет таким(естественно в оперативной памяти):
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta name=viewport content="" initial-scale=1, minimum-scale=1, width=device-width "">
    <title>Simple manipulation.33..</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a#mod {
            background-color: black;
            color: white;
            align-content: flex-start;
            justify-content: right;
            vertical-align: middle;
            margin: 3px;
            padding: 3px;
        }
        div {
            display: block;
            position: static;
            left: 10px;
            top: 20px;
            width: 100%;
            height: 100px;
            background-color: pink;
        }
    </style>
 
    <script>
        document.title = 'Simple manipulation.22..';
        document.write('<span class=greeting>Hello World!</span>');
 
        function asd() {
            document.title = 'Simple manipulation.33..';
            document.getElementById("mod").innerHTML = "Okey";
 
            return 1+3;
        }
    </script>
</head>
<body>
    <span class=greeting>Hello World!</span>
 
    <a id="mod" href=//www.google.com/ style="align-content: flex-start;">
        Okey
    </a>
    <div>
        <a>asd</a>
        
    </div>
    
    
</body>
 
</html>
Далее.
Делаю обход DOM, и имею доступ на каждом элементе к его CSS свойствам. Например по ссылке с id = "mod" его свойства CSS:
CSS
1
2
3
4
5
6
7
background-color: black;
            color: white;
            align-content: flex-start;
            justify-content: right;
            vertical-align: middle;
            margin: 3px;
            padding: 3px;
Ничего не даст? Забавно)

Добавлено через 11 секунд
8Observer8, нет
0
Usaga
Эксперт .NET
3672 / 2968 / 542
Регистрация: 21.01.2016
Сообщений: 11,748
Завершенные тесты: 2
31.01.2018, 12:10 #25
Цитата Сообщение от NovaEiz Посмотреть сообщение
Ничего не даст? Забавно)
Да, ничего не даст. Чтобы визуализировать документ, вам нужно будет знать о DOM всё: расположение каждого элемента, его размеры, его родителя и т.д.

AngleSharp будет в этом только мешаться.

Но я настаивать не собираюсь) Если вы не понимаете, что я имею в виду, то ладно.
0
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
31.01.2018, 12:17  [ТС] #26
Цитата Сообщение от Usaga Посмотреть сообщение
знать о DOM всё: расположение каждого элемента, его размеры, его родителя и т.д.
Как раз это и дает AngleSharp...

Добавлено через 3 минуты
Usaga, CSS свойства это описание элемента относительно его родителя, кем бы он не был. Я ни раз написал что имею доступ к CSS свойствам. А это и есть всё что надо для визуализации.
0
Usaga
Эксперт .NET
3672 / 2968 / 542
Регистрация: 21.01.2016
Сообщений: 11,748
Завершенные тесты: 2
31.01.2018, 12:20 #27
NovaEiz, но он не даст вам доступа к самому дереву. Т.е. вы может запросами искать нужные элементы, но у вас не будет удобного способа обхода и перебора элементов всего дерева. А это вам нужно для визуализации. Получается, что вы будете приседать вокруг этой библиотечки, чтобы получать от неё то, что вам самому будет проще построить. Кстати, и манипулировать DOM-ом вручную будет напорядки проще. Ведь сейчас вам для этого JS нужно использовать, вместо того, чтобы просто пару ссылок местами поменять. Не находите, что у вас всё сложнее, чем надо?)

Добавлено через 1 минуту
Цитата Сообщение от NovaEiz Посмотреть сообщение
CSS свойства это описание элемента относительно его родителя, кем бы он не был.
Стили корретируют представление элемента, но не заменяют его положение в DOM.

Добавлено через 1 минуту
NovaEiz, я так понимаю, что единственный способ понять несостоятельность подхода для решения вашей задачи - попытаться, всё-таки, реализовать как-нибудь визуализацию)
0
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
31.01.2018, 12:21  [ТС] #28
Usaga,
Цитата Сообщение от NovaEiz Посмотреть сообщение
Делаю обход DOM, и им
опять же не раз повторял об этом, видимо, вам сложно осознать, что есть готовые решения для этого.

Действия:
- получаю дочерние элементы у Body
- получаю дочерние элементы у дочерних элементов
- и так далее.
0
Usaga
Эксперт .NET
3672 / 2968 / 542
Регистрация: 21.01.2016
Сообщений: 11,748
Завершенные тесты: 2
31.01.2018, 12:23 #29
NovaEiz, это и называется "обход DOM" - обход дерева. И готовые решения есть в виде описания алгоритма обхода. Только все они продразумевают наличие этого DOM на руках.
0
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
31.01.2018, 12:37  [ТС] #30
Usaga, только мне не нужно парсить HTML Документ, это делает библиотека. Я через объекты имею доступ ко всему что есть на странице.
0
sau
1761 / 1485 / 227
Регистрация: 22.07.2011
Сообщений: 5,625
Завершенные тесты: 1
31.01.2018, 13:24 #31
Есть еще такая штука , как XAML , по сути очень близкая к HTML разметка , и для него не нужно велосипедить , для того же Unity есть NoesisGUI с поддержкой xaml

П.С Рендерниг с учетом HTML + CSS + JavaScript = очень сложная связка , Вам придется учесть миллион особенностей и различных способов задать одну и ту же визуализацию. Браузеры , которые оттачиваются годами , и те допускают ошибки в рендеринге.
1
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
31.01.2018, 14:28  [ТС] #32
sau, для Unity3D есть несколько плагинов визуализации HTML, но часть из них уже не поддерживается. А большинство просто убогие.

Самая лучшая PowerUI, имеет один недостаток - нет поддержки уже года так 4. Это значит что последние фичи, которые я использую в браузере, не реализованы. А это значит что я одной и той же технологией должен кодить по разному в разных проектах. Вот мне этого совершенно не хочется. Лучше в таком случае без HTML игру делать, чем с HTML но отличным от браузера.

Добавлено через 3 минуты
sau, дабы сильно облегчить кодинг визуализации, можно использовать только Flexbox. Это, как я считаю, самый идеальный вариант, который работает отлично везде. Так что не надо реализовывать миллионы вариантов)
На нём можно построить всё.
0
sau
1761 / 1485 / 227
Регистрация: 22.07.2011
Сообщений: 5,625
Завершенные тесты: 1
31.01.2018, 14:49 #33
NovaEiz, ну я с Вами спорить не буду , пробуйте ) , если что , Вас предупреждали.
П.С Просто посмотрите какой нибудь css документ и подумайте как все эти правила Вы будете учитывать , да и в самом dom есть куча нюансов при взаимодействии разных типов элементов и их позиционировании , модель построенная с помощью anglesharp тут не шибко поможет - нужно еще правильно ее отрисовать , а для этого придется штудировать кучу спецификаций.
Возможно , проще будет взять за основу опенсурс браузер и переписать алгоритм его рендер движка под Unity.

В общем , если получится сделать качественный html рендер под Unity , без всяких условностей , то это фактически отдельный коммерческий проект выйдет , там и до собственного браузера уже не далеко ).
0
Usaga
Эксперт .NET
3672 / 2968 / 542
Регистрация: 21.01.2016
Сообщений: 11,748
Завершенные тесты: 2
31.01.2018, 18:08 #34
NovaEiz, ладно, я больше не хочу спорить) Просто попробуйте задуманное. Попробуйте, для начала, сделать "тупой" рендеринг, без поддержки стилей. Это более обозримая по объёму работа. Там станет видно что и как.

Добавлено через 3 минуты
По запросу "C# html renderer" выдало такой проектик. Может вы в нём подчерпнёте знаний.

Добавлено через 1 минуту
Обратите внимание, что в собранном виде, с поддержкой только HTML4.01 и CSS2 оно занимает 300Кб. Представьте объём работы)
0
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
31.01.2018, 21:03  [ТС] #35
Цитата Сообщение от Usaga Посмотреть сообщение
"тупой" рендеринг
Тупой рендеринг я сделал в тот же день когда создал тему)
Относительное позиционирование, размеры в % и px, и прямоугольный цвет элемента)
Цитата Сообщение от Usaga Посмотреть сообщение
выдало такой проектик.
Видел я его. Что толку если он на WinForms построен. Разбираться в чужом коде чтобы что-то изменить, это одно. А разбираться чтобы переписать также, это уже совсем адская жуть, тупая рутина.
0
Usaga
Эксперт .NET
3672 / 2968 / 542
Регистрация: 21.01.2016
Сообщений: 11,748
Завершенные тесты: 2
01.02.2018, 05:59 #36
NovaEiz, какая разница на чём он построен? Логика работы-то общая. Вам только заменить работу с WinForms на Unity и всё. Или вы как себе представляли "готовую реализацию"? Чтобы сразу на Unity было?
0
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
01.02.2018, 07:07  [ТС] #37
Usaga,
Цитата Сообщение от NovaEiz Посмотреть сообщение
Разбираться в чужом коде чтобы что-то изменить, это одно. А разбираться чтобы переписать также, это уже совсем адская жуть, тупая рутина.
0
Usaga
Эксперт .NET
3672 / 2968 / 542
Регистрация: 21.01.2016
Сообщений: 11,748
Завершенные тесты: 2
01.02.2018, 07:13 #38
NovaEiz, ну так чего вам надо, тогда? Готовую библиотечку, что в два щелчка вам в Unity HTML отрисует?
0
NovaEiz
11 / 11 / 5
Регистрация: 27.06.2017
Сообщений: 214
01.02.2018, 08:01  [ТС] #39
Цитата Сообщение от Usaga Посмотреть сообщение
ну так чего вам надо, тогда?
Я просто отвечаю на ваши сообщения. Мне уже все ясно)
0
Usaga
Эксперт .NET
3672 / 2968 / 542
Регистрация: 21.01.2016
Сообщений: 11,748
Завершенные тесты: 2
01.02.2018, 08:07 #40
NovaEiz, ok)
1
01.02.2018, 08:07
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.02.2018, 08:07
Привет! Вот еще темы с решениями:

Разложение звука на спектр. Частотная визуализация
Друзья, доброго времени суток. У меня есть плеер под Win8. Хочу к нему...

Bass.Net.dll - Визуализация спектра
Помогите ламеру справиться с задачей ) есть необходимость сделать визуализацию...

Моделирование и визуализация трехмерного объекта сложной формы
Как это реализовать на C#? Курсовая работа заключается в моделировании и...

Парс html строки с использованием Html Agility Pack
Есть строка: &lt;ul&gt;&lt;li&gt;&lt;a href=&quot;./pm.php?action=inbox&quot; title=&quot;Всего сообщений:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
40
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru