ST Color Selector (Color Picker)

Color Selector (Color Picker)

A tile that lets you mass tint Tagged tiles using Tagger; the example just tints the tile itself.

Please note that the color picker UI is going to vary based on your browser.

Setup Required

Actions

• Alter
  • Attribute: texture.tint
  • Value: = "{{value.hexcode}}"
• Landing
• Show Dialog

Click here to view the Show Dialog HTML

Copy & paste the code block into the Show Dialog's content field.

<form>
<div>Please select the color for your tile.</div>
    <div class="flexrow">
<input type="color" name="hexcode" />
    <div class="flexcol">
</form>

Tile Template

Click here to view Tile Template JSON Data

Copy & paste this into Notepad and save it as a .JSON file. Then import it using MATT's Tile Templates.

{
  "width": 100,
  "height": 100,
  "z": 110,
  "rotation": 0,
  "alpha": 1,
  "hidden": false,
  "locked": false,
  "overhead": false,
  "occlusion": {
    "mode": 1,
    "alpha": 0,
    "radius": null
  },
  "video": {
    "loop": true,
    "autoplay": true,
    "volume": 0
  },
  "flags": {
    "tagger": {
      "tags": ""
    },
    "betterroofs": {
      "brMode": 0,
      "manualPoly": "",
      "occlusionLinkId": "",
      "occlusionLinkSource": false
    },
    "perfect-vision": {
      "lighting": ""
    },
    "monks-active-tiles": {
      "active": true,
      "record": false,
      "restriction": "all",
      "controlled": "all",
      "trigger": [
        "dblclick"
      ],
      "allowpaused": false,
      "usealpha": false,
      "pointer": false,
      "pertoken": false,
      "minrequired": 0,
      "chance": 100,
      "fileindex": 0,
      "actions": [
        {
          "action": "dialog",
          "data": {
            "dialogtype": "confirm",
            "title": "Color Selector",
            "content": "<form>\n<div>Please select the color for your tile.</div>\n    <div class=\"flexrow\">\n<input type=\"color\" name=\"hexcode\" />\n    <div class=\"flexcol\">\n</form>",
            "yes": "Continue",
            "no": "",
            "for": "gm"
          },
          "id": "TL7z2luhkaRO3hpI"
        },
        {
          "action": "anchor",
          "data": {
            "tag": "Continue",
            "stop": true
          },
          "id": "DOKrfC7PnPo661LW"
        },
        {
          "action": "alter",
          "data": {
            "entity": {
              "id": "tile",
              "name": "This Tile"
            },
            "attribute": "texture.tint",
            "value": "= \"{{value.hexcode}}\"",
            "chatMessage": false,
            "rollmode": "roll"
          },
          "id": "z6QCWAw8Rdkd6IlA"
        }
      ],
      "files": []
    },
    "tile-scroll": {
      "enableScroll": false,
      "scrollDirection": 0,
      "enableRotate": false,
      "scrollSpeed": 1,
      "repeat": 1,
      "pivotx": 0.5,
      "pivoty": 0.5,
      "offsetx": 0,
      "offsety": 0
    },
    "exportSource": {
      "world": "matt-test",
      "system": "dnd5e",
      "coreVersion": "10.291",
      "systemVersion": "2.1.5"
    }
  },
  "texture": {
    "src": "icons/svg/d20.svg",
    "tint": "#0062ff",
    "scaleX": 1,
    "scaleY": 1,
    "offsetX": 0,
    "offsetY": 0,
    "rotation": 0
  },
  "roof": false,
  "x": 1100,
  "y": 2400,
  "id": "AwSkGK4VQde0pBUs",
  "name": "Color_Selector_Color_Picker",
  "visible": true,
  "img": "icons/svg/d20.svg",
  "thumbnail": "icons/svg/d20.svg"
}

Page Last Updated

MATT 10.12