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

Рыжий

Дата 27.4.2005, 19:02 (ссылка)

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

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

Всем привет!
Мне вот интерестно как сделать палитру цветов, для того, чтобы человек мог любой выбрать цвет для себя.

Aliance

Дата 27.4.2005, 19:28 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Как вывод осуществлять? Вообще можно, взять массив (там номера rgb строк {16} от 0 до 255 по-моему... )

Вот пример вывода случайного RGB света:

Код


function colorize() {
 var r = Math.floor((Math.random() * 256)).toString(16);
 var g = Math.floor((Math.random() * 256)).toString(16);
 var b = Math.floor((Math.random() * 256)).toString(16);
 var colorstring = "#" + r + g + b;

 document.write("Цвет: " + colorstring);

 setTimeout('colorize()', 1000);
}

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 27.4.2005, 21:17 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Создаёшь картинку с "палитрой", генеришь в каком нибудь редакторе. Затем отслеживаешь клик по картинке, смотришь координаты, высчитываешь цвет.

Где конкретно проблема?

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

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Aliance

Дата 27.4.2005, 21:30 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Sardar думаю он имел ввиду автоматом сгенерить такую таблицу =)

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Sardar

Дата 27.4.2005, 22:23 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Это нечеловечески долго будет, к томуже завесить браузер может smile

Для тех кто не понял, в JS нельзя(пока) работать с картинками, рисовать, обращаться по пиксельно и т.п. Можно создать "картинку" где каждый пиксель это ячейка таблицы, либо тег span/div на абсолютной позиции, естественно что это всё начинает дико тормозить.

Потому не выделываемся, генерим картинку где угодно, сохраняем в .png и радуемся жизни smile

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

Рыжий

Дата 28.4.2005, 00:06 (ссылка)

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

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

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

Aliance

Дата 28.4.2005, 14:26 (ссылка)

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

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

По координатам клика мыши. Это, к слову, можно не только на JS сделать. На том же php - если сделать не submit кнопку, а image...
Но давай уточним - тебе нужна картинки или нет? Т.к. в первом твоем посту о картинке речь не шла...
Объясни четко что ты хочешь сделать

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

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

Alx

Дата 28.4.2005, 16:35 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

Репутация: 10
Всего: 78

я вот делал с модальными окнами -
http://alx.com.ru/portfolio/scripts/javascript/greetings

там когда нажимаешь кнопки "текст" или "фон" открывается такая палитра.
генерируется она таким кодом:

Код


<script>
var parentWindow;
function setupData()
{txtColora.value = window.dialogArguments[0];
}
function sendData()
{var colora, dataRight = true;
colora = txtColora.value;
window.returnValue = [colora];
window.close();
}
function func(bg)
{txtColora.value=bg;
sendData();
}
var hexPairs = new Array("33","66","99","AA","CC","FF");
var str = '';
document.writeln('<body onLoad="setupData();"><table border="0">');
for (var i = 0; i < hexPairs.length; i++)
{document.writeln('<tr>');
for (var j = 0; j < hexPairs.length; j++)
{for (var k = 0; k < hexPairs.length; k++)
{str += '<td width="10" height="15" onmouseover="window.status=this.bgColor" onmouseout="window.status=\'\'" style="cursor:hand;" onclick="func(this.bgColor)" bgcolor="' + hexPairs[i]  + hexPairs[j] + hexPairs[k] + '"></td>';
}
document.writeln(str);
str = '';
}
document.writeln('</tr>');
} 
document.writeln('</table><input type=text name="txtColora" style="display:none;"></body>');
</script>

а функции, которые все это отрабатывают вот:

Код


var colora = "";
function sel_color()
{var varResult = window.showModalDialog ("color_panel.php", [colora], "dialogHeight:150px;dialogWidth:500px;help=no;status=yes;scroll=no;");
colora = varResult[0];

alert(colora);
}

таким образом после выбора цвета, окошко закроется, а в главном окне будет alert с выбранным цветом.

ie only.

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

Ciber SLasH

Дата 28.4.2005, 21:39 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Цитата(PHP @ 27.4.2005, 20:02)

Вот посмотри пример палитры, если ты это имел ввиду...

Присоединённый файл ( Кол-во скачиваний: 56 )

Temp.zip

Sardar

Дата 28.4.2005, 23:11 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Ciber SLasH не плохо, только зачем дважды паковать? smile

PHP-Script отлавливаем на картинке событие onmousemove и onmouseup, в обработчике получаем координаты относительно верхнего левого угла((offset|layer)(X|Y)), по ним расчитываем цвет. Как ты генерил палитру, ту же формулу и используй. Где конкретно поблему?

Сгенери картинку, выложи, обьясни как генерил, напишем скрипт.

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

Рыжий

Дата 29.4.2005, 00:21 (ссылка)

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

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

Ciber SLasH
у меня не качает файл smile

пишет мол я не авторизован, хотя все нормально должно быть smile

Ciber SLasH

Дата 29.4.2005, 00:30 (ссылка)

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

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

2PHP-Script:
Вот код того примера:

Код


<html>
<head>
<title>BGColor Wizard</title>
<meta http-equiv=Content-Type content='text/html; charset=windows-1251'>
<meta NAME=Generator CONTENT='EditPlus 2.12'>
<meta NAME=Author CONTENT='Ciber SLasH'>
<script language='JavaScript'>
var HowTo = 'Клик грызуном по букве -- копирует цвет буквы в буфер обмена (к сожалению манипуляции с буфером обмена не поддерживаются в браузере Opera).\n\n' +
'Клик грызуном по образцу цвета -- блокирует изменение фона. Разблокирование изменения фона происходит по повторному клику в любой образец.'
var PL = new Array(216)

/*** Формирование HEX-значения из RGB-составляющих ***/
function MakeColor(r, g, b) {
  /** Преобразование числа (размером в байт) в строковое HEX-значение **/
  function hex(i) {
  var Result = ''
    if (i < 0) Result = "00"
    else if (i > 255) Result = "FF"
    else {
      // Преобразуем i в строковое HEX-значение и переводим все символы в вверхний регистр
      Result = i.toString(16).toUpperCase()
      if (Result.length < 2)
        Result = '0' + Result
    }
  return Result
  }
////////////////////////////////////////////////////////////////////////////////
  Ri = hex(r)
  Gi = hex(g)
  Bi = hex(b)
return Ri + Gi + Bi
}

i = 0

/*\ Формирование Web-палитры из 216 цветов \*/
for (r = 0; r < 6; r++) {
  for (g = 0; g < 3; g++) {
    for (b = 0; b < 6; b++) {
      PL[i] = MakeColor(0x33*r, 0x66*g, 0x33*b)
      i++
    }
  }
  for (g = 0; g < 3; g++) {
    for(b = 0; b < 6; b++) {
      PL[i] = MakeColor(0x33*r, 0x66*g + 0x33, 0x33*b)
      i++
    }
  }
}

/*** Формирование случайного числа из диапазона: [n, m] ***/
function Rand(n, m) {
  return Math.round(Math.random() * (m-n)) + n
}

/*** Создание таблицы с символами ***/
function CreateCharTable() {
////////////////////////////////////////////////////////////////////////////////
var ch = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЬЫЪЭЮЯабвгдеёжзийклмнопрстуфхцчшщьыъэюя0123456789!"#$%&\'()*+,-./:;<=>?@[\\]^`{|}~©®™§…'
g = r = 0
LenCh = ch.length
////////////////////////////////////////////////////////////////////////////////
  document.write('<td><table class=tChar cellspacing=0 border=0>')
  for (i = 0; i < 12; i++) {  // столбцы
    document.write('<tr>')
    for (j = 0; j < 18; j++) {  // строки
      // Каждые 3 столбца -- есть символы из соответствующего диапазона строки "ch"
      if (j <= 2) r = Rand(0, 25)  // большие англ. буквы
      else if ((j > 2) && (j <= 5)) r = Rand(26, 51)  // маленькие англ. буквы
      else if ((j > 5) && (j <= 8)) r = Rand(52, 84)  // большие рус. буквы
      else if ((j > 8) && (j <= 11)) r = Rand(85, 117)  // маленькие рус. буквы
      else if ((j > 11) && (j <= 14)) r = Rand(118, 127)  // цифры
      else if ((j > 14) && (j < 17)) r = Rand(128, LenCh-1)  // спец. символы
      document.write('<td id=char' + g + ' onMouseOver=Info(' + g + ') onClick=ToClipboard(inpCh)><b>' + ch.charAt(r) + '</b>')
      g++
    }
  }
  document.write('</table>')
  SetColor("char")
}

/*** Создание таблицы с образцами цвета ***/
function CreateColorTable() {
k = 0
  document.write('<td align=right><table class=tColor cellspacing=5 border=0>')
  for (i = 0; i < 12; i++) {  // столбцы
    document.write('<tr height=16>')
    for (j = 0; j < 18; j++) {  // строки
      document.write('<td id=color' + k + ' width=12 onMouseOver=SetBG(PL[' + k + ']) onClick=LockColor(this)>&nbsp;')
      k++
    }
}
  document.write('</table>')
  SetColor("color")
}

/*** Прописывание цвета символа либо образца цвета ***/
function SetColor(pr) {
  for (i = 0; i < 216; i++) {
    td_ID = pr + i  // формирование ID элем.: pr + i (<строка> + <номер>)
    td_Elem = document.getElementById(td_ID)
    if (pr == "color")
      td_Elem.bgColor = PL[i]  // устанавливаем элем. td_Elem цвет фона из палитры
    else if (pr == "char")
      td_Elem.style.color = PL[i]
  }
}

var lock = false  // признак "замарозки" перебирания цвета фона

/*** Установка цвета фона документа ***/
function SetBG(color) {
var inpBG
  if (!lock) {
    document.bgColor = color
    inpBG = document.getElementById("inpBG")
    inpBG.value = document.bgColor.toUpperCase()
  }
}

var oldValue = '#000000'

/*** Проверка правильности значения цвета для поля "Установить фон".
     И последующая установка (если значение верное) цвета фона ***/
function CheckIt(value) {
  if ((value.length == 7) && (value.charAt(0) == "#") && (value != oldValue)) {
    oldValue = value
    SetBG(value)
  }
}

/*** Копирование значения из INPUT-ов в буфер обмена ***/
function ToClipboard(value) {
var obj = value.createTextRange()  // текстовый диапазон
  if (obj) {
    obj.execCommand('Copy')  // выполняем команду "Копировать"
    alert('Значение скопировано в буфер обмена Windows.')
  }
  else
    alert('Ваш браузер не поддерживает операции с буфером обмена.')
return false
}

/*** Информация о цвете текущего символа ***/
function Info(id) {
var inpCh
  inpCh = document.getElementById("inpCh")
  inpCh.value = '#' + PL[id]
}

var tObj  // "замороженный" объект

/*** Остановка изменения фона ***/
function LockColor(obj) {
var Len, d
  if (!lock) {  // если объект не "заморожен"
    lock = !lock
    tObj = obj
    index = obj.bgColor  // цвет образца
    index = '0x' + index.substring(1, index.length)  // перевод цвета в 16-ричное значение
    index = 0xFFFFFF - index  // получаем инверсное значение цвета (теперь в index 10-ричное число)
    index = index.toString(16)  // переводим index в 16-ричное значение
    Len = index.length
    if (Len < 6) {  // если полученное 16-ричное значение состоит меньше, чем из 6-и знаков
      d = 6 - Len
      for (i = 1; i <= d; i++)  // добавляем слева нули, до получения длины в 6 знаокв
        index = '0' + index
    }
    obj.style.border = "2 inset #" + index  // устанавливаем рамку с инверсным цветом
  }
  else {
    lock = !lock
    tObj.style.border = "2 outset white"  // восстанавливаем рамку "по умолчанию"
  }
}
</script>
<style>
BODY {font-family: Helvetica}
p.hd {
    text-align: center;
    background: black;
    color: #87CEFA;
    padding: 10;
    border: 1 solid green
}
input {
    padding-left: 3;
    color: lime;
    background: black;
    border: 1 solid green
}
button {
    cursor: hand;
    color: lime;
    background: navy;
    border: 1 solid #6699FF
}
table.tColor td {border: 2 outset white; cursor: hand; font-size: 1}
table.tChar td {width: 20; cursor: hand; text-align: center}
</style>
</head>

<body bgcolor=#000000>
<p class=hd>
<b>BGColor Wizard-216 v.2.2.2</b> <a style=cursor:hand onClick=alert(HowTo)>&gt;&gt;(Info)&lt;&lt;</a>
<br><br>
<font color=magenta>Цвет текста: </font><input type=text id=inpCh size=7 value=#000000> <font color=yellow> Цвет фона: </font><input type=text id=inpBG size=7 value=#000000>&nbsp;<button onClick=ToClipboard(inpBG)>Copy</button>
</p>
<table width=100% cellspacing=5 border=0>
<tr>
    <script language='JavaScript'>
    CreateCharTable()
    CreateColorTable()
    </script>
</table>
<p class=hd><font color=yellow>Установить фон: </font><input type=text id=inpSetBG size=7 value=#000000 onKeyUp=CheckIt(this.value)>&nbsp;<button onClick=ToClipboard(inpSetBG)>Copy</button></p>
</body>
</html>

2Sardar:

Цитата

...только зачем дважды паковать?

А это потому что этот форум не захотел принимать RAR-архив, а если рар потом ещё и зазипить, то форум конечно проглатывает, а вот размер у такого двойного архива получается меньше, чем если бы мы запаковали только зипом (проверено путём экспериментов).

Это сообщение отредактировал(а) Ciber SLasH - 29.4.2005, 00:35

Рыжий

Дата 29.4.2005, 00:48 (ссылка)

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

Загрузка ...

Помешанный

Профиль
Группа: Завсегдатай
Сообщений: 1423
Регистрация: 19.9.2004

Репутация: нет
Всего: 20

вот посмотрите, картинка, которая должна получиться, у вас почти тоже самое, но здесь опрятней, и тем более отсортировано все по другому - синий с синим, зеленый с зеленым и т.д.

Присоединённый файл ( Кол-во скачиваний: 59 )

11.jpg

12345c

Дата 12.1.2006, 16:16 (ссылка)

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

Загрузка ...

Круглый

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

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

Рыжий: а есть такая же, но в PNG, не попорченная Джпегом? Хотелось бы просчитать принцип её построения, но не гадать, какие цвета задумывались.

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

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

Sardar

Дата 13.1.2006, 02:30 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Это палитра цветов в HSV (оттенок, яркость, насыщеность). Для человека более удобно чем RGB. Инфа по ссылке.

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

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