HTML5 Термометр

Нет никаких сомнений: HTML5 и CSS3, и связанные с ними API, крутые вещи. В этой статье пример того, как можно использовать эти технологии для создания полного и функционального экологического термометра для сайта.
Демо

Ингредиенты HTML5 Термометр

HTML5 экологической термометр представляет собой простой и адаптивный термометр, который позволяет измерить температуру в выбранном месте. Этот пример использует семантическую разметку HTML5, CSS3 и JavaScript для оформления, чтобы он выглядел как настоящий термометр.
Так как он использует фоновое изображение SVG, он может быть адаптирован к различным размерам монитора, без потери качества. Но в папке которая содержит исходный код, есть изображение PNG для фона, как резерв для старых браузеров, которые не поддерживают SVG.
Вот список технологии которые мы будем использовать для термометра HTML5:

  • HTML5 — для разметки
  • CSS3 —  для стилей термометра
  • JavaScript и JQuery для настройки термометра: положение, установка позиционирование метки
  • SVG для фона, чтобы быть адаптивным
  • Polyfill для поддержки браузеров, которые не поддерживают тег (jonstipe/meter polyfill используется)
  • Geolocation API, чтобы получить позицию пользователя
  • Google Maps API для преобразования геолокации в адрес
  • Yahoo! Weather API для получения кода WOEID и температуру

Как это работает?

Чтобы получить температуру, вы должны написать название города — или даже лучше, адрес — в смежной области (например, «Симферополь», как показано ниже), и нажмите на кнопку с надписью «Узнать температуру!».

Термометр с помощью HTML5
Создать свой собственный Термометр с помощью HTML5.

Как только температура определилась, вы увидите рост или падение шкалы, в зависимости от температуры воздуха в указанном месте. В случае, когда вам нужно узнать температуру вашего текущего местоположения, вы можете просто воспользоваться Geolocation API. Таким образом, все, что вам нужно сделать, это нажать на кнопку «Узнать моё месторасположение» и шкала покажет температуру вашего текущего местоположения (честно говоря, это приблизительно).

Давайте проанализируем код

В этом разделе я не буду объяснять весь код, а только наиболее интересные его части, некоторые из правил CSS или JavaScript.

HTML5

Разметка термометра HTML5 довольно проста:



<div id="thermometer-wrapper">
  <meter id="thermometer" min="-30" max="50" value="0"></meter>
  <div id="labels"></div>
</div>
<div id="info"> Температура в <label id="city">-</label>  <output id="temperature" form="request">-</output>
  <label id="error"></label>
</div>
<form id="request" name="request" action="#">
  <label>Город:</label>
  <input type="text" id="location" name="location" size="30" placeholder="Frattamaggiore, Italy" required="required"> or <a id="my-position" href=
http://pixelcom.crimea.ua/"#">Узнать моё месторасположение</a>
  <br>
  <input type="submit" name="submit" value="Узнать температуру!">
</form>


Внешний  div  ограничивает область использования и используется для подключения фонового изображения. Во второй строке отображается тег meter , который является фактическим элементом, используемый для термометра. Тег meter дает щепотку семантических значений, которые никогда не бывает лишним. Третья строка содержит labels, но они будут созданы на-лету, используя JavaScript.
Оставшаяся часть кода используется, чтобы показать данные в письменной форме и спрашивать местоположения у пользователя. Важно теги и атрибуты здесь тега output , во внутреннем div, для показа текущей температуры, которая крепится к форме, а также необходимые атрибуты для заполнения поля.

CSS3 и SVG

CSS3 используется не только просто к стилю кода, но и для преобразования разметки в термометре HTML5. Фоновое изображение SVG будет определять, размеры монитора. Здесь используется правила CSS3 для background-size .



#thermometer-wrapper {
  background-image: url('
http://pixelcom.crimea.ua/background.svg');
  background-repeat: no-repeat;
  position: relative;
  height: 300px;
  width: 75px;
  float: left;
  margin: 0em 1em 1em 0em;
  -ms-background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


Чтобы все это лучше выглядело, теги meter поворачиваются на 90 градусов, для отображения в вертикальном положении. Это вызывает проблемы с  размерами и центрирования элемента внутри  div .  Проблема размера связана с тем, что будучи отображенным вертикально, чтобы продлить бар, мы должны изменить высоту атрибута. Чтобы работало как и ожидалось, это нужно сделать с помощью JavaScript. По той же причине, центрирования является проблемой, которая должна быть решена программно с помощью JavaScript — в частности, JQuery. Правило преобразования является единственным CSS3 правилом используются для элемента, как показано ниже:



#thermometer {
  position: absolute;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
}


JavaScript и jQuery

Наличие JavaScript играет важную роль в этой демонстрации, чтобы термометр HTML5 был по центру, должен быть использован JavaScript. Кроме того, последний используется, для того чтобы задать количество labels динамически и равномерного пространства вещей. Даже если размеры оболочки термометра будут изменены, labels будут адаптированы пропорционально. Соответствующая часть кода:



// Вычисляет расстояние между каждой <code>label</code>
margin = (thermometer.width() + (parseFloat(labels.css('font-size')) / 2)) / ((max - min) / step);
margin -= parseFloat(labels.css('font-size'));


JavaScript позволяет сделать термометр более адаптивным. Фактически, путем простого изменения одной или двух переменных внутри файла JavaScript, можно иметь разное количество классов для label , которые по прежнему распределены равномерно. То же самое происходит, если вы изменяете размер шрифта. Вот как вы его центрируете по сайту:



// Вычисляется положение термометра
thermometer.width(0.9 * wrapper.height());
thermometer.css('bottom', ((wrapper.height() - thermometer.height()) / 2) + 'px');
thermometer.css('left', (thermometer.width() - wrapper.width()) / -2);


Заключение

В этой демонстрации используется несколько API. Geolocation API используется для получения положение пользователя, это данные немедленно передаются в Google Maps API для поиска адреса по координатам. Наконец, Yahoo! Weather API используется для получения WOEID ( Where on Earth Identifier) и получить текущую температуру запрошенного места.

Посмотрим на разметку и скрипт, используемый для создания этого термометра HTML5. Скачать  исходный код . Термометр HTML5 является полностью с открытым исходным кодом и выпущен под лицензией MIT и GPL-3.0 licenses.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>