Categories
Technology Tutorial Ubuntu Ubuntu Touch

Getting Started With Quasar and VueJS on Ubuntu

After watching this recommended tutorial I decided to try out this Quasar thing. My true hope is that we can eventually add Ubuntu Touch as one of the buildable outputs at the end of app creation as it apparently might not be that hard with Cordova… but I digress…

I’m not an experienced developer yet so getting started with all these different ‘things’ I had to install with the terminal was getting a bit concerning. I decided to document my journey so that others can hopefully follow along and save some research and time.

So, if your goal is to be able to, without a great deal of pain, create a good looking app to run on Ubuntu, this might just help.

Without further adoo here are the steps that I took to get set up on my Ubuntu 18 LTS machine so that I’m ready to start using the Quasar framework. I left very brief notes to show what you are actually doing so that it’s not some random terminal script from some random blog:

  1. Install npm
    sudo apt install npm
  2. Download and install NVM (a thing to help you install and manage nodejs. Ubuntu repository for NPM is apparently not reliably up to date so that’s why we are using NVM. NOTE: Before beginning, check this page to make sure the following script I’m about to give you is up to date as it changes from time to time. Oh, and if you want to have a dance party and learn more about the details of NVM, this video is good. curl -o https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
  3. Install LTS version of Nodejs (you can do whatever version you want as well easily but I’m not bothering to show that in this tutorial): nvm install --lts
  4. Check to make sure what you installed was what you wanted nvm ls
  5. Install the Vue CLI which is apparently what real developers developing VueJS stuff use. I got a few ‘warning’ messages after running this about my OS but probably life will continue…note also that when running this script my whole computer slowed down: sudo npm i -g @vue/cli
  6. Install Quasar – the framework that apparently makes doing a lot of stuff easier: sudo npm i -g @quasar/cli

Now I’m off to try to actually do this tutorial

Some Follow-Up Updates from the first tutorial Journey

Might as well leave a few notes that might help you along the way. If you were doing this Quasar tutorial and had an issue with hot reload not opening, I figured out how to get it working by just running quasar dev again and that seemed to kickstart the hot reload option. I had this happen a few times when i made changes and nothing new showed on the hot reload app.

In order to get highlights working properly in VS Code like teacher’s you should get the extensions for Vue and Sass since they may not be installed. I used:

octref.vetur (Vetur) for Vue because this has html auto-complete as well (another one I tried didn’t…) and

syler.sass-indented for sass stuff

Converting your New App into an Electron App and then Building for Ubuntu with a Debian package

For some reason it doesn’t really say explicitly anywhere in the tutorial above nor on the Quasar site, how to build for Ubuntu / Linux. I assume most developers ‘just know’ this but I didn’t so I had to search and find. For your benefit,

Installing for Ubuntu

Very hard to figure this out for a noob but after a full day of time spent I figured out how to turn this Electron app into an ubuntu native app running in the launcher and everything (exciting moment for a noob, I say!)

I feel like there should be a way to do this right in Quasar with a terminal tag during the build but it seems not.

First, you need to install this by running this on your Quasar dev machine:

npm install -g electron-installer-debian

Then, you build the app with the Quasar electron instructions, but for me it was as simple as running this:

quasar build - m electron

After you run that you’ll find two directories, one of which I still don’t know what it does. The two directories were “my-app-name-linux-x64” and “Unpackaged”

I then created a directory in my quasar project folder at the top level called ‘installers’

I then took the following command which I pulled off the read me page above:

electron-installer-debian --src dist/app-linux-x64/ --dest dist/installers/ --arch amd64

And adjusted the ‘src’ (source) to point to my app-named directory in the electron folder and the ‘dest’ (destination) to the installer directory I created. You can do what you’d like but mine looked like this therefore:

electron-installer-debian --src dist/electron/my-app-name-linux-x64/ --dest installers/ --arch amd64

The result was a fully effective .deb installer file which installed without a hitch and really ended the above tutorial on a high note.

Important note: I had this error:

Creating package (this may take a while)
Error: could not find the Electron app binary at “dist/electron/Quasar App-linux-x64/my-app-name”. You may need to re-bundle the app using Electron Packager’s “executableName” option.

This took a long while to trouble shoot but the issue was nothing more than opening the package.json file and making sure that the following two entries match and probably have dashes in the names (haven’t confirmed that need but it worked with them so I’m sticking to it!)

“name”: “my-app”,
“productName”: “my-app”,

Hope this also saves someone some hair pulling

Cordova Stuff and Ubuntu Touch (raw notes for later)

Cordova is apparently our best hope to get Quasar stuff to be able to convert easily to the Ubuntu Touch framework so I’ll leave my quick notes although they are quick, dirty, and probably fairly useless. I don’t think it can support Electron as per above.

First, apparently… cordova was not installed yet when I ran quasar build -m cordova it never told me that… I had to install cordova with some command that I cannot seem to now find…

Also interesting is that the build let’s you build without error even if you have caps problem in command such as typing ‘Cordova’ instead of ‘cordova’. Neato.

A little late in the game this link was sent to me which I somehow didn’t find before beginning even though I searched. I would have started right here so hopefully this documentation link helps someone save some time.

More to follow, hopefully…

Categories
Uncategorized

How to Load a PDF Floor Plan Into Blender

This is annoyingly hard and I forget how to do it every time so here are some instructions to myself that might also help others.

Convert PDF into PNG Using Gimp

Probably your floor plan is a PDF or you wouldn’t be reading this page, but if it’s a jpg or png kind of file format, then you are done and can skip to the “Importing into Blender” section below.

  1. Make sure you have GIMP installed. Probably you’ll want this since it’s awesome photo manipulation software.
  2. With GIMP open, drag your PDF floor plan page (one page at a time is easier but if it’s one document should work too) and click ‘import’. This will convert the PDF into a working GIMP file.
  3. Adjust the view to an appropriate view orientation since it’s possible when it imported it gets flipped. You may have to adjust the canvas size in the background if you rotate it but that is easy with the ‘fit canvas to layers’ option under ‘image’ menu.
  4. Isolate and select the floor plan with the GIMP selection tools (box select tool is best I find)
  5. Crop out the exact floor plan with the ‘crop to selection’ option under ‘image’ menu.
  6. File, Export
  7. At the bottom left there is a little + plus sign thing that says “Select File Type (by extension)”. Choose this and then scroll through until you find png. Export this file to somewhere you will remember on your device.

Import the Floor Plan Image Into Blender

Most credit to this blog.

In Blender:

  1. Add “Empty” object (shift + A) works
  2. Do steps 1, 2 and 3 in the blog link above of creating an ’empty object’. However, stop there on step 3.
  3. Press number pad 7 to make sure you can see the imported image in orthographic above view. Sometimes you can lose it in the view because it comes in as a plane it’s a plan and pretty razor thin.

That’s it. Now go and turn that floor plan into a 3D amusement park, my friend.

Categories
Technology Tutorial

Dismissing Firefox popups using Selenium and Python

In my new journey to figure out how to automate stuff in my life, one of the time-sucking adventures was to try to stop browser popups such as geolocation and notifications. I just wanted to click ‘ok’ or ‘dismiss’ and move on since this was my ‘bot’ instance of the browser.

The issue with these browser-based pop ups is that they are handled by the browser, not by selenium so it seems selenium can’t dismiss them or dismiss them easily.

The solution workflow that I found to work well for me is as follows:

  1. Switch to your Selenium Firefox profile
  2. Do your browser setting that you need
  3. Save the change
  4. Start your Selenium script with new changes

Here are the details on how to do this:

Create a new Firefox Profile

  1. in browser, type about:profiles
  2. Create a new profile
  3. Take a note of the location of the root directory of that profile (ie paste to your Selenium script for now)
  4. ‘Launch profile in new browser’ (this will launch your new profile in a new instance nicely)
  5. Make your browser changes and save

Do your browser setting changes

The following two changes were the main two that bothered me so perhaps I’ll highlight those here:

  1. Don’t allow websites to send you notifications
  • Preferences/privacy and security / Notifications
  1. Don’t let websites ask for geolocation stuff
  • Preferences/privacy and security / Permissions – Locations (Settings button)

TIP! It’s very useful to actually do a dry run as a human before you let your bot run free so that you can deal with these popups logged in, one time, as this profile. So, workflow is to switch to your Selenium profile, launch it, do a dry run on with real human clicks, deal with any popups or browser setting stuff, save changes, go run the bot script.

Setting up your Python Script to use your Selenium Profile

Now that you’ve got your new profile, let’s actually use it in your script, instead of what will always be a fresh browser instance

Here is my code block which you can add in your project:

## SETUP SELENIUM TO USE CUSTOM FIREFOX PROFILE

#Pretty sure you need to import this to use 'FirefoxProfile but I'm too lazy to confirm - feel free
from selenium.webdriver.firefox.options import Options 

#Root directory copied from Step 3 above
profilePath = '/home/user/.mozilla/firefox/cjda7321.Selena'

#Directs profile selector thing to the right path created above
profile = webdriver.FirefoxProfile(profilePath) 

#Tells Selenium to use the custom profile
driver = webdriver.Firefox(firefox_profile=profile)

Hope that helps!

Categories
Technology Tutorial

HOW TO CLICK AN ITEM IN A SUBMENU (UL) LIST USING PYTHON, SELENIUM

I spent literally 3 days trying to simply click a logout link with Selenium. I searched every stackoverflow post I could find until I found this one.

I had tried pretty much everything I could to try to click the logout link which was the fifth item down in the move-over list.

I tried find_element_by_xpath, find_element_by_id, find this, find that, blah blah blah

Finally, it was indeed the find_element_by_css_selector that worked.

The only thing is I still do not know WHY the xpath option didn’t work for this list while the others did. Hmm. Whatever. Probably will figure it out later….HOW TO CLICK AN ITEM IN A SUBMENU (UL) LIST USING PYTHON, SELENIUMThe only thing is I still do not know WHY the xpath option didn’t work for this list while the others did. Hmm. Whatever. Probably will figure it out later….

so, here is a code block of what worked for me to move to a mouse-over menu and click the menu’s submenu item using Selenium and python (my css selector is just a fake example of course so paste your correct one in):

Edit: I also realized I had to click on the button *above* the actual unordered list (UL) element to trigger the drop down. This tip for the ‘main_menu’ element below might also help someone.

main_menu = driver.find_element_by_xpath("//*[@id='with-label']")

actions.move_to_element(main_menu).perform()

time.sleep(2)

WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, ".css-selector-thing > ul:nth-child(2) > li:nth-child(6) > a:nth-child(1)")))

driver.find_element_by_css_selector(".css-selector-thing > ul:nth-child(2) > li:nth-child(6) > a:nth-child(1)").click()
Categories
Technology Tutorial

OPENING A NEW TAB WITH SELENIUM + PYTHON + FIREFOX + UBUNTU

So this was super duper hard and I believe the reason why is because technically the browser settings and the user choices impact whether or not a clicked link opens in a fresh new tab or a fresh new window. Keep that in mind in case you have other headaches. It may be impossible (so I’ve read online) to perfectly control whether a tab opens on your users’ browser, however, since web automation is probably your browser you should be able to work with this solution and your browser settings to get it going.

Another important thing before you begin here. This assumes you are ‘right clicking an element on a page and opening in a new tab’ kind of thing. If you are trying to make a new, unrelated link open in a new tab, this doesn’t work. I’ll figure that out maybe in another blog post. This one takes a page element already in focus and then opens that into a new tab.

Final note: I’m using Ubuntu so not sure if you need to adjust for yourself…

Anyway, here comes the code.

# Import your stuffs
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
import time

# Set path to your executable Firefox` 
ffpath = '/home/wt/Documents/Waynes_Python_Education_Directory/Automation_Browser_Drivers'

# Turn your Firefox browser into a usable object (or something like that)
driver = webdriver.Firefox(ffpath)

# Come up with a creative new URL to go to (this one is great, btw)
driver.get("https://www.engrish.com/")

# Wait for a while to enjoy it..
time.sleep(5)

# Come up with a creative new URL to go to (this one is great, btw)
new_url = driver.find_element_by_xpath("/html/body/div[1]/div[2]/div/div/div[2]/div[1]/div[1]/ul/li[6]/a")

# And now, the magic!  Open fun URL in a new Firefox tab!
new_url.send_keys(Keys.CONTROL + Keys.RETURN)

# Wait for a while to enjoy it..
time.sleep(5)

# Shut 'er down and go home for the day...
driver.quit()
Categories
Technology Tutorial Ubuntu

Overcoming Painful Setup for Selenium with Python on Ubuntu

EDIT 191118
I realized that I need to execute the script below every time my computer reboots so my current workflow is to leave the command commented out in script and then run it before I begin. You can probably run it with the script too? This one: export PATH=$PATH:/home/user/path/to/browser_drivers_for_automation

I had the following continual painfull errors:

  1. selenium.common.exceptions.WebDriverException: Message: ‘my_folder_name’ executable may have wrong permissions.
  2. selenium.common.exceptions.WebDriverException: Message: ‘Automation_Browser_Drivers’ executable needs to be in PATH.

To be transparent, I’m not sure which if any of these steps happened first, or whether it matters, but I’ll give you both in case it helps and in the order I did:

For my setup, since I plan to mess around with automation long term I wanted to have all my different browser drivers in one folder so I can kind of ‘containerize’ them and always know where they are, and update them accordingly. So, I made a directory called ‘browser_drivers_for_automation”

In that, I downloaded all the executables (go figure out how to do that if you want from Selenium page)

The following is the seemingly standard ‘trial run’ to make sure you are setup and working. I definitely recommend not moving forward until you have this trial run going, as well!

from selenium import webdriver

ffpath = '/home/username/path/to/browser_drivers_for_automation'
browser = webdriver.Firefox(ffpath)

browser.get("http://www.python.org")

First, try that. If it runs, awesome, but if you’re like me probably it won’t, HA

So then first, make sure this ‘browser_drivers_for_automation’ directory is listed in your Ubuntu PATH. If you’re like me I didn’t even know what that was but it seems (short version of the story) that this is the part of Ubuntu that says ‘any directory path in here, if you execute a file, I will allow it”

So do this in a terminal:

export PATH=$PATH:/home/user/path/to/browser_drivers_for_automation

not sure what this next one does but I did it so you might as well join me!

source ~/.profile

So now if you do echo $PATH in your terminal you should see your folder listed.

Now, try the above Selenium trial run again. If it works, great. If not, like me, then do this step:

Navigate to your Browser_drivers_for_automation directory and make your driver executable. In my example here i’m using the firefox geckodriver, but you can do this to any/all drivers in here.

sudo chmod +x geckodriver

See if that works. If it does, the browser will open and you should be good to go now.

Hope this helps

Thanks to all those people answering questions in stackoverflow as usual! 🙂

Categories
Technology

How to Do Some Code Changes in Gitlab

I’m not a developer but was encouraged to try a one character change to some software. I felt that I couldn’t break too much so I did my first tiny change. Literally one character text edit. However, it was a bit scary so I’m just posting this to show the basic workflow. This assumes you already have a gitlab account and username and can log in.

1. Find it.

probably you found or someone sent you a link to where the code is and you are on the gitlab page and can see the line of code you’d like to change. If not, get there.

Also, make sure you’re on the right branch. I tried to click ‘edit’ but I was not allowed because I was not on the branch called ‘master’. Your branch that you can edit may have a different name but just be aware that you have to be on the authorized branch that accepts changes. the left side has ‘branches’ and you can look at them there and select the right one.

2. Fork it

When you click ‘edit’ it seems to automatically force you to ‘fork’ the code. This makes sense. You wouldn’t want to disrupt the main code until the overseeing person has reviewed your changes and authorized them. So you ‘fork’ it and do your changes there. I think a fork is basically a copy/paste of the whole block of code for that file

3. Change it.

On the page where you change there is a box where you can comment. I was a bit worried about this but it wasn’t so bad. it’s just a comment box but it seems a bit more important than that. I put my personal comment about the change I made and then saved it.

4. Merge it.

Once you save the changes it becomes a ‘Merge Request’ also known as MR.
I think this part depends on how the project is set up. It might merge automatically into the main software or, it might require a ‘stamp of approval’. Regardless, once you send the MR it’s out of your hands unless you are the developer overseeing the project, also known as the ‘maintainer’.

Hopefully this helps someone else make their first change and thanks to the folks in free software who helped me do this!

Categories
Freedom and Privacy Life Skills Technology

THE NEED FOR A NEW QR CODE WORLD – OR SOMETHING LIKE THAT…

The Background – The Feelings

The background to this one is that I was really amazed by the technology and functionality of QR codes. QR codes brought the convenience of UPC retail bar codes to the average person without the crazy costs associated. So, even from a business perspective you could have your own scanning system if you wanted.

On a personal level, it was mind blowing that I could have a business card with a QR code on it that would ‘hide’ data within visually and then the smart phone or web cam could see the code, unpack the data and leave it with you in a digital format – with no typing needed and no errors (unless the creator goofed). This allowed me to turn a business card into an immediately usable tool, instead of what would happen before where the paper card would get buried or lost before I got to use it, plus it would force me to type more keystrokes than I wanted. I mean.. It could even do a .vcf format something which could be loaded direct into your contact books, from what I recall (would need to review this one but 99% sure I did that…)

Further to the personal benefits, let’s say you are at a social gathering. Someone approaches you and wishes to get your business card, or, some form of contact informaton that might normally be on a business card. But, you don’t really want to share certain parts, or any parts with said person. These days normally you would fumble and figure it out on the fly. What if the person says ‘text me’? Typically I say “I don’t text” and then I have to have a long discussion about why I don’t text and how to reach me, and here’s my email, and here’s my number, but don’t call me, because I don’t like phone calls, blah blah blah… It would be nice to have a standardized way of transmitting data – line of sight – no internet – no wifi – no bluetooth. Just transmit basic data. No worrying about whether they are on apple, or android or Ubuntu Touch (wait, that’s no problem!) or whatever. No worrying about whether they have a cell phone or a cell phone plan, etc. It’s also more inclusive that way.

I can hear the voices now:

  • “But you can email all that!” – No! I want faster. No typing. No thinking.
  • “But you can text all that!” – No! I said I don’t text. Don’t ask me to text you.
  • “But you can ‘bump’ with Android” – I don’t bump. I don’t Android.
  • “This is making something new that we don’t need!” – Ok… maybe… And that’s the point of this blog. Let’s figure that out…

Why QR has failed thus far (In my opinion)

After all these thoughts above, I got to thinking about the limitations of QR. You can read some of my feelings in this bug report I filed at UBports for the Camera app. Of course, I completely understand the security need here and I can’t argue it. But this has always been the issue. For QR codes to flourish, the scanner must be one button away.

And, even if you had one button there is still the annoyance of having to focus the camera. I thought about creating a tiny keychain which had one button and a camera. You would point at the QR and push/hold the ‘shutter’ button. It would focus, scan the QR code and beep when it was logged. Later you could sync that data with whatever device you want, somehow securely.

And that’s when I started thinking that it would be cool to have an ‘audio QR code’. So I searched that and found Chirp. They basically have figured it out with proprietary software – not typically a good solution if you want awesome security and privacy… But, their stuff apparently works. It sends hypersonic sounds and data.

In my opinion, this direction could work, and here are the first pros/cons:

Pros

  • No focusing of cameras (faster scan?)
  • No camera at all (cheaper hardware?)
  • Audio? Maybe not as radioactive as radio??? (just throwing it out there for the healthy people?)
  • Other cool pros?

Cons

  • Apparently dogs don’t like hypersonic?
  • Would these things have to transmit all the time or could the ‘chirp’ be triggered with some kind of ‘hey! any birds out there who want to chirp me anything?”
  • Security? Could anyone chirp anything? I haven’t really looked deeply at that part yet as you can see.

Some suggestions to the conversation were:

  1. A watch (with a cam – full Dick Tracey style)
    Sure, except I would never wear a watch, and I’m not a Dick…Tracey…
  2. Near Field Communication (NFC) which is explained well in this old 2014 vid

Then, whatever the solution is, would be able to securely/safely transmit the stored data into the device of your choice for reviewing, handling.

Final thoughts

I feel like I don’t want to add to the smartphone in my pocket, but, it seems like there is no other way. Security people say you can’t really have a one-button something without compromising security of smartphone. SO…

That’s what I’ve got to say.

I hope some kind of cheap and useful solution lands here…

Categories
Life Skills Technology

CONVERT HARVESTED BULK EMAILS INTO USABLE SPREADSHEET IN A FEW STEPS

Did someone send you a bulk email and foolishly leave all the recipients exposed? Do you want to grab those recipients and use for your own great purposes? Good news, it’s not so hard to do!

Here’s what you’ll need:

  • A text editor (gedit on ubuntu)
  • Spreadsheet software (Libre Office is the one I’ll use here since it’s both free and awesome)

1. Copy and paste the emails into a text editor

Grab the group of email addresses starting from right after the ‘to: ‘ but don’t actually include the ‘to:’. Copy this into your clipgboard.

2. Paste this to a fresh text editor window

3. Clean up the Paste

Make sure there is a trailing semi-colon after the last entry and no other gobbly gook before or after, other than just the names of the recipients and the actual email addresses. So like this stuff:

John Doe johndoe@johndoe.com; Jane Doe janedoe@janedoe.com;

4. Save file as a .csv file

Click ‘save as’ and give the file a handy name and make sure it has a trailing .csv as the file type

5. Go and open the file.

In my case it opens the file with LibreOffice – this is good. In your case…how could I know your case?

6. Select ‘semi-colon’ as the separation type

When Libre Office opens the file, uncheck comma, etc, and just leave the semi-colon because that’s what you’ve got.

7. Reformat the Orientation (optional)

After importing thus far, Libre Office seems to make the orientation horizontal putting one email address in each column and all the entries into a row spanning many horizontal columns which I didn’t like. I want to convert this to a vertical orientation with the entries spanning downwards across many rows.

Yippee yay. Someone alrady figured this out here

But in short, just do this:

  1. copy all your horizontal entries
  2. copy them to clipboard (control c)
  3. control + shift + V into the cell you want
  4. Paste (which does the ‘paste special’ command)
  5. Delete the original row you just copied from

Voila. Clean vertical list of harvested emails!

Hope that helps.

My Comments

My only improvement would be to add a script that pulls the name out and adds to the column on the right. I know thunderbird can do this when you right click and either ‘copy email address’ or ‘copy name and email address’. So it’s definitely possible to do this. In fact, how cool would that be if Thunderbird could just do all this in an add-on … hmm. Too bad I can’t program…

Categories
Life Skills Nextcloud Technology Tutorial

How to Install Video Convertor App on Nextcloud

Someone complaining that they can’t view an Apple .MOV file on your Nextcloud server? No surprise considering ‘apple is apple’.

Heard about the cool app ‘Video Convertor’ for Nextcloud? Tried to install it and use it and got that ‘requires ffmpeg error?

Same.

Turns out it’s pretty easy to to get it going and here is how:

Let’s do it.

  1. ssh into your Nextcloud box. In my case it’s a nextcloudpi box if that matters…
  2. type this into the command line: sudo apt install ffmpeg
  3. Hit your enter key
  4. Wait a long time while a seriously large amount of stuff installs (and probably this is why it’s not installed by default)
  5. Go back to your video file in the Nextcloud in the browser user interface and note the three dots on the right side of the file name. Click that
  6. Select the video icon ‘convert into’
  7. Choose your options for speed and format
  8. Do it.
  9. Wait again (a lot of waiting here…)
  10. Create a new share of the newly created video file
  11. Test the file (good practice) by sending the share to yourself in a browser that you don’t use so you are seeing what your recipient will see without your login credentials affecting things.
  12. All good? Ship the new link to your recipient

Hope that helps