Can you help me get this to work on the p5.js online editor?

[yapdj]

This isn't an issue. I apologize for posting here. I'm wondering if you can help show me how to get this QR Code generator to work on the p5.js online editor? It's part of a project I'm working on where I want to generate colorful QR Codes. If you can help I'd greatly appreciate it!

[kazuhikoarase]

Hi, I tried it.

https://editor.p5js.org/kazuhikoarase/sketches/4X2ih70Va https://editor.p5js.org/kazuhikoarase/sketches/Req28QjIW

[yapdj]

Oh wow, you nailed it!! The colorful one is pretty much exactly what I'm going for. How can I change the string that defines the QR code pattern? What are the links that the index.html file refers to?

https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js

Actually, this is part of a larger project that I'm interested in doing. Can I interest you in helping me with it?? I can pay you for your time and efforts. If you're interested let me know how we can direct message.

Thank you so much for the work you have done so far!

[yapdj]

Oh I see now where I can change the string that defines the QR code pattern. This is great!

[kazuhikoarase]

What are the links that the index.html file refers to?

p5.js only.

https://gist.github.com/kazuhikoarase/22f0c208d38881c4e59298d069cabb37

[yapdj]

Does this line of code call out the function that actually generates the QR code? Is it possible to embed the QR generating code into the p5.js folder for the project you created? (line 32) scr.src = '//unpkg.com/qrcode-generator@1.4.4/qrcode.js';

Does this line of code define the color of each pixel in the QR code pattern? (line 74) fill('hsla(' + ~~(p.rnd 360) + ',' + (100 - 50 a) + '%,50%,' + a + ')');

If I wanted to upload a list of unique strings and generate a QR code pattern for each one, and place them next to each other, how would you go about doing something like that?

Thanks kazuhikoarase!!

[kazuhikoarase]

Does this line of code call out the function that actually generates the QR code? Is it possible to embed the QR generating code into the p5.js folder for the project you created? (line 32) scr.src = '//unpkg.com/qrcode-generator@1.4.4/qrcode.js';

I wrote this code for the online editor.

  var scr = document.createElement('script');
  scr.addEventListener('load', function() {
    // qrcode object is loaded.

  });
  scr.src = '//unpkg.com/qrcode-generator@1.4.4/qrcode.js';
  document.getElementsByTagName('script')[0].parentNode.appendChild(scr);

If you write code at standalone, it's equivalent is simply below.

<script src="https://unpkg.com/qrcode-generator@1.4.4/qrcode.js"></script>

Does this line of code define the color of each pixel in the QR code pattern? (line 74) fill('hsla(' + ~~(p.rnd 360) + ',' + (100 - 50 a) + '%,50%,' + a + ')');

yes. see also: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

If I wanted to upload a list of unique strings and generate a QR code pattern for each one, and place them next to each other, how would you go about doing something like that?

like this. https://editor.p5js.org/kazuhikoarase/sketches/RPQuD5WEs

[yapdj]

191112 qr generator p5js.pdf

Thank you so much for engaging with me on this. I really appreciate it! Please check out the attached.

1. I'm wondering if you can embed the QR pattern generating function into the p5.js project file. So that everything the program needs is all in the p5.js project file (and doesn't have to refer to sources located elsewhere).

2. For uploading unique strings, and displaying the patterns next to each other, I am thinking of something like what is shown on slide 2. Where we can define x-dim-1, x-dim-2, y-dim-1, y-dim-2 - and have the program create a similar layout depending on how many strings are uploaded. How would you do something like this?

Kazuhikoarase you have been super helpful already! Thank you!!

[kazuhikoarase]

For first, there are two solutions. (I didn't know that index.html is editable when I was writing past codes.) 1) include qrcode.js from cdn into index.html https://editor.p5js.org/kazuhikoarase/sketches/AAzbC3lEW

2) add qrcode.js and include it into index.html https://editor.p5js.org/kazuhikoarase/sketches/Yb5dxQ3Iu

If you want to add an application program, save it as app.js and add to editor then include within index.html.

<script src="app.js"></script>

[kazuhikoarase]

For second (no anim) https://editor.p5js.org/kazuhikoarase/sketches/fFZdCbCr6

[yapdj]

191113 qr generator p5js.pdf

Yes this is great thank you! I prefer the 2nd solution where you added the qrcode.js to the index.html file. Also, the code you wrote to display multiple QR patterns next to each other works really well. I made some adjustments so I can pick the colors. You can check out my project here: https://editor.p5js.org/yapdj/sketches/V4BfbWC6h

I have a couple more questions for you. Please check out the attached pdf.

1. I notice some lines between the pixel rectangles for patterns generated from longer strings. These lines don't exist for patterns generated from shorter strings. I tried adding a noStroke() to the code, but it didn't fix it. Do you think there's a way to eliminate these lines for patterns generated from longer strings?
2. Is it possible to fill the 3x large alignment squares with solid color?

Thank you kazuhikoarase!

[kazuhikoarase]

here. https://editor.p5js.org/kazuhikoarase/sketches/sdUGkmgUe

[yapdj]

191113 qr generator p5js B.pdf

You are a javascript wizard!! What did you do to eliminate the lines between the pixels/rectangles? Is it something to do with the 'buf' variable? I'm curious how you got it to work.

Another request... Do you think you can place an image (.png, .jpg, .svg like the attached) behind each QR pattern? Ultimately what I'm trying to do is create a document that I can have printed into a set of stickers.

Thanks so much kazuhikoarase! 🙏

[kazuhikoarase]

I used the buf to prepare a solid image that has no gap. I think the p5.js reference is very helpful and you could find what you are looking for. https://editor.p5js.org/kazuhikoarase/sketches/H8oRXoPAD

[yapdj]

You got it thanks for the help with this! I'm not great at coding so it's hard for me to set things up from scratch. There is a lot of useful information on p5js.org, but my fundamentals aren't good enough to really understand everything. I can tweak ,and play around with, existing code though! I know enough to be dangerous ;) You have provided me with a great starting point, and I think I can tweak the functions you've provided. Thanks again 🙏

[kazuhikoarase]

Hi, If your goal is physical printing, I think vue.js is better choice than p5.js for your purpose. Here is an example that use vue.js and the p5.js editor but not p5.js. https://editor.p5js.org/kazuhikoarase/sketches/5sdrM0I5n

[yapdj]

Hi, very interesting and thanks for the tip! Ok what are some reasons you think vue.js is better than p5.js for my purpose of making stickers? Ultimately I want to use the program to generate graphics for stickers, but that also means I have to provide a print layout to send to a manufacturer where the sheet size and stickers all have to be the correct size and in the correct locations. My plan is to use p5.js (or maybe vue.js now) to create that print layout. The 'stickerBackground' is something that I need be able to import as an image because I want to be able to put more detailed graphics in it.

[kazuhikoarase]

I thougt that vue.js could apply the SVG simply and it is easy to adjust by physical unit (mm, in). But what very important is that you feel usable yourself.

[yapdj]

Ah ok I do like the sound of that. I'll play with vue.js some and see if I can get my program to work. What editor would you recommend using with vue.js?

[yapdj]

191115 qr generator p5js.pdf

Hi kazuhikoarase, I have another question for you. In this project which you created https://editor.p5js.org/kazuhikoarase/sketches/H8oRXoPAD we're uploading an image to p5.js and displaying a QR code on top of it. I notice that when I zoom in on the corners of a sticker the edges are very rough and pixelated (see attached pdf). Since I will be printing these I need the edges to be smooth like a vector graphic. Is there anything we can do within p5.js to make the edges of those corners smooth? I did some research and it seems p5.js doesn't support SVG files, but I'm not sure this is really what I need in the first place. Is this reason enough to switch the project over to vue.js?

Thank You!

[kazuhikoarase]

All the frameworks are not depend on any editor. It's a choice of that who code.

There two graphics elements at HTML5, Canvas and SVG. Canvas is raster(pixel based) graphics and useful for animation and effects. SVG is vector graphics and provides scalable quality good graphics that it's name self.

It seems p5.js is aim to Canvas. vue.js is not aim to each other but could apply both.

You can choose them by what coding get what some result.

[yapdj]

Ok interesting. I'll continue to use the p5.js online editor as long as it will work for me. I think you're right, since I need vector graphics vue.js would be better for this project. I did some research and found a couple other javascript frameworks that could possibly work too - paper.js and rune.js.

To import SVG into vue.js looks like I need to use a loader like this. Do you have an idea how to get this loader to work with the project you created that uses vue.js? https://www.npmjs.com/package/vue-svg-loader

Here is an SVG file that I'd like to upload and use as the background for the QR code patterns. I had to load it into DropBox because GitHub doesn't allow me to attach SVG files directly. https://www.dropbox.com/s/sj72b2lnnblpmoy/bg3.svg?dl=0

You've been more than helpful! I'm sure you are busy, if you don't have time to try this I completely understand.

[kazuhikoarase]

Hi, I think it does't need vue-svg-loader at this point. Here I tried with a XHR. https://editor.p5js.org/kazuhikoarase/sketches/igCN4hlfa

[yapdj]

191117 qr generator vuejs.pdf 191117 QR Codes URLs.txt

Great, you got it to load the SVG file. The vue.js code is more difficult for me to understand than the p5.js code for some reason. I noticed that when I export the SVG from the preview, it doesn't export the image in the bg3.svg file (see attached pdf). Do you know how to get it to export the image in bg3.svg as well?

Also, do you know how to get the vue.js version to import a list of strings in a CSV file and use those strings to generate the QR code patterns? I've attached a CSV file of the strings that are currently in the program. I was able to get this to work in p5.js, but I can't figure it out in vue.js. I don't see as much info on vue.js online.

Thanks in advance for your help!

[kazuhikoarase]

I export the SVG from the preview, it doesn't export the image in the bg3.svg file

You might see old one. Try latest again. If you export with check on 'Show Bg Box', you would see blue transparent boxes too.

[kazuhikoarase]

It seems not CSV but a plain text file. I had put it as 'assets/URLs.txt' and load it to variable named 'strings'. https://editor.p5js.org/kazuhikoarase/sketches/igCN4hlfa

[yapdj]

I see now it was always exporting the image in bg3.svg. I was viewing the SVG in Adobe Illustrator, which for some reason does not display the image from bg3.svg in the export - any ideas why? If I view the SVG in a web browser all the correct information is in there. Is it possible for the program to export both an SVG and a PNG?

It seems that if I upload a text file with many URLs, the program only generates stickers for the first 4 URLs. How can we make it so the program will generate as many stickers as there are URLs (on separate lines) in the text file?

Also, is it possible to provide some control how many rows the stickers will appear on? For example say I have a canvas that is 600 x 600, and I upload a file with 100 URLs - is there a way to tell the program that I want the 100 URLs to be displayed on 3 rows?

Thanks for the help kazuhikoarase! I really appreciate it 🙏You make this look easy!

[kazuhikoarase]

I had changed the way to import SVG. https://editor.p5js.org/kazuhikoarase/sketches/ome9SY2YL But my Illustrator is very old (CS5) and can't open it correctly. Please try with yours.

[kazuhikoarase]

Is it possible for the program to export both an SVG and a PNG?

No, I can't.

the program only generates stickers for the first 4

Did you update assets/URLs.txt? I see five stickers on my browser.

Also, is it possible to provide some control how many rows the stickers will appear on?

It depends on paper size, sticker size, gap and so on.

[kazuhikoarase]

I got the latest version of Illustrator for trial, but it does not work...

[yapdj]

Hi thanks for trying! So the program was only generating the first 4 stickers due to user error (me) - I wasn't adding the '.txt' to the dataURL filename. This is working. I apologize for the confusion on my part.

I'm not able to get Illustrator to display the image from the bg svg file either. Illustrator displays the QR pattern, and the bg box, but it doesn't seem to pull in any information about the imported SVG image. Illustrator allows me to select a number of variables when exporting the svg in the first place - I tried many combinations, but none seemed to fix the problem. Our program is doing something between importing the bg svg image and exporting the canvas - where upon exporting the canvas the imported bg svg image is no longer recognized by Illustrator. Strange because it was created in Illustrator in the first place. Do we need to assign the bg svg image to a specific layer in the vue.js program or something?

Ultimately I need a high quality .png, .pdf, or .ai file that I can send to the manufacturer to be printed.

[yapdj]

191118 qr generator vuejs.pdf

Here is an image of what the Illustrator layers look like. There is one layer that contains no visual graphics. I wonder if this is where the imported bg svg image should be?

[kazuhikoarase]

Hi, It seems that reached a new start point. I could open stickers on Chrome, AI and Inkscape.

https://editor.p5js.org/kazuhikoarase/sketches/LHURo3CgB

[yapdj]

Woohoo you got it!! Thanks kazuhikoarase 🙏I don't quite understand what you did to get it to work, but I see there are a lot of changes to the code. Vue.js is more difficult for me to understand than p5.js.

One more thing, do you think you can add the ability to control the number of rows the stickers are displayed on? For example, if I upload 100 URLs and I want them to be displayed on 2 rows, or 3 rows? I think this will help with the print layout.

[kazuhikoarase]

Do you mean that there are 33~50 stickers per row and print on very large paper?

[yapdj]

Yes kind of like that. They will print on very large paper with an industrial size printer. I'll have to optimize the size, spacing, number of stickers per row, and size of the canvas so the printing and cutting is as efficient as possible. This will save cost and help reduce material waste.

What I was thinking is if there is a field where I can define the number of rows, then the program could count the number of URL's in the text file and divide that by the defined number of rows and display the resulting number of stickers per row. Is something like this possible? I was able to do this in the p5.js file, but with vue.js the code is too exotic for me.

[kazuhikoarase]

It's not a thing depend on vue.js.

The 'stickers' function (line 49~67) layout the stickers. At line 60, check if 'x' coords over the right end and do line break. If the 'paperWidth' is long enough, then 100 stickers are layouted in 2 or 3 rows.

see a simple map test below. https://editor.p5js.org/kazuhikoarase/sketches/ukyUrWi_7

    stickers: function() {
      // calc position.
      var size = this.stickerWidth - this.stickerPadding * 2;
      var x = this.marginLeft;
      var y = this.marginTop;
      return this.strings.map(function(data, i) {
        var sticker = {
          data: data, x: x, y: y, size: size,
          padding: this.stickerPadding
        };
        x += this.stickerWidth + this.hGap;
        if (x + this.stickerWidth > this.paperWidth) {
          // next line.
          x = this.marginLeft;
          y += this.stickerHeight + this.vGap;
        }
        return sticker;
      }.bind(this) );
    }

[kazuhikoarase]

I fixed some. Now all the adjustment parameters could be defined in millimeter. https://editor.p5js.org/kazuhikoarase/sketches/JlfJkNlWe It's important to set the sticker size defined in program to AI's art board size.

    stickerWidth: 73.702, // here is the size derived from the Illustrator's art board size.
    stickerHeight: 80.049,

[yapdj]

191119 qr generator vuejs.pdf

This is GREAT thank you! It's helpful to be able to enter the artboard size for the sticker, and to be able to make all of the dimensional adjustments in millimeters. I think this is coming together nicely :)

I received some info from the manufacturer, they will use multiple large sheets, not one single large sheet. Sheets will be about 200mmx450mm (approximately). So now I'm wondering if it is possible to have the program generate the QR patterns on multiple canvases/artboards (see attached). I'm thinking every canvas/artboard would use the same variables to define location, size, and spacing (marginLeft, marginTop, hGap, vGap, etc...). I would just need the ability to define how many stickers to display on each canvas/artboard. Do you think you can do something like this?

Then hopefully when I pull the SVG into Illustrator each canvas would have it's own Illustrator artboard, and I can export and send the images to the manufacturer.

You have been more than super helpful kazuhikoarase thank you so much!

[kazuhikoarase]

Sheets will be about 200mmx450mm (approximately).

It sounds a small paper. Is it sure?

[yapdj]

Yes I double checked the size 200mm x 450mm is correct. You are correct though, it's not that large a size of paper. It is just larger than an average size of paper. Sorry for the confusion.

[kazuhikoarase]

There required 13 sheets for 100 stickers. https://editor.p5js.org/kazuhikoarase/sketches/wmq6OZlnp

[yapdj]

Yes! This is great! Is it possible to get the program to export all of the canvases/artboards into a single SVG file. When I pull that into Illustrator I'm wondering if Illustrator will recognize the different artboards? It would just make it easier for me to bring it all into Illustrator at once. What you have provided is great and it may be good enough.

[kazuhikoarase]

Is it possible to get the program to export all of the canvases/artboards into a single SVG file.

It is not possible. When save the artwork that have multiple artboards as SVG, Illustrator create a file for each artboard and output multiple files.

[kazuhikoarase]

I have just added a rotate feature. It rotate the stickers 90 degrees without change the paper size. It saves three papers less.

[yapdj]

Ok I understand about Illustrator creating multiple files. I think the way you have it in the program, where I can download an SVG for each artboard will work fine. Thanks for adding the rotate feature, that will make it easier for me to optimize the layout.

Thanks kazuhikoarase! I'll send some prints to the manufacturer and see if they have any issues with the layout that I need your help with. Can I send you a gift for your help or something? You have been more than super helpful 🙏 You make all of the coding seem easy.

[kazuhikoarase]

You are welcome.

I just enjoyed coding. I learned some for the program and it's what you gave me.

Thanks a lot!

[kazuhikoarase]

I noticed that the important parameter ErrorCorrectionLevel is left 'L'. Now it is selectable. On the computer screen, 'L' is much enough but it may be weak for paper stickers that might be scratched and damaged.

[yapdj]

Yes! Thank you for adding the ability to change error correction level! I saw it in a previous version of the program, and I see now you've added it back. Wow the program is looking much easier to use now too with the sliders. This is great thank you - you da man!!

[kazuhikoarase]

Hi,

p5.js Web Editor is very easy to use. But I think that the code should be under the version control system.

So, I commited them to new repo.

The configures and the resource ware separated to 'assets' folder from the program.

https://github.com/kazuhikoarase/sticker-works

[kazuhikoarase]

The files under

https://github.com/kazuhikoarase/sticker-works/tree/master/docs/sheets

are same with

https://editor.p5js.org/kazuhikoarase/sketches/wmq6OZlnp

except the 'assets' folder.