Jump to content

Use of Variables to insert text into image from .txt or .csv file?


Doc16743

Recommended Posts

Is it possible to create several (perhaps as many as 8 variables in defined text area of an image, to be read from a separate file, such as a text or Excel file?

 

Thanks!

Doc

 

Link to comment
Share on other sites

Codelab C# would be your best bet for this. Expand on how you want it to work.

Edited by Reptillian

G'MIC Filter Developer

Link to comment
Share on other sites

Thanks for the reply, Rep! The basic idea is to have a background picture on a roughly postcard-sized image. The top layer would be multiple rectangular-shaped text fields that could be filled in from "some type" of external source, such as a .txt, .csv, or similar file. So a variable named "A1" might refer to the first segment of a line in a .csv file, "A2" might refer to the second segment, and so on.

 

The purpose of this is that I am a ham radio operator and this would generate a "QSL" card, which, when printed out or emailed, is written confirmation of a contact made on-air with another ham.

 

thanks!

Doc

 

Link to comment
Share on other sites

Here's a solution you may not have considered; Dr Scott's Markup Renderer.

 

Have a look at the demo XML code in the menu. It shows how XML can be combined with HTML and CSS to create text which can be rendered straight to your image.

Link to comment
Share on other sites

Thanks for the reply E.E.R. Looked at your idea, but I have to say it may be a bit advanced for someone of my skill level - which is to say, nonexistent! I've designed a couple of web pages over a few years, but remain blissfully ignorant of HTML code! I was hoping for something simple and (relatively) easy, such as an Excel-type reference to a different workbook, but to quote a recent politician, the cure can't be worse than the problem!

 

Thanks!

Doc - (a 72-year-old neophyte!)

 

Link to comment
Share on other sites

One possibility is to make text boxes as image on layers above the postcard background image.

 

On layers above those use the Text tool to enter the info by hand.

(Or copy/paste from a text file.)
 

Save as .pdn so you can reuse the file.

Link to comment
Share on other sites

I think that's going to be my best bet. That way I can do nice fonts and even a design as a background for each box in one step.

 

Thanks for the info Ardneh!

 

Doc

 

Link to comment
Share on other sites

7 hours ago, Doc16743 said:

Thanks for the reply E.E.R. Looked at your idea, but I have to say it may be a bit advanced for someone of my skill level

 

Can you show me an example of what you're trying to produce?

Link to comment
Share on other sites

This isn't my design. This is what has prompted me to create my own. The white fields at the very bottom labelled QSO, DATE UTC, MHZ, RST, and MODE are the fields I wanted to try to fill in with variables. All other items, such as address, are one-time entries and won't change.

 

Had no idea of the enormity of what I wanted to do!!

 

Thanks

Doc

QSL.jpg

Link to comment
Share on other sites

Looks like the plugin is not rendering the window correctly. An update is being worked on. In the meantime steps 3 to 6 are a workaround....

  1. Paste the code below into the plugin code window.
  2. Resize the plugin window to accomodate the image.
  3. Press Ctrl + Alt + PrtScn
  4. Cancel the plugin.
  5. Ctrl + V
  6. Crop as required.
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<style>
.responstable {
  margin: 1em 0;
  width: 100%;
  overflow: hidden;
  background: #FFF;
  color: #024457;
  border-radius: 10px;
  border: 1px solid #167F92;
 text-align: center;
}
.responstable tr {
  border: 1px solid #D9E4E6;
}
.responstable tr:nth-child(odd) {
  background-color: #EAF3F3;
}
.responstable th {
  display: none;
  border: 1px solid #FFF;
  background-color: #167F92;
  color: #FFF;
  padding: 1em;
}
.responstable th:first-child {
  display: table-cell;
  text-align: center;
}
.responstable th:nth-child(2) {
  display: table-cell;
}
.responstable th:nth-child(2) span {
  display: none;
}
.responstable th:nth-child(2):after {
  content: attr(data-th);
}
@media (min-width: 480px) {
  .responstable th:nth-child(2) span {
    display: block;
  }
  .responstable th:nth-child(2):after {
    display: none;
  }
}
.responstable td {
  display: block;
  word-wrap: break-word;
  max-width: 7em;
}
.responstable td:first-child {
  display: table-cell;
  text-align: center;
  border-right: 1px solid #D9E4E6;
}
@media (min-width: 480px) {
  .responstable td {
    border: 1px solid #D9E4E6;
  }
}
.responstable th, .responstable td {
  text-align: center;
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .responstable th, .responstable td {
    display: table-cell;
    padding: 1em;
  }
}

body {
  padding: 0 2em;
  font-family: Arial, sans-serif;
  color: #024457;
 background-image: url("https://www.automobilemag.com/uploads/sites/11/2020/05/1959_Cadillac_Eldorado.jpg");
 background-color: #cccccc;
  height: 200px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */

}

h1,h2 {
  font-family: Verdana;
  font-weight: normal;
  color: white;
display:inline;
align: center;
}

h1 {
  font-size: 6em;
 align: center;
margin-bottom: 3em;
}

p { color: black;
text-align:center;
}
</style>
</head>
<html>
<body>

<h1>N0GTO</h1>
<h2>DM59rc</h2>
<table class="responstable">  
  <tr>
    <th>QSO</th>
    <th>Date UTC</th>
    <th>MHz</th>
    <th>RST</th>
    <th>MODE</th>
  </tr>
  
  <tr>
    <td>K1DJE</td>
    <td>2020-12-31 20:22:08</td>
    <td>14.081.47</td>
    <td>-19</td>
    <td>FT4</td>
  </tr>

 </table>
<p>1729 Poplar Dr, Grand Junction, Colorado, United States of America, 81505  MacLogger DX</p>
</body>
</html>

 

To edit the details, change the text and resave.

  • Like 1
Link to comment
Share on other sites

Again, that is NOT my design. That is an image I copied & pasted from an email I received, not something I created with Paint.net. I have not loaded any plugins in the program, and the only thing Paint.net had to do with this image is to crop the size for posting here. This was only posted to show a sample of what I wanted to accomplish.

 

BTW - I prefer the GTO, but old Caddy drop-tops are okay, too!

 

Doc

 

Link to comment
Share on other sites

14 hours ago, Reptillian said:

I'm fairly impressed by what you did there. @Ego Eram Reputo

 

Thanks Repto. HTML and I work well together 😁 It's a shame the plugin isn't rendering correctly. @toe_head2001 spotted this problem a couple of days ago an we have started work on updating the plugin.

 

Link to comment
Share on other sites

6 hours ago, Doc16743 said:

I prefer the GTO, but old Caddy drop-tops are okay, too!

 

Hey Doc. I grabbed the first online image I liked.

 

You can change the image fairly easily. In the code there is a URL beside a tag called background-image. Change that URL to any other image you like (it doesn't have to be a car but remember copyright and attribution might still apply). Unsplash.com has a nice range of free images and a few GTO ones .

 

Feel free to ask if you need more help.

Link to comment
Share on other sites

If one is willing to go to all the trouble @Ego Eram Reputo went to in his suggestion above, I would think that adjusting this plugin would make more sense (and be, perhaps, easier):

 

 

Edited by Djisves
thinK

Xkds4Lh.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...