Merge pull request #115 from wjamesw/colour-picker

Add component library to colour-picker solution
pnp · Oct 29, 2024 · 45e20c8 · 45e20c8
2 parents 136542f + fdab92a
commit 45e20c8
Show file tree

Hide file tree

Showing 40 changed files with 9,812 additions and 69 deletions.
diff --git a/samples/colour-picker/README.md b/samples/colour-picker/README.md
@@ -48,7 +48,7 @@ None
 ### 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.
+* Within **Power Apps Studio**, import the solution `.zip` file using **Solutions** > **Import Solution** and select the `.zip` file you just downloaded.
 
 ### Using the source code
 
@@ -66,13 +66,17 @@ You can also use the [Power Apps CLI](https://docs.microsoft.com/powerapps/devel
 
 ### Use the component in your app
 
-Open the sample app and export the component, and import the component **cptcolour-picker** to your target app.
+Open your target app and click the **Get more components** icon from the **Insert** tab. On the **Import components** pane, select **cptColourPicker** from the **Colour Picker Component Library** and then click **Import** to import the component into your target app:
+
+![Component Import](assets/Import.png)
+
+Then select **cptColourPicker** from the **Library components** group on the **Insert** tab.
 
-Set the Rows to an odd number divisible by 3 (default is 9).
+Set the **Rows** property of the component instance to an odd number divisible by 3 (default is 9).
 
-Set the Default Colour property.
+Set the **Default Colour** property.
 
-Add logic to your app to retrieve the Chosen Colour property from the component instance.
+Add logic to your app to retrieve the **Chosen Colour** property from the component instance.
 
 ## Features
 
@@ -82,7 +86,7 @@ The items for the grid are records containing H (hue), S (saturation) and L (lig
 
 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".
+The rectangle in each gallery has its fill colour set using the function property "HSLtoRGB", and its helper function "HUEtoRGB".
 
 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.
 

diff --git a/samples/colour-picker/assets/Import.png b/samples/colour-picker/assets/Import.png
diff --git a/samples/colour-picker/solution/colour-picker.zip b/samples/colour-picker/solution/colour-picker.zip
diff --git a/samples/colour-picker/sourcecode/ColourPicker/ColourPicker.cdsproj b/samples/colour-picker/sourcecode/ColourPicker/ColourPicker.cdsproj
@@ -8,7 +8,7 @@
   <Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Solution.props" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Solution.props')" />
 
   <PropertyGroup>
-    <ProjectGuid>55d4ef7a-bef6-411e-b6ca-a5aad131fee1</ProjectGuid>
+    <ProjectGuid>6f02b444-81f0-4aa1-a523-1d180f98d46d</ProjectGuid>
     <TargetFrameworkVersion>v4.6.2</TargetFrameworkVersion>
     <!--Remove TargetFramework when this is available in 16.1-->
     <TargetFramework>net462</TargetFramework>

diff --git a/...ecode/ColourPicker/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/CanvasManifest.json b/...ecode/ColourPicker/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/CanvasManifest.json
@@ -117,17 +117,17 @@
     "DocumentType": "App",
     "EnableInstrumentation": false,
     "FileID": "1603aa01-57a7-482a-bb69-3a52fbe3b22b",
-    "Id": "25a35d29-2a1f-4c71-8e23-b4e2aa691b45",
+    "Id": "8566777b-2f95-4a2d-ae05-f844c36ba9bc",
     "InstrumentationKey": "",
     "LocalDatabaseReferences": "",
     "ManualOfflineProfileId": "",
-    "Name": "ColourPickerComponent",
+    "Name": "Colour Picker Component Demo",
     "OriginatingVersion": "1.343",
     "ParserErrorCount": 0,
     "ShowStatusBar": false
   },
   "PublishInfo": {
-    "AppName": "ColourPickerComponent",
+    "AppName": "Colour Picker Component Demo",
     "BackgroundColor": "rgba(0, 0, 0, 1)",
     "IconColor": "RGBA(255,255,255,1)",
     "IconName": "",

diff --git a/...code/ColourPicker/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/Entropy/Entropy.json b/...code/ColourPicker/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/Entropy/Entropy.json
@@ -6,31 +6,31 @@
   "ControlUniqueGuids": {},
   "ControlUniqueIds": {
     "App": 1,
-    "BottomContainer1": 21,
-    "btnApplyColour": 23,
+    "BottomContainer1": 19,
+    "btnApplyColour": 21,
     "cptColourPicker": 4,
-    "cptColourPicker_1": 25,
+    "cptColourPicker_1": 23,
     "galHue": 7,
     "galleryTemplate2": 6,
     "galleryTemplate2_1": 11,
     "galleryTemplate3": 8,
     "galLightness": 10,
     "galSaturation": 5,
-    "HeaderContainer1": 19,
+    "HeaderContainer1": 17,
     "Host": 3,
-    "Label1": 20,
-    "lblColourChosen": 14,
-    "LeftContainer1": 22,
-    "recColourChosen": 15,
+    "Label1": 18,
+    "lblColourChosen": 13,
+    "LeftContainer1": 20,
+    "recColourChosen": 14,
     "recColourChosenLightness": 12,
     "recColourFixedLightness": 9,
-    "RightContainer1": 24,
-    "Screen1": 17,
-    "ScreenContainer1": 18
+    "RightContainer1": 22,
+    "Screen1": 15,
+    "ScreenContainer1": 16
   },
   "FunctionParamsInvariantScripts": {},
   "FunctionParamsInvariantScriptsOnInstances": {},
-  "HeaderLastSavedDateTimeUTC": "10/25/2024 19:47:23",
+  "HeaderLastSavedDateTimeUTC": "10/29/2024 11:50:55",
   "IsLegacyComponentAllowGlobalScopeCase": false,
   "LocalConnectionIDReferences": {},
   "LocalDatabaseReferencesAsEmpty": true,
@@ -112,18 +112,18 @@
   "RuleScreenIdWithoutScreen": {},
   "TemplateVersions": {},
   "VolatileProperties": {
-    "AnalysisLoadTime": 0.33726400000000001,
+    "AnalysisLoadTime": 0.32166489999999998,
     "ControlCount": {
-      "button": 2,
+      "button": 1,
       "db45484147974c0d9070a2b8160b34e3": 2,
       "gallery": 3,
       "galleryTemplate": 3,
       "groupContainer": 5,
-      "label": 3,
+      "label": 2,
       "rectangle": 3,
       "screen": 1
     },
-    "DeserializationLoadTime": 2.0081340000000001
+    "DeserializationLoadTime": 1.2275107999999999
   },
   "WasLocalDatabaseReferencesEmpty": true
 }
diff --git a/...ode/ColourPicker/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/Entropy/checksum.json b/...ode/ColourPicker/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/Entropy/checksum.json
@@ -2,39 +2,39 @@
   "ClientPerFileChecksums": {
     ".gitignore": "C8_VaC8EcEG56Ufcy1DFyC8Ky19iV9xSsXMDIAcmF2GTj8=",
     "AppCheckerResult.sarif": "C8_YzT1sd1pIkgtCG4dPAAqMdHcIOK79FcEkseGWEDB2Ck=",
-    "Components\\4.json": "C8_5XGdT+CKn5UynYtdYWXk1p6zKD+GP3F7N9mw3GZOsoU=",
+    "Components\\4.json": "C8_dNfvTsWxJsi+Y9vrdNvxpTEF/UqGWrASUJ5FaPwTDss=",
     "ComponentsMetadata.json": "C8_tOUKqA5mC4bXXd2N7B7vNwP/KZfkAy4Ey6AO0bid+aw=",
     "Controls\\1.json": "C8_oZeGrJGH83yuiaVBkTM9YQoDLiCeuZ2d+PQgT/nmPIc=",
-    "Controls\\17.json": "C8_WQbsJrJJBujnkjYZeZwvp6sqoLz0L3QuD2Ps/2gRinY=",
-    "Header.json": "C8_6DeTpQcAqt9s+xdp+flKpkN8LyNBt28RxDkxrXbE9u8=",
-    "Properties.json": "C8_0X4st/uv17GD8dEGIFtGXrdd8f57XOLX7n/NwQdl8/Q=",
+    "Controls\\15.json": "C8_MymwXO49kcAmC9r+08x5m8/3TXUg1nlMnmB5Hk4Ztwg=",
+    "Header.json": "C8_uEhO7Ax6LHzkRFU3AwAjFDwWK6kTU+abMeFVBKCuYH8=",
+    "Properties.json": "C8_tLsohBY7ywHQ8xqAfnCeqrQw4FnLXQL1buc/zb0C6no=",
     "References\\DataSources.json": "C8_bSi7CkSh6KfufXvbOlZaORyh3OOl6Cloq0BniqsHfY0=",
     "References\\ModernThemes.json": "C8_KDQJ/3t27vgKx25iCQB/PGqxkWE34ZB7Eyb+RxNxY0k=",
     "References\\QualifiedValues.json": "C8_nNzpVbalIqls8XE4FEhUuM4ErWe2ll7ryxM2P3IqS34=",
     "References\\Resources.json": "C8_s+se9qfOYnCKwfIt6gbv1FGBHW47JCt5d/CkUpqbcjk=",
     "References\\Templates.json": "C8_CYipdxT4xXzUWYqpKy3txkkbhi8jWh0bE3ZthL9zvBo=",
     "References\\Themes.json": "C8_DwkkMNV1j+tD94nbLPmC4Lq2wvPVfUT0BRPDe6aP2rM=",
     "Resources\\ofic4ay3.jpg": "C8_AvD2zi1v4VIuHApK6bDfZP9LUuGii24IuzHKKnfeC1Q=",
-    "Resources\\PublishInfo.json": "C8_w/Zlc+qSBTptF0Z3zsfn3QauStFSFRPvkE9Pbpntm5s="
+    "Resources\\PublishInfo.json": "C8_vQze6673EBEtUToLQYpnVt2wIn7jlNzkOvnovFCNuUg="
   },
-  "ClientStampedChecksum": "C8_BoKEjePxImbdtW2mCZvSjP8CWsjPAvLfUm2t8HP0580=",
+  "ClientStampedChecksum": "C8_v4SXgijjJdzO9x60oG4wDGzE9OTqnBn3whpKubEwkh8=",
   "ServerPerFileChecksums": {
     ".gitignore": "C8_VaC8EcEG56Ufcy1DFyC8Ky19iV9xSsXMDIAcmF2GTj8=",
     "AppCheckerResult.sarif": "C8_YzT1sd1pIkgtCG4dPAAqMdHcIOK79FcEkseGWEDB2Ck=",
-    "Components\\4.json": "C8_5XGdT+CKn5UynYtdYWXk1p6zKD+GP3F7N9mw3GZOsoU=",
+    "Components\\4.json": "C8_dNfvTsWxJsi+Y9vrdNvxpTEF/UqGWrASUJ5FaPwTDss=",
     "ComponentsMetadata.json": "C8_tOUKqA5mC4bXXd2N7B7vNwP/KZfkAy4Ey6AO0bid+aw=",
     "Controls\\1.json": "C8_oZeGrJGH83yuiaVBkTM9YQoDLiCeuZ2d+PQgT/nmPIc=",
-    "Controls\\17.json": "C8_WQbsJrJJBujnkjYZeZwvp6sqoLz0L3QuD2Ps/2gRinY=",
-    "Header.json": "C8_6DeTpQcAqt9s+xdp+flKpkN8LyNBt28RxDkxrXbE9u8=",
-    "Properties.json": "C8_0X4st/uv17GD8dEGIFtGXrdd8f57XOLX7n/NwQdl8/Q=",
+    "Controls\\15.json": "C8_MymwXO49kcAmC9r+08x5m8/3TXUg1nlMnmB5Hk4Ztwg=",
+    "Header.json": "C8_uEhO7Ax6LHzkRFU3AwAjFDwWK6kTU+abMeFVBKCuYH8=",
+    "Properties.json": "C8_tLsohBY7ywHQ8xqAfnCeqrQw4FnLXQL1buc/zb0C6no=",
     "References\\DataSources.json": "C8_bSi7CkSh6KfufXvbOlZaORyh3OOl6Cloq0BniqsHfY0=",
     "References\\ModernThemes.json": "C8_KDQJ/3t27vgKx25iCQB/PGqxkWE34ZB7Eyb+RxNxY0k=",
     "References\\QualifiedValues.json": "C8_nNzpVbalIqls8XE4FEhUuM4ErWe2ll7ryxM2P3IqS34=",
     "References\\Resources.json": "C8_s+se9qfOYnCKwfIt6gbv1FGBHW47JCt5d/CkUpqbcjk=",
     "References\\Templates.json": "C8_CYipdxT4xXzUWYqpKy3txkkbhi8jWh0bE3ZthL9zvBo=",
     "References\\Themes.json": "C8_DwkkMNV1j+tD94nbLPmC4Lq2wvPVfUT0BRPDe6aP2rM=",
     "Resources\\ofic4ay3.jpg": "C8_AvD2zi1v4VIuHApK6bDfZP9LUuGii24IuzHKKnfeC1Q=",
-    "Resources\\PublishInfo.json": "C8_w/Zlc+qSBTptF0Z3zsfn3QauStFSFRPvkE9Pbpntm5s="
+    "Resources\\PublishInfo.json": "C8_vQze6673EBEtUToLQYpnVt2wIn7jlNzkOvnovFCNuUg="
   },
-  "ServerStampedChecksum": "C8_BoKEjePxImbdtW2mCZvSjP8CWsjPAvLfUm2t8HP0580="
+  "ServerStampedChecksum": "C8_v4SXgijjJdzO9x60oG4wDGzE9OTqnBn3whpKubEwkh8="
 }
diff --git a/...er/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/Src/Components/cptColourPicker.json b/...er/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/Src/Components/cptColourPicker.json
@@ -1552,7 +1552,7 @@
           "PaddingBottom",
           "PaddingLeft"
         ],
-        "ControlUniqueId": "14",
+        "ControlUniqueId": "13",
         "HasDynamicProperties": false,
         "Index": 0,
         "IsAutoGenerated": false,
@@ -1890,7 +1890,7 @@
             "NameMapSourceSchema": "?"
           }
         ],
-        "ControlUniqueId": "15",
+        "ControlUniqueId": "14",
         "HasDynamicProperties": false,
         "Index": 0,
         "IsAutoGenerated": false,
@@ -2103,7 +2103,7 @@
         "NameMapSourceSchema": "?"
       }
     ],
-    "LastModifiedTimestamp": "638654771325312288",
+    "LastModifiedTimestamp": "638657992539531453",
     "Name": "cptColourPicker",
     "Rules": [
       {
@@ -2542,7 +2542,7 @@
   "IsPcfControl": false,
   "IsPremiumPcfControl": false,
   "IsWidgetTemplate": false,
-  "LastModifiedTimestamp": "638654771325312288",
+  "LastModifiedTimestamp": "638657992539531453",
   "Name": "db45484147974c0d9070a2b8160b34e3",
   "OverridableProperties": {},
   "Version": "1.0"

diff --git a/...ecode/ColourPicker/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/Src/Screen1.fx.yaml b/...ecode/ColourPicker/src/CanvasApps/src/wjw_colourpickercomponent_84b4f/Src/Screen1.fx.yaml
@@ -141,26 +141,6 @@ Screen1 As screen:
                                 "Difference"
                             )
                         ).Value
-                    OnReset: |-
-                        =Set(varDefaultColourRGB,With({ColourText:Text(ParseJSON(JSON(cptColourPicker_1.DefaultColour)))},{R:Hex2Dec(Mid(ColourText,2,2)),G:Hex2Dec(Mid(ColourText,4,2)),B:Hex2Dec(Mid(ColourText,6,2))}));
-                        Set(varDefaultColourHSL,cptColourPicker.RGBtoHSL(varDefaultColourRGB.R,varDefaultColourRGB.G,varDefaultColourRGB.B));
-                        Set(SL_Values,ForAll(Sequence(cptColourPicker_1.Rows,cptColourPicker_1.Rows,-1) As S,
-                            (S.Value-1)/(cptColourPicker_1.Rows-1)
-                        ));
-                        Set(H_Values,ForAll(Sequence(cptColourPicker_1.Rows,0) As H,
-                            H.Value/(cptColourPicker_1.Rows)
-                        ));
-                        Set(varSelected,
-                            {
-                                H:cptColourPicker.NearestNumber(H_Values,varDefaultColourHSL.H),
-                                S:cptColourPicker.NearestNumber(SL_Values,varDefaultColourHSL.S),
-                                L:0.5
-                            }
-                        );
-                        Set(varDefaultL,
-                            {Value:cptColourPicker.NearestNumber(SL_Values,varDefaultColourHSL.L)}
-                        );
-                        Set(varHasSelected,false);
                     RGBtoHSL: |-
                         =//Adapted to PowerFx from https://stackoverflow.com/questions/2353211/hsl-to-rgb-color-conversion
                         With({r1 : r/255, g1 : g/255, b1 : b/255},
@@ -175,5 +155,6 @@ Screen1 As screen:
                                 }
                             )
                         )))
+                    Rows: =15
                     X: =726
 
diff --git a/...icker/src/CanvasApps/src/wjw_colourpickercomponentlibrary_6635e/Assets/logo.jpg b/...icker/src/CanvasApps/src/wjw_colourpickercomponentlibrary_6635e/Assets/logo.jpg