Программируем HTML Color String

В старые добрые времена в HTML-чатах были популярны цветные строки с плавным переходом цвета, например, вот такие. Строка, естественно, не размечалась тегами вручную, а получалась каким-нибудь онлайн- или оффлайн-сервисом, даже соответствующие программки были дико востребованы.

Сейчас навскидку подобных онлайн-сервисов не попалось, а скачивать софтину для столь простой цели нелепо. Значит, проще написать маленький сервис на PHP+Javascript. Для чего он может понадобиться - неясно, но мне вот сегодня понадобился :)

Рассчитан на ввод в Юникоде (UTF-8) и то, что в вашем браузере поддерживается элемент HTML5 <input type="color"> (стандартный выбор цвета). Как этот компонент выглядит - решает сам браузер, а поддержка его в настоящее время есть в новом "Хроме", "Файрфоксе" на новом движке и "Андроиде" 4.4 или выше, подробней можно посмотреть здесь.

Для простоты скриптом предполагается, что элемент <input type="color"> возвращает код цвета в формате #RRGGBB, а не #RGB или наименованием цвета, так ли это всегда и для всех браузеров - не уверен.

Сервис создаёт всегда абзац HTML, его можно скопировать обычными средствами - выделив весь текст и нажав комбинацию клавиш Ctrl+C. Обычно выделить весь абзац в браузере можно тройным щелчком мыши по тексту.

Например, для цветовых настроек по умолчанию и строки ввода

Привет, это тест нашего маленького скрипта!

должно выйти вот что (с точностью до переводов строки):

<font color="#ff0000">П</font><font color="#f80007">р</font>
<font color="#f1000e">и</font><font color="#ea0015">в</font>
<font color="#e3001c">е</font><font color="#dd0022">т</font>
<font color="#d60029">,</font> <font color="#cf0030">э</font>
<font color="#c80037">т</font><font color="#c1003e">о
</font> <font color="#ba0045">т</font><font color="#b3004c">е</font>
<font color="#ac0053">с</font><font color="#a5005a">т
</font> <font color="#9f0060">н</font>
<font color="#980067">а</font><font color="#91006e">ш</font>
<font color="#8a0075">е</font><font color="#83007c">г</font>
<font color="#7c0083">о</font> <font color="#75008a">м</font>
<font color="#6e0091">а</font><font color="#670098">л</font>
<font color="#60009f">е</font><font color="#5a00a5">н</font>
<font color="#5300ac">ь</font><font color="#4c00b3">к</font>
<font color="#4500ba">о</font><font color="#3e00c1">г</font>
<font color="#3700c8">о</font> <font color="#3000cf">с</font>
<font color="#2900d6">к</font><font color="#2200dd">р</font>
<font color="#1c00e3">и</font><font color="#1500ea">п</font>
<font color="#0e00f1">т</font><font color="#0700f8">а</font>
<font color="#0000ff">!</font>

Привет, это тест нашего маленького скрипта!

Впрочем, для сервера с PHP версии не ниже 5.1.0 скрипт сразу же покажет полученную строку под разметкой. Несколько мелких PHP-функций, которые могут ещё пригодиться, прокомментированы в конце листинга.

Настройка $maxlength в коде ограничивает средствами HTML длину вводимой строки, она совершенно произвольна, можете её изменить в своём сервисе.

Сервис HTML Color String в работе

Полный исходник приложения:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Цветная строка на input type=color</title>
</head>
<body>

<p>Выберите начальный и конечный цвет, введите текст и получите цветную строку.
 <br><small>
 Элемент HTML5 input type="color" корректно работает не во всех браузерах!
 Подробнее на <a href="http://blog.kislenko.net/show.php?id=1445">странице скрипта</a>.
</small></p>

<script type="text/javascript">
function trim(string) { return string.replace (/\s+/g,""); }
function set_steps() {
 document.form1.steps.value = trim(document.form1.text1.value).length;
}
</script>

<?php
 //Значения по умолчанию
 $maxlength = 99;
 $color1 = '#FF0000';
 $color2 = '#0000FF';
 $text1 = '';
 //Получение и контроль данных
 if (isset($_POST['color1']) and preg_match('/^#(?:[a-f|\d]){6}$/i', $_POST['color1'])) 
  $color1 = $_POST['color1'];
 if (isset($_POST['color2']) and preg_match('/^#(?:[a-f|\d]){6}$/i', $_POST['color2'])) 
  $color2 = $_POST['color2'];
 if (isset($_POST['text1'])) $text1 = trimall ($_POST['text1']);
 $steps = (mb_strlen(trimall($text1),'UTF-8')>0 ? mb_strlen(trimtotal($text1),'UTF-8') : 0);
 //Вывод формы
 echo '
  <p><form name="form1" method="post">
  Начальный цвет:
  <input type="color" name="color1" value="'.$color1.'" />
  Конечный цвет:
  <input type="color" name="color2" value="'.$color2.'" />
  Текст: 
  <input type="text" name="text1" size="40" maxlength="'.$maxlength.'" value="'.$text1.'"
   onselect="set_steps();" onclick="set_steps();" onkeyup="set_steps();" />
  Тегов: 
  <input type="text" name="steps" size="'.mb_strlen($steps,'UTF-8').'" 
                             maxlength="'.mb_strlen($steps,'UTF-8').'" readonly/>
  <input type="submit" name="action" value="ОК"/>
  </form></p>';
 //Формирование строки
 if (isset($_POST['action'])) {
  $str = '';
  if ($steps>0) {
   $len = mb_strlen($text1,'UTF-8');
   list ($r1,$g1,$b1) = colorcodes($color1);
   list ($r2,$g2,$b2) = colorcodes($color2);
//echo "$color1:$r1,$g1,$b1 $color2:$r2,$g2,$b2<br>";
   $step = 0;
   for ($i=0; $i<$len; $i++) {
    $c = mb_substr($text1,$i,1,'UTF-8');
    if (preg_match('/^\s$/i',$c)) $str .= $c;
    else {
     $r = s2(next_value($r1,$r2,$steps,$step));
     $g = s2(next_value($g1,$g2,$steps,$step));
     $b = s2(next_value($b1,$b2,$steps,$step));
//echo "$r,$g,$b; ";
     $step++;
     $color = '#'.$r.$g.$b;
     $str .= '&lt;font color="'.$color.'"&gt;'.$c.'&lt;/font&gt;';
    }
   }
  }
  else $str = '&lt;font color="'.$color1.'"&gt;'.$text1.'&lt;/font&gt;';
  echo '<p>'.$str.'</p>';
  if (version_compare(PHP_VERSION, '5.1.0', '>=')) echo '<p>'.htmlspecialchars_decode($str).'</p>';
 }

 function trimall ($string) { //Удалить лишние пробельные разделители
  return preg_replace("/(?:^\s*)|(?:\s*$)/","",preg_replace("/\s+/"," ",trim($string)));
 }
 function trimtotal ($string) { //Удалить все пробельные разделители
  return preg_replace("/\s+/","",$string);
 }
 function colorcodes($color) { //Раскидать код цвета по интенсивностям
  $r=hexdec(mb_substr($color,1,2,'UTF-8'));
  $g=hexdec(mb_substr($color,3,2,'UTF-8'));
  $b=hexdec(mb_substr($color,5,2,'UTF-8'));
  return array($r,$g,$b);
 }
 function next_value($min,$max,$steps,$i) {
  //от $min до $max включительно значение номер $i из $steps шагов, можно $min>$max
  if ($steps<=1) { if ($i<1) return $min; else return $max; }
  $step = abs($max-$min)/($steps-1);
  if ($min == $max) return $min;
  if ($i<0) $i=0; else if ($i>=$steps) $i=$steps-1;
  $val = 0;
  if ($min<$max) $val = $min+$i*$step;
  else $val = $min-$i*$step;
  if ($val<min($min,$max)) $val = min($min,$max); 
  else if ($val>max($min,$max)) $val = max($min,$max); 
  return round($val);
 }
 function s2 ($val) { //перепишет в hex и, если число меньше 0x10, дополнит лидирующим нулём
  return ($val < 16 ? '0' : '').dechex($val);
 }
?>
</body></html>

05.01.2016, 20:30 [7485 просмотров]

теги: чат php сервис javascript html цвет ретро

Для добавления комментариев нужен включённый в Вашем браузере Javascript. Как включить? Вернуться к статье