Populating Photoshop HTML Extension Panel with entries from a txt file.

[Chris_G_1975]

Hi,

I'm trying to find a way of reading in a comma separated txt file as an array using javascript and then using the resulting values to populate an extension panel in PS CC2015 that I am writing.

Sample entries from the txt file would be something like this:

0,255,0,Polished Metal,255,255,255

77,200,0,Satin Metal,200,200,200

Each entry represents a specific colour value along with a defined material type.

The HTML panel then needs to be populated with a button corresponding to each entry in the array into a table, the function of the buttons would be defined by some simple extendscript.

I could just write the HTML/Script to do this but we need the panel to be updated based on the txt file so we can easily add/remove entries or update values without having to push out updates to the extension.

So far I've managed to read the txt file and return the entries in the txt file into a listbox from some js code from the net however this isn't quite what I am after as it only lists the entries in a one dimensional array and returns the entire line rather than the comma separated array that I require.

Doing this entire process in extendscript was pretty straightforward

I've read that reading the txt file into an array that I require would be easily done using PHP but I have no PHP experience and have no idea if this would even work in a Photoshop extension panel.

If anyone has any pointers as to how to return a 2 dimensional array in javascript that would be great.

Thanks.

[Chuck Uebele]

You would need to use commas to separate the elements of the array, and something else, like semicolons to separate the sets of arrays. Say write your text file that way, then, when you read it out, you would have something like:

var firstArray = myText.split(';')
var finalArray = new Array()
for(var i=0;i<fistArray.length;i++){
     finalArray=firstArray.split(',')
}

I would be more inclined to use an XML file rather than a text file, as you can have your xml file set up to have each node contain all your data for each entry.

[matias.kiviniemi · Accepted solution]

If you create the file yourself, JSON is often used for such (in fact name is short for Javascript Object Notation). So first create data.json

[{ "r":0, "g":255, "b":0, material:"Polished Metal", "r2":255, "g2":255 ,"b2":255},
{ "r":77, "g":200, "b":0, material:"Satin Metal", "r2":200, "g2":200 ,"b2":200}]

Then in Javascript it's just

var data = JSON.parse(file_content)
data[0].g = 120
data[1].material = "Rusty Metal"
file_content = JSON.stringify(data) // updated content to be written in file

If the file is in the current format can't be changed probably makes no sense. But learn JSON anyhow: json tutorial for beginners learn how to program part 1 JavaScript - YouTube

[Chris_G_1975]

‌Thanks for the replies, I'll look into using JSON and re-write the source txt files into this format and see how I get on

[Chris_G_1975]

Ok so I managed to re-write the txt file into a JSON file, then read that file and parse it to get my array.

Then as a test I returned some values back into the panel in a list within a <div> found by ID.

Appears to work a treat so far so thanks for the hint to using a JSON file 😉

Here's my sample code below for anyone interested in how to go about doing this:

Call the function onLoad in the HTML body.

function onLoad()

{

    fs = require('fs')

    fs.readFile('MyLocalFile.json', 'utf8', function (err,data) //Reads Local JSON File

    {

    if (err)

    {

    return console.log(err);

    }

    console.log(data); //Returns File Read in Chrome Debugger.

    {

        var array = JSON.parse(data); //Parses JSON File.

        console.log(array); //Returns Array Read in Chrome Debugger.

        var output="<ul>";

        for (var i in array)

        {

            output+="<li>" + array.first_value + " " + array.second_value + " " + array.third_value + "</li>";

        }

        output+="</ul>";

        document.getElementById("Metal_Materials").innerHTML=output;

        }

    });

}

Sample entry in JSON file.

[{"first_value":0, "second_value":255, "third_value":0}]

All I have to do now is try and create a button for each of these values rather than returning them into a list and then associate that button with some extendscript to perform some function in PS.

Phew.

[Chris_G_1975]

Ok so swapping the list to some buttons was fairly easy:

output+="<li>" + "<button>" + array.first_value + "</button>" + " " + "<button>" + array.second_value + "</button>" + " " + "<button>" + array.third_value + "</button>" + "</li>";

However this returns a rather ugly set of buttons:

I've tried adding CSS style sheet class info into the button in the js script by using the following: class="btn btn-default" but this throws up an error.

Is there a way of adding formatting information onto js scripted HTML buttons and lists????

Thanks.

[Chris_G_1975]

Not to worry, it appears I don't require the quotes in the js script when creating the button class, so class=btn btn-default is the preferred notation