Stairs. Entry group. Materials. Doors. Locks. Design

Today we present a useful script for Adobe Illustrator. It was created by a talented Ukrainian developer of scripts and plugins for Adobe Illustrator and my friend - Yaroslav Tabachkovsky (Yemz), who is also known as the developer of the free Mesh Tormentor plugin. The RandomSwatchesFill script randomly paints selected objects in the colors selected in the Swatches palette.

You can download the script for free by clicking on the Download button at the beginning or end of this review.

Let's put the script in the following folder, for example:

For Windows: C:\Program Files\Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

For Mac: Applications / Adobe\Adobe Illustrator CS5\Presets\en_GB\Scripts

For an example of how the Random Swatches Fill script works, let’s take a vector work consisting of many monochromatic objects.

Please note that the objects to which the script will be applied must be ungrouped and selected. Without removing the selection, open the Swatches panel. Using the Ctrl/Command key, select from the Swatches palette the colors that we will use to color objects.

We use the RandomSwatchesFill script; to do this, go to File > Scripts > RandomSwatchesFill. As a result, we get colored objects painted in a random order.

This script can be applied both to the entire vector work and to several objects. Using the Lasso Tool (Q), select several objects and using the Ctrl/Command key, select colors from the Swatches palette in which to paint these objects.

As a result, part of the vector work is colored randomly with selected colors.

You can experiment with colors, gradient fills or Patterns in the Swatches panel and see what original results you can achieve. On a personal note, I would like to thank Yemz for this script and I hope that it will be useful in your everyday creative work and you will spend less time on routine technical issues.

Personally, I used this script when creating my new plugin for ordering a call. This palette helps the user select the color of the button and order form. For a long time I was looking for the right script and, in my opinion, this one is one of the best. Moreover, as I said, it is easily implanted. An example of what you get as a result can be seen in the example below. Select a color with the cursor in the fields with a gradient.

To make such a palette, you need to take 4 steps. Let's start in order with the HTML markup. You need to add it where you want to see the palette itself.

• RGB:
• HSV:
• HEX:

The main parent block with ID is color-picker. It contains three main blocks, which inside have child elements, which create the structure of our palette. Let's look at them in order, relative to the image below.

The block with the ID picker-wrapper is the first block. Responsible for displaying a square with a gradient of one color to select its shade. Inside it is a block with the gradient itself and a block responsible for the pointer.

The block with the ID pcr-wrapper is the second block responsible for the block that displays all the colors in the form of a gradient. Inside is a block with a gradient and a block that displays a slider that moves up and down.

UL list with ID color-values ​​- There are several items inside it. The first three, in the diagram they are numbered 3. They display color codes in three formats - RGB, HSV, HEX.

The block in the picture, numbered 4, is one of the elements of the previous list. This is the last li point. Inside it is a block with the ID pcr_bg. This block displays the currently selected color.

Depending on your needs, you can change places or even remove those elements that are not needed. When we are completely done with installing the palette, then you will be able to figure it out in more detail yourself and determine how to change this or that element of the palette.

The second step to install the palette is to add CSS styles. You add them, as usual, to the style file of your site, or of the element to which you connect this color palette.

#color-picker( margin:25px auto; width:450px; ) #color-values( display:block; list-style:none; color:#222; float:left; margin:0 0 0 15px; padding: 5px; text-align:left; ) #pcr_bg( height:135px; ) .picker-wrapper, .pcr-wrapper ( position: relative; float: left; ) .picker-indicator, .pcr-indicator ( position: absolute; left: 0; top: 0; ) .picker, .pcr ( cursor: crosshair; float: left; ) .cp-default .picker ( width: 200px; height: 200px; ) .cp-default .pcr ( width: 30px; height : 200px; ) .cp-default .pcr-wrapper ( margin-left: 10px; ) .cp-default .picker-indicator ( width: 5px; height: 5px; border: 2px solid darkblue; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" ; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); filter: alpha(opacity=50); background-color: white; ) .cp-default .pcr-indicator ( width: 100%; height: 10px; left: -4px; opacity: .6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); filter: alpha(opacity=60); border: 4px solid lightblue; -moz-border-radius: 4px; -o-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; background-color: white; )

I won’t describe it using CSS. As I said, a beginner is unlikely to install the palette, but an experienced one is familiar with CSS. I think you’ll figure out which parameter is responsible for what. Let's move on to the next step.

The third point that you must do is to include the file that contains the color palette script itself. The file itself will be in the archive with the sources of this article. You can download it from the link below.

The file is called colorpicker.min.js. Connect it in the header or footer of the site if you will display the palette on the site. If in some module, plugin, etc., then where you connect other scripts. Naturally, specify the correct path to the file.

Well, the last step is to connect a script that will control the output of the palette values, and will start its work as such. It is best to include the script immediately after the palette block with HTML.

cp = ColorPicker(document.getElementById("pcr"), document.getElementById("picker"), function(hex, hsv, rgb, mousePicker, mousepcr) ( currentColor = hex; ColorPicker.positionIndicators(document.getElementById("pcr- indicator"), document.getElementById("picker-indicator"), mousepcr, mousePicker); document.getElementById("hex").innerHTML = hex; document.getElementById("rgb").innerHTML = "rgb(" + rgb .r.toFixed() + "," + rgb.g.toFixed() + "," + rgb.b.toFixed() + ")"; document.getElementById("hsv").innerHTML = "hsv(" + hsv.h.toFixed() + "," + hsv.s.toFixed(2) + "," + hsv.v.toFixed(2) + ")"; document.getElementById("pcr_bg").style. backgroundColor = hex; )); cp.setHex("#D4EDFB");

There are several things you can configure in the script. Let's look at them. What can be changed starts from the 9th line.

• 9th line - block with ID - hex, assigned a color value in hex format. That is, in the list that is number 3 in the picture above, the first line. Thus, you can assign a color code to any block to display it.
• The 10th line - to the block with the ID - rgb, assigns a value in rgb format. Everything is the same as the previous point.
• The 11th line - to the block with the ID - hsv, assigns a value in hsv format.
• The 13th line - the block with the ID - pcr_bg, is assigned a style in the form of a background corresponding to the hex format. That is, the square that shows the current color. In a similar way, you can display a color from the palette, for example, for the background of a site of a certain block, etc.
• The 15th, last line sets the default color. You can indicate yours, in hex format.

That's essentially the whole connection of the color palette. As I said at the very beginning, this article may not help a beginner; it is intended for more experienced webmasters. I hope it helps you.

That's all, thanks for your attention. 🙂

The heat continues to rage in the capital and in the northern capital and will continue for at least another week. In this regard, I will try not to overwhelm my brain with all sorts of practical topics and, if possible, I will offer fairly lightweight posts, for example, like this one.

So, everyone knows perfectly well what a color picker is needed for, also known by its Russian name - “pipette” (and for children it is known as “pipette” - editor's note).

Sometimes sites require you to install a color picker (for example), and therefore I offer all the jQuery eyedropper plugins I have found. I believe this is the most complete collection. So.

All plugins are divided into two categories. One of the categories is a color atlas (swatches) - there are some preset colors from which you need to make a choice. And the second category allows you to select all kinds of color options by moving across the color field - color picker. Both names are taken from the corresponding Adobe Photoshop tools.

All plugins were tested in Internet Explorer 6-8, Google Chrome 5, Opera 10.60, Opera 9.26, Mozilla Firefox 3.6.6, Safari 4.03.

Color Pickers

A hybrid plugin containing both color picker and swatches. The best in the line of plugins, because... works correctly in all donkeys, gives information about color in the HSV and RGB systems, gives the color number. Moreover, if you click on the dots next to the letters RGB and HSV, the appearance of the palette will change! In other words, there is everything, taste and color.

Eyecon Color Picker. A very nice and convenient plugin. Gives color parameters in RGB and HSB color systems, and also gives the color number. No more is needed. It is possible to set two colors in the boxes at the top right to compare them. You can find very useful information on the plugin at the info link. Incorrect operation was noticed in IE6 - the color field is represented in shades of gray, but the colors in the fields at the top right are shown normally, and the color numbers are indicated correctly. The link to the second example shows a simplified version of the plugin. Overall, the plugin is very good, and if you choose not jPicker, then this one. I recommend it.

Intelliance Color Picker. Very similar to the simplified version from Eyecon, but has its drawbacks. Shows the color in the RGB system and gives the color number. In the sixth explorer it displays a red field, the side stripe of colors is missing. At the same time, the color is shown in the window at the top right, the color number is given correctly. Otherwise everything is fine. Once the color sampling is complete, it is possible to call some function.

. A plugin that looks different from the previous ones. It only gives the color number, although in some cases it seems possible to get a normalized color using the HSL system (normalized to one). It seems to work correctly everywhere. Although 7 donkey just froze for me, it’s not a fact that the plugin is to blame, you need to check.

Swatches

Very nice color palette. Gives the color number. No bugs noticed.

Really Simple Color Picker. A very simple color atlas. There are only 36 colors, the color number is returned. No bugs noticed.

Normal Color Picker. Represents a color atlas that returns a color number. Once the color sampling is complete, it is possible to call some function. It didn’t work in IE6 and Opera9.26, and IE7 froze completely, i.e. additional testing is required on IE7.

Simplecolor color-picker . A simple atlas of flowers. Not checked because no online example.

I think this block will be very useful, especially for cases when you need to embed it on your website. This Color Picker block works using Javascript. So let's look at how to add it to the site and what is remarkable about this JQuery plugin.

Working with code

First of all, we need to connect Javascript and CSS files. Don't forget to edit the CSS file and correct the image paths (if necessary) to match the theme of your site.

XHTML

Plugin settings

Custom plugin settings (optional).

• eventName – desired event to call the color selection function, default: “click”.
• color – default color. String for HEX color or hash for RGB and HSB ((r:255, r:0, b:0)), default: “FF0000″.
• flat – display the color selection block immediately or only on click, default value is false .
• livePreview – true by default.
• onShow - The callback function fires when the color picker is shown.
• onBeforeShow - The callback function fires before the color picker has been shown.
• onHide – The callback function fires when the color picker is hidden.
• onChange - The callback function fires when the color changes.
• onSubmit – the callback function fires when we select a color.

I hope you liked this plugin. I wish you success and development of your site!

This lesson was prepared for you by the site team
Lesson source: http://www.eyecon.ro/colorpicker/
Translated by: Vladislav Bondarenko

In this post I want to present another JavaScript creation of mine: Color Picker - color picker. The script is quite simple in functionality and installation, and in principle its code is not very complicated either. It does NOT use jQuery or images, is small in size, and is quite simple and fast. Works in IE 6-9, Opera, FireFox, Safari, Chrom.

Color Picker by default generates a palette of 216 web-safe colors, and has a CSS-styled appearance, but the appearance and contents of the palette can be customized. Below are a couple of examples of what it is capable of.

The script has been updated to version 1.2 (a button to close the palette has been added), but the listings remain old. The new version is only in the archive.

Color Picker demo

An archive of the script with examples can be downloaded here:
colorPicker.v1.1 (Original version)
colorPicker.v1.2 (Added a button to close the palette)

I’ll introduce some definitions to make it easier for me to explain to you:

Palette

Actually the palette itself, containing color samples

Sample

A palette element that, when clicked, selects a color.

Picker

This is a square with a color that the user sees, and which he needs to click on in order for the color palette to appear.

Color Picker integration

Using the script is quite simple. Color Picker - has only three available methods (shown with data type):

ColorPicker.insertInto(HTMLElement element, string name, string selected, int offsX, int offsY)

The main method is to insert a Color Picker into the specified html element. Options:

HTMLElement element - DOM - tree node in which to place the Color Picker

string name - name of the form element that will represent the selected color*

string selected - string like "#FFCC00" - default picker color

int offsX - offset of the palette coordinates (upper right corner) relative to the horizontal mouse click

int offsY - offset of the palette coordinates (upper right corner) relative to the vertical mouse click

* - Color Picker itself creates a hidden INPUT element and places it in the DOM before the picker. If you do not set the name explicitly, the script will try to set the name of the hidden INPUT element to the same as the id of the element specified in the first parameter.

// Add to the page: ColorPicker.insertInto(document.getElementById("color_picker_two"), "base_color", "#0000ff", 10, 15); ColorPicker.setPallete(array arrayOfColors)

Allows you to set your own color palette. Takes an array parameter, for example:

ColorPicker.setPallete(["#FFFFFF","#FFCC00","#00FFCC","#0000FF","#00CCFF","#CC00FF"]); ColorPicker.setClasses(string picker, string palette, string colorItem)

Allows you to specify your own style class names for picker, palette, and color swatches, for example:

ColorPicker.setColors("col-safe-picker","col-safe-palette","col-safe-item");

This will be required when you want to set your own color palette or change the appearance of the standard ones.

Color Picker usage example

The first thing we need is a form - we will insert Color Pickers into two of its elements:

Safe WEB colors:

Basic WEB colors + degrees. gray:

Send

Connect the main Color Picker file - a

// Safe web colors (standard), add to the page: ColorPicker.insertInto(document.getElementById("color_picker_one"), "safe_color", "#ff0000"); // Basic web colors + degrees. gray: ColorPicker.setPallete(["#BE2137","#FFA100","#00752C","#0052AC","#701F85", "#E62937","#FFCB00","#009E2F","#0079F1 ","#873CBE", "#FF7525","#FDF900","#00E430","#00A9FF","#C87AFF", "#FFFFFF","#999999","#666666","#333333 ","#000000"]); // Since there are fewer colors, the palette will have a different appearance - you need to adjust the styles: ColorPicker.setClasses("col-safe-picker","col-safe-palette","col-safe-item"); // Add to the page: ColorPicker.insertInto(document.getElementById("color_picker_two"), "base_color", "#0000ff", 5, 5);

Let's add styles for the standard palette:

/* Safe colors */ .col-pic-item(float:left;width:15px;height:15px;border:solid 1px #FFF;margin:0px) .col-pic-item:hover(border:solid 1px # 00FF00) .col-pic-picker(width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;) .col-pic-palette(width:306px;border:solid 2px #666)

In the JS listing above, in line 5, we set our palette, and it has fewer colors than the standard one, so in line 10, in the same place, we indicated new style classes - we will define them:

/* Basic colors */ .col-safe-item(float:left;width:40px;height:40px;border:solid 1px #FFF;margin:0px) .col-safe-item:hover(border:solid 1px # 00FF00) .col-safe-picker(width:30px;height:30px;border: solid 2px #666;float: left; margin-right: 15px;) .col-safe-palette(width:210px;border:solid 2px #666)

In fact, Color Picker only needs three classes: for the picker itself, for the palette and for samples. For expressiveness, for color samples we added another pseudo-class... :hover That's all.

I hope I explained it clearly, you can download the script files from the link at the beginning of the article, but I’ll give you a listing of the script - as always, I tried to make it simpler and shorter. If you have any questions, write.

Color Picker listing var ColorPicker = (function (GLOB) ( "use strict"; var DOC = GLOB.document, pickerClass = "col-pic-picker", paletteClass = "col-pic-palette", colorItemClass = "col-pic -item", PALETTE = , // Creates a DOM element for a color swatch getColorItem = function (clickHandler) ( var colDiv = DOC.createElement("DIV"); colDiv.className = colorItemClass; colDiv.onclick = clickHandler; return colDiv; ), // Get page scroll: pageScroll = function() ( return ( y: GLOB.pageYOffset || DOC.documentElement.scrollTop || DOC.body.scrollTop, x: GLOB.pageXOffset || DOC.documentElement.scrollLeft || DOC.body.scrollLeft ) ), // Formation of a color palette (216 Safe Web Colors are used) // This function is not accessible from the outside createPalette = function (srcPicker, srcInput) ( var palette = DOC.createElement("DIV" ), length = PALETTE.length, hexR = "", hexG = "", hexB = "", colItem = null, i, q, m, // Sample click handler: clickHandler = function () ( srcPicker.style. background = this.style.background; srcInput.value = this.hv; palette.style.display = "none"; ), // Adds a color swatch to the palette: addColor = function (color) ( colItem = getColorItem(clickHandler); colItem.style.background = colItem.hv = color; palette.appendChild(colItem); ); // If the user has not specified his palette: if (length === 0) ( // Generate the Safe Web Colors palette: for (i = 0x0; i 0) ? i.toString(16) : "00"; for (q = 0x0; q 0) ? q.toString(16) : "00"; for (m = 0x0; m 0) ? m.toString(16) : "00"; addColor("#" + hexR + hexB + hexG ); ) ) ) // Otherwise, if the user entered his own array of colors, display it: ) else ( for (i = 0; i< length; i += 1) { addColor(PALETTE[i]); } } // Конфиг палитры: palette.className = paletteClass; palette.style.display = "none"; palette.style.position = "absolute"; // Добавляем в DOM DOC.body.appendChild(palette); return palette; }; return { /** * Установка имён классов стилей. * @param string picker - Имя класса для значка выбора цвета, по-умолчанию: "col-pic-picker". * @param string palette - Имя класса для появляющейся палитры, по-умолчанию: "col-pic-palette". * @param string colorItem - Имя класса элементов - образцов цвета в палитре, для по-умолчанию: "col-pic-item". * @return ColorPicker */ setClasses: function (picker, palette, colorItem) { pickerClass = picker; paletteClass = palette; colorItemClass = colorItem; return this; }, /** * Установка своей палитры цветов. * @param array arrayOfColors - массив HEX-значений цветов. * @return ColorPicker */ setPallete: function (arrayOfColors) { PALETTE = arrayOfColors; return this; }, /** * Вставить выбиралку цвета в HTMLElement * @param HTMLElement element - элемент, результат выборки: document.getElementById * @param string name - атрибут для элемента формы, представляющего выбранный цвет. * @param string selected - значение по-умолчанию для элемента формы, представляющего выбранный цвет. * @param int offsX - смещение палитры относительно эемента выбора цвета по горизонтали * @param int offsY - смещение палитры относительно эемента выбора цвета по вертикали * @return ColorPicker */ insertInto: function (element, name, selected, offsX, offsY) { var picker = DOC.createElement("DIV"), hideInput = DOC.createElement("INPUT"), palette = createPalette(picker, hideInput), oX = offsX || 1, oY = offsY || 1; // Скрытый элемент формы, значение которого // будет меняться, в зависимости от выбора цвета // и которое будет передаваться на сервер. hideInput.value = picker.style.background = selected; hideInput.type = "hidden"; hideInput.name = name || element.id; picker.className = pickerClass; // Обработчик клика на элементе - пикере picker.onclick = function (ev) { var e = ev || GLOB.event, x = e.clientX, y = e.clientY; palette.style.display = "block"; palette.style.top = (y + pageScroll().y) - oY + "px"; palette.style.left = (x + pageScroll().x) + oX + "px"; }; // Добавляем в DOM element.appendChild(picker); element.insertBefore(hideInput, picker); return this; } }; }(this));