Рубрика «svg»

Как правильно вставлять SVG - 1

Как правильно вставлять SVG?

Читать полностью »

Под сим поэтическим названием скрывается идея удобного представления древовидных структур данных и практической его реализации. Может, что-то подобное где-то уже было, но я не встречал; и тут мой приятель Эдуард Аверюшкин предложил интересную идею, которую я попытался развить.

Классическое представление дерева сущностей (например, меню разделов сайта, главное меню в программах) довольно удобно и наглядно в случае «высокого» дерева с не слишком глубокой вложенностью элементов. Будь то выпадающее меню (как главное строковое меню программ) или раскрывающееся (как в левой панели популярных файловых менеджеров), всё довольно удобно и наглядно. А что если дерево низкое и развесистое? У каждого родителя детей мало, зато вложенность достигает, скажем, 10. Или 50…

Низкие ветвистые деревья

Читать полностью »

Введение

Некоторое время назад я дома решил посмотреть, что нового появилось на тему космоса за последнее время. За этим делом меня застал мой 7 летний сын, проявив большой интерес к этой тематике. Пока я ломал голову, как просто и доходчиво, а также в каком именно объеме дать ребенку информацию по космосу, я наткнулся на статью, где написано, что принято решение вернуть в российские школы предмет «Астрономия» в 2017-2018 учебном году, но только с 11 класса. Это и стало тем событием, которое подвигло меня написать эту статью, чтобы помочь ознакомить с азами астрономии детей до 11 класса.

По сути 7 летний ребенок является представителем определенной выборки пользователей, которая либо интересуется астрономией уже сейчас, либо заинтересуется ей в будущем. Именно для них, а также для тех, кто будет давать знания о звездах я предлагаю попробовать приведенных ниже способ. Основной идей является генерация Галактики с использованием реальных данных (эту часть я беру на себя), и последующее использование результата генерации либо в играх, либо в качестве учебного пособия теми, кто хотел бы сделать изучение астрономии более интересным…

Генерация Галактики и обучение начальным знаниям астрономии - 1
Читать полностью »

image

Вводная часть

Аркадная js игра. Прототипом послужили так называемые «Гоночки в клетку»(в каком-то детском журнале видел). Смысл в том, что на тетрадном листе рисуется трасса и игроки ходят по клеткам. За один ход можно увеличить скорость на один или уменьшить. Если «врезаешься» в стену, то продолжаешь от этого места с единичной скоростью.
Читать полностью »

GraphicsJS – графическая JavaScript библиотека - 1

Перевод статьи. Англоязычный оригинал опубликован на SitePoint – "Introducing GraphicsJS, a Powerful Lightweight Graphics Library".

HTML5 – основа основ современного веба. И сегодня, когда встает задача создать интерактивную графику, выбор чаще всего падает на такие технологии, как SVG и Canvas. Flash позабыт, Silverlight – редкая птица, обитающая на задворках веба, и почти никто не помнит сторонние ActiveX и Java-плагины.

Плюсы и минусы SVG и Canvas хорошо известны – в целом все сводится к тому, что для создания интерактивных элементов и работы с ними больше подходит SVG. Это векторный формат, основанный на XML, и, когда изображение загружается на страницу с использованием тега <svg>, каждый его внутренний элемент становится доступен в SVG DOM.

В данной статье я хочу рассказать о GraphicsJS. Это мощная графическая JavaScript-библиотека с открытым исходным кодом, основанная на технологии SVG (VML для старых версий IE). Начну с краткого введения в основы GraphicsJS, а затем проиллюстрирую возможности библиотеки двумя небольшими, но наглядными примерами. Первый из них посвящен изобразительному искусству. Второй покажет, как менее чем за 50 строк кода сделать простую арт-игру в жанре таймкиллера.Читать полностью »

Поддержка SVG и режим CompactOverlay в приложениях UWP - 1


Хочу продемонстрировать несколько простых, но интересных нововведений, которые принесло с собой для разработчиков обновление Creators Update.
На данный момент, для того, чтобы скачать и установить Creators Update SDK необходимо быть Windows инсайдером. Сейчас доступно SDK сборки под номером 15063. Найти его можно на страничке разработчиков сайта Windows Insider.
Кроме обновленной 10-ки и Creators Update SDK вам понадобится еще и Visual Studio 2017.
Читать полностью »

Пару дней назад вышла полностью обновлённая версия svg-sprite-loader — webpack лоадера для создания SVG спрайтов. Внутри я подробно рассскажу о том как он работает и чем облегчает жизнь разработчику.

Читать полностью »

Сегодня мы поговорим об отображении мнемосхем технологических объектов в браузере посредством таких технологий как SVG, JavaScript и т.д.

Опишем, что мы хотим получить:

  • Мнемосхема открывается в браузере. Графика – SVG.
  • Вверху мнемосхемы кнопки переходов на другие мнемосхемы.
  • Данные обновляются раз в секунду.
  • По клику на изображение выключателя появляется окно, из которого его можно включить или отключить.

SCADA-система (точнее её серверная часть) позволяет добавлять пользовательские html-страницы. Я не буду вручную набирать код страницы, а нарисую простую схему в редакторе, потом покажу, что получилось и как это работает.
Читать полностью »

Введение

Эта статья о том, как набросать простенькую схемку из десятка элементов, когда под рукой нет ни Altium'а, ни Orcad'a, ни даже Visio, а Draw.io внезапно сломался.

Это совсем не сложно: современные браузеры поддерживают язык разметки SVG, с помощью которого в обычном текстовом редакторе можно легко и быстро нарисовать небольшую схему типа:

Sketch of a low-power step-up converter

Читать полностью »

Визуализация данных стала неотъемлемой частью жизни практически каждого веб-разработчика. Если построение графиков, диаграмм, карт и дашбордов до сих пор никогда не были вашей головной болью, просто немного подождите: наверняка и вы скоро вступите в наш «клуб».

Данная статья дает общее, но вовлеченное представление о восьми самых интересных, на мой взгляд, JavaScript-библиотеках для построения интерактивных геовизуализаций. В целом, таких решений сейчас много, и выбрать оптимальное под тот или иной конкретный проект – задача порой непростая как минимум по времени. Этой публикацией я попытаюсь хотя бы немного упростить жизнь тем, кто только начинает разбираться в данной теме. Кстати, это слегка модифицированный перевод моей недавней статьи на Onextrapixel (оригинал на английском).

Заглавная картинка: визуализация данных с помощью интерактивных картЧитать полностью »