Как сделать меню в консоли c
Обновлено: 05.07.2024
Итак, вот мой код (есть проблемы с именованием и инкапсуляцией, но это всего лишь быстрый прототип, потраченный ~30 минут):
Идея заключается в том, что при нажатии кнопки пункт меню подсвечивается. Когда кто-то подходит к последнему пункту меню, он не может нажать DownArrow опять же, то же самое для первого пункта и UpArrow ,
Я полностью застрял с этим.
4 ответа
Я не совсем уверен.. Может быть, это может помочь вам начать.
Нет, вы не можете просто сделать это, потому что консоль Win32 не поддерживает эти методы. Однако вы можете использовать GDI для рисования в окне консоли.
Проблема в том, что консоль не может обрабатывать события мыши. Как вы хотите нажать на меню? Вам придется все делать с ключами. Доступные варианты: либо определить нажатия клавиш (например, Ctrl-F или Alt-F для "FirstEntry"), чтобы активировать пункты меню, либо реализовать навигацию с помощью клавиш со стрелками, что позволяет перемещаться по полям (кнопкам или полям меню). и текстовые поля). Это не встроено, поэтому вам придется делать все в коде. Вам придется использовать SetCursorPosition и ReadKey методы консоли для достижения этой цели. Я помню, что делал это на терминале VT100 много лет назад.
Мы уже умеем ловить наведение курсора на спрайт, рисовать один спрайт поверх другого и многое другое. Применим это всё в создании меню.
До вызова функции int main() у нас будет описано меню.
Для меню нужны картинки, вот мои (они прозрачные и их плохо видно, поэтому ниже ссылка на архив):
Теперь выше int main() пилим ф-цию меню (у меня она в отдельном .h файле, лучше впилите так же и подключите его в main.cpp)
Sprite menu1 ( menuTexture1 ) , menu2 ( menuTexture2 ) , menu3 ( menuTexture3 ) , about ( aboutTexture ) , menuBg ( menuBackground ) ;
Итак сначала как всегда создали текстуры, загрузили картинки, залили спрайты, дали им позицию. Затем пока наше меню активно (изначально оно активно bool isMenu=1), то рисуем элементы этого меню (при этом если наводим на них, то окрашиваем в синий цвет). Если нажали клавишу esc, то происходит выход из этого цикла и соответственно выход из функции меню, и затем просто будет идти наш процесс игры.
Меню программы — одна из важнейших частей, составляющих ее. С помощью MFC вполне реально реализовать его в своей программе, что сейчас мы и сделаем. Основное приложение не будет сложным, его задача подсчитать, сколько символов в веденной строке.
Добавим переменную m_S типа CString для поля Edit Control. Она нужна для получения доступа к полю, в которое будет вводиться строка.
void CSymbolsDlg :: OnChangeSymbEdit ( )
<
// TODO: Если это элемент управления RICHEDIT, то элемент управления не будет
// send this notification unless you override the CDialogEx::OnInitDialog()
// function and call CRichEditCtrl().SetEventMask()
// with the ENM_CHANGE flag ORed into the mask.
UpdateData ( TRUE ) ;
// TODO: Добавьте код элемента управления
>
После выполнения этого оператора переменной m_S будет присвоено значение содержимого окна редактирования.
Изменим код функции, добавив следующий оператор:
Оператор CAboutDlg dlg создает объект класса CAboutDlg именованный dlg, а dlg.DoModal() выводит диалоговую панель.
Программа создана! Файлы ее исходного кода Вы можете скачать по ссылке.
Сплошные ошибки. Использую Visual Studio 2013.
Дальше ещё более неприятная неожиданность:
Даже если не брать непонятные ошибки(всё было сделано именно как у вас), вроде:
Дружище Дмитрий, не судите строго. Всякое бывает.
У меня косяк тоже возник (хотя в 9-й сверху картинке функция On32771() процессируется верно), но, согласитесь, это даёт нам великолепную возможность пошевелить сереньким в черепушке.
Я, как и Вы,— новичок и решил заняться программированием на С++, потому что я достиг значительных высот в биотеке, но высококлассный спец со степенью и свободным английским уже 4-й год не может найти работу. Печальные реалии.
Итак, как я пофиксил косяк (я юзаю VS2012). Один из моих коньков — внимание и наблюдательность.
m_S в теле функции On32771() подчёркнуто. Значит её объявление в class CSymbolsDlg в хэдере CSymbolsDlg.h не видится самой функцией.
Проверяю: void CAboutDlg::On32771(). Ага! Вот он и косяк! Класс совсем другой — CAboutDlg!
Через Class wizard (Мастер классов) сносим функцию On32771(), ассоциированную с CAboutDlg, и создаём по образу и подобию такую же функцию с классом CSymbolsDlg в файле SymbolsDlg.cpp.
Чему научился? 1) Стал очень внимательно обращать внимание на архитектонику: Иерархия, состав классов, и т. д. 2) Конвертирование int в String (конвертация, вообще, интересная тема; много косяков именно там).
Спасибо автору.
Live long and prosper, folks!
Поправка: 1) Стал больше обращать вниманиена архитектонику.
А то как Кличко написал.
Консоль разработчика позволяет увидеть внутреннюю структуру любого интернет-ресурса, отследить происходящие на нем события и протестировать правки в реальном времени. Инструмент крайне полезный – отпугнуть может только достаточно навороченный интерфейс, к тому же на английском. Исправляем это!
Разберем основные возможности консоли разработчика, которыми может воспользоваться маркетолог, и научимся ими пользоваться.
Первый взгляд и инструментарий консоли
Прямое предназначение Development Console – это интерактивная работа с содержанием сайта прямо в браузере. У такого взаимодействия несколько очевидных плюсов:
Эти преимущества делают консоль разработчика полезнейшим инструментом не только для программиста. Верстальщики, тестировщики, специалисты по базам данных, дизайнеры и руководители проектов всего мира пользуются ей для решения повседневных задач. Мы же рассмотрим инструмент с точки зрения полезности для маркетолога.
Маркетологи видят сайт прежде всего как канал продаж. А чтобы он продавал лучше, требуется решать вопросы юзабилити, удобства, скорости взаимодействия, приятного дизайна – к продающим качествам можно отнести очень много параметров. Чтобы оптимизировать содержание ресурса, требуется оценить его и правильно поставить задачу разработчику. Вот здесь-то и пригодится консоль разработчика.
Чаще всего вы будете использовать консоль для получения информации о конкретном элементе сайта. Наведите на него и нажмите правую кнопку мыши. Вы увидите пункт меню, в котором сможете вызвать консоль разработчика:
Мы будем рассматривать консоль в браузере Google Chrome, но в других она отличается несильно. Из меню видно, что также вы сможете осуществить запуск через сочетание клавиш Ctrl + Shift + C. Еще один вариант – нажать f12. По умолчанию интерфейс открывается в правой части окна:
Поначалу кажется, что в консоли очень много элементов и панелей, в которых разобраться будет чрезвычайно сложно. К тому же интерфейс не русифицирован. На самом же деле информация структурирована, и потребуется совсем немного времени, чтобы запомнить, где и что находится. Тем более что маркетологу не обязательно знать все детали консоли разработчика.
В панели Styles можно увидеть, какие свойства настроены для выбранного нами элемента, чтобы он отображался именно так, а не иначе. Вы сможете редактировать их прямо через консоль разработчика, наблюдая изменения в браузере. Но об этом поговорим чуть ниже.
Поскольку у ссылки есть параметр HREF, указывающий напрямую адрес страницы, то консоль уже сослужила нам хорошую службу – мы можем поставить на отслеживание в аналитике клики на соответствующий элемент с таким адресом в href.
В блоке Console при этом мы видим ситуацию с событиями, происходящими при нашем взаимодействии с сайтом. В частности, можно заметить, что счетчик Google Analytics пытается считать наши данные, но блокируется встроенным в браузер Adblocker’ом.
Элементы консоли разработчика и их назначение
Чтобы избавиться от ощущения сложности и громоздкости консоли, познакомимся отдельно с каждым ее элементом. В дальнейшем эта информация пригодится нам, чтобы быстрее переключаться с одного инструмента на другой.
Вы можете изменять расположение блоков на панели, корректировать их размер и даже располагать консоль в других частях окна. Чтобы изменить размер блока, просто наведите курсор на границу между блоками и потяните в нужную сторону. Для смены представления нажмите на значок из трех вертикальных точек в правой верхней части:
В открывшемся меню обратите внимание на значки в поле Dock side. С их помощью можно разместить консоль разработчика в левой, нижней или правой (как сейчас) части окна, и даже сделать ее отдельным окном поверх текущего.
Собственно, интерфейс состоит из основной панели (на скриншоте выше – блок Elements), панели свойств (на скриншоте – блок Styles) и консоли вывода Console. Первым делом рассмотрим элементы основной панели.
Можно увидеть, что сайт состоит из классических , и скриптов. Информации здесь гораздо больше, чем вы можете увидеть при открытии кода страницы через CTRL + U. Дело в том, что движок сайта подгружает многие элементы автоматически, а открываемый код содержит лишь базовый HTML-документ.
Ориентироваться в содержании несложно: фиолетовым цветом подсвечиваются объявленные элементы, коричневым – их свойства и параметры, синим – содержание этих параметров, зеленым – комментарии разработчика. Ссылки обозначаются подчеркиванием.
Каждый элемент можно раскрыть, нажимая на серый треугольник слева от него. Так вы проваливаетесь внутрь дерева подэлементов, каждый из которых также может быть развернут.
Панель Elements – самый нужный для маркетолога раздел во всей консоли. В следующем разделе статьи вы найдете простые, но полезные примеры задач, которые в ней можно решить.
При загрузке сайта здесь будут отображаться различные события, в том числе и ошибки. Регистрируя их вручную или автоматически, вы можете улучшать работоспособность сайта и отдельных его элементов.
Кроме того, в консоли можно вводить собственные команды, наблюдая за тем, как будет реагировать сайт или его модули. Чаще всего маркетологи пользуются этим, чтобы отправлять события в счетчики аналитики вручную, но об этом чуть позже.
В первую очередь служит для отображения связи сайта с внешними и внутренними ресурсами. Чаще всего используется именно разработчиками, но мы можем увидеть некоторую полезную информацию и для себя. В частности, здесь видна связь сайта со счетчиками аналитики, виджетами соцсетей, различными API.
Здесь, исходя из названия, можно ознакомиться с тем, как различные элементы сайта и подключаемые модули влияют на загрузки сетевого соединения. Консоль ведет запись сетевого журнала, из которого вы сможете узнать, какие именно части вашего веб-ресурса стоит оптимизировать.
Включает запись полного взаимодействия пользователя с сайтом. Она нужна, чтобы оценить время, затрачиваемое на работу со всеми составляющими ресурса. Начните запись по нажатию на соответствующую кнопку, затем походите по сайту и выполните интересующие вас действия. Остановите запись и просмотрите ее содержание:
Изучение записи позволит вам увидеть работу абсолютно всего на сайте: что и какое время грузится, сколько времени и ресурсов затрачивает. Сравнивая полученные значения с оптимальными, вы можете давать задания разработчикам оптимизировать тот или иной кусок сайта.
Списки могут быть отсортированы по любому параметру, что позволяет вам найти ключевые для оптимизации сайта объекты. Сюда включаются и внутренние, и внешние, и системные ресурсы.
Вопреки названию, работает не только с интернет-приложениями. С ее помощью вы можете исследовать загруженные элементы, такие как базы данных, куки или кэш.
Ранее называлась Audits, и по-прежнему позволяет производить аудиты качества организации сайта. Консоль производит автоматический анализ сайта в представлении как для ПК, так и для мобильных, а затем дает рекомендации относительно улучшения отдельных моментов.
Инструмент делает по сути то же самое, что и отдельный сервис анализа сайтов от Google. Чтобы не искать каждый внутренний ресурс на сайте вручную, можно воспользоваться этим автоматическим анализом и получить список наиболее важных из них с показателями эффективности и нагрузки.
Ну а мы перейдем к элементам панели свойств и параметров.
Чтобы придать элементам сайта уникальный внешний вид, используются файлы стилей CSS. Для связи со стилями применяются классы, причем на дочерние элементы сайта в дереве могут быть применены классы родительских элементов. Чтобы отразить структуру применения стилей, и работает вкладка Styles. Кроме собственно содержания соответствующих файлов CSS для элементов, она показывает стиль наглядно:
Показывает полную модель для выделенного элемента, вычисленную из всех стилей. Здесь дублируется визуальное блочное представление с предыдущей вкладки, а все стили перечислены списком. Такое представление в некоторых случаях будет удобнее для работы со стилями.
Отображает имеющиеся на сайте элементы типа CSS Grid (представление в виде двухмерной сетки). Поскольку такие разметки используются нечасто, опустим подробное описание вкладки.
В основном нужна разработчику, поскольку позволяет установить на элемент точку остановки (breakpoint), которая останавливает срабатывание кода сайта. Например, вы сможете узнать, как будет выглядеть сайт после изменения определенного элемента, если вам кажется, что его работа вызывает общие проблемы работоспособности.
Будьте аккуратны: если вы зададите в консоли точку остановки, то на вашем устройстве она будет работать даже после перезагрузки сайта, что может привести к неправильному его отображению. Удалите ее, либо закройте вкладку сайта и откройте заново.
Показывает все свойства выбранного элемента. Нас как маркетологов эти свойства в полной мере интересовать не будут.
Выводит дерево уровней доступа для выбранного элемента. Эта информация также интересна сугубо разработчикам, поэтому мы затрагивать вкладку более не будем.
Вместо этого перейдем к демонстрации рабочих способов взаимодействия с сайтом с помощью консоли разработчика.
Лайфхаки для интернет-маркетолога по использованию консоли разработчика
В этом разделе мы рассмотрим простые, но полезные способы применения консоли разработчика.
Одна из самых полезных для маркетолога возможностей консоли разработчика – это редактирование сайта вручную с автоматическим отображением изменений. Вы редактируете сайт исключительно для себя, никакие правки не применятся к нему в целом, но вы можете запомнить произведенные изменения и внести их уже на сервере. Всё очень просто: любые элементы и параметры в консоли могут быть не только просмотрены, но и изменены:
Схожим образом можно играть с любыми элементами, изменяя сайт как вам нравится, чтобы в будущем применить эти изменения для оптимизации и улучшения. К тому же это позволяет быстрее поставить задачу разработчику, дизайнеру или верстальщику. А если вы сами осваиваете HTML, CSS и движки, то консоль разработчика дает неплохое подспорье в их изучении и применении знаний на практике без вреда для сайта. Как только вы перезагрузите его, все изменения пропадут.
Конечно же, можно менять и стили CSS:
Стили напрямую влияют на вид элементов на сайте, поэтому с их помощью можно оптимизировать юзабилити. Если какие-то объекты кажутся вам слишком мелкими, крупными или расположенными не там, где нужно, смело пробуйте другие варианты: может быть, они окажутся лучше и вы примените изменения для всего сайта. Вы также можете добавлять новые объекты в Elements, накладывая на них имеющиеся или собственные стили.
И не забывайте играть со шрифтами и изображениями:
Поиск элементов, шрифтов
Если вы редактируете сайт через CMS, то часто можете столкнуться со сложностями поиска нужных элементов на FTP или в личном кабинете менеджера. Воспользуйтесь консолью, чтобы найти местонахождение элемента, а затем исправьте файл и его содержимое:
В любой части консоли работает сочетание клавиш CTRL + F, позволяющее открыть строку поиска и найти через нее любое содержимое. Чтобы отредактировать внешний вид, потребуется найти файл CSS, он автоматически покажется вам в Styles после того как вы найдете нужное в Elements. А зайдя в Sources, вы сможете увидеть физический файл, в котором располагается нужный вам текст. Это удобно, когда движок сайта разбрасывает информацию по файлам, например, после применения нестандартной дизайн-схемы.
Хотите знать, какие шрифты использует сайт? Ищите по слову font:
Просмотр сайта на мобильном
Хотите быстро увидеть мобильную версию сайта? Легко! Выберите соответствующую иконку в левом верхнем углу консоли разработчика:
Этот инструмент дает прекрасную возможность оценить юзабилити и качество сайта на мобильных устройствах, если у маркетолога есть сомнения относительно этого. Обратите внимание, что на панели сверху есть возможность настроить вывод на конкретной модели смартфона:
Далее в панели показано разрешение, на котором демонстрируется сайт. Регулируется оно моделями устройств. Следующий пункт – масштаб, его можно регулировать.
Наконец, список Throttling дает вам возможность эмулировать качество интернет-соединения на устройстве. No throttling означает, что соединение работает максимально быстро и стабильно. Попробуйте изменить это на нестабильное соединение и посмотрите, как будет вести себя сайт. Если даже в режиме эмуляции он будет загружаться медленно или производить баги, то это повод обратиться к разработчику за оптимизацией.
Поиск и скачивание картинок
Хороший пример – Instagram. Если мы нажмем правой клавишей на открытое в нем изображение, то не увидим возможности его скачать:
Теперь становится понятнее – на самом деле над картинкой еще располагается элемент
, который мы и кликаем, а браузер не понимает, какое именно изображение нам нужно. Зато чуть ниже в консоли мы видим ссылку на изображение:
Это и есть наша картинка. Просто нажмите на ссылку, и изображение откроется в отдельной вкладке. Оттуда вы сможете скачать его, используя правую кнопку мыши.
Когда вы перемещаетесь по элементам на панели Elements, в левой части браузера подсвечиваются области сайта, соответствующие этим элементам. Нам нужно найти объект, содержащий картинку, и после перебора от wrapper к соответствующему
мы наконец находим изображение в бэкграунде. Теперь его нужно сохранить, для чего жмем правой кнопкой на ссылку в Styles, убеждаемся в правильности выбора и открываем изображение в новой вкладке:
Из новой вкладки мы скачиваем изображение стандартным образом либо копируем его сразу в редактор картинок.
Работа с куки через консоль
Продвинутый уровень. Поиск элементов и отслеживание событий
В этом процессе консоль разработчика пригодится как инструмент поиска нужных подэлементов, чтобы, например, следить за кликом не только на отдельную часть кнопки. Рассмотрим подробнее:
Многие кнопки состоят из большого количества вложенных элементов, поэтому, если вы не планируете привлекать разработчика для настройки событий на каждую новую кнопку, вам придется изучить и использовать консоль разработчика. С ее помощью можно выбрать нужный вам элемент на сайте, разложить его на дочерние и поставить каждый на отслеживание в GTM.
Вторая частая причина, по которой вам понадобится панель элементов в консоли разработчика – это тестирование юзабилити сайта. Например, вы считаете важным некий блок на сайте, который должен быть востребован пользователями. В метриках вы видите, что по какой-то причине этот блок не пользуется спросом. Открывайте его в консоли разработчика и исследуйте свойства:
В случае выше можно увидеть, что карточка в каталоге является двойным элементом – над ссылкой в теге располагается
с собственным классом, а ссылка в обеих частях элемента одна и та же. Но может случиться и так, что при изменении в CMS ссылка в
В ней также существует удобный способ поиска элементов в дереве:
Нажмите на указанную иконку в левом верхнем углу консоли разработчика. Включится режим автопоиска, в котором вы просто водите курсором по элементам сайта, а консоль автоматически выделяет их в дереве Elements. Кроме того, в части сайта у элементов появляются всплывающие формы, где можно увидеть класс объекта и его основные свойства (в нашем случае класс = fb). Нажмите на элемент один раз левой кнопкой мыши и автопоиск прекратится, а содержимое будет раскрыто в Elements. Так вы сможете работать сразу с нужной частичкой сайта.
Также консоль разработчика в браузере пригодится вам для поиска счетчиков аналитики на сайте. Иногда с ними возникают проблемы, например, остались куски старого счетчика или новый загружен не полностью. Воспользуйтесь следующим алгоритмом для поиска:
Читайте также: