thinkgeo_cloud_colors
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
thinkgeo_cloud_colors [2019/03/08 05:31] tgwikiupdate |
thinkgeo_cloud_colors [2019/03/11 21:08] (current) brianr |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== ThinkGeo Cloud Colors ====== | ====== ThinkGeo Cloud Colors ====== | ||
| - | ThinkGeo Cloud Colors provides some ways to generate families of colors based on the input color. Check out [[https://vectormapsamples.thinkgeo.com/#GenerateColorThemes|Generate Color Themes]] for a quick look. | + | ThinkGeo Cloud Colors provides several ways to generate harmonious themes of colors, which you can use to design attractive and meaningful maps. Your color themes can be designed around a specific base color, or the service can choose a random color for you. Check out [[https://vectormapsamples.thinkgeo.com/#GenerateColorThemes|Generate Color Themes]] for a quick look. |
| Line 6: | Line 6: | ||
| //**Try it Online**// | //**Try it Online**// | ||
| * Check out [[thinkgeo_cloud_quick_start_guide|Quick Start Guide]] and get an APIKey for free for 60 days. | * Check out [[thinkgeo_cloud_quick_start_guide|Quick Start Guide]] and get an APIKey for free for 60 days. | ||
| - | * Authorize with the key at the top of [[https://cloud.thinkgeo.com/help/|ThinkGeo Cloud APIs]] and you are then free to play with all the APIs online. | + | * Visit our [[https://cloud.thinkgeo.com/help/|ThinkGeo Cloud API Explorer]], click the "Authorize" button at the top and enter your client credentials. You are then free to play with all the APIs online. |
| * For all the APIs, check out [[https://cloud.thinkgeo.com/help/#/Colors|ThinkGeo Cloud Colors APIs]] and hit //**Try it Out**// button inside each API to start. | * For all the APIs, check out [[https://cloud.thinkgeo.com/help/#/Colors|ThinkGeo Cloud Colors APIs]] and hit //**Try it Out**// button inside each API to start. | ||
| There are two kinds of APIs provided by ThinkGeo Cloud Colors Utility that provide different color generation algorithms. | There are two kinds of APIs provided by ThinkGeo Cloud Colors Utility that provide different color generation algorithms. | ||
| Line 12: | Line 12: | ||
| ==== Generate Colors Based On A Specific Color ==== | ==== Generate Colors Based On A Specific Color ==== | ||
| - | <html><code style="color:#ce9178"> | + | <code html> |
| - | https://cloud.thinkgeo.com/api/v1/color/scheme/{algorithm}/{inputColor}/{numberOfColors}?inFormat={inFormat}&outFormat={outFormat}&apiKey={apiKey}</code></html> | + | HTTP GET |
| + | https://cloud.thinkgeo.com/api/v1/color/scheme/{algorithm}/{inputColor}/{numberOfColors}?inFormat={inFormat}&outFormat={outFormat}&apiKey={apiKey} | ||
| + | </code> | ||
| //**URL Parameters**// | //**URL Parameters**// | ||
| - | * <html><span style="color:#a6e3ff;font-weight:bold;font-style:italic;">algorithm</span></html>: The algorithm, supported values are: | + | * <html><span class="api-parameter"><span class="api-parameter-name">algorithm:</span> The algorithm to use for generating colors. Supported values are:</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">analogous</span>: <span style="color:#ce9178">Get a family of colors based on three analogous hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">analogous:</span> Get a family of colors based on three analogous hues.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">complementary</span>: <span style="color:#ce9178">Get a family of colors based on two complementary hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">complementary:</span> Get a family of colors based on two complementary hues.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">contrasting</span>: <span style="color:#ce9178">Get a family of colors based on two contrasting hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">contrasting:</span> Get a family of colors based on two contrasting hues.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">sequential</span>: <span style="color:#ce9178">Get a family of colors with the same hue and sequential variances in lightness and saturation.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">sequential:</span> Get a family of colors with the same hue and sequential variances in lightness and saturation.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">qualitative</span>: <span style="color:#ce9178">Get a family of colors with qualitative variances in hue, but similar lightness and saturation.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">qualitative:</span> Get a family of colors with qualitative variances in hue, but similar lightness and saturation.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">tetrad</span>: <span style="color:#ce9178">Get a family of colors based on a harmonious tetrad of hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">tetrad:</span> Get a family of colors based on a harmonious tetrad (two sets of complements).</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">triad</span>: <span style="color:#ce9178">Get a family of colors based on a harmonious triad of hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">triad:</span> Get a family of colors based on a harmonious triad (three colors equidistant from each other on the color wheel).</span></html> |
| - | * <html><span style="color:#a6e3ff;font-weight:bold;font-style:italic;">inputColor</span></html>: A base color, for different algorithms: | + | * <html><span class="api-parameter"><span class="api-parameter-name">inputColor:</span> A base color, for different algorithms:</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">analogous</span>: <span style="color:#ce9178">Two analogous hues will be found for you.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">analogous:</span> Two analogous hues will be found for you.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">complementary</span>: <span style="color:#ce9178">A complementary hue will be found for you.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">complementary:</span> A complementary hue will be found for you.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">contrasting</span>: <span style="color:#ce9178">A contrasting hue will be found for you.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">contrasting:</span> A contrasting hue will be found for you.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">sequential</span>: <span style="color:#ce9178">It's the color on which you want to base the color collection.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">sequential:</span> We'll create variations of brightness based on the hue of your base color.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">qualitative</span>: <span style="color:#ce9178">It's the color on which you want to base the color collection.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">qualitative:</span> We'll create a variety of different hues of a brightness similar to your base color.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">tetrad</span>: <span style="color:#ce9178">Three harmonious hues will be found for you.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">tetrad:</span> Three colors will be found for you to create a pair of complements that includes your base color.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">triad</span>: <span style="color:#ce9178">It's the color on which you want to base the colors collections.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">triad:</span> Two colors of equal distance around the color wheel from your base color will be found for you.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-weight:bold;font-style:italic;">numberOfColors</span></html>: The total number of colors you want to be returned, for different algorithms: | + | * <html><span class="api-parameter"><span class="api-parameter-name">numberOfColors:</span> The total number of colors you want to be returned, for different algorithms:</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">analogous</span>: <span style="color:#ce9178">The value must be between 3 and 54.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">analogous:</span> The value must be between 3 and 54.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">complementary</span>: <span style="color:#ce9178">The value must be between 2 and 36.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">complementary:</span> The value must be between 2 and 36.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">contrasting</span>: <span style="color:#ce9178">The value must be between 2 and 36.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">contrasting:</span> The value must be between 2 and 36.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">sequential</span>: <span style="color:#ce9178">The value must be between 1 and 255.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">sequential:</span> The value must be between 1 and 255.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">qualitative</span>: <span style="color:#ce9178">The value must be between 1 and 255.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">qualitative:</span> The value must be between 1 and 255.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">tetrad</span>: <span style="color:#ce9178">The value must be between 4 and 72.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">tetrad:</span> The value must be between 4 and 72.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">triad</span>: <span style="color:#ce9178">The value must be between 3 and 54.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">triad:</span> The value must be between 3 and 54.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-weight:bold;font-style:italic;">apikey</span>: <span style="color:#ce9178">the apikey</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">apikey:</span> the apikey</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">inFormat (optional)</span>: <span style="color:#ce9178">The format of the inputColor. Supported formats: Hex, RGB, HSL. If unspecified, the server will try to parse the inputColor in the order of Hex, RGB and HSL.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">inFormat (optional):</span> The format of the inputColor. Supported formats are ''Hex'', ''RGB'', and ''HSL''. If unspecified, the server will try to parse the inputColor format automatically in the order of Hex, then RGB, and finally HSL.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">outFormat (optional)</span>: <span style="color:#ce9178">The format in which you want the output colors. Supported formats: Hex, RGB, HSL. Defaults to Hex.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">outFormat (optional):</span> The format in which you want the output colors. Supported formats: Hex, RGB, HSL. Defaults to Hex.</span></html> |
| Line 50: | Line 52: | ||
| ==== Generate Colors Based On A Random Color ==== | ==== Generate Colors Based On A Random Color ==== | ||
| - | <html><code style="color:#ce9178"> | + | <code html> |
| - | https://cloud.thinkgeo.com/api/v1/color/scheme/{algorithm}/random/{numberOfColors}?outFormat={outFormat}&apiKey={apiKey}</code></html> | + | HTTP GET |
| + | https://cloud.thinkgeo.com/api/v1/color/scheme/{algorithm}/random/{numberOfColors}?outFormat={outFormat}&apiKey={apiKey} | ||
| + | </code> | ||
| + | |||
| //**URL Parameters**// | //**URL Parameters**// | ||
| - | * <html><span style="color:#a6e3ff;font-weight:bold;font-style:italic;">algorithm</span></html>: The algorithm, supported values are: | + | * <html><span class="api-parameter"><span class="api-parameter-name">algorithm:</span> The algorithm, supported values are:</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">analogous</span>: <span style="color:#ce9178">Get a family of colors based on three analogous hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">analogous:</span> Get a family of colors based on three analogous hues.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">complementary</span>: <span style="color:#ce9178">Get a family of colors based on two complementary hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">complementary:</span> Get a family of colors based on two complementary hues.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">contrasting</span>: <span style="color:#ce9178">Get a family of colors based on two contrasting hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">contrasting:</span> Get a family of colors based on two contrasting hues.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">sequential</span>: <span style="color:#ce9178">Get a family of colors with the same hue and sequential variances in lightness and saturation.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">sequential:</span> Get a family of colors with the same hue and sequential variances in lightness and saturation.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">qualitative</span>: <span style="color:#ce9178">Get a family of colors with qualitative variances in hue, but similar lightness and saturation.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">qualitative:</span> Get a family of colors with qualitative variances in hue, but similar lightness and saturation.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">tetrad</span>: <span style="color:#ce9178">Get a family of colors based on a harmonious tetrad of hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">tetrad:</span> Get a family of colors based on a harmonious tetrad (two sets of complements).</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">triad</span>: <span style="color:#ce9178">Get a family of colors based on a harmonious triad of hues.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">triad:</span> Get a family of colors based on a harmonious triad (three colors equidistant from each other on the color wheel).</span></html> |
| - | * <html><span style="color:#a6e3ff;font-weight:bold;font-style:italic;">numberOfColors</span></html>: The total number of colors you want to be returned, for different algorithm: | + | * <html><span class="api-parameter"><span class="api-parameter-name">numberOfColors:</span> The total number of colors you want to be returned, for different algorithm:</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">analogous</span>: <span style="color:#ce9178">The value must be between 3 and 54.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">analogous:</span> The value must be between 3 and 54.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">complementary</span>: <span style="color:#ce9178">The value must be between 2 and 36.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">complementary:</span> The value must be between 2 and 36.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">contrasting</span>: <span style="color:#ce9178">The value must be between 2 and 36.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">contrasting:</span> The value must be between 2 and 36.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">sequential</span>: <span style="color:#ce9178">The value must be between 1 and 255.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">sequential:</span> The value must be between 1 and 255.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">qualitative</span>: <span style="color:#ce9178">The value must be between 1 and 255.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">qualitative:</span> The value must be between 1 and 255.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">tetrad</span>: <span style="color:#ce9178">The value must be between 4 and 72.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">tetrad:</span> The value must be between 4 and 72.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">triad</span>: <span style="color:#ce9178">The value must be between 3 and 54.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">triad:</span> The value must be between 3 and 54.</span></html> |
| - | * <html><span style="color:#a6e3ff;font-weight:bold;font-style:italic;">apikey</span>: <span style="color:#ce9178">the apikey</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">apikey:</span> the apikey</span></html> |
| - | * <html><span style="color:#a6e3ff;font-style:italic;">outFormat (optional)</span>: <span style="color:#ce9178">The format in which you want the output colors. Supported formats: Hex, RGB, HSL. Defaults to Hex.</span></html> | + | * <html><span class="api-parameter"><span class="api-parameter-name">outFormat (optional):</span> The format in which you want the output colors. Supported formats are ''Hex'', ''RGB'', and ''HSL''. Defaults to Hex.</span></html> |
| //**Sample Request**// | //**Sample Request**// | ||
| Line 79: | Line 85: | ||
| ===== Consume From Client Side SDKs ===== | ===== Consume From Client Side SDKs ===== | ||
| - | A .Net SDK //ThinkGeo Cloud Client// is provided to consume the ThinkGeo Cloud Service as well. It's available on [[https://www.nuget.org/packages/ThinkGeo.GisServer.Client|NuGet]], here is the complete [[thinkgeo_cloud_.net_client_apis|API List]]. | + | Our .NET SDK //ThinkGeo Cloud Client// makes it easy to consume all of the ThinkGeo Cloud services in your applications. It's available on [[https://www.nuget.org/packages/ThinkGeo.Cloud.Client|NuGet]]. IntelliSense hints will help you get started, and you can also refer to the [[thinkgeo_cloud_.net_client_apis|ThinkGeo Cloud Client API list]] for details. |
| + | |||
| + | At the NuGet Package Manager terminal, you can install this package by running the command: ''Install-Package ThinkGeo.Cloud.Client -Version VERSION_TO_BE_INSTALLED''. | ||
| Sample Code: | Sample Code: | ||
| <code csharp> | <code csharp> | ||
| - | ColorClient client = new ColorClient("clientId", "clientSecret"); | + | using ThinkGeo.Cloud; |
| + | using ThinkGeo.MapSuite.Drawing; | ||
| + | ColorClient client = new ColorClient("Your Client ID", "Your Client Secret"); | ||
| Dictionary<GeoColor, Collection<GeoColor>> results = client.GetColorsInAnalogousFamily(new GeoColor(255, 0, 255), 5); | Dictionary<GeoColor, Collection<GeoColor>> results = client.GetColorsInAnalogousFamily(new GeoColor(255, 0, 255), 5); | ||
| - | Task<Dictionary<GeoColor, Collection<GeoColor>>> results = client.GetColorsInAnalogousFamily(new GeoColor(255, 0, 255), 5); | ||
| - | |||
| Dictionary<GeoColor, Collection<GeoColor>> results = client.GetColorsInAnalogousFamily(5); | Dictionary<GeoColor, Collection<GeoColor>> results = client.GetColorsInAnalogousFamily(5); | ||
| - | Task<Dictionary<GeoColor, Collection<GeoColor>>> results = client.GetColorsInAnalogousFamily(5); | ||
| </code> | </code> | ||
| Line 103: | Line 110: | ||
| * [[https://github.com/ThinkGeo/ThinkGeoCloudColorSample-ForWpf|ThinkGeoCloudColorSample-ForWpf]] for for [[map_suite_desktop_for_wpf|Map Suite Desktop For WPF]] | * [[https://github.com/ThinkGeo/ThinkGeoCloudColorSample-ForWpf|ThinkGeoCloudColorSample-ForWpf]] for for [[map_suite_desktop_for_wpf|Map Suite Desktop For WPF]] | ||
| + | Web Sample: | ||
| + | |||
| + | <code csharp> | ||
| + | |||
| + | Coming soon | ||
| + | |||
| + | </code> | ||
| + | |||
| + | |||
| + | Mobile Sample: | ||
| + | <code csharp> | ||
| + | |||
| + | Coming soon | ||
| + | |||
| + | </code> | ||
thinkgeo_cloud_colors.1552023086.txt.gz · Last modified: 2019/03/08 05:31 by tgwikiupdate