QR code for preview in local mobile browsers

Hi,
I found Pinegrow should print in screen a QR code as the preview in browser option, in order to do some quick test in mobile phone and tables.
It is very tedious to share, copy and paste long url to check on tables and phones.

Do you mean the preview URL for a WP page, or… Can you give some more details?

Now, when Preview in browser buttom is clicked, browser opens with a long url.
Pinegrow could add a second option, showing a QR code that can be read with a phone camera wich would open the mobile browser.

Hmmm, I’m not sure how many people would find this feature useful. I guess you could serve up localhost using NGROK or squid, theoretically. I have used NGROK for sites running on MAMP, but haven’t actually tried it with Pinegrow. Doable, but I’m not sure how many people actually have their machine set-up to do this. The other thing is that each set-up might have a different address prepended to the file name depending on how they have their environment set-up.
How is your machine set-up? In my free time, I might try seeing how difficult this is to do.
I’d also like to know how many other people are interested in this feature - maybe more people have their development environment set-up to allow this than I think - or maybe I’m missing some Pinegow feature that I should be using!!!
Thanks!

I will try to make it clearer.
The preview in the browser works fine for me (it could allow me to choose another browser installed on my computer along with the default), I can copy this local url http://192.xxx:4400/qsdfasdfasdf/asdfasdfa/asdfasdf/asdf.html and paste in any browser on my LAN to verify how it behaves on Android, iOS …
It would be great to make fewer steps. A QR code looks good if I just shoot the screen and open my browser.

Yes, I get what you meant. I guess this feature would have to have a setting for what the machine IP and port was because this would be different on each machine. Not sure what OS you are running or how you got this set up.

It should not be difficult.
Simply translate the same url from Preview in browser to QR. That is all.
The QR reader of the tablet and the phone will do the rest of the work.

Yeah, mostly true. The end user would have to know to change the internal webserver hostname to the same as the computer’s IP address. At least I have to on a mac - not sure about Windows or Linux. Otherwise it defaults to localhost which isn’t accessible even on the same LAN. Having said that, I guess you could get a pop-up reminding the user to do this before generating the QR code.

Here is a first stab. I haven’t done extensive error/edge testing. You need to have your internal webserver hostname set to your computer IP address or the QRCode won’t be valid. Once you activate the plugin there will be a new menu item under the “Page” menu called “Generate QRCode preview”. It will generate a pop-up with the QRCode. Once you follow the link you will have to click the confirmation allowing the server to accept outside links.
Again, this is a first stab. I expect some errors might occur in real use and I will try to fix them if you let me know what they are. I’m a little swamped working on 3 other projects right now - an update to my UIKit plugin, a secret project :wink:, and a react Gutenberg plugin, but this kept poking at my brain. If anyone can get this tutorial to work it would be a great help and I can make a simple PG plugin for you!(https://bigbite.net/insights/creating-advanced-block-gutenberg/)
Anyway, here is the link. https://plugins.springhilldesign.net/qrcode-for-pinegrow/

3 Likes

You got it!! It works great. Thank you

Sweet jesus, your on fire @RobM

If I send you the spec, could you knock me up a girlfriend?

Er well,second thoughts,don’t knock her up,might not be as much fun for me in the long run.

This is a faux passion, caused by us using the above and the following, Interchageably around these here parts.

1 Like