Merge pull request #112 from wjamesw/colour-picker

Initial release of solution

samples/colour-picker/README.md

@@ -0,0 +1,122 @@
+# Colour Picker Component
+
+## Summary
+
+This Power App demonstrates a component which uses enhanced component properties to produce a colour picker in the style of a hue/saturation grid and a lightness picker, which users may be familiar with from applications like MS Paint. Users first choose a hue and saturation from the grid, then the lightness picker provides the available options of lightness for that colour. The final chosen colour is provided as an output property of the component for use in the Power App.
+
+![Component Demonstration Screen](assets/Screen1.png)
+
+The component is customisable by setting the number of rows/columns in the grid and picker. This works best with odd numbers (so that 0.5 Lightness can be selected) divisible by 3 (so that pure red, green and blue can be selected) but a higher number of rows increases the time to render the component.
+
+A default colour can be provided, which will be selected when this input property is updated.
+
+![Component Settings](assets/ComponentSettings.png)
+
+## Applies to
+
+![Power Apps](https://img.shields.io/badge/Power%20Apps-Yes-green "Yes")
+![Power Automate](https://img.shields.io/badge/Power%20Automate-No-red "No")
+![Power BI](https://img.shields.io/badge/Power%20BI-No-red "No")
+![Power Pages](https://img.shields.io/badge/Power%20Pages-No-red "No")
+![Power Virtual Agents](https://img.shields.io/badge/Power%20Virtual%20Agents-No-red "No")
+![Dataverse](https://img.shields.io/badge/Dataverse-No-red "No")
+![AI Builder](https://img.shields.io/badge/AI%20Builder-No-red "No")
+![Custom Connectors](https://img.shields.io/badge/Custom%20Connectors-No-red "No")
+![Power Fx](https://img.shields.io/badge/Power%20Fx-Yes-green "Yes")
+
+## Compatibility
+
+![Premium License](https://img.shields.io/badge/Premium%20License-Not%20Required-red.svg "Premium license not required")
+![Experimental Features](https://img.shields.io/badge/Experimental%20Features-Yes-green.svg "Does rely on experimental features")
+
+## Contributors
+
+* [James Williams](https://github.com/wjamesw)
+
+## Version history
+
+Version|Date|Comments
+-------|----|--------
+1.0|October 26, 2024|Initial release
+
+## Prerequisites
+
+None
+
+## Minimal path to awesome
+
+### Using the solution zip
+
+* [Download](./solution/colour-picker.zip) the `.zip` from the `solution` folder
+* Within **Power Apps Studio**, import the solution `.zip` file using **Solutions** > **Import Solution** and select the `.zip` file you just packed.
+
+### Using the source code
+
+You can also use the [Power Apps CLI](https://docs.microsoft.com/powerapps/developer/data-platform/powerapps-cli) to pack the source code by following these steps:
+
+* Clone the repository to a local drive
+* Pack the source files back into a solution `.zip` file:
+
+  ```bash
+  pac solution pack --zipfile pathtodestinationfile --folder pathtosourcefolder --processCanvasApps
+  ```
+
+  Making sure to replace `pathtosourcefolder` to point to the path to this sample's `sourcecode` folder, and `pathtodestinationfile` to point to the path of this solution's `.zip` file (located under the `solution` folder)
+* Within **Power Apps Studio**, import the solution `.zip` file using **Solutions** > **Import Solution** and select the `.zip` file you just packed.
+
+### Use the component in your app
+
+Open the sample app and export the component, and import the component **cptcolour-picker** to your target app.
+
+Set the Rows to an odd number divisible by 3 (default is 9).
+
+Set the Default Colour property.
+
+Add logic to your app to retrieve the Chosen Colour property from the component instance.
+
+## Features
+
+The component consists of a grid to select hue and saturation formed using a nested gallery, and a lightness picker using a gallery. Each contain a single rectangle to show the colour represented by the item.
+
+The items for the grid are records containing H (hue), S (saturation) and L (lightness) values, generated in the ColourTable property of the component. Each has L preset to 0.5 which is the most colourful value; adjustments to the L value lighten or darken the colour.
+
+As Power Apps works with RGB colours, the component contains some functions to convert between RGB and HSL colour formats.
+
+The rectangle in each gallery has its fill colour set using the function property "HSLtoRGB", and its helper function "HUE to RGB".
+
+In addition, the component's Default Colour input property is an RGB colour which, when changed, triggers the OnReset action of the component, where it is converted to HSL by first extracting the R, G and B components by converting the colour to JSON and back to a text string, then using Mid and Hex2Dec to extract the values. These RGB values are then concerted to HSL using the "RGBtoHSL" function property.
+
+As there are 256^3 possible RGB colours, and only Rows^3 possible colours in the picker, the default selected items in the galleries are then set to the nearest available colour using a function property "Nearest Number" on each of the H, S and L values.
+
+![Component Design](assets/ComponentDesign.png)
+
+This solution illustrates the following concepts:
+
+* Power Apps components
+* Enhanced component properties (Experimental feature): function properties
+
+<!--
+RESERVED FOR REPO MAINTAINERS
+
+We'll add the video from the community call recording here
+
+## Video
+
+[![YouTube video title](./assets/video-thumbnail.jpg)](https://www.youtube.com/watch?v=XXXXX "YouTube video title")
+-->
+
+## Help
+
+We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for  community members to volunteer their time and help resolve issues.
+
+If you encounter any issues while using this sample, you can [create a new issue](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=bug-report.yml&sample=colour-picker&authors=@wjamesw&title=colour-picker%20-%20).
+
+For questions regarding this sample, [create a new question](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=question.yml&sample=colour-picker&authors=@wjamesw&title=colour-picker%20-%20).
+
+Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/powerapps-samples/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected&template=suggestion.yml&sample=colour-picker&authors=@wjamesw&title=colour-picker%20-%20).
+
+## Disclaimer
+
+**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
+
+<img src="https://m365-visitor-stats.azurewebsites.net/powerplatform-samples/samples/colour-picker"  aria-hidden="true" />

samples/colour-picker/assets/sample.json

@@ -0,0 +1,66 @@
+[
+  {
+    "name": "pnp-powerplatform-samples-colour-picker",
+    "source": "pnp",
+    "title": "Colour Picker Component",
+    "shortDescription": "This Power App demonstrates a component which uses enhanced component properties to produce a colour picker in the style of a hue/saturation grid and a lightness picker, which users may be familiar with from applications like MS Paint.",
+    "url": "https://github.com/pnp/powerplatform-samples/tree/main/samples/colour-picker",
+    "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/powerplatform-samples/tree/main/samples/colour-picker",
+    "longDescription": [
+      "This Power App demonstrates a component which uses enhanced component properties to produce a colour picker in the style of a hue/saturation grid and a lightness picker, which users may be familiar with from applications like MS Paint. Users first choose a hue and saturation from the grid, then the lightness picker provides the available options of lightness for that colour. The final chosen colour is provided as an output property of the component for use in the Power App."
+    ],
+    "creationDateTime": "2024-10-26",
+    "updateDateTime": "2024-10-26",
+    "products": [
+      "Power Apps",
+      "Power Fx",
+      "Power Platform"
+    ],
+    "tags": [
+      "Colour Picker"
+    ],
+    "categories": [
+      "CANVAS"
+    ],
+    "metadata": [
+      {
+        "key": "POWERAPPS-EXPERIMENTAL",
+        "value": "Yes"
+      },
+      {
+        "key": "POWERAPPS-PREMIUM",
+        "value": "No"
+      },
+      {
+        "key": "POWERAPPS-ONPREM",
+        "value": "No"
+      },
+      {
+        "key": "POWERAPPS-CUSTOMCONNECTOR",
+        "value": "No"
+      }
+    ],
+    "thumbnails": [
+      {
+        "type": "image",
+        "order": 100,
+        "url": "https://github.com/pnp/powerplatform-samples/raw/main/samples/colour-picker/assets/Screen1.png",
+        "alt": "App preview"
+      }
+    ],
+    "authors": [
+      {
+        "gitHubAccount": "wjamesw",
+        "pictureUrl": "https://github.com/wjamesw.png",
+        "name": "James Williams"
+      }
+    ],
+    "references": [
+      {
+        "name": "Microsoft Power Platform documentation",
+        "description": "Discover how to make the most of Microsoft Power Platform products with online training courses, docs, and videos covering product capabilities and how-to guides.",
+        "url": "https://learn.microsoft.com/power-platform/"
+      }
+    ]
+  }
+]

samples/colour-picker/sourcecode/ColourPicker/.gitignore

@@ -0,0 +1,8 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# msbuild output directories
+/bin
+/obj
+
+# MSBuild Binary and Structured Log
+*.binlog

samples/colour-picker/sourcecode/ColourPicker/ColourPicker.cdsproj

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PowerAppsTargetsPath>$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(VisualStudioVersion)\PowerApps</PowerAppsTargetsPath>
+  </PropertyGroup>
+
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" />
+  <Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Solution.props" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Solution.props')" />
+
+  <PropertyGroup>
+    <ProjectGuid>55d4ef7a-bef6-411e-b6ca-a5aad131fee1</ProjectGuid>
+    <TargetFrameworkVersion>v4.6.2</TargetFrameworkVersion>
+    <!--Remove TargetFramework when this is available in 16.1-->
+    <TargetFramework>net462</TargetFramework>
+    <RestoreProjectStyle>PackageReference</RestoreProjectStyle>
+    <SolutionRootPath>src</SolutionRootPath>
+  </PropertyGroup>
+
+  <!-- 
+    Solution Packager overrides, un-comment to use: SolutionPackagerType (Managed, Unmanaged, Both)
+    Solution Localization Control, if you want to enabled localization of your solution, un-comment SolutionPackageEnableLocalization and set the value to true. - Requires use of -loc flag on Solution Clone or Sync
+  -->
+  <!--
+  <PropertyGroup>
+    <SolutionPackageType>Managed</SolutionPackageType>
+    <SolutionPackageEnableLocalization>false</SolutionPackageEnableLocalization>
+  </PropertyGroup>
+  -->
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.PowerApps.MSBuild.Solution" Version="1.*" />
+    <PackageReference Include="Microsoft.NETFramework.ReferenceAssemblies" Version="1.0.0" PrivateAssets="All" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\.gitignore" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\bin\**" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\obj\**" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.cdsproj" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.cdsproj.user" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.sln" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="$(MSBuildThisFileDirectory)\**" Exclude="@(ExcludeDirectories)" />
+    <Content Include="$(SolutionPackageZipFilePath)">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+
+  <Import Project="$(MSBuildToolsPath)\Microsoft.Common.targets" />
+  <Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Solution.targets" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Solution.targets')" />
+
+</Project>

samples/colour-picker/sourcecode/ColourPicker/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/Assets/SampleImage.json

@@ -0,0 +1,12 @@
+{
+  "Content": "Image",
+  "FileName": "/ctrllib/image/images/SampleImage.svg",
+  "IsSampleData": true,
+  "IsWritable": false,
+  "Name": "SampleImage",
+  "Path": "/ctrllib/image/images/SampleImage.svg",
+  "ResourceKind": "Uri",
+  "RootPath": "ms-appx:///ctrllib/image/images/SampleImage.svg",
+  "Schema": "i",
+  "Type": "ResourceInfo"
+}