VPF::Разноцветные палитры - Форум программистов

12345c

Дата 14.5.2006, 14:08 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 2
Всего: 101

Темы по палитрам поднимались, но слабенько так. Нельзя найти компактного скрипта, генерирующего таблицу с цветами на фоне, подобные тем, которые неизменно присутствуют в онлайновых (и неонлайновых) html-редакторах.

По форуму имеются такие темы:
http://forum.vingrad.ru/index.php?showtopic=50074 - есть 2 кода, мною же написанные;
http://forum.vingrad.ru/index.php?showtopic=61126 - есть какой-то генератор кода, требующий картинки для работы.

Давно имелась мысль сжать код генератора до предела, чтобы иметь заготовку без лишнего веса и с понятной механикой. В перечне цветов можно удалить много повторяющейся информации. Также давно интересовала возможность генерации такой палитры 18[12, которую можем видеть в Дримвивере или которую можно посмотреть на этой странице. На ней предельно компактный гиф занимает 1041 байт с 216 цветами.

Добравшись до этой задачи, получил несколько интересных результатов.

1) написал (чтоб было) код генерации простой бесхитростной палитры 36 на 6 безопасных цветов;
2) закодировал возможность вывода любых цветов в hex-представлении в таблицу нужной ширины;
3) часто используемые безопасные цвета допускают ещё двухкратное сжатие с экономией размера кода; Всякие цветочки от Gimp и дримвиверовская таблица хорошо укладываются туда;
4) наконец, решена задача вычисления, а не переписывания кодов цветов в дримвиверовской палитре.

Самое интересное - размеры кодов.

1) 350 байт;
2) примерно 1300 байт для 16х16 (хотя всё зависит от размера таблицы);
3) гимповский цветок - 900 байт;
4) дримвив. палитра 18х12 - 500 байт (точнее, очень похоже на дримв., ориентация квадратов 6х6 несколько иная).

К ним ещё добавляется обработчик прерываний для копирования кода цвета - 350 байт.

Итого, та таблица по ссылке выше, которая в гифе имеет 1 К, в коде потребовала 850 байт вместе с автоматикой выбора цвета.

Приведу примеры наиболее интересных кодов 1, 3 и 4. Общая часть - обработчик событий:

Код

d=document;g=function(I){return d.getElementById(I);};
clicked=0;           //признак выбранности цвета (1/0)
d.onmouseover=function(e){    if(clicked||(t=d.all?event.srcElement:e.target).tagName!='TD')return;
    if(t.style.backgroundColor)g('i'+t.offsetParent.id).value=t.style.backgroundColor;
    if(t.bgColor)g('i'+t.offsetParent.id).value=t.bgColor;
}
d.onclick=function(e){    if((t=d.all?event.srcElement:e.target).tagName!='TD'&&t.tagName!='TABLE')return;
    clicked=1-clicked;
}

Линейка 36 х 6 (демонстрацию можно понаблюдать здесь http://js2.ru/subs/subs005xmp.shtml#part8 ):

Код

<input type=button value=Генерировать36х6: onClick=gen6()><br>
<script>gen6=function(p){b='FFCC99663300'.match(/../g);
s='';j=0;while(j<216)s+=(j%36?'':'<tr>')+'<td bgColor='+b[(j-j%36)/36]+b[(j-j%6)/6%6]+b[j%6]+' style=font-size:4px width=6 height=6></td>'+(++j%36?'':'</tr>');
d.body.innerHTML+='<table bgColor=black cellpadding=0 cellspacing=1 id=t'+p+'>'+s+'</table><input id=it'+p+'>';
}</script>

Палитра Гимпа 16 на 16 с тем самым двойным кодированием:

Код

<input type=button value=Генерировать5: onClick=gen5('6')><br>
<script>Cols=16;gen5=function(p){t='wvfUTD32"v\'Rt\'2"#3DEUfgwV""""""&Rv7duGCc""""""&#g&s3$BU&bw&Sd3"B%"b\'"sG#W&tV4CU6cw5BS$3S63s64tW$G%tF4RUFdwECC%DdGDR65tg%7$s5$bW6ewVTd&UuW5bE$sg&&#b4$SVFuwgeu7fufESD#bS#64d\'#sGEugb""""eeESU%CD$$#C%#SEEe""""\'guwGsw\'df6#"c$3TFUvgsWVvgeuFCS$Rf&\'3t%2d7UwVbFEeWUe7Bd%cv\'\'Du6BTGtfER44TGDdE2U6du\'\'Tv6Sw6cU4BE#S73c53D6Tt\'\'cv\'rf%RD#3V4b\'"b%"B#Cs\'&R""""""V6tgEsG#b"""""#&wvfUTD32"&rW$r7"#3DEUfgw';
s='';j=-1;while(u=t.charCodeAt(++j))s+=u.toString(16);
a=s.replace(/7/g,'FF').replace(/6/g,'CC').replace(/5/g,99).replace(/4/g,66).replace(/3/g,33).replace(/2/g,'00').match(/.{6}/g);
s='';j=0;while(a[j])s+=(j%Cols?'':'<tr>')+'<td bgColor='+a[j]+' style=font-size:4px width=6 height=6></td>'+(++j%Cols?'':'</tr>');
d.body.innerHTML+='<table bgColor=black cellpadding=0 cellspacing=1 id=t'+p+'>'+s+'</table><input id=it'+p+'>';
}</script>

Вычисляемая палитра 18 на 12 (с самой умопомрачительной кодировкой):

Код

<input type=button value=Генерировать9: onClick=gen9('9')><br>
<script>gen9=function(p){String.prototype.dbl=function(){return this.replace(/(.)/g,'$1$1').match(/../g)}
s='';j=0;while(j<216){k=(j-j%6)/6;
r='c90f63'.dbl()[m=k%3+3*(k>=18)];
gg=['0369cf'.dbl(),'fc9630'.dbl()][[1,0,1,1,0,1][m]][j%6];
b='0369cffc9630'.dbl()[(j-j%18)/18];
s+=(j%18?'':'<tr>')+'<td bgColor='+r+gg+b+' style=font-size:4px width=6 height=6></td>'+(++j%18?'':'</tr>');
}d.body.innerHTML+='<table bgColor=black cellpadding=0 cellspacing=1 id=t'+p+'>'+s+'</table><input id=it'+p+'>';
}</script>

Для справки: так размещаются в ней цвета (нигде не нашлось, пришлось срисовывать граббером):

Код

cf0 cc0 c90 c60 c30 c00 900 930 960 990 9c0 9f0 0f0 0c0 090 060 030 000
cf3 cc3 c93 c63 c33 c03 903 933 963 993 9c3 9f3 0f3 0c3 093 063 033 003
cf6 cc6 c96 c66 c36 c06 906 936 966 996 9c6 9f6 0f6 0c6 096 066 036 006
cf9 cc9 c99 c69 c39 c09 909 939 969 999 9c9 9f9 0f9 0c9 099 069 039 009
cfc ccc c9c c6c c3c c0c 90c 93c 96c 99c 9cc 9fc 0fc 0cc 09c 06c 03c 00c
cff ccf c9f c6f c3f c0f 90f 93f 96f 99f 9cf 9ff 0ff 0cf 09f 06f 03f 00f
fff fcf f9f f6f f3f f0f 60f 63f 66f 69f 6cf 6ff 3ff 3cf 39f 36f 33f 30f
ffc fcc f9c f6c f3c f0c 60c 63c 66c 69c 6cc 6fc 3fc 3cc 39c 36c 33c 30c
ff9 fc9 f99 f69 f39 f09 609 639 669 699 6c9 6f9 3f9 3c9 399 369 339 309
ff6 fc6 f96 f66 f36 f06 606 636 666 696 6c6 6f6 3f6 3c6 396 366 336 306
ff3 fc3 f93 f63 f33 f03 603 633 663 693 6c3 6f3 3f3 3c3 393 363 333 303
ff0 fc0 f90 f60 f30 f00 600 630 660 690 6c0 6f0 3f0 3c0 390 360 330 300

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:51

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

12345c

Дата 4.10.2006, 15:42 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 2
Всего: 101

Статья с примерами по теме:
http://js2.ru/subs/subs006.shtml - скрипты и примеры генерации палиты цветов (статья).
http://js2.ru/subs/subs005.shtml#part2 - начало статьи.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 13:55

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Наши скрипты \| Следующая тема »