294 lines
15 KiB
HTML
294 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<meta content="#0e1112" media="(prefers-color-scheme: dark)" name="theme-color"/>
|
||
<meta content="#566B78" media="(prefers-color-scheme: light)" name="theme-color"/>
|
||
<meta content="Michael Housh" name="author"/>
|
||
<meta content="Mhoush" name="apple-mobile-web-app-title"/>
|
||
<meta content="initial-scale=1.0, width=device-width" name="viewport"/>
|
||
<meta content="telephone=no" name="format-detection"/>
|
||
<meta content="True" name="HandheldFriendly"/>
|
||
<meta content="320" name="MobileOptimized"/>
|
||
<meta content="Mhoush" name="og:site_name"/>
|
||
<meta content="hvac, developer, swift, home-performance, design" name="keywords"/>
|
||
<title>
|
||
mhoush: Introduction to Programming for HVAC Part-4
|
||
</title>
|
||
<link href="/static/favicon.ico" rel="shortcut icon"/>
|
||
<link href="/static/output.css" rel="stylesheet"/>
|
||
<link href="/static/style.css" rel="stylesheet"/>
|
||
<link href="/articles/feed.xml" rel="alternate" title="mhoush" type="application/rss+xml"/>
|
||
<link href="/static/prism.css" rel="stylesheet"/>
|
||
<meta content="This article builds upon our last article, so make sure to catch up
|
||
before continuing with this article.
|
||
Arguments
|
||
Before we start creating our program that will remove the background from images let’s go over arguments in shell scripts. Arguments..." name="description"/>
|
||
<meta content="summary_large_image" name="twitter:card"/>
|
||
<meta content="http://localhost:3000/articles/images/2023-09-26-introduction-to-programming-for-hvac-4.png" name="twitter:image"/>
|
||
<meta content="Introduction to Programming for HVAC Part-4" name="twitter:image:alt"/>
|
||
<meta content="http://localhost:3000/articles/images//articles/2023/introduction-to-programming-for-hvac-4/" name="og:url"/>
|
||
<meta content="Introduction to Programming for HVAC Part-4" name="og:title"/>
|
||
<meta content="This article builds upon our last article, so make sure to catch up
|
||
before continuing with this article.
|
||
Arguments
|
||
Before we start creating our program that will remove the background from images let’s go over arguments in shell scripts. Arguments..." name="og:description"/>
|
||
<meta content="http://localhost:3000/articles/images/2023-09-26-introduction-to-programming-for-hvac-4.png" name="og:image"/>
|
||
<meta content="1014" name="og:image:width"/>
|
||
<meta content="530" name="og:image:height"/>
|
||
<script crossorigin="anonymous" src="https://kit.fontawesome.com/f209982030.js">
|
||
</script>
|
||
</head>
|
||
<body class="bg-page text-white pb-5 font-avenir articles">
|
||
<header class="bg-nav text-gray py-4 text-base/6 lg:fixed w-full lg:h-[62px]">
|
||
<nav class="container flex gap-x-5 lg:gap-x-y items-center">
|
||
<ul class="flex flex-wrap gap-x-2 lg:gap-x-5">
|
||
<li>
|
||
<a class href="/">Home</a>
|
||
</li>
|
||
<li>
|
||
<a class="active" href="/articles/">Articles</a>
|
||
</li>
|
||
<li>
|
||
<a class href="/about/">About</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
<div class="container pt-12 lg:pt-28">
|
||
<article class="prose">
|
||
<h1>
|
||
Introduction to Programming for HVAC Part-4
|
||
</h1>
|
||
<div class="-mt-6">
|
||
<div class="text-gray gray-links text-sm">
|
||
<span class="border-r border-gray pr-2 mr-2">September 26, 2023</span>1159 words, posted in <a href="/articles/tag/hvac/">HVAC</a>, <a href="/articles/tag/programming/">programming</a> and <a href="/articles/tag/software/">software</a>
|
||
</div>
|
||
</div>
|
||
<img alt="banner" src="http://localhost:3000/articles/images/2023-09-26-introduction-to-programming-for-hvac-4.png"/>
|
||
<p>This article builds upon our <a href="https://mhoush.com/posts/introduction-to-programming-for-hvac-3/">last</a> article, so make sure to catch up
|
||
before continuing with this article.</p>
|
||
<h2>Arguments</h2>
|
||
<p>Before we start creating our program that will remove the background from images let’s go over arguments in shell scripts. Arguments are
|
||
supplied to shell scripts are separated by a space <code>" "</code>, as opposed to options which start with a <code>-<character></code> or <code>--<word></code>.</p>
|
||
<p>To illustrate this, let’s change our <code>hello-world</code> script we wrote in the last article.</p>
|
||
<p><strong>Move into our scripts directory:</strong></p>
|
||
<pre><code class="language-bash">cd ~/.local/bin
|
||
</code></pre>
|
||
<p><strong>Make a copy of the hello-world script:</strong></p>
|
||
<pre><code class="language-bash">cp hello-world greet
|
||
</code></pre>
|
||
<p>Above we make a copy of the hello-world file and name the copy <code>greet</code>.</p>
|
||
<p><strong>Open the greet file:</strong></p>
|
||
<pre><code class="language-bash">open -a TextEdit greet
|
||
</code></pre>
|
||
<blockquote>
|
||
<p><strong>Note:</strong> Because the greet file is an executable, in order to open it in the <code>TextEdit</code> application we must supply the <code>-a</code> option.
|
||
Otherwise it will just run our <code>greet</code> program in another terminal. Use <code>man open</code> to read more about the open command.</p>
|
||
</blockquote>
|
||
<p><strong>Edit the greet file:</strong></p>
|
||
<pre><code class="language-bash">#!/bin/sh
|
||
|
||
echo "Hello, ${1}!"
|
||
</code></pre>
|
||
<p>Make sure to save <code>⌘s</code> the file.</p>
|
||
<p>Take note that the quotes need to be changed to <code>"</code> (double quotes) from our original <code>hello-world</code> program.</p>
|
||
<p>The <code>${1}</code> is indicating that we will insert / interpret the first argument passed to our program and insert it at that location. Arguments
|
||
are interpreted in order they are passed in with <code>${0}</code> always representing the filename of the program that is called (generally not needed
|
||
/ used in your scripts).</p>
|
||
<p><strong>Test it out:</strong></p>
|
||
<pre><code class="language-bash">./greet Michael
|
||
</code></pre>
|
||
<p><img src="/articles/images/2023-09-26-greet-output.png" alt="greet-output" /></p>
|
||
<p>If you’d like to supply multiple words (or arguments that contain spaces) as a single argument then you can wrap them in quotes.</p>
|
||
<pre><code class="language-bash">./greet "Michael Housh"
|
||
</code></pre>
|
||
<blockquote>
|
||
<p><strong>Tip:</strong> Wrapping in quotes is especially useful for commands that take file paths, if any of the folders or file names contain spaces.</p>
|
||
</blockquote>
|
||
<h2>More Useful Program</h2>
|
||
<p>At this point, it’s time to build a more useful program that we can use. First, we must download some dependencies for our program.</p>
|
||
<p><strong>Install imagemagick:</strong></p>
|
||
<pre><code class="language-bash">brew install imagemagick
|
||
</code></pre>
|
||
<blockquote>
|
||
<p><strong>Note:</strong> If you’d like to check out the documentation / website for imagemagick you can run <code>brew home imagemagick</code>.</p>
|
||
</blockquote>
|
||
<p>This will take a bit for brew to install imagemagick and it’s dependencies. When it’s completed, we can check to make sure that imagemagick
|
||
is installed by running the following command.</p>
|
||
<pre><code class="language-bash">magick --version
|
||
</code></pre>
|
||
<p>It should output something along the lines of this below.</p>
|
||
<pre><code class="language-bash">Version: ImageMagick 7.1.1-17 Q16-HDRI aarch64 21569 https://imagemagick.org
|
||
Copyright: (C) 1999 ImageMagick Studio LLC
|
||
License: https://imagemagick.org/script/license.php
|
||
Features: Cipher DPC HDRI Modules OpenMP(5.0)
|
||
Delegates (built-in): bzlib fontconfig freetype gslib heic jng jp2 jpeg jxl lcms lqr ltdl lzma openexr png ps raw tiff webp xml zlib
|
||
Compiler: gcc (4.2)
|
||
</code></pre>
|
||
<blockquote>
|
||
<p><strong>Tip:</strong> Don’t forget, you can use the <code>clear</code> command to clear the terminal.</p>
|
||
</blockquote>
|
||
<p><strong>Create our script:</strong></p>
|
||
<pre><code class="language-bash">touch mktrans
|
||
</code></pre>
|
||
<p>We are going to name our script <code>mktrans</code> as a short for make transparent.</p>
|
||
<p><strong>Open the file:</strong></p>
|
||
<pre><code class="language-bash">open mktrans
|
||
</code></pre>
|
||
<p><strong>The program:</strong></p>
|
||
<pre><code class="language-bash">#!/bin/bash
|
||
|
||
# The input file path, passed in as the first argument.
|
||
inputfile="${1}"
|
||
|
||
# The color to make transparent, optionally passed in as the second argument.
|
||
# by default we handle / make white backgrounds transparent.
|
||
color="${2:-white}"
|
||
|
||
# Use the built-in basename command to normalize the input file name
|
||
# this will convert a file path, such as ~/Pictures/my-image.png to my-image.png.
|
||
fullfilename=$(basename -- "$inputfile")
|
||
|
||
# Use the text of the `fullfilename` up to the first '.' as the file name.
|
||
filename="${fullfilename%%.*}"
|
||
|
||
# Use the text after the last '.' as the file extension.
|
||
extension="${fullfilename##*.}"
|
||
|
||
# Create the output file name to use.
|
||
#
|
||
# For an input file of `input.png`, our output name would be
|
||
# `input-transparent.png`.
|
||
#
|
||
# This will output the file in the directory that we are
|
||
# in when we use our script (which may different than where
|
||
# the image is located)
|
||
outputfile="${filename}-transparent.${extension}"
|
||
|
||
# Make the magick happen :)
|
||
convert "${inputfile}" -fuzz 10% -transparent "${color}" "${outputfile}"
|
||
|
||
</code></pre>
|
||
<p>I’ve included comments in the program above, which is good practice, as there is high odds that you will forget what is going on when / if
|
||
you open the file up in the future to look at it. We are using a lot of what is called parameter expansion magic in this file. You can read
|
||
up more on what we are doing in the <a href="https://www.gnu.org/software/bash/manual/html_node/Shell-Parameter-Expansion.html">bash documentation</a>.</p>
|
||
<p>This script is far from perfect, there are a lot of things to be improved upon. For example, if you download / save the banner image of this
|
||
post and run this script, it will also remove some color in the wizards beard, eyes, and eye brows. However, it does work very well for my
|
||
general use case, which is to remove the background from screenshots of pdf documents. It should be noted that it will not work on all types
|
||
of images, some image types do not allow transparency, so it is safest to call this with input image being a <code>.png</code> image type, however you
|
||
can use the <code>imagemagick</code> program that we downloaded to convert other image types to <code>.png</code>, but that will be left up to you to figure out.</p>
|
||
<h2>Using Our Program</h2>
|
||
<p>This is going to assume that you have download the banner image at the top of this article. You can do this by right-clicking and choosing
|
||
<code>Save As</code>. This should save the image in your downloads folder, and you can keep the name of <code>part4-banner.png</code>.</p>
|
||
<p><strong>Make the program executable:</strong></p>
|
||
<pre><code class="language-bash">chmod u+x mktrans
|
||
</code></pre>
|
||
<p><strong>Make the image background transparent:</strong></p>
|
||
<pre><code class="language-bash">./mktrans ~/Downloads/part4-banner.png
|
||
</code></pre>
|
||
<p><strong>Open the image:</strong></p>
|
||
<pre><code class="language-bash">open part4-banner-transparent.png
|
||
</code></pre>
|
||
<p>It should look like below.</p>
|
||
<p><img src="/articles/images/2023-09-26-part4-banner-transparent.png" alt="banner-transparent" /></p>
|
||
<blockquote>
|
||
<p><strong>Note:</strong> If you are viewing this site in <em>light</em> mode, the image does not look that bad. Hit the moon button in the top above my profile
|
||
image to see some of the flaws of our program.</p>
|
||
</blockquote>
|
||
<hr />
|
||
<blockquote>
|
||
<p><strong>Tip:</strong> Remove the image from the <code>~/.local/bin</code> by using <code>rm part4-banner-transparent.png</code>. Be aware that the <code>rm</code> command can not be
|
||
undone, so use with caution / knowledge. It is safer, until you are more comfortable to use the <code>Finder</code> application and move the file to
|
||
the trash. In <code>Finder</code>, you can show hidden directories by typing <code>⌘.</code> or go directly to the folder by typing <code>⇧⌘G</code> (shift + command + G)
|
||
and in the pop-up typing <code>~/.local/bin</code>.</p>
|
||
</blockquote>
|
||
<hr />
|
||
<p>That is it for this article. In the upcoming articles we will setup our <code>shell</code> environment so that we can use the commands we’ve built
|
||
without having to navigate to the <code>~/.local/bin</code> directory. Thank you for reading to the end, I hope you’re finding this series helpful.</p>
|
||
</article>
|
||
<div class="border-t border-light mt-8 pt-8">
|
||
<h2 class="text-4xl font-extrabold mb-8">
|
||
Written by
|
||
</h2>
|
||
<div class="flex flex-col lg:flex-row gap-8">
|
||
<div class="flex-[0_0_120px]">
|
||
<img class="w-[120px] h-[120px] rounded-full" src="/static/images/avatar.png"/>
|
||
</div>
|
||
<div class="prose">
|
||
<h3 class="!m-0">
|
||
Michael Housh
|
||
</h3>
|
||
<p class="text-gray">
|
||
HVAC business owner with over 27 years of experience. Writes articles about HVAC,
|
||
Programming, Home-Performance, and Building Science
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-16">
|
||
<h2 class="text-4xl font-extrabold mb-8">
|
||
More articles
|
||
</h2>
|
||
<div class="grid lg:grid-cols-2 gap-10">
|
||
<section>
|
||
<h2 class="text-2xl font-bold mb-2">
|
||
<a class="[&:hover]:border-b border-orange" href="/articles/2025/vapor-htmx-todo-app/">Vapor + HTMX</a>
|
||
</h2>
|
||
<div class="text-gray gray-links text-sm mb-4">
|
||
<span class="border-r border-gray pr-2 mr-2">January 05, 2025</span><a href="/articles/tag/general/">general</a>, <a href="/articles/tag/programming/">programming</a> and <a href="/articles/tag/software/">software</a>
|
||
</div>
|
||
<p>
|
||
<a href="/articles/2025/vapor-htmx-todo-app/"><div>
|
||
Build an example application using Vapor and HTMX.
|
||
</div></a>
|
||
</p>
|
||
</section>
|
||
<section>
|
||
<h2 class="text-2xl font-bold mb-2">
|
||
<a class="[&:hover]:border-b border-orange" href="/articles/2024/free-as-in-freedom/">Free As In Freedom</a>
|
||
</h2>
|
||
<div class="text-gray gray-links text-sm mb-4">
|
||
<span class="border-r border-gray pr-2 mr-2">April 09, 2024</span><a href="/articles/tag/general/">general</a>, <a href="/articles/tag/open-source/">open-source</a> and <a href="/articles/tag/software/">software</a>
|
||
</div>
|
||
<p>
|
||
<a href="/articles/2024/free-as-in-freedom/"><div>
|
||
Salute to open-source software engineers
|
||
</div></a>
|
||
</p>
|
||
</section>
|
||
</div>
|
||
<p class="prose mt-8">
|
||
<a href="/articles/">› See all articles</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="site-footer container text-gray gray-links border-t border-light text-center pt-6 mt-8 text-sm">
|
||
<p>
|
||
Copyright © Michael Housh 2023-2025.
|
||
</p>
|
||
<p>
|
||
Built in Swift using
|
||
<a href="https://github.com/loopwerk/Saga" rel="nofollow" target="_blank">Saga</a>
|
||
(<a href="https://github.com/m-housh/mhoush.com" rel="nofollow" target="_blank">source</a>).
|
||
</p>
|
||
<p>
|
||
<a href="http://localhost:3000/articles/feed.xml" rel="nofollow" target="_blank">RSS</a>
|
||
|
|
||
<a href="https://github.com/m-housh" rel="nofollow" target="_blank">Github</a>
|
||
|
|
||
<a href="https://www.youtube.com/channel/UCb58SeURd5bObfTiL0KoliA" rel="nofollow" target="_blank">Youtube</a>
|
||
|
|
||
<a href="https://www.facebook.com/michael.housh" rel="nofollow" target="_blank">Facebook</a>
|
||
|
|
||
<a href="mailto:michael@mhoush.com" rel="nofollow">Email</a>
|
||
</p>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js">
|
||
</script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/keep-markup/prism-keep-markup.min.js">
|
||
</script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js">
|
||
</script>
|
||
</div>
|
||
</body>
|
||
</html> |