10 креативных индикаторов загрузки | UXPUB
Все хотят сделать это, когда загрузка занимает слишком много времени.Видимость системного статуса является одним из важнейших принципов дизайна пользовательского интерфейса.
Хороший дизайн взаимодействия обеспечивает обратную связь
Хотя мгновенный отклик приложения или веб-сайта это замечательно, но бывают случаи, когда ваш продукт не сможет соответствовать рекомендациям по скорости. Медленный ответ может быть вызван плохим подключением к Интернету или сама операция может занимать много времени. В таких случаях разработчики должны заверить пользователей, что приложение работает над их запросом, и что фактический прогресс уже сделан.
Анимированный индикатор прогресса – это наиболее распространенная форма предоставления пользователям статуса системы, когда что-то происходит или загружается. Но большинство таких индикаторов выглядят скучно, потому что создатели продукта используют индикаторы загрузки по умолчанию (независимо от того, под какую систему они создают предложение).
Бесконечный спиннер загрузки уведомляет пользователей о загрузке контента. Каждое второе приложение, представленное на рынке, использует его для информирования пользователей о времени загрузки.
Если вы не можете сократить ожидание, вы должны, по крайней мере, попытаться сделать ожидание более приятным для ваших пользователей.
Креативные индикаторы прогресса могут уменьшить воспринимаемое пользователем время. Если приложение во время ожидания дает пользователям что-то интересное для просмотра, это заставляет пользователей уделять меньше внимания самому ожиданию. Таким образом, чтобы люди не скучали, ожидая чего-то, дизайнер может предложить им отвлечение.
В этой статье я хочу изучить десять интересных концепций индикаторов загрузки.
1. Интервью загружается…
ueno. использует время ожидания, чтобы познакомить посетителей со своей командой.
2. Загрузка рождественских подарков
Выглядит как будто, приложение загружает подарки. Chuan²
3. Очаровательная кошка
Вместо того, чтобы использовать системный спиннер загрузки, дизайнеры могут использовать что-то, что создает сильные положительные (надеюсь) эмоции. Thomas Bogner
4. Двойная спираль
Эта анимация загрузки создает эффект 3D-преобразований. Drew Endly
5. Поиск лучших рейсов
Как только пользователи выбирают исходный и конечный пункт полета и нажимают кнопку «Поиск», анимация показывает полет от исходной точки до места назначения. Mark
6. Сохранение данных в облаке
Этот индикатор загрузки основан на метафоре загрузки файла в облако. Это почти буквально вертикальная полоса загрузки. Ben Mettler
7. Оживите процесс загрузки
Эта анимация делает процесс загрузки таким захватывающим, как наблюдение за тем, как кто-то идет по натянутому канату. xjw
8. Прекрасная анимация для экрана-заставки
Красивый дизайн заставки в сочетании с прекрасной анимацией может дать разработчикам приложений несколько лишних секунд, чтобы загрузить все необходимые данные. Behance
9. Потяните, чтобы обновить анимацию
Эта анимация, которую нужно потянуть, чтобы обновить страницу, имеет четкую функциональную цель. Она соединяет два состояния – до и после обновления. Ramotion
10. Анимация загрузки файлов
Эта анимация – отличный пример плавных переходов в состояние. Галочка в конце уведомляет пользователей о том, что операция прошла успешно. Eddy Gann
Вывод
Хотя все упомянутые выше эффекты могут улучшить пользовательский опыт, лучше не злоупотреблять ими. То, что выглядит забавно и восхитительно в первый раз, может показаться скучным и предсказуемым на 100-й раз. Также креативный эффект загрузки не может решить проблему медленной загрузки. Когда пользователи снова и снова видят один и тот же эффект загрузки, вскоре они начнут обвинять приложение в длительности загрузки.
SVG индикатор загрузки на Vue.js / Habr
Привет! Учусь на front-end, и параллельно, в учебном проекте, разрабатываю SPA на Vue.js для back-end, который собирает данные от поискового бота. Бот нарабатывает от 0 до 500 записей, и я должен их: загрузить, отсортировать по заданным критериям, показать в таблице.
Ни back-end ни бот, сортировать данные не умеют, поэтому мне приходятся загружать все данные и обрабатывать их на стороне браузера. Сортировка происходит очень быстро, а вот скорость загрузки, зависит о коннекта, и указанные 500 записей могут загружаться от 10 до 40 секунд.
Поначалу, при загрузке, я показывал спинер, недостаток которого — пользователь не знает когда закончится загрузка. В моём случае заранее известно количество записей которые отыскал бот, поэтому можно показать сколько % записей загружено.
Чтобы скрасить пользователю ожидание, я решил показать ему процесс загрузки:
- цифрами — сколько % записей уже загружено
- графиком — время загрузки каждой записи
- заполнением — % загрузки. Так как график по мере загрузки заполняет прямоугольный блок, видно, какую часть блока осталось заполнить
Вот анимация результата, к которому я стремился и получил:
… по-моему, получилось забавно.
В статье я покажу как продвигался к результату шаг за шагом. Графики функций в браузере я до селе не рисовал, поэтому разработка индикатора принесла мне простые, но новые знания о применении SVG и Vue.
Выбор способа отрисовки Canvas или SVG
Canvas я применял в простой игре-змейке на JS, а SVG, в одном проекте, я просто вставлял на страницу в теге object и заметил, что при масштабировании, SVG-картинки всегда сохраняли чёткость (на то он и вектор) а у Canvas наблюдалось размытие изображения. На основании этого наблюдения, я решил рисовать график с помощью SVG, ведь надо когда-то начинать.
План работ
С учётом выбранного фреймворка Vue, и выбранного способа формирования изображения с помощью SVG, составил себе следующий план работ:
- Поиск и изучение информации по теме применения SVG совместно с Vue
- Эксперименты с формированием и изменением SVG в контексте Vue
- Создание прототипа индикатора загрузки
- Выделение индикатора загрузки в отдельный Vue-компонент
- Применение компонента в SPA
Приступаю к реализации
- Создание заготовки проекта
У меня установлен vue cli. Для создания нового проекта, в командной строке ввожу vue create loadprogresser, настройки проекта выбираю default создаётся новый vue-проект с названием loadprogresser, дальше убираю из него лишнее:
Поиск и изучение информации по теме применения SVG совместно с Vue
Отличный сайт с полезной инфой по HTML, CSS и SVG css.yoksel.ru Хороший пример с SVG размещён в документации самого Vue SVG-график Example и по такой ссылочке. На основе этих материалов родился минимальный шаблон компонента с SVG с которого я и стартую:
<template> <div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" > //svg заполняет весь контейнер //сюда буду вставлять svg-теги </svg> </div> </template>Эксперименты с формированием и изменением SVG в контексте Vue
SVG Прямоугольник rect
rect — прямоугольник, самая простая фигура. Создаю svg с размерами 100х100px, и рисую прямоугольник rect с начальными координатами 25:25 и размерами 50х50 px, по умолчанию цвет заливки чёрный (нет стилизации)
SVG стилизация и псевдокласс hover:
Попробую стилизовать прямоугольник rect в svg. Для этого к svg добавляю класс «sample», в секции style vue-файла добавляю стили .sample rect (раскрашиваю прямоугольник rect жёлтым цветом) и .sample rect:hover который стилизует элемент rect при наведении на него курсора мыши:
Исходник<template> <div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x=25 y=25/> </svg> </div> </template> <script> export default { name: 'app' } </script> <style> .sample rect { fill: yellow; stroke: green; stroke-width: 4; transition: all 350ms; } .sample rect:hover { fill: gray; } </style>
Реализация на JSfiddleВывод: svg отлично встраивается в template vue-файла и стилизуется прописанными стилями. Начало положено!
SVG path как основа индикатора
В этом разделе я заменю rect на path,
<path :d="D"/>в атрибут d тега path передам из vue строку D с координатами пути. Связь производится черезv-bind:d="D", что сокращённо записывается как:d="D"Строка D=«M 0 0 0 50 50 50 50 0 Z» рисует три линии с координатами 0:0->0:50->50:50->0:50 и замыкает контур по команде Z, образуя квадрат 50х50px начинающийся из коодинат 0:0. С помощью стиля «path» фигуре придаётся жёлтый цвет заполнения и серая рамка в 1px.
Исходник жёлтого PATH<template> <div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <path :d="D"/> </svg> </div> </template> <script> export default { name: 'app', data(){ return { D:"M 0 0 0 50 50 50 50 0 Z" } } } </script> <style> .path { fill:yellow; stroke:gray; } </style>Создание прототипа индикатора загрузки
В минимальном варианте, я сделал простую диаграмму. В шаблоне вставлен svg-контейнер высотой 100px, шириной 400px, внутри размещён тег path, атрибуту d которого я добавляю сгенерированную строку-путь d из данных vue, которая в свою очередь формируется из массива timePoints куда, каждые 10мс, добавляются одно из 400 (по ширине контейнера)случайное число в диапазоне от 0 до 100. Тут всё просто, в хуке жизненного цикла created, вызывается метод update в котором добавляются новые (случайные) точки в диаграмму через метод addTime, потом метод getSVGTimePoints возвращает строку для передачи в PATH, через setTimeout перезапускается метод update
Подробнее о формировании строки для PATH
Строка для PATH формируется в методе getSVGTimePoints, из массива timePoints который я обрабатываю с помощью reduce. В качестве начального значения reduce использую «M 0 0» (начать с координаты 0:0). Далее в reduce, к строке будут добавляться новые пары относительных координат dX и dY. За то, что координаты будут относительными, отвечает прописная буква «l» (большая «L» сообщает о абсолютных координатах), после «l» размещается dX и потом dY, разделённых пробелами. В этом прототипе, dY = 1 (приращение на 1px), в дальнейшем, по оси X буду перемещаться с приращением dX вычисленным из ширины контейнера и количества точек которые в нём необходимо разместить. В последней строке формирования PATH
path +=`L ${this.timePoints.length} 0`
я принудительно, от последней точки, достраиваю линию до оси Х. Если потребуется замкнуть контур, можно дописать в конец строки «Z», я поначалу думал, что без замкнутого контура, полученная фигура не будет заполняться (fill) но это оказалось не так, там где не замкнуто, не будет прорисована stroke — обводка.getSVGTimePoints:function(){ let predY = 0 let path = this.timePoints.reduce((str, item)=>{ let dY = item - predY predY = item return str + `l 1 ${dY} ` },'M 0 0 ') path +=`L ${this.timePoints.length} 0`// Z` контур можно не замыкать return path },Продолжу вносить изменения. Мой индикатор должен масштабироваться по ширине и высоте для того чтобы все переданные точки вписались в заданный контейнер. Для этого надо обратится к DOM и узнать размеры контейнера
ref — получение информации о элементе DOM
DIV-ву контейнеру (в который вставлен svg) я добавляю класс wrapper чтобы передать ширину и высоту через стили. И чтобы svg занял всё пространство контейнера, задал его высоту и ширину 100%. RECT, в свою очередь, тоже займёт всё пространство контейнера и будет фоном для PATH
<div ref="loadprogresser"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" > <rect x=0 y=0/> <path :d="d" fill="transparent" stroke="black"/> </svg> </div>Для того чтобы найти мой DIV-контейнер в виртуальном DOM Vue, добавляю атрибут ref и присваиваю ему имя по которому буду осуществлять поиск
ref="loadprogresser". В хуке жизненного циклаmountedя вызову метод getScales(), в котором, строкойconst {width, height} = this.$refs.loadprogresser.getBoundingClientRect()узнаю ширину и высоту DIV-элемента после его появления в DOM.Дальше простые расчёты приращения по оси Х зависящего от ширины контейнера и кол-ва точек которые хотим в него уместить. Масштаб по оси Y пересчитывается каждый раз при нахождении максимума в переданном значении.
transform — изменение системы координат
На этом этапе я замечаю, что надо бы изменить систему координат так, чтобы координата 0:0 начиналась из нижнего левого угла, и ось Y росла бы вверх, а не вниз. Можно, конечно, сделать расчёты для каждой точки, но в SVG есть атрибут transform, позволяющий трансформировать координаты.
В моём случае требуется применять к Y координатам масштаб -1 (чтобы значения Y откладывались вверх), и сместить начало координат на минус высоту контейнера. Так как высота контейнера может быть любой (задаётся через стили), то пришлось формировать строку трансформации координат в хуке
mountedтаким кодом:this.transform = `scale( 1, -1) translate(0,${-this.wrapHeight})`Но сама по себе трансформация применённая к PATH не сработает, для этого надо обернуть PATH в группу (тег g) к которой и применить трансформации координат:
<g :transform="transform"> <path :d="d" fill="transparent" stroke="black"/> </g>В итоге координаты правильно развернулись, индикатор загрузки стал ближе к задуманному дизайну
SVG text и центрирование текста
Текст нужен для вывода % загрузки. Размещение текста в центре по вертикали и горизонтали в SVG довольно просто организовать (по сравнению с HTML/CSS), на помощь приходят атрибуты (сразу прописываю значения) dominant-baseline=«central» и text-anchor=«middle»
Текст в SVG выводится соответствующим тегом:
<text x="50%" y="50%" dominant-baseline="central" text-anchor="middle">{{TextPrc}}</text>где TextPrc привязка к соответствующей переменной, вычисляемой по простому соотношению ожидаемого количества точек к переданному количеству
this.TextPrc = `${((this.Samples * 100)/this.maxSamples) | 0} %`.Координаты начала x=«50%» y=«50%» соответствуют центру контейнера, а за то чтобы текст выровнялся по вертикали и горизонтали, отвечают атрибуты dominant-baseline и text-anchor.
Базовые вещи по теме отработаны, теперь надо выделить прототип индикатора в отдельный компонент.
Выделение индикатора загрузки в отдельный Vue-компонент
Для начала определюсь с данными которые буду передавать в компонент, это будут: maxSamples — кол-во сэмплов в 100%-ах ширины, и Point — единица данных (точка) которая будет внесена в массив точек (на основании которого, после обработки, сформируется график). Данные передаваемые компоненту от родителя, размещаю в секции props
props:{ maxSamples: {//кол-во сэмплов в 100%-ах ширины type: Number, default: 400 }, Point:{//новая точка value:0 } }Проблемы с реактивностью
За то, что новая переданная в компонент точка будет обработана, отвечает computed свойство getPath которое зависит от Point (а раз зависит, то и перевычисляется при изменении Point)
//шаблон ... <path :d="getPath"/> ... //свойства компонента props:{ ... Point:{ value:0 } //вычисляемое свойство computed:{ getPath(){ this.addValue({value:this.Point.value}) return this.getSVGPoints()//this.d } },Я сначала сделал Point типа Number, что логично, но тогда не все точки попадали в обработку, а только отличающиеся от предыдущих. Например, если из родителя передавать в такой Point только число 10, то на графике отрисуется только одна точка, все последующие будут проигнорированы так как они не отличаются от предыдущих.
Замена типа Point с Number на объект {value:0} привело к желаемому результату — computed свойство getPath() теперь обрабатывает каждую переданную точку, через Point.value передаю значения точек
Исходник компонента Progresser.vue<template> <div ref="loadprogresser"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" > <g :transform="transform"> <path :d="getPath"/> </g> <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle"> {{TextPrc}} </text> </svg> </div> </template> <script> export default { props:{ maxSamples: {//кол-во сэмплов в 100%-ах ширины type: Number, default: 400 }, Point:{ value:0 } }, data(){ return { Samples:0,//номер текущего сэмпла wrapHeight:100,//высота в которую надо вписать изображение maxY:0,//максимальная по Y величина (для вертикального масштабирования) scales:{ w:1,//масштабирование по горизонтали (рассчитывается по ширине контейнера) h:1 //масштабирование по вертикали //(пересчитывается по максимальному Y и высоте контейнера) }, Points:[],//массив значений времени выполнения операции (получены из Point.value) transform:'scale( 1, -1) translate(0,0)', TextPrc: '0%' } }, mounted: function(){ this.getScales() }, methods:{ getScales(){ const {width, height} = this.$refs.loadprogresser.getBoundingClientRect() //Коэф. Масштабирования по горизонтали this.scales.w = width / this.maxSamples //трансформация координат Y от высоты контейнера this.wrapHeight = height this.transform = `scale( 1, -1) translate(0,${-this.wrapHeight}) rotate(0)` }, getVScale(){//расчёт масштаба по вертикали this.scales.h = (this.maxY == 0)? 0 : this.wrapHeight / this.maxY }, //передаю значения выделяю максимум и выдаю шкалу относительно этого максимума getYMax({value = 0}){ this.maxY = (value > this.maxY) ? value : this.maxY }, addValue({value = 0}){ if (this.Samples < this.maxSamples) { this.getYMax({value}) this.getVScale() this.Points.push(value) //интересуют Int this.Samples ++; this.TextPrc = `${((this.Samples * 100)/this.maxSamples) | 0} %` } }, getSVGPoints(){ //теперь создаю строку для Path let predY = 0 let path = this.Points.reduce((str, item)=>{ let dY = (item - predY) * this.scales.h predY = item return str + `l ${this.scales.w} ${dY} ` },'M 0 0 ') path +=`L ${this.Points.length * this.scales.w} 0 `// Z` контур можно не замыкать return path }, }, computed:{ getPath(){ this.addValue({value:this.Point.value})//Добавить новую точку return this.getSVGPoints()//this.d - построить SVG PATH } } } </script> <style scoped> .wrapper { width: 400px;/* размеры задаются в стилях приложения*/ height: 100px;/*встроенные стили (по умолчанию) перекрываются стилями приложения*/ font-size: 4rem; font-weight: 600; border-left: 1px gray solid; border-right: 1px gray solid; overflow: hidden; } .wrapper__content path { opacity: 0.5; fill: lightgreen; stroke: green; stroke-width: 1; } .wrapper__content text { opacity: 0.5; } </style>Вызов из родительского компонента и передача параметров
Для работы с компонентом требуется его импортировать в родительский компонент
import Progresser from "./components/Progresser"
и объявить в секцииcomponents: {Progresser }В шаблон родительского компонента, компонент-индикатор progresser вставляется следующей конструкцией:
<progresser :maxSamples = "SamplesInProgresser" :Point = "Point" ></progresser>Через класс «progreser» в первую очередь задаются размеры блока у индикатора. В props компонента передаются maxSamples (макс кол-во точек в графике) из переменной родителя SamplesInProgresser, и в props Point передаётся очередная точка (в виде объекта) из переменной-объекта Point родителя. Point родителя рассчитывается в функции update, и представляет собой увеличивающиеся случайные числа. Получаю такую картинку:
Исходник родителя App.vue<template> <div> <progresser :maxSamples = "SamplesInProgresser" :Point = "Point" ></progresser> </div> </template> <script> import Progresser from "./components/Progresser" export default { name: 'app', data(){ return { SamplesInProgresser:400,//макс кол-во точек Point:{value:0},//"точка" index:0, //контроль кол-ва переданных точек TimeM:100 //база для генератора случайных чисел } }, created: function () { this.update() }, methods:{ update(){ if (this.index < this.SamplesInProgresser) { this.index++; this.Point = {value:(this.TimeM*Math.random() | 0)} this.TimeM *= 1.01 setTimeout(this.update, 0) } } }, components: { Progresser } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; margin-top: 60px; } /*через стили задаю размеры индикатора загрузки*/ .progresser { width: 300px; height: 80px; } </style>Применение компонента в SPA
Приступаем к тому, ради чего всё затевалось. И так, у меня есть асинхронные операции по загрузке из базы записей о неких личностях. Время выполнения асинхронной операции заранее неизвестно. Я буду измерять время выполнения банальным способом, с помощью new Date().getTime() до и после операции, и полученную разность времени буду передавать в компонент. Естественно, индикатор будет встроен в блок, который будет появляться на этапе загрузки, и затенять собой таблицу для которой загружаются данные.
async getCandidatesData(){ ... this.LoadRecords = true //сообщаю что началась загрузка, чтобы поверх контента появился блок с индикатором ... this.SamplesInProgresser = uris.length //сообщаю компоненту сколько записей буду загружать ... for (let item of uris) {//в uris массив URL которые надо загрузить try { const start = new Date().getTime()//время до операции candidate = await this.$store.dispatch('GET_CANDIDATE', item) const stop = new Date().getTime()//время после выполнения this.Point = {value:(stop-start)}//передаю разность в Point ...В data компонента-родителя прописываю что касается индикации загрузки:
data (){ return { ... //Индикатор загрузки LoadRecords:false, SamplesInProgresser:400, Point:{value:0} }И в шаблоне:
<!-- индикатор загрузки записей--> <div v-show="LoadRecords"> <progresser :maxSamples = "SamplesInProgresser" :Point = "Point" ></progresser> </div>
Выводы
Как и прогнозировалось, ничего сложного. До какого-то момента можно относится к SVG как обычным HTML-тегам, со своей спецификой. SVG — мощный инструмент который я теперь чаще буду использовать в своей работе для визуализации данных
Ссылки
Исходный код Индикатора загрузки
Статья по svg-path
Как добавить индикатор загрузки на сайт или в приложение Vue.js: примеры работы
От автора: индикатор загрузки улучшает UX любого веб или мобильного приложения. Он говорит пользователю, что действие выполняется, и скоро будет возвращен результат.
В веб-приложениях загрузчики нужны в двух основных событиях:
Сетевые запросы – перемещение на другую страницу или AJAX запрос.
Запуск тяжелых вычислений.
Статья покажет несколько способов, как можно добавить загрузчик в приложение Vue.js.
Фреймворк VUE JS: быстрый старт
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Узнать подробнееТипы индикаторов загрузки
Тип используемого на сайте индикатора загрузки может как положительно, так и отрицательно повлиять на пользователя. В основном, на сайтах можно использовать индикаторы двух типов.
Первый – это счетчик. Он может быть представлен в форме прогресс бара или счетчика от нуля до 100. Это самый эффективный тип индикатора загрузки, так как пользователь получает грубую оценку завершения действия.
Второй тип – цикл. Этот тип – анимация. Самый частый пример, который мы видим в сети – спиннер.
Счетчик лучше всего подходит для долгих операций, а цикл для коротких.
Пользователи начинают беспокоиться, когда видят индикатор в виде цикла на долгих операциях. Это заставляет их думать, что сайт сломан, а их действие завершилось неудачей. Это вызывает много отрицательных мыслей. В конце концов, пользователи уходят с сайтов (мы не хотим этого). Поэтому не используйте индикаторы в виде цикла для долгих задач.
Для быстрых операций подходит любой тип индикатора. Хотя индикатор цикла подходит больше.
Начало работы
Создадим новый проект. Я создам приложение с помощью Vue CLI.
CLI спросит у нас, какие технологии мы хотим использовать в приложении. Для демо я выбрал Router и Vuex. Далее нажмите enter и подождите, пока приложение установит зависимости.
В качестве индикатора загрузки будем использовать nprogress, поэтому установим его. Вы можете использовать любой индикатор. nprogress – это прогресс бар, который крепит себя к верхней части страницы.
Не будем для этого использовать npm или yarn, просто стащим его прямо с CDN. В созданном проекте Vue CLI откройте файл public/index.html и добавьте код ниже перед закрывающим тегом head.
<link href=»https://unpkg.com/[email protected]/nprogress.css» rel=»stylesheet» /> <script src=»https://unpkg.com/[email protected]/nprogress.js»></script>
<link href=»https://unpkg.com/[email protected]/nprogress.css» rel=»stylesheet» /> <script src=»https://unpkg.com/[email protected]/nprogress.js»></script> |
Использование nprogress
У nprogress есть несколько API методов, но в этой статье нас интересуют только start и done. Эти методы запускают и останавливают прогресс бар.
nprogress также будет управлять процессом заполнения прогресс бара. Этот момент можно настроить вручную, но для демонстрации мы выберем стандартное поведение.
Использование Router
Когда мы используем router для добавления прогресс бара на сайт, нам зачастую нужен функционал: когда пользователь переходит на новую страницу, загрузчик начинает тикать в верхней части страницы, показываю пользователю прогресс загрузки следующей страницы. Что мы хотим:
Хорошо, что в Vue router есть хуки, и мы можем прикрепиться. Откройте файл src/router.js и замените стандартный экспорт на код ниже.
const router = new Router({ routes: [ { path: ‘/’, name: ‘home’, component: Home }, { path: ‘/about’, name: ‘about’, component: About } ] }) router.beforeResolve((to, from, next) => { // If this isn’t an initial page load. if (to.name) { // Start the route progress bar. NProgress.start() } next() }) router.afterEach((to, from) => { // Complete the animation of the route progress bar. NProgress.done() }) export default router
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | const router = new Router({ routes: [ { path: ‘/’, name: ‘home’, component: Home }, { path: ‘/about’, name: ‘about’, component: About } ] })
router.beforeResolve((to, from, next) => { // If this isn’t an initial page load. if (to.name) { // Start the route progress bar. NProgress.start() } next() })
router.afterEach((to, from) => { // Complete the animation of the route progress bar. NProgress.done() })
export default router |
Когда мы цепляемся к роуту beforeResolve, мы говорим роутеру запустить nprogress, как только будет запрошена страница. Хук afterEach говорит роутеру, что после полной оценки ссылки, необходимо завершить прогресс бар. Неважно, удачно или нет завершился запрос страницы.
Использование своей HTTP библиотеки
Мы также хотим добавить прогресс бар в AJAX запросы. В большинстве HTTP библиотек сейчас есть перехватчики, которые запускаются перед выполнением запроса или ответа. Поэтому мы можем подключиться к нашей библиотеке.
Мне нравится axios. Там это называется перехватчиком. Чтобы установить, используйте команду:
# for yarn yarn add axios # for npm npm install —save axios
# for yarn yarn add axios
# for npm npm install —save axios |
Далее axios можно настроить следующим образом:
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Узнать подробнее// in HTTP.js import axios from ‘axios’ // create a new axios instance const instance = axios.create({ baseURL: ‘/api’ }) // before a request is made start the nprogress instance.interceptors.request.use(config => { NProgress.start() return config }) // before a response is returned stop nprogress instance.interceptors.response.use(response => { NProgress.done() return response }) export default instance
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // in HTTP.js import axios from ‘axios’
// create a new axios instance const instance = axios.create({ baseURL: ‘/api’ })
// before a request is made start the nprogress instance.interceptors.request.use(config => { NProgress.start() return config })
// before a response is returned stop nprogress instance.interceptors.response.use(response => { NProgress.done() return response })
export default instance |
Затем можно импортировать и использовать файл сверху для обработки соединений и получения прогресс бара при каждом запросе.
Загрузчики внутри компонентов
Бывает, что мы не делаем запрос страницы или AJAX запрос. Браузер может выполнять какие-то свои действия, которые занимают время.
Создадим пользовательский компонент DownloadButton, который может менять свое состояние на состояние загрузки под влиянием каких-то внешних действий.
Компонент будет принимать только один prop loading.
<template> <DownloadButton :loading=»loading»>Download</DownloadButton> </template>
<template> <DownloadButton :loading=»loading»>Download</DownloadButton> </template> |
Определение компонента:
<template> <button :disabled=»loading»> <svg v-if=»loading» viewBox=»…»> <path d=»…»/> </svg> <svg v-else viewBox=»0 0 20 20″> <path d=»…»/> </svg> <span v-if=»!loading»> <slot></slot> </span> </button> </template> <script> export default { props: { loading: { type: Boolean } } } </script> <style> /* styles go here… duh! 😉 */ </style>
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 | <template> <button :disabled=»loading»> <svg v-if=»loading» viewBox=»…»> <path d=»…»/> </svg> <svg v-else viewBox=»0 0 20 20″> <path d=»…»/> </svg> <span v-if=»!loading»> <slot></slot> </span> </button> </template>
<script> export default { props: { loading: { type: Boolean } } } </script>
<style> /* styles go here… duh! 😉 */ </style> |
Пример.
HOC для повторно используемых загрузчиков
Можно создать загрузчики в виде контейнеров (HOC) для компонентов, чье состояние мы можем менять через props.
Такие типы загрузчиков хорошо подходят для компонентов, которые не меняют глобальное состояние приложения. Но мы хотим, чтобы пользователь все же чувствовал связь с действием.
Черновой пример:
// This loader will add an overlay with the text of ‘Loading…’ const Loader = { template: ` <div> <slot/> </div> `, props: [‘loading’] } const Stats = { template: ` <Loader :loading=»updating»> … </Loader> `, props: [‘updating’] } const app = new Vue({ template: ` <div> <Stats :updating=»fetchingStats»/> <Button @click=»fetchingStats = true»> Latest stats </Button> </div> `, })
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 | // This loader will add an overlay with the text of ‘Loading…’ const Loader = { template: ` <div> <slot/> </div> `, props: [‘loading’] }
const Stats = { template: ` <Loader :loading=»updating»> … </Loader> `, props: [‘updating’] }
const app = new Vue({ template: ` <div> <Stats :updating=»fetchingStats»/> <Button @click=»fetchingStats = true»> Latest stats </Button> </div> `, }) |
Пример того, как это может выглядеть:
Async Vue компоненты
Поддержка первого класса Vue для асинхронных компонентов – это замечательно. Не знаете, что такое асинхронные компоненты? По сути, они позволяют вам получать компоненты с сервера только по их необходимости.
Поэтому можно не хранить у пользователя те компоненты, которые он никогда может не использовать – предоставляйте ему только то, что нужно. Можете прочитать подробнее в официальной документации.
Асинхронные компоненты идут вместе с нативной поддержкой состояний загрузки и ошибок. Специальная настройка не нужна.
const AsyncComponent = () => ({ component: import(‘./MyComponent.vue’), // show this component during load loading: LoadingComponent, // show this component if it fails to load error: ErrorComponent, // delay before showing the loading component delay: 200, // error if the component failed to loadin is allotted time in milliseconds default in Infinity timeout: 3000 })
const AsyncComponent = () => ({ component: import(‘./MyComponent.vue’), // show this component during load loading: LoadingComponent, // show this component if it fails to load error: ErrorComponent, // delay before showing the loading component delay: 200, // error if the component failed to loadin is allotted time in milliseconds default in Infinity timeout: 3000 }) |
Чтобы использовать async компоненты с методом выше, вам необходимо применить ленивую загрузку к Vue роутеру. Это async компоненты на стероидах.
Использование плагинов Vuex
Это значит, что мы можете создать свой Vuex плагин, который автоматически будет запускать загрузчик. Звучит хорошо, но, мне кажется, такое решение будет сложно поддерживать и контролировать состояние загрузки. Не рекомендую использовать гео.
Если честно, я не совсем знаю, как заставить плагин работать прямо из коробки. Нужно много костылей.
Заключение
Мы не рассмотрели несколько способов объявления индикаторов загрузки в приложениях Vue. Для этого также существуют выделенные Vue плагины, но мне кажется, лучше почувствовать, как это работает.
Если видите, что я не рассказал о каком-то важно методе, пишите в комментариях. Я обновлю статью. Хорошего дня.
Автор: Samuel Oloruntoba
Источник: https://scotch.io/
Редакция: Команда webformyself.
Фреймворк VUE JS: быстрый старт, первые результаты
Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля
Узнать подробнее
Фреймворк VUE JS
VUE JS — полное руководство для современной веб-разработки
ПодробнееTop-7 генераторов индикаторов загрузки — HTMLer.org.ua
Ну вот часто же бывает, что делаешь какую-то анкету, и понимаешь, что нужно делать на Ajax, и тут вспоминаешь про небольшие города, с плохим инетренетом, и думаешь, нужно повесить индикатор.
Вообще говоря, сегодня трудно представить какое-либо сколько-нибудь серьёзное веб-приложение, которое не имело бы индикаторов загрузки чего-либо. Это своего рода постулат для разработчиков UI для Web2.0: если что-то отправляется или загружается при помощи Ajax, то нужно об этом пользователю сообщить.
Самостоятельно рисовать индикаторы загрузки (или loader, на жаргоне) достаточно сложно. Простую крутящуюся жестеренку сделать еще можно, но если речь идет о простенькой форме, то тратить лишних полчаса на это не хочется, для этого и есть генераторы индикаторов загрузки.
Генератор анимировнных индикаторов загрузки Preloaders.net
Один из лучших генераторов лоадеров (анимированных GIF индикаторов загрузки) на сегодняшний день, преимущество ему добавляет возможность изменять размер итоговой анимированной картинки в пределах от 16 до 220 пикселей. Это очень удобно, правда качество картинки иногда подкачивает, но это мелочи, главное выбрать правильную картинку.
Ссылка: http://preloaders.net/
Генератор анимированных индикаторов загрузки Ajaxload
Один из самых популярных сервисов. При этом работает очень слаженно и быстро. Отличется от предыдущего сервиса только тем, что размер картинки изменить нельзя, а так, точно так же можно установить фон переднего плана и фон заднего плана, выбрать тип анимации.
Ссылка: http://ajaxload.info/
Генератор анимированных индикаторов загрузки Load Info
Не до конца продуманный сервис, нет возможности изменять размеры картинок, да и с выбором цвета не очень. Зато есть некоторые уникальные, не доступыные у других генераторов анимированные картинки.
Ссылка: http://www.loadinfo.net/
Генератор анимированных индикаторов загрузки Web Script Lab
Далеко не самый лучший генератор. Нет возможности просмотреть вид анимации при выборе ее типа, приходиться ориентироваться на название, а сама анимация появляется только через некоторое время после выбора. Не понравился.
Ссылка: http://www.webscriptlab.com/
Остальные генераторы занимают место в рейтинге, только благодаря своему предназначению, то есть потому, что являются генераторами анимированных индикаторов загрузки. Какой-либо ценности они не несут.
Генератор анимированных индикаторов загрузки Chimply
Ссылка: http://www.chimply.com/
Генератор анимированных индикаторов загрузки mentalized Activity Indicators
Ссылка: http://mentalized.net/activity-indicators/
Генератор анимированных индикаторов загрузки SanBaldo Ajax Loading Animated GIF
Ссылка: http://www.sanbaldo.com/wordpress/1/ajax_gif/
Удачных индикаторов!
806
Также рекомендуем:
Какой индикатор загрузки выбрать
Представьте ситуацию: вы в магазине пытаетесь найти товар и спрашиваете консультанта где он находится. В ответ на это консультант просто стоит на месте, не предпринимая никаких действий. Скорее всего вы почувствуете разочарование и уйдете. Точно так же чувствуют себя пользователи, которые слишком долго наблюдают на своем мониторе индикатор загрузки типа «спиннер».
Спиннеры не для длительной загрузки
Спиннеры не сообщают пользователю насколько продолжителен процесс загрузки. Если вы используете этот индикатор для слишком длительного процесса, пользователи начнут думать, что что-то пошло не так и с приложением проблемы. Отсутствие информации создает неопределенность, которую посетители будут трактовать наихудшим образом.
Пользователи решат, что загрузка займет слишком много времени, а это, как вы понимаете, не скрасит их ожидания. Нетерпение будет накапливаться, и в итоге посетитель просто нажмет кнопку «обратно» или вообще выйдет из приложения.
Правило четырех секунд
Если вы хотите, чтобы пользователи оставались в вашем приложении, не используйте спиннеры при загрузке, время которой превышает четыре минуты. Научное исследование показало, что максимальный предел толерантности ожидания у пользователей составляет четыре минуты. Это значит, что после четырех секунд поведенческие намерения изменяются.
Когда использовать спиннер
Пользователь ожидает незамедлительной реакции приложения. Незамедлительная реакция длится меньше секунды. Если пользователь не наблюдает никакой реакции более чем секунду, он начинает беспокоиться.
Если у вас есть процесс, который длится больше секунды, используйте спиннер. Это даст понять пользователям, что приложение загружается, а это облегчит их ожидания и избавит от беспокойств.
Полоса загрузки для длительных процессов
Если процесс занимает более четырех секунд, вам нужно использовать полосу загрузки. В этом случае пользователи склонны проявлять больше толерантности при ожидании.
Все потому что вы даете четкое понимание того сколько времени займет ожидание. Полоса загрузки позволяет пользователям видеть прогресс, что поддерживает их в их ожидании. Если они видят только спиннер, то никакого прогресса наблюдать не могут, и вообще не могут уверены в том, что действие в принципе происходит. У посетителя просто нет стимула ждать.
Как оформить полосу загрузки
Полоса загрузки должна демонстрировать пользователям степень осуществления прогресса. Анимация должна происходить слева направо в постепенном и последовательном темпе. Если анимация останавливается на слишком долгое время, пользователи начинают думать, что процесс застопорился и не хотят больше ждать.
Также нужно добавить числовую оценку прогрессу. Если процесс занимает меньше минуты, отобразите загрузку в виде процента от загрузки или числа загруженных файлов. Информируйте пользователей о том какую именно активность производит приложение.
Если загрузка занимает больше минуты, вы должны дать информацию о том, сколько времени займет ожидание. Это даст пользователям понимание, что процесс будет идти дольше чем обычно. Укажите оставшееся время ожидания в минутах, чтобы у человек мог переключиться на что-то другое и вернуться к приложению в указанный срок.
Не злоупотребляйте спиннерами
У многих дизайнеров есть привычка использовать спиннеры при любом процессе загрузки. Но если вы используете их при длительно загрузке, это провоцирует разочарование пользователей. Избегайте этого, используя при необходимости полосы загрузки.
Полоса загрузки делает пользователя толерантнее в его процессе ожидания. Они не против подождать, когда понимают, что приложение в данную секунду работает для них. Но если этот процесс занимает больше обычного, посетителям нужен визуальный фидбэк. Отсутствие информации о том сколько осталось ждать провоцирует нетерпение и пользователи просто уходят.
Автор статьи anthony
Перевод — Дежурка
Смотрите также:
ИНДИКАТОР ЗАГРУЗКИ ПК И SSD
USB монитор загрузки компьютера — это устройство на базе PIC18F2550, которое показывает производительность вашего компьютера с помощью двух аналоговых стрелочных измерителей и индикатора RGB LED. Конструкция основана на стандартном VU-метре, который управляется с помощью ШИМ от микроконтроллера.
Вместо одноцветного мигающего светодиода (как в типовом ПК) в этом проекте используется RGB-светодиод, интенсивность которого изменяется в зависимости от уровня использования загрузки процессора, а цвет — от чтения / записи HDD. Также была добавлена кнопка, позволяющая быстро включать и отключать устройство без необходимости делать это мышкой на экране.
Управляющая программа для PIC18F2550 написана на языке Hi-Tech C, а программное обеспечение хоста Windows на C # с использованием Open Source Framework для устройств USB Generic HID на основе PIC18F и Windows.
Аппаратная часть
Аппаратное обеспечение основано на микроконтроллере PIC18F2550, который имеет встроенный USB. Минимальное количество компонентов использовалось для подключения устройства к порту USB, а также к коммутатору, стрелочным индикаторам и LED RGB. Общая принципиальная схема приведена далее.
Два потенциометра включены в конструкцию, чтобы провести быструю калибровку мощности полного отклонения, требуемой VU-метром (поскольку это может меняться на разных стрелочниках). Резисторы RGB LED были выбраны в соответствии с техническими данными светодиодов, чтобы обеспечить максимальную яркость, так как будем контролировать выход с помощью ШИМ. МК PIC работает на частоте 20 МГц, что позволяет использовать полную частоту ФАПЧ 48 МГц (это полезно, поскольку плавное ШИМ-управление светодиодом требует максимально возможной скорости процессора).
Плата печатная монитора загрузки
Чтобы разместить устройство на минимально возможном пространстве, разработана односторонняя печатная плата. Тем не менее, конструкция достаточно проста для того, чтоб ее можно было легко собрать на макетке, если у вас нет возможности для травления печатных плат. Вот изображение печатной платы.
Обратите внимание, что разъем USB направлен вниз, это позволяет подключить соединение внутри корпуса, позволяя проложить кабель по задней панели устройства. Возможно заменить кабель USB, если требуется, на более длинный или короткий, либо вообще напрямую припаять кабель к печатной плате.
Все подключенные устройства соединяются с использованием разъемов в стиле Molex, что позволяет легко собирать и разбирать индикатор. Вот готовая печатная плата с деталями и со всеми подключенными периферийными компонентами.
Светодиод RGB тут с прозрачными линзами, это означает что смешение цветов трудно увидеть крупным планом, чтоб поправить это можете рассеять свет линзы, отполировав ее до молочно-белой. Например протерев её тонкой наждачной бумагой.
Чтобы изменить шкалу VU-метра, снимите пластиковую крышку с передней части и используйте острый нож, чтобы срезать существующую.
После удаления наклейки отсканируйте изображение в Фотошопе и проведите замену логарифмической линейной процентной шкалой.
Получив желаемый дизайн, распечатайте его на толстой глянцевой фотобумаге, а затем вырежьте по своим размерам. Затем новую шкалу снова приклейте к измерителю (с использованием полоски двухстороннего скотча) и снова соберите индикатор, используя клей.
Прошивка контроллера
Управляющая программа контролирует положение двух индикаторов с помощью двух встроенных модулей генератора ШИМ, включенных в PIC18F2550. Это обеспечивает точную ШИМ с 10-битным разрешением без нагрузки на сам процессор. Программа принимает процент от 0 до 100 и устанавливает соответствующий рабочий цикл для перемещения стрелок.
Единственная проблема здесь заключается в том, что измерители VU являются в основном логарифмическими (посмотрите на расстояния на исходной маркировочной панели, вы увидите, что разметка дБ не ровная, с правой стороны измерителя наблюдается гораздо большее деление на дБ). Это означает, что при рабочем цикле 50% стрелка будет указывать чуть вправо, а не прямо, как здесь нужно.
Для перевода из линейной шкалы в логарифмическую требуется немного работы и математики. Сначала настроим устройство и подключим мультиметр к выходу ШИМ от PIC, чтобы измерить эффективный выход в мВ. По мере увеличения рабочего цикла измерим выходную мощность в мВ, чтобы получить 25%, 50%, 75% и 100% по новой шкале. Это позволяет построить график, показывающий взаимосвязь между входным напряжением и отображаемым процентом:
Как видите на рисунке, когда была получена аппроксимация кривой логарифмического выхода, использовалась функция линии тренда в Excel, чтобы вычислить аппроксимацию полинома для кривой. Затем этот расчет был скопирован в программу, что позволило МК рассчитать правильную базу рабочих циклов ШИМ на желаемом процентном соотношении.
Для светодиода RGB устройству потребовалось еще 3 канала ШИМ, поскольку VU-метр использует 2 встроенных генератора ШИМ. Цикл широтно-импульсной модуляции светодиодных цветов составляет 60 Гц и дает 128 уровней яркости.
Чтобы получить правильное смешение цветов на LED индикаторе, важно учитывать относительные уровни яркости цветов, так как светодиод RGB не выдает одинаковую яркость для разных цветов. Это приведет к плохо согласованным уровням, когда попытаемся получить определенные комбинации RGB.
Чтобы обойти эту проблему, установил фототранзистор на макетке, подключенный к мультиметру. Фототранзистор выдает переменное напряжение в зависимости от количества света, которое он получает — как простейший экспонометр. Связав светодиод RGB и фототранзистор вместе с помощью черной изоленты, получилось установить ШИМ каждого цвета на разных уровнях. Выходное напряжение фототранзистора для каждого цвета и уровня было затем нанесено на график с использованием Excel. На графике видно что красный — самый яркий цвет, затем синий, а затем зеленый:
Опять же, используя функцию линии тренда в Excel, построите линейную линию и получите расчет, необходимый для аппроксимации яркости светодиода при известной входной мощности. Используя зеленый светодиод в качестве эталона (так как это самая низкая яркость), можете рассчитать остальные.
Выход каждого цвета измеряется с помощью фототранзистора, подключенного к источнику питания 5 В и мультиметра. К светодиоду применяется 256-шаговое разрешение ШИМ, а яркость выводится от 0 до 255 с шагом 32 уровня. Выходное напряжение красного, зеленого и синего измеряется отдельно. Все три цвета показывают линейный вывод.
Исходя из результатов, от 0 до 255 показаны линейные линии тренда, показывающие прогнозируемый уровень освещенности на всех выходных мощностях. Цвет с наименьшей максимальной интенсивностью (зеленый) используется с 0, представляющим выкл, и 255, представляющим максимальную яркость. Два других цвета масштабируются в соответствии с множителем линии тренда:
Красный = 0,0071 * х
Синий = 0,0064 * х
Где х — это шаг ШИМ. Затем надо должны масштабировать результат в соответствии с диапазоном цвета самой низкой интенсивности (зеленого), то есть для красного цвета, если x = 187:
Масштабная интенсивность = (255 / 1,1985) * (0,0047 * x)
Где 1,1985 — максимальная яркость зеленого светодиода, а 255 — количество шагов в шкале.
Затем, чтобы получить требуемый выход ШИМ (x) из масштабированной интенсивности (y), просто решаем уравнение и упрощаем:
х = 47 * у / 71
Таким образом, если яркость по отношению к зеленому равна 255, фактический выход ШИМ для красного должен быть 168,8.
Синий рассчитывается точно так же:
х = 47 * у / 64
Чтобы настроить шкалу, просто меняем последний номер (71 или 64). Если вы увеличиваете число, выходная линия тренда становится более плоской (меньше светоотдачи), а если уменьшаете — линия тренда становится круче (больше светоотдачи). Это можно использовать для настройки на ваш индивидуальный светодиод.
Программное обеспечение индикатора
Программа для Windows написана на C # и позволяет настроить USB-устройство для отображения нескольких индикаторов производительности. Вы можете контролировать следующие элементы:
- Загрузка процессора (всего или на ядро)
- Использование жесткого диска (всего или на физический диск)
- Использование памяти
- Использование сети (на карту / устройство)
Вот скриншот приложения в действии:
Кроме того, мониторинг сети позволяет сменить полосу пропускания по умолчанию (которая была бы 1000 Мбит / с для высокоскоростной карты Ethernet) и установить ее на более низкий уровень. У меня обычно это значение 15 Мбит / с, что является максимальной пропускной способностью моего широкополосного соединения.
Вы также можете настроить индикатор загрузки жесткого диска, чтобы установить цвет который должен отображаться если диск пишет, читает или обе операции сразу. Есть возможность изменять интенсивность отображаемого цвета в зависимости от использования HDD, то есть при интенсивном использовании винчестера светодиод становится ярче.
Приложение также поддерживает отображение статуса индикатора жесткого диска на панели задач. Это полезно если вы хотите чтобы и USB-устройство, и рабочий стол показывали, что происходит с жесткими дисками.
Программа также позволяет установить функцию аппаратной кнопки на устройстве. Вы можете использовать это дело чтобы отключить стрелочники, светодиод или оба сразу. Существует дополнительная опция «отключить USB», которая заставляет PIC контроллер вообще отключить порт USB. Файлы скачать можно тут
Форум по компьютерной электронике
Обсудить статью ИНДИКАТОР ЗАГРУЗКИ ПК И SSD
Индикатор загрузки HDD
Эта работа прислана на наш конкурс статей.
Для индикации загрузки IDE дисков используется один LED, что вряд ли очень информативно. Мне надоело оценивать загрузку «по яркости» и я сделал шкалу:
Схему можно реализовать и в интегральном исполнении, но хотелось добиться плавной и мягкой индикации, что трудно получить с готовыми микросхемами. Впрочем, сам преобразователь напряжение-позиция я придумал давно и он показал весьма хорошие результаты в индикаторах уровня.Комментарий по схеме
Условно говоря, схема состоит из двух узлов — схемы усреднения импульсов доступа к диску на R27, R26, D1, R28, R29, C1, C2, Q13 и преобразователя напряжение-позиция на остальных элементах.
Схема не нуждается в какой-либо настройке, только резистором R26 надо выставить 100% при постоянном обращении к диску. Цепь R24, R25, R11, Q11 задает фоновый ток при отсутствии сигнала. Если надо, чтоб при отсутствии сигнала была засветка последнего сегмента или ее наоборот не было, нужно слегка изменить номинал резистора R24 или R25.
Печатная плата не разводилась — я использовал макетную плату «из одних дырок» и SMD компоненты, все заняло очень немного места, чуть больше самого индикатора. Схема питается от +5V, контакт P1 нужно подключить вместо или вместе с «HDD LED». Если перепутаете и воткнете не в тот вывод «HDD LED» ничего не случится, просто не будет индикации.
Комплектация и рекомендации по заменеТранзисторы Q1-Q12 — любые npn, можно поставить КТ315Б, транзистор Q13 — pnp, можно поставить КТ361Б. Буквы любые, но Б/Г имеют большее усиление. Резисторы R1-R10 задают яркость, если Вам покажется слишком блекло или ярко, их надо соответственно изменить. Важный момент — для сохранения баланса в схеме, при изменении резисторов R1-R10 так-же надо изменять и резистор R22, чтобы отношение R1/R22 было постоянным.
Диод — любой маленький кремниевый, например КД522.
Светодиоды можно использовать любые, но мне очень понравилась сборка kingbright 7+3 — удачное сочетание, хорошая яркость и весьма недорого, дискретные светодиоды стоили бы ничуть не дешевле.
При необходимости, количество сегментов в шкале можно безболезненно уменьшить даже до пяти, ведь используется недискретная индикация и имеются переходы между разрядами. Например, такая шкала индицировала уровень сигнала всего пятью светодиодами и этого вполне хватало. При уменьшении или увеличении количества разрядов важно скорректировать номинал резистора R22 так, чтобы напряжение на нем при полностью включенной шкале было тем же. Например, для семи светодиодов его надо увеличить до 22*10/7=30Om.
К конденсаторам не предъявляется никаких специальных требований, можно ставить любые на любое напряжение.
Выбор динамики зажигания шкалы
Первый же вариант показал, что очень динамичная или очень замедленная индикация не столь информационны, как хотелось бы. Различные характеристики включения/выключения можно получить небольшой корректировкой приведенной схемы:
- медленное включение и выключение.
Для этого надо закоротить C2. Время включения равно времени выключения и состовляет где-то 4 секунды.
- быстрое включение и выключение.
Для этого надо закоротить C1 и убрать R29. При этом будет индицироваться каждое обращение к диску.
- быстрое включение и медленное выключение.
Для этого надо закоротить C2 и уменьшить номинал R28 до 10KOm. При этом шкала будет очень энергично реагировать на каждое обращение, а после него плавно спадать. Вариант хороший, но мне больше понравился четвертый.
- комбинация первого и второго варианта.
Собственно, это вариант и нарисован на схеме. Резистором R29 можно менять соотношение динамической и усредненной реакции шкалы. На схеме указано 33KOm, что соответствует трем светодиодам на динамичную индикацию и семи светодиодам на усреднение.
- одновременная индикация и динамичной и усредненной индикации.
На этой схеме в правом углу нарисованы элементы D1, R28, Q13, C1, C2 — нужно откорректировать исходную схему для этой (входной) части.
По приведенной схеме было собрано два индикатора, проблем не возникло.