mirror of
https://github.com/fluxscape/fluxscape.git
synced 2026-01-12 15:22:54 +01:00
b9c60b07dc
Co-Authored-By: Eric Tuvesson <eric.tuvesson@gmail.com> Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com> Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com> Co-Authored-By: Anders Larsson <64838990+anders-topp@users.noreply.github.com> Co-Authored-By: Johan <4934465+joolsus@users.noreply.github.com> Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com> Co-Authored-By: victoratndl <99176179+victoratndl@users.noreply.github.com>
1107 lines
46 KiB
JSON
1107 lines
46 KiB
JSON
{
|
|
"name": "Mapbox_Directions_API",
|
|
"components": [
|
|
{
|
|
"name": "/App",
|
|
"graph": {
|
|
"connections": [
|
|
{
|
|
"fromId": "5888a1a4-10b7-c0dd-a5c4-10a31654434c",
|
|
"fromProperty": "map",
|
|
"toId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf",
|
|
"toProperty": "Map"
|
|
},
|
|
{
|
|
"fromId": "5888a1a4-10b7-c0dd-a5c4-10a31654434c",
|
|
"fromProperty": "mapLoaded",
|
|
"toId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6",
|
|
"toProperty": "Mount Click Event"
|
|
},
|
|
{
|
|
"fromId": "5888a1a4-10b7-c0dd-a5c4-10a31654434c",
|
|
"fromProperty": "map",
|
|
"toId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6",
|
|
"toProperty": "Mapbox Object"
|
|
},
|
|
{
|
|
"fromId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6",
|
|
"fromProperty": "Clicked",
|
|
"toId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf",
|
|
"toProperty": "CreateRoute"
|
|
},
|
|
{
|
|
"fromId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6",
|
|
"fromProperty": "Clicked Longitude",
|
|
"toId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf",
|
|
"toProperty": "endLongitude"
|
|
},
|
|
{
|
|
"fromId": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6",
|
|
"fromProperty": "Clicked Latitute",
|
|
"toId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf",
|
|
"toProperty": "endLatitute"
|
|
},
|
|
{
|
|
"fromId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf",
|
|
"fromProperty": "Steps",
|
|
"toId": "174b3737-1001-d28b-6a1f-8525d14d7565",
|
|
"toProperty": "items"
|
|
},
|
|
{
|
|
"fromId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf",
|
|
"fromProperty": "Duration",
|
|
"toId": "5ce50c95-dabc-3b92-5523-4d7f42517223",
|
|
"toProperty": "duration"
|
|
},
|
|
{
|
|
"fromId": "5ce50c95-dabc-3b92-5523-4d7f42517223",
|
|
"fromProperty": "formatted",
|
|
"toId": "2bf1c283-6ae9-49cc-a8f0-18b960f07325",
|
|
"toProperty": "text"
|
|
},
|
|
{
|
|
"fromId": "0a1bfe24-ad9d-3116-4718-819d8a4902bf",
|
|
"fromProperty": "Steps",
|
|
"toId": "47fe11ef-3e79-5a64-9cb1-d83fdc221c44",
|
|
"toProperty": "value"
|
|
},
|
|
{
|
|
"fromId": "47fe11ef-3e79-5a64-9cb1-d83fdc221c44",
|
|
"fromProperty": "result",
|
|
"toId": "78d38c66-9b68-4a66-c6a0-a34fd5e1038a",
|
|
"toProperty": "visible"
|
|
}
|
|
],
|
|
"roots": [
|
|
{
|
|
"id": "246f9453-a119-ac78-171e-3806cf596ecc",
|
|
"type": "Group",
|
|
"x": -111.4681915301291,
|
|
"y": 311.4376377651178,
|
|
"parameters": {
|
|
"backgroundColor": "#FFFFFF"
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [],
|
|
"children": [
|
|
{
|
|
"id": "5888a1a4-10b7-c0dd-a5c4-10a31654434c",
|
|
"type": "Mapbox Map",
|
|
"parameters": {
|
|
"longitude": 13.00051400697093,
|
|
"zoom": 14,
|
|
"latitute": 55.59900890612954
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [],
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "78d38c66-9b68-4a66-c6a0-a34fd5e1038a",
|
|
"type": "Group",
|
|
"parameters": {
|
|
"position": "absolute",
|
|
"marginTop": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"marginLeft": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"backgroundColor": "#FFFFFF",
|
|
"sizeMode": "contentSize",
|
|
"paddingLeft": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"paddingTop": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"paddingRight": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"paddingBottom": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
}
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [],
|
|
"children": [
|
|
{
|
|
"id": "2bf1c283-6ae9-49cc-a8f0-18b960f07325",
|
|
"type": "Text",
|
|
"parameters": {},
|
|
"ports": [],
|
|
"dynamicports": [],
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "174b3737-1001-d28b-6a1f-8525d14d7565",
|
|
"type": "For Each",
|
|
"parameters": {
|
|
"template": "/Step Item"
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [
|
|
{
|
|
"name": "inputMappingScript",
|
|
"type": {
|
|
"name": "string",
|
|
"codeeditor": "javascript"
|
|
},
|
|
"displayName": "Script",
|
|
"group": "Input Mapping",
|
|
"default": "// Here you add mappings between the properties of the item objects and the inputs of the components.\n// 'myComponentInput': 'myObjectProperty',\n// 'anotherComponentInput': function () { return object.get('someProperty') + ' ' + object.get('otherProp') }\n// These are the default mappings based on the selected template component.\nmap({\n\t'maneuver': 'maneuver',\n})\n",
|
|
"plug": "input",
|
|
"index": 6
|
|
}
|
|
],
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "0a1bfe24-ad9d-3116-4718-819d8a4902bf",
|
|
"type": "Javascript2",
|
|
"label": "Create Route",
|
|
"x": 508.53180846987084,
|
|
"y": 297.4376377651178,
|
|
"parameters": {
|
|
"code": "// This function makes a Mapbox Directions API request\nasync function getRoute(map, start, end) {\n const accessToken = Noodl.getProjectSettings().mapboxAccessToken;\n\n // make a directions request using cycling profile\n // an arbitrary start will always be the same\n // only the end or destination will change\n const query = await fetch(\n `https://api.mapbox.com/directions/v5/mapbox/cycling/${start[0]},${start[1]};${end[0]},${end[1]}?steps=true&geometries=geojson&access_token=${accessToken}`,\n { method: \"GET\" }\n );\n const json = await query.json();\n const data = json.routes[0];\n const route = data.geometry.coordinates;\n const geojson = {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"LineString\",\n coordinates: route,\n },\n };\n // if the route already exists on the map, we'll reset it using setData\n if (map.getSource(\"route\")) {\n map.getSource(\"route\").setData(geojson);\n }\n // otherwise, we'll make a new request\n else {\n map.addLayer({\n id: \"route\",\n type: \"line\",\n source: {\n type: \"geojson\",\n data: geojson,\n },\n layout: {\n \"line-join\": \"round\",\n \"line-cap\": \"round\",\n },\n paint: {\n \"line-color\": \"#3887be\",\n \"line-width\": 5,\n \"line-opacity\": 0.75,\n },\n });\n }\n\n return data;\n}\n\n//\n// Start of Noodl Script\n//\n\nScript.Inputs = {\n map: {\n displayName: \"Mapbox Object\",\n type: \"*\",\n },\n\n startLongitude: {\n displayName: \"Start Longitude\",\n type: \"number\",\n group: \"Coordinates\",\n default: 0,\n },\n startLatitute: {\n displayName: \"Start Latitude\",\n type: \"number\",\n group: \"Coordinates\",\n default: 0,\n },\n\n endLongitude: {\n displayName: \"End Longitude\",\n type: \"number\",\n group: \"Coordinates\",\n default: 0,\n },\n endLatitute: {\n displayName: \"End Latitude\",\n type: \"number\",\n group: \"Coordinates\",\n default: 0,\n },\n\n // You can read more about Routing profiles here:\n // https://docs.mapbox.com/api/navigation/directions/#routing-profiles\n routingProfile: {\n displayName: \"Routing Profile\",\n type: {\n name: \"enum\",\n enums: [\n {\n label: \"Driving Traffic\",\n value: \"mapbox/driving-traffic\",\n },\n {\n label: \"Driving\",\n value: \"mapbox/driving\",\n },\n {\n label: \"Walking\",\n value: \"mapbox/walking\",\n },\n {\n label: \"Cycling\",\n value: \"mapbox/cycling\",\n },\n ],\n },\n default: \"mapbox/cycling\",\n },\n};\n\nScript.Outputs = {\n Steps: \"array\",\n Duration: \"number\",\n};\n\nScript.Signals.CreateRoute = function () {\n const map = Script.Inputs.Map;\n const startCoords = [\n Script.Inputs.startLongitude,\n Script.Inputs.startLatitute,\n ];\n const endCoords = [Script.Inputs.endLongitude, Script.Inputs.endLatitute];\n\n // Add starting point to the map\n map.addLayer({\n id: \"point\",\n type: \"circle\",\n source: {\n type: \"geojson\",\n data: {\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"Point\",\n coordinates: startCoords,\n },\n },\n ],\n },\n },\n paint: {\n \"circle-radius\": 10,\n \"circle-color\": \"#3887be\",\n },\n });\n\n const endPoint = {\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"Point\",\n coordinates: endCoords,\n },\n },\n ],\n };\n\n if (map.getLayer(\"end\")) {\n map.getSource(\"end\").setData(endPoint);\n } else {\n map.addLayer({\n id: \"end\",\n type: \"circle\",\n source: {\n type: \"geojson\",\n data: {\n type: \"FeatureCollection\",\n features: [\n {\n type: \"Feature\",\n properties: {},\n geometry: {\n type: \"Point\",\n coordinates: endCoords,\n },\n },\n ],\n },\n },\n paint: {\n \"circle-radius\": 10,\n \"circle-color\": \"#f30\",\n },\n });\n }\n\n // make an directions request that\n getRoute(map, startCoords, endCoords).then((data) => {\n // Extract the steps / instructions\n const steps = data.legs[0].steps;\n Script.Outputs.Steps = steps;\n\n Script.Outputs.Duration = Math.floor(data.duration / 60);\n });\n};\n",
|
|
"startLatitute": 55.59900890612954,
|
|
"startLongitude": 13.00051400697093
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [
|
|
{
|
|
"name": "map",
|
|
"plug": "input",
|
|
"displayName": "Mapbox Object",
|
|
"type": "*",
|
|
"index": 5
|
|
},
|
|
{
|
|
"name": "startLongitude",
|
|
"plug": "input",
|
|
"displayName": "Start Longitude",
|
|
"type": "number",
|
|
"group": "Coordinates",
|
|
"default": 0,
|
|
"index": 6
|
|
},
|
|
{
|
|
"name": "startLatitute",
|
|
"plug": "input",
|
|
"displayName": "Start Latitude",
|
|
"type": "number",
|
|
"group": "Coordinates",
|
|
"default": 0,
|
|
"index": 7
|
|
},
|
|
{
|
|
"name": "endLongitude",
|
|
"plug": "input",
|
|
"displayName": "End Longitude",
|
|
"type": "number",
|
|
"group": "Coordinates",
|
|
"default": 0,
|
|
"index": 8
|
|
},
|
|
{
|
|
"name": "endLatitute",
|
|
"plug": "input",
|
|
"displayName": "End Latitude",
|
|
"type": "number",
|
|
"group": "Coordinates",
|
|
"default": 0,
|
|
"index": 9
|
|
},
|
|
{
|
|
"name": "routingProfile",
|
|
"plug": "input",
|
|
"displayName": "Routing Profile",
|
|
"type": {
|
|
"name": "enum",
|
|
"enums": [
|
|
{
|
|
"label": "Driving Traffic",
|
|
"value": "mapbox/driving-traffic"
|
|
},
|
|
{
|
|
"label": "Driving",
|
|
"value": "mapbox/driving"
|
|
},
|
|
{
|
|
"label": "Walking",
|
|
"value": "mapbox/walking"
|
|
},
|
|
{
|
|
"label": "Cycling",
|
|
"value": "mapbox/cycling"
|
|
}
|
|
]
|
|
},
|
|
"default": "mapbox/cycling",
|
|
"index": 10
|
|
},
|
|
{
|
|
"name": "CreateRoute",
|
|
"plug": "input",
|
|
"type": {
|
|
"name": "signal"
|
|
},
|
|
"group": "Inputs",
|
|
"index": 11
|
|
},
|
|
{
|
|
"name": "Steps",
|
|
"type": {
|
|
"name": "array"
|
|
},
|
|
"plug": "output",
|
|
"group": "Outputs",
|
|
"index": 12
|
|
},
|
|
{
|
|
"name": "Duration",
|
|
"type": {
|
|
"name": "number"
|
|
},
|
|
"plug": "output",
|
|
"group": "Outputs",
|
|
"index": 13
|
|
},
|
|
{
|
|
"name": "Map",
|
|
"displayName": "Map",
|
|
"plug": "input",
|
|
"type": "*",
|
|
"group": "Inputs",
|
|
"index": 14
|
|
}
|
|
],
|
|
"children": [],
|
|
"metadata": {
|
|
"merge": {
|
|
"soureCodePorts": [
|
|
"code"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "cae40af1-c935-bc08-2ddb-4ee4cd85a8c6",
|
|
"type": "Javascript2",
|
|
"label": "Mapbox On Click",
|
|
"x": 214.53180846987084,
|
|
"y": 207.4376377651178,
|
|
"parameters": {
|
|
"code": "Script.Outputs = {\n [\"Mapbox Object\"]: \"*\",\n [\"Clicked\"]: \"signal\",\n [\"Clicked Longitude\"]: \"number\",\n [\"Clicked Latitute\"]: \"number\"\n};\n\nScript.Signals[\"Mount Click Event\"] = function () {\n // Listen to the Mapbox on click event\n // NOTE: This might cause some memory leaks,\n // Not sure how Mapbox is handling it.\n Script.Inputs[\"Mapbox Object\"].on(\"click\", (event) => {\n // Get the coordinates that the user pressed on\n const coords = Object.keys(event.lngLat).map((key) => event.lngLat[key]);\n \n // Set the Noodl outputs\n Script.Outputs[\"Clicked Longitude\"] = coords[0];\n Script.Outputs[\"Clicked Latitute\"] = coords[1];\n\n // Send the click signal\n Script.Outputs[\"Clicked\"]();\n });\n};\n"
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [
|
|
{
|
|
"name": "Mount Click Event",
|
|
"plug": "input",
|
|
"type": {
|
|
"name": "signal"
|
|
},
|
|
"group": "Inputs",
|
|
"index": 5
|
|
},
|
|
{
|
|
"name": "Mapbox Object",
|
|
"type": {
|
|
"name": "*"
|
|
},
|
|
"plug": "output",
|
|
"group": "Outputs",
|
|
"index": 6
|
|
},
|
|
{
|
|
"name": "Clicked",
|
|
"type": {
|
|
"name": "signal"
|
|
},
|
|
"plug": "output",
|
|
"group": "Outputs",
|
|
"index": 7
|
|
},
|
|
{
|
|
"name": "Clicked Longitude",
|
|
"type": {
|
|
"name": "number"
|
|
},
|
|
"plug": "output",
|
|
"group": "Outputs",
|
|
"index": 8
|
|
},
|
|
{
|
|
"name": "Clicked Latitute",
|
|
"type": {
|
|
"name": "number"
|
|
},
|
|
"plug": "output",
|
|
"group": "Outputs",
|
|
"index": 9
|
|
},
|
|
{
|
|
"name": "Mapbox Object",
|
|
"displayName": "Mapbox Object",
|
|
"plug": "inputs",
|
|
"type": "*",
|
|
"group": "Inputs",
|
|
"index": 10
|
|
}
|
|
],
|
|
"children": [],
|
|
"metadata": {
|
|
"merge": {
|
|
"soureCodePorts": [
|
|
"code"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "5ce50c95-dabc-3b92-5523-4d7f42517223",
|
|
"type": "String Format",
|
|
"x": 240.39216977332705,
|
|
"y": 636.3443761457655,
|
|
"parameters": {
|
|
"format": "Trip duration: {duration} min ð´ "
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [
|
|
{
|
|
"name": "duration",
|
|
"type": "string",
|
|
"plug": "input",
|
|
"index": 2
|
|
}
|
|
],
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "47fe11ef-3e79-5a64-9cb1-d83fdc221c44",
|
|
"type": "Expression",
|
|
"x": 245.8584778700897,
|
|
"y": 527.0182142105168,
|
|
"parameters": {
|
|
"expression": "!!value"
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [
|
|
{
|
|
"name": "value",
|
|
"type": {
|
|
"name": "*",
|
|
"editAsType": "string"
|
|
},
|
|
"plug": "input",
|
|
"index": 2
|
|
}
|
|
],
|
|
"children": [],
|
|
"metadata": {
|
|
"merge": {
|
|
"soureCodePorts": [
|
|
"expression"
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
},
|
|
"metadata": {
|
|
"canvasSize": {
|
|
"width": "1039px",
|
|
"height": "751px"
|
|
},
|
|
"canvasPos": {
|
|
"x": 0,
|
|
"y": 0
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"name": "/Step Item",
|
|
"id": "5ecebdb7-3c7b-3fc7-e6ca-47eb44aa5eab",
|
|
"graph": {
|
|
"connections": [
|
|
{
|
|
"fromId": "29ef3a32-14fa-c4c5-4849-4c7b3d14aaae",
|
|
"fromProperty": "maneuver",
|
|
"toId": "1345f2e5-06d9-e6e8-c77b-79897247db70",
|
|
"toProperty": "maneuver"
|
|
},
|
|
{
|
|
"fromId": "1345f2e5-06d9-e6e8-c77b-79897247db70",
|
|
"fromProperty": "result",
|
|
"toId": "cedd825a-80df-4f45-872e-0aad22adbc67",
|
|
"toProperty": "text"
|
|
}
|
|
],
|
|
"roots": [
|
|
{
|
|
"id": "29ef3a32-14fa-c4c5-4849-4c7b3d14aaae",
|
|
"type": "Component Inputs",
|
|
"x": -458.5,
|
|
"y": 78.5,
|
|
"parameters": {},
|
|
"ports": [
|
|
{
|
|
"name": "maneuver",
|
|
"plug": "output",
|
|
"type": {
|
|
"name": "*"
|
|
},
|
|
"index": 2
|
|
}
|
|
],
|
|
"dynamicports": [],
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "1345f2e5-06d9-e6e8-c77b-79897247db70",
|
|
"type": "Expression",
|
|
"x": -205.5,
|
|
"y": 67.5,
|
|
"parameters": {
|
|
"expression": "maneuver.instruction"
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [
|
|
{
|
|
"name": "maneuver",
|
|
"type": {
|
|
"name": "*",
|
|
"editAsType": "string"
|
|
},
|
|
"plug": "input",
|
|
"index": 2
|
|
}
|
|
],
|
|
"children": [],
|
|
"metadata": {
|
|
"merge": {
|
|
"soureCodePorts": [
|
|
"expression"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"id": "36b8eabc-071e-bee2-b3a8-129bbd9c3e3d",
|
|
"type": "Group",
|
|
"x": 51.5,
|
|
"y": 60.5,
|
|
"parameters": {
|
|
"flexDirection": "row"
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [],
|
|
"children": [
|
|
{
|
|
"id": "43cb53ed-8410-9778-b4cb-4a35d21278ea",
|
|
"type": "net.noodl.visual.icon",
|
|
"parameters": {
|
|
"iconIconSource": {
|
|
"class": "material-icons",
|
|
"code": "circle"
|
|
},
|
|
"iconColor": "Light Gray",
|
|
"iconSize": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"alignY": "center",
|
|
"marginRight": {
|
|
"value": 16,
|
|
"unit": "px"
|
|
},
|
|
"marginLeft": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
}
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [],
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "cedd825a-80df-4f45-872e-0aad22adbc67",
|
|
"type": "Text",
|
|
"parameters": {
|
|
"sizeMode": "contentSize"
|
|
},
|
|
"ports": [],
|
|
"dynamicports": [],
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
"metadata": {
|
|
"canvasPos": {
|
|
"x": 1119,
|
|
"y": 0
|
|
}
|
|
}
|
|
}
|
|
],
|
|
"settings": {
|
|
"mapboxAccessToken": "pk.eyJ1IjoiZXJ0dXYiLCJhIjoiY2w0N2ZubWdpMDVhYTNkbzh6NTJlbm0xaCJ9.Rt2gRXVrbFeEc8aanZclSw"
|
|
},
|
|
"rootNodeId": "246f9453-a119-ac78-171e-3806cf596ecc",
|
|
"version": "3",
|
|
"metadata": {
|
|
"dbCollections": [],
|
|
"styles": {
|
|
"colors": {
|
|
"Primary": "#5836F5",
|
|
"Light Gray": "#C6C6C6",
|
|
"Dark Gray": "#434B53",
|
|
"Primary Dark": "#3F22B8",
|
|
"Dark": "#1F1F1F",
|
|
"Primary Light": "#C9BFFC"
|
|
},
|
|
"text": {
|
|
"Body Text": {
|
|
"fontFamily": "fonts/Roboto/Roboto-Regular.ttf",
|
|
"fontSize": {
|
|
"value": "18",
|
|
"unit": "px"
|
|
},
|
|
"color": "#000000"
|
|
},
|
|
"Button Label": {
|
|
"fontFamily": "fonts/Roboto/Roboto-Regular.ttf",
|
|
"fontSize": {
|
|
"value": "16",
|
|
"unit": "px"
|
|
},
|
|
"color": "#000000"
|
|
},
|
|
"Label Text": {
|
|
"fontFamily": "fonts/Roboto/Roboto-Regular.ttf",
|
|
"fontSize": {
|
|
"value": "14",
|
|
"unit": "px"
|
|
},
|
|
"color": "#000000"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"variants": [
|
|
{
|
|
"typename": "net.noodl.controls.button",
|
|
"parameters": {
|
|
"height": {
|
|
"value": 40,
|
|
"unit": "px"
|
|
},
|
|
"sizeMode": "contentWidth",
|
|
"backgroundColor": "Primary",
|
|
"iconIconSource": {
|
|
"class": "material-icons",
|
|
"code": "home"
|
|
},
|
|
"iconSize": {
|
|
"value": 22,
|
|
"unit": "px"
|
|
},
|
|
"iconSpacing": {
|
|
"value": 6,
|
|
"unit": "px"
|
|
},
|
|
"borderRadius": {
|
|
"value": 4,
|
|
"unit": "px"
|
|
},
|
|
"textStyle": "Button Label",
|
|
"paddingTop": {
|
|
"value": 5,
|
|
"unit": "px"
|
|
},
|
|
"paddingLeft": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"paddingRight": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"paddingBottom": {
|
|
"value": 4,
|
|
"unit": "px"
|
|
},
|
|
"color": "#FFFFFF",
|
|
"fontFamily": "fonts/Roboto/Roboto-Medium.ttf"
|
|
},
|
|
"stateParamaters": {
|
|
"hover": {
|
|
"backgroundColor": "Primary Dark"
|
|
},
|
|
"pressed": {
|
|
"backgroundColor": "Primary Light",
|
|
"color": "Primary Dark"
|
|
},
|
|
"disabled": {
|
|
"backgroundColor": "Light Gray"
|
|
}
|
|
},
|
|
"stateTransitions": {},
|
|
"defaultStateTransitions": {
|
|
"neutral": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
},
|
|
"hover": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
},
|
|
"pressed": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"typename": "net.noodl.controls.radiobutton",
|
|
"parameters": {
|
|
"width": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"height": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"useLabel": true,
|
|
"labeltextStyle": "Label Text",
|
|
"borderWidth": {
|
|
"value": 2,
|
|
"unit": "px"
|
|
},
|
|
"value": "0",
|
|
"useIcon": false,
|
|
"fillColor": "transparent",
|
|
"borderColor": "#1F1F1F7F",
|
|
"labelfontSize": {
|
|
"value": 16,
|
|
"unit": "px"
|
|
}
|
|
},
|
|
"stateParamaters": {
|
|
"checked": {
|
|
"fillColor": "Primary",
|
|
"borderColor": "Primary",
|
|
"borderWidth": {
|
|
"value": 2,
|
|
"unit": "px"
|
|
},
|
|
"backgroundColor": "#FFFFFF",
|
|
"width": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"height": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
}
|
|
},
|
|
"hover": {
|
|
"backgroundColor": "transparent",
|
|
"borderColor": "Primary",
|
|
"width": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"height": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
}
|
|
}
|
|
},
|
|
"stateTransitions": {},
|
|
"defaultStateTransitions": {
|
|
"neutral": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
},
|
|
"hover": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
},
|
|
"checked": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"typename": "Text",
|
|
"parameters": {
|
|
"textStyle": "Body Text"
|
|
},
|
|
"stateParamaters": {},
|
|
"stateTransitions": {}
|
|
},
|
|
{
|
|
"typename": "net.noodl.controls.range",
|
|
"parameters": {
|
|
"thumbColor": "Primary",
|
|
"thumbBorderRadius": {
|
|
"value": 100,
|
|
"unit": "%"
|
|
},
|
|
"trackHeight": {
|
|
"value": 4,
|
|
"unit": "px"
|
|
},
|
|
"trackActiveColor": "Primary",
|
|
"trackColor": "Primary Light",
|
|
"width": {
|
|
"value": 100,
|
|
"unit": "%"
|
|
}
|
|
},
|
|
"stateParamaters": {},
|
|
"stateTransitions": {}
|
|
},
|
|
{
|
|
"typename": "net.noodl.controls.checkbox",
|
|
"parameters": {
|
|
"width": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"height": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"useIcon": false,
|
|
"borderWidth": {
|
|
"value": 2,
|
|
"unit": "px"
|
|
},
|
|
"useLabel": true,
|
|
"labeltextStyle": "Label Text",
|
|
"borderRadius": {
|
|
"value": 2,
|
|
"unit": "px"
|
|
},
|
|
"borderColor": "#0000007F",
|
|
"labelfontSize": {
|
|
"value": 16,
|
|
"unit": "px"
|
|
},
|
|
"labelcolor": "Dark"
|
|
},
|
|
"stateParamaters": {
|
|
"checked": {
|
|
"useIcon": true,
|
|
"iconIconSource": {
|
|
"class": "material-icons",
|
|
"code": "check"
|
|
},
|
|
"backgroundColor": "Primary",
|
|
"borderColor": "Primary",
|
|
"iconSize": {
|
|
"value": 16,
|
|
"unit": "px"
|
|
}
|
|
},
|
|
"disabled": {
|
|
"opacity": 0.5
|
|
},
|
|
"hover": {
|
|
"borderColor": "Primary"
|
|
},
|
|
"pressed": {}
|
|
},
|
|
"stateTransitions": {},
|
|
"defaultStateTransitions": {
|
|
"neutral": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
},
|
|
"hover": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
},
|
|
"checked": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"typename": "net.noodl.controls.textinput",
|
|
"parameters": {
|
|
"useLabel": true,
|
|
"sizeMode": "explicit",
|
|
"height": {
|
|
"value": 40,
|
|
"unit": "px"
|
|
},
|
|
"textStyle": "Body Text",
|
|
"borderStyle": "solid",
|
|
"borderRadius": {
|
|
"value": 4,
|
|
"unit": "px"
|
|
},
|
|
"borderWidth": {
|
|
"value": 2,
|
|
"unit": "px"
|
|
},
|
|
"borderColor": "#1F1F1F7F",
|
|
"labeltextStyle": "Label Text",
|
|
"paddingLeft": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"paddingRight": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"labelSpacing": {
|
|
"value": 4,
|
|
"unit": "px"
|
|
},
|
|
"placeholder": "Type here",
|
|
"labelcolor": "#1F1F1F7F",
|
|
"labeltextTransform": "uppercase",
|
|
"labelfontSize": {
|
|
"value": 12,
|
|
"unit": "px"
|
|
},
|
|
"labelfontFamily": "fonts/Roboto/Roboto-Medium.ttf"
|
|
},
|
|
"stateParamaters": {
|
|
"hover": {
|
|
"labelcolor": "#000000",
|
|
"borderColor": "Dark",
|
|
"borderStyle": "solid"
|
|
},
|
|
"focused": {
|
|
"borderColor": "Primary",
|
|
"labelcolor": "Primary",
|
|
"borderWidth": {
|
|
"value": 2,
|
|
"unit": "px"
|
|
},
|
|
"boxShadowEnabled": false,
|
|
"boxShadowColor": "Primary",
|
|
"borderStyle": "solid"
|
|
},
|
|
"disabled": {
|
|
"labelcolor": "Light Gray",
|
|
"backgroundColor": "Light Gray",
|
|
"borderWidth": {
|
|
"value": 1,
|
|
"unit": "px"
|
|
},
|
|
"borderColor": "Light Gray"
|
|
}
|
|
},
|
|
"stateTransitions": {},
|
|
"defaultStateTransitions": {
|
|
"neutral": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
},
|
|
"focused": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
}
|
|
}
|
|
},
|
|
{
|
|
"typename": "net.noodl.controls.options",
|
|
"parameters": {
|
|
"sizeMode": "explicit",
|
|
"height": {
|
|
"value": 40,
|
|
"unit": "px"
|
|
},
|
|
"borderWidth": {
|
|
"value": 2,
|
|
"unit": "px"
|
|
},
|
|
"borderRadius": {
|
|
"value": 4,
|
|
"unit": "px"
|
|
},
|
|
"borderColor": "#1F1F1F7F",
|
|
"boxShadowColor": "Dark Gray",
|
|
"useIcon": true,
|
|
"iconIconSource": {
|
|
"class": "material-icons",
|
|
"code": "expand_more"
|
|
},
|
|
"iconPlacement": "right",
|
|
"iconSize": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"paddingRight": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"textStyle": "Body Text",
|
|
"paddingLeft": {
|
|
"value": 8,
|
|
"unit": "px"
|
|
},
|
|
"marginTop": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"width": {
|
|
"value": 75,
|
|
"unit": "%"
|
|
},
|
|
"iconColor": "#1F1F1F7F"
|
|
},
|
|
"stateParamaters": {
|
|
"hover": {
|
|
"borderColor": "Dark",
|
|
"borderRadius": {
|
|
"value": 4,
|
|
"unit": "px"
|
|
},
|
|
"iconColor": "Dark",
|
|
"iconSize": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"iconPlacement": "right"
|
|
},
|
|
"focused": {
|
|
"borderColor": "Primary",
|
|
"boxShadowColor": "Primary",
|
|
"borderRadius": {
|
|
"value": 4,
|
|
"unit": "px"
|
|
},
|
|
"useIcon": true,
|
|
"iconColor": "Primary",
|
|
"iconIconSource": {
|
|
"class": "material-icons",
|
|
"code": "keyboard_arrow_up"
|
|
},
|
|
"iconSize": {
|
|
"value": 24,
|
|
"unit": "px"
|
|
},
|
|
"iconPlacement": "right"
|
|
},
|
|
"pressed": {
|
|
"borderRadius": {
|
|
"value": 4,
|
|
"unit": "px"
|
|
}
|
|
}
|
|
},
|
|
"stateTransitions": {},
|
|
"defaultStateTransitions": {
|
|
"neutral": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
},
|
|
"focused": {
|
|
"curve": [
|
|
0,
|
|
0,
|
|
0.58,
|
|
1
|
|
],
|
|
"dur": 300,
|
|
"delay": 0
|
|
}
|
|
}
|
|
}
|
|
]
|
|
} |