Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color Picker #1396

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Color Picker #1396

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
330 changes: 330 additions & 0 deletions extensions/community/ColorPicker.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,330 @@
{
"author": "",
"category": "General",
"extensionNamespace": "",
"fullName": "Color picker",
"helpPath": "",
"iconUrl": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iSWNvbnMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzIgMzIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDMyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9DQo8L3N0eWxlPg0KPHBhdGggY2xhc3M9InN0MCIgZD0iTTcsMjdjMCwxLjEtMC45LDItMiwycy0yLTAuOS0yLTJzMi0zLDItM1M3LDI1LjksNywyN3oiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjYsMTkuNkwzLjYsMTkuNmMwLjksMC45LDIuMywwLjksMy4yLDBMMTkuOCw2LjdsMCwwYy0xLjEtMS4xLTIuOS0xLjEtNCwwbC00LDRjLTIuMiwyLjItNC43LDQtNy42LDUuMmwwLDANCglDMi44LDE2LjYsMi41LDE4LjUsMy42LDE5LjZ6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTkuOCw2LjdMMjgsMTZjMS4zLDEuNSwxLjIsMy43LTAuMiw1LjFsLTUuNiw1LjZjLTEuNCwxLjQtMy42LDEuNS01LjEsMC4ybC05LjMtOC4yIi8+DQo8Y2lyY2xlIGNsYXNzPSJzdDAiIGN4PSIxOCIgY3k9IjE3IiByPSIyIi8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTkuMyw2LjNDMjMsMy41LDI2LDIsMjcsM2MxLjQsMS40LTIsNy03LjYsMTIuNiIvPg0KPC9zdmc+DQo=",
"name": "ColorPicker",
"previewIconUrl": "https://asset-resources.gdevelop.io/public-resources/Icons/Line Hero Pack/Master/SVG/UI Essentials/ab045304fea6837547a01ed2e0d0065c0bd06fb46e1b25567e07669146791fbd_UI Essentials_paint_bucket_color_colour.svg",
"shortDescription": "Add a color picker to your game! This color picker can be included for any purpose you'd like.",
"version": "1.0.0",
"description": [
"# Action.",
"- Creating the Color picker.",
"- setting it's value.",
"",
"# Expression.",
"- get the value of RGB.",
"- get the value of RED.",
"- get the value of GREEN.",
"- get the value of BLUE.",
"",
"# Condition.",
"- compare the value.",
"",
"# here's how to use it. ",
"",
"`ColorPicker::RGB()`",
"",
"**make the picker and paste the above code.** ",
"",
"",
""
],
"tags": [
"color",
"picker",
"hex",
"colorpicker"
],
"authorIds": [
"1kJvGdKrscWigLTbsMG4N1Wrv9J2"
],
"dependencies": [],
"globalVariables": [],
"sceneVariables": [],
"eventsFunctions": [
{
"description": "Make the Color picker.",
"fullName": "Make the picker",
"functionType": "Action",
"name": "CreatePicker",
"sentence": "Create the picker at _PARAM1_px and _PARAM2_px",
"events": [
{
"type": "BuiltinCommonInstructions::JsCode",
"inlineCode": [
"// get the X,Y position.",
"var X = eventsFunctionContext.getArgument(\"X\")",
"var Y = eventsFunctionContext.getArgument(\"Y\")",
"",
"",
"// Create picker.",
"const colorPicker = document.createElement(\"input\")",
"colorPicker.type = 'color'",
"colorPicker.id = 'colorpicker'",
"document.body.appendChild(colorPicker)",
"",
"// Position. ",
"colorPicker.style.position = 'absolute'",
"colorPicker.style.left = X + 'px'",
"colorPicker.style.top = Y + 'px'",
"",
"",
""
],
"parameterObjects": "",
"useStrict": true,
"eventsSheetExpanded": true
},
{
"type": "BuiltinCommonInstructions::Standard",
"conditions": [],
"actions": []
}
],
"parameters": [
{
"description": "X position of the Picker",
"name": "X",
"type": "expression"
},
{
"description": "Y position of the Picker",
"name": "Y",
"type": "expression"
}
],
"objectGroups": []
},
{
"description": "Check the value of the picker.",
"fullName": "Check Value",
"functionType": "Condition",
"name": "CheckValue",
"sentence": "if the value of picker is _PARAM1_ ",
"events": [
{
"type": "BuiltinCommonInstructions::JsCode",
"inlineCode": [
"// get the picker.",
"var colorPicker = document.getElementById(\"colorpicker\")",
"",
"// get Argument.",
"var compareValue = eventsFunctionContext.getArgument(\"PickerValue\")",
"",
"// Compare the value.",
"if(colorPicker.value == compareValue){",
" eventsFunctionContext.returnValue = true",
"}",
"else{",
" eventsFunctionContext.returnValue = false",
"}",
"",
""
],
"parameterObjects": "",
"useStrict": true,
"eventsSheetExpanded": true
}
],
"parameters": [
{
"description": "Write the Hex of the color",
"name": "PickerValue",
"type": "string"
}
],
"objectGroups": []
},
{
"description": "Set the value of picker to any color.",
"fullName": "Set picker value",
"functionType": "Action",
"name": "SetValue",
"sentence": "Change picker's value to _PARAM1_",
"events": [
{
"type": "BuiltinCommonInstructions::JsCode",
"inlineCode": [
"// get the picker.",
"var colorPicker = document.getElementById(\"colorpicker\")",
"",
"// get Argument.",
"var HexValue = eventsFunctionContext.getArgument('ChangeValue')",
"",
"// set the value.",
"colorPicker.value = HexValue"
],
"parameterObjects": "",
"useStrict": true,
"eventsSheetExpanded": true
}
],
"parameters": [
{
"description": "Write the Hex of the color",
"name": "ChangeValue",
"type": "string"
}
],
"objectGroups": []
},
{
"description": "Get RGB.",
"fullName": "RGB",
"functionType": "StringExpression",
"name": "RGB",
"sentence": "",
"events": [
{
"type": "BuiltinCommonInstructions::JsCode",
"inlineCode": [
"// get the picker.",
"var hex = document.getElementById('colorpicker').value",
"",
"// Remove '#' from the hex value.",
"hex = hex.substring(1);",
"",
"// Convert the hex color into RGB components.",
"let r = parseInt(hex.substring(0, 2), 16);",
"let g = parseInt(hex.substring(2, 4), 16);",
"let b = parseInt(hex.substring(4, 6), 16);",
"",
"// return the value.",
"eventsFunctionContext.returnValue = r + \";\" + g + \";\" + b",
""
],
"parameterObjects": "",
"useStrict": true,
"eventsSheetExpanded": true
}
],
"expressionType": {
"type": "string"
},
"parameters": [],
"objectGroups": []
},
{
"description": "Returns the RED color from RGB.",
"fullName": "Red",
"functionType": "StringExpression",
"name": "RED",
"sentence": "",
"events": [
{
"type": "BuiltinCommonInstructions::Standard",
"conditions": [],
"actions": []
},
{
"type": "BuiltinCommonInstructions::JsCode",
"inlineCode": [
"// get the picker.\r",
"var hex = document.getElementById('colorpicker').value\r",
"\r",
"// Remove '#' from the hex value.\r",
"hex = hex.substring(1);\r",
"\r",
"// Convert the hex color into RGB components.\r",
"let r = parseInt(hex.substring(0, 2), 16);\r",
"\r",
"// return the value.\r",
"eventsFunctionContext.returnValue = r\r",
""
],
"parameterObjects": "",
"useStrict": true,
"eventsSheetExpanded": true
}
],
"expressionType": {
"type": "string"
},
"parameters": [],
"objectGroups": []
},
{
"description": "Return the GREEN color from RGB.",
"fullName": "Green",
"functionType": "StringExpression",
"name": "GREEN",
"sentence": "",
"events": [
{
"type": "BuiltinCommonInstructions::Standard",
"conditions": [],
"actions": []
},
{
"type": "BuiltinCommonInstructions::JsCode",
"inlineCode": [
"// get the picker.",
"var hex = document.getElementById('colorpicker').value",
"",
"// Remove '#' from the hex value.",
"hex = hex.substring(1);",
"",
"// Convert the hex color into RGB components.",
"let g = parseInt(hex.substring(2, 4), 16);",
"",
"// return the value.",
"eventsFunctionContext.returnValue = g",
""
],
"parameterObjects": "",
"useStrict": true,
"eventsSheetExpanded": true
}
],
"expressionType": {
"type": "string"
},
"parameters": [],
"objectGroups": []
},
{
"description": "Return the BLUE color from RGB.",
"fullName": "Blue",
"functionType": "StringExpression",
"name": "BLUE",
"sentence": "",
"events": [
{
"type": "BuiltinCommonInstructions::Standard",
"conditions": [],
"actions": []
},
{
"type": "BuiltinCommonInstructions::JsCode",
"inlineCode": [
"// get the picker.",
"var hex = document.getElementById('colorpicker').value",
"",
"// Remove '#' from the hex value.",
"hex = hex.substring(1);",
"",
"// Convert the hex color into RGB components.",
"let b = parseInt(hex.substring(4, 6), 16);",
"",
"// return the value.",
"eventsFunctionContext.returnValue = b",
""
],
"parameterObjects": "",
"useStrict": true,
"eventsSheetExpanded": true
}
],
"expressionType": {
"type": "string"
},
"parameters": [],
"objectGroups": []
}
],
"eventsBasedBehaviors": [],
"eventsBasedObjects": []
}