My eight-year-old asked me to draw with him using some markers he got for Christmas. I thought I’d try to draw a phoropter without looking at a reference image (although - full disclosure - I have some practice illustrating phoropters).

Permalink

]]>Todd ZarwellSun, 15 Nov 2020 18:44:45 +0000http://toddzarwell.com/journal/2020/11/15/ymosskq2euqza8bh2nfskqcjv07vxu5006ce4b84ae4a665a5cdf9d:5006cf38e4b0f8fdce258d3a:5fb1769e16932f1df52b9fb8Why draw a illustration of rocker piranhas? Why not?

I’ve added some photo, news, calendar, and weather widgets to my home screen and I'm pretty happy with this change. Who knew having more control over your device would be so fun? Well, Android users knew, but that’s a topic for another day.

Although I’m liking my widgets, I wish they were more exciting. I already have a lot of ways to check the weather, see photos and review my day’s activities, etc.

However, what I really care about is ice cream.

Wisconsin is the home of a Midwestern restaurant chain called Culver’s. Culvers has really good burgers and other entrée items, but what they’re really known for is their frozen custard.

Culver’s has a new Flavor of the Day (FOD) every, er, well, every day. While we don’t eat frozen custard every day, we do like to indulge from time to time, especially when we see a FOD that we like. The second most common question in our house (after “Dad, why are you such a nerd?") is “Dad, what’s the Flavor of the Day?”.

Well, I could look up their website and find out that information. Like an animal. But c’mon, this is 2020. This is the year of the iPhone Widget.

This sounded like a job for Scriptable, an iPhone app that lets you create custom applets using Javascript. When iOS widgets were introduced Scriptable added a simple example script (called “News in Widget”) for creating and adding a custom widget to your iPhone’s home screen.

In the provided example, the script calls an API to download articles from a news site, then displays the headlines in a widget.

Unfortunately Culver’s does not have a Flavor of the Day API, so to accomplish this we’re going to have to roll our own, and to do this we’re going to need to do some good old-fashioned web scraping. Also unfortunately, this is probably where I’m going to lose people, because this is going to require writing some server-side code and having a place to host it.

I’m going to use PHP to write my server-side script. This language has a built-in cURL function that makes it easy to grab the contents of a website.

However, once we’ve grabbed the contents of the website, we need to find the information we need. Fortunately, other - smarter - people have tackled this issue and we don’t have to reinvent the wheel. I’m going to use a PHP library called simplehtmldom. Simplehtmldom is really simple: You just extract data from your captured HTML using regular CSS selectors.

So, the next step is to figure out where the data we want is located in our HTML. This can be done by going to the website we want to scrape, opening up the developer tools, and inspecting the HTML elements we’re interested in.

In this case, we see the name of the Flavor of the Day embedded in a <strong> tag that is a child of a div with a specific class. In addition, it would be cool if we could display an image in our widget, so let’s capture the source of the FOD’s image while we’re at it.

My flavorScraper.php script is shown below. In the end, it’s pretty simple. It

1. Includes the simplehtmldom script

2. Identifies the website we want to scrape

3. Gets the website’s HTML using function that uses cURL

4. Parses the HTML using CSS selectors to grab our data

5. Echos the data as a JSON object

This script was uploaded to a server so it can be called from my Scriptable script.

flavorScraper.php

<?php
// we'll use simple_html_dom.php to parse the contets of our website
// documentation: http://simplehtmldom.sourceforge.net/
include ("path_to_file/simple_html_dom.php");

// the website I want to scrape for data
// this is specific to the location nearest me
$url = "https://www.culvers.com/restaurants/my_town";

$html = new simple_html_dom();
$str = curl($url);
$html->load($str);

$flavorOfTheDay = [];
// the css selector for the name of the flavor of the day
$flavorOfTheDay['name'] =  $html->find("div.ModuleRestaurantDetail-fotd h2 strong")[0]->plaintext;
// the css selector for the image, and this case we're getting the URL from the src attribute. In this case it did not include the "https:" so we need to prepend it to the URL
$flavorOfTheDay['image']= "https:" . $html->find("div.ModuleRestaurantDetail-fotd img")[0]->src;

// return the data in JSON format
echo json_encode($fod);

// use curl to grab the contents of the the website
 function curl($url) {
     // Assigning cURL options to an array
     $options = Array(
         CURLOPT_RETURNTRANSFER => TRUE,  // Setting cURL's option to return the webpage data
         CURLOPT_FOLLOWLOCATION => TRUE,  // Setting cURL to follow 'location' HTTP headers
         CURLOPT_AUTOREFERER => TRUE, // Automatically set the referer where following 'location' HTTP headers
         CURLOPT_CONNECTTIMEOUT => 120,   // Setting the amount of time (in seconds) before the request times out
         CURLOPT_TIMEOUT => 120,  // Setting the maximum amount of time for cURL to execute queries
         CURLOPT_MAXREDIRS => 10, // Setting the maximum number of redirections to follow
         CURLOPT_USERAGENT => "Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.1a2pre) Gecko/2008073000 Shredder/3.0a2pre ThunderBrowse/3.2.1.8",  // Setting the useragent
         CURLOPT_URL => $url, // Setting cURL's URL option with the $url variable passed into the function
         CURLOPT_HTTPHEADER=>["Cookie: RoadblockSayCheeseCurds=0"]
     );

     $ch = curl_init();  // Initialising cURL
     curl_setopt_array($ch, $options);   // Setting cURL's options using the previously assigned array data in $options
     $data = curl_exec($ch); // Executing the cURL request and assigning the returned data to the $data variable
     //echo "<br><br>data: " . $data;
     curl_close($ch);    // Closing cURL
     return $data;   // Returning the data from the function
 }

Now we just need the Scriptable script.

To create this script I copied their “News in Widget” example and modified it for my needs. It simply:

1. Calls the flavorScraper.php script from my server

2. Creates a widget

3. Takes the JSON returned from flavorScraper.php

4. Extracts the Flavor of the Day text and image and displays them

FlavorScraper (Scriptable App):

let item = await loadItem()
let widget = await createWidget(item)
// Check if the script is running in
// a widget. If not, show a preview of
// the widget to easier debug it.
if (!config.runsInWidget) {
  await widget.presentMedium()
}
// Tell the system to show the widget.
Script.setWidget(widget)
Script.complete()

async function createWidget(item) {
 
  let imgURL = item.image;
  let w = new ListWidget()
  if (imgURL != null) {
    let imgReq = new Request(imgURL)
    let img = await imgReq.loadImage()
    w.backgroundImage = img
   
  }

  let titleTxt = w.addText(item.name)
  titleTxt.font = Font.boldSystemFont(32)
  titleTxt.textColor = Color.blue()
  titleTxt.centerAlignText()
  // Add spacing below headline.
   w.addSpacer(12);
  // Add spacing below content to center it vertically.
  w.addSpacer()
  return w
}
  
async function loadItem() {
  // the url to the server where I'm hosting flavorScraper.php
  let url = "https://www.myServerSite.com/flavorScraper.php"
  let req = new Request(url)
  let json = await req.loadJSON()
  return json
}

Now, we just need to add a new Scriptable widget to our home screen and tell the widget we want to display the widget from this flavorScraper script.

And, voilà! We now can see the Flavor of the Day at a moment’s notice!

It’s a good start. I should probably play with the font color (I needed something that was visible in night mode - where the background is black - and in daytime mode).

If I find the ambition to improve on this, I might make a short list of my family's favorites, and, if the FOD of the day is a favorite, add something attention-getting such as a different colored background, some additional text, or maybe a few emojis.

Astigmatism is very common yet, for something that a LOT of people have, it’s very misunderstood. And it gets blamed for just about any deficiency people perceive in their quality of vision (and sometimes they’re right).

Perhaps this is because it’s a little tricky to conceptualize, or maybe it’s because the word itself sounds like it could be a horrible disease. If I didn’t know better, I certainly wouldn’t want to be told that I’ve caught a case of “astigmatism”.

When we try to explain astigmatism, we often do it by describing the shape of the front surface of the eye. “An eye without astigmatism is spherical, like a basketball. An eye with astigmatism has two curvatures, a steeper one and a flatter one. Kind of like a football.”

I think most people comprehend this analogy when they hear it but, like a lot of information, the passage of time eventually erodes this understanding and, years later, they only recall that there is something football-like about their eyes.

When I look at Edvard Munch’s The Scream, I like to think about what would make the subject of the painting scream. What could be causing the horrified expression on his face? What could be altering his perception of the world and transmogrifying it into a swirly, melty nightmare?

I can only think of one thing: Astigmatism.

Yes, the dreaded football-eye.

I’ve been working on a tutorial to teach optometry students to refract a virtual patient, where my program would make the patient respond to questions and lens changes. At one point I started making a feature where, if the student got stuck or confused, they could turn on a “tutorial mode”. This was essentially another program that would try to think like the doctor to help walk the student through the refraction.

It suddenly struck me that I was pretty much trying to create a virtual doctor that would be refracting a virtual patient.

I’m pretty sure this is how Skynet got started.

To make a long story short, in the interest of saving humanity, I scrapped this plan (I certainly did not give up because it was proving to be too hard).

She found a comic that I wrote sometime in grade school (I don’t know when, but it must be some time in the early 80’s given the boom box and the clothing styles depicted on page 5).

I'm thinking it is from around 1985 because I reference Neo-Maxi Zoomdweebie from The Breakfast Club. Even though I'm pretty sure I hadn't seen this movie at that time I remember people using that phrase and thinking it sounded pretty funny.

It’s weird that I only have a vague recollection of doing this, but it gave me a laugh and I thought I’d share it here.

Oh, and it must have been for school project because there’s an “A-” on the back: I was dinged for starting a sentence with a number on the last page. The teacher didn't catch my using the wrong “to” on the second page though!

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

View fullsize

It’s a little obscure, so if you’re not getting it: The guy’s name is Bib Fortuna.

OK, I don't expect this to become a trend, but I had to replace about five Kohler Devonshire (model K-393-N4-BN) bathroom faucet valves in the last year. There was a little bit of a learning curve for a newbie plumber, and I found that I really had a hard time finding help online. So, I thought I'd write this post in hopes that someone doing a Google search for the right keywords stumbles upon it and, as a result, manages to avoid some of the same mistakes I did.

Step 1

 Step one, of course, is turn off the water to the sink.

Step 2

Step two is to get the tops of the handles off. This is where I really struggled. If I felt around the back I could feel a little indentation that I assumed was for accessing a set screw, but none of my allen wrenches seemed to fit in there. Trying to turn a wrench was complicated due to the close proximity of the counter's backsplash.

I did some Google searches for multiple variations of "kohler faucet handle remove" in an effort to see if there were any tricks to removing these handles, and most of them implied that they just twisted off (without a screw). So, I wrapped a handle in a cloth and gave it 10-16 foot pounds of torque, but no dice. I only managed to scratch the finish on the faucet. Bummer.

Ultimately, I figured out that the set screw required a star shaped bit. Once I found my little socket wrench I was able to access the screw and work around the close backsplash.

Step 3

Once the tops of the handles are off, simply remove the screw to remove the base of the handles. But, before you do, take note of the position of the handles, and remember if the faucet was in the on or off (probably off) position when you removed the handles - this will save you some time later!

Step 4

Remove the valves with a socket wrench. These aren't supposed to be super tight but they were for me, which was complicated by my not knowing which direction I was supposed to be twisting them. It turns out they both needed to be turned counterclockwise.

Step 5

Replace the valves. There are two slightly different valves, and they're not interchangeable. One open by turning it clockwise, the other will open when turning it counterclockwise. One of my valves had red on the tip, which I assumed would be for the hot water. Makes sense, right? Well, it turns out I was wrong.

Step 6

Replace the handles. You might find you need to experiment with the handles positions a bit. I believe the valves are shipped in the "on" position, which confused me because I'd taken the sink apart in the "off" position. This, compounded with having switched the hot and cold valves caused me a lot of confusion. The handles were only turning away from (towards the wall) or the water would turn on in the "off" position and "off" in the on position.

The bottom line is, I'd recommend placing everything into position without screwing anything, then turn the handles. Do the handles turn away from the wall? Next, turn on the water. Does the water flow when you pull the handles forward? Or does do the opposite? Once everything makes sense, screw the screws.

Step 5

Enjoy your new drip-free sink!

Of course, Linda Hamilton in T2 is and my wife are different.  Sara Connor prevents Armageddon by fighting a robot from the future, after all. However, my wife does battle midget terrorists on a daily basis. Terrorists that can operate an iPad but, paradoxically, can't figure out how to put a plate in a dishwasher. So, there a lot of similarities there too.

In the end, I came to this conclusion:

And, I was just kidding about loafing on the couch while my wife was doing housework. I was actually on a chair.

1. Take the screenshot (on a Mac pressing ⌘-shift-4 and dragging the crosshairs over your target will do the trick).
2. Rename the file to something that makes sense (otherwise it'll be named something like Screen Shot 2016-10-29 at 8.11.27 AM.png) 
3. Find the new image file on the desktop and double click it to open in the Preview app.
4. Use Preview to resize the picture then save the file. On my website I display product images in a way that requires them to be no larger than 150px wide. However, I've been thinking a lot about retina screens lately and I've been starting to collect versions of my images that are twice as large too.
5. Upload to my server using my FTP client (I use Transmit). This involves navigating about 6 layers deep into my file system.
6. The point of these screenshots is to display them on my Web site, so the last step is to enter the image name into my database. So, I either have to retype the name I chose for this image or copy and paste it.

Every step is simple. However, when you find yourself repeating a multistep task like this it's time to consider some sort of automation.

The Mac has some great tools for automation. For the super nerdy, bash scripts on the command line, python or ruby scripts (or even php or javascript for that matter) can work wonders. There's also AppleScript, which is supposed to be a layperson's scripting language but, despite all my programming experience, I have a hard time wrapping my head around it.

There's even some absolutely fantastic third party apps like Hazel and Keyboard Maestro. However, a lot of workflow problems like this one can be solved by the simplest automation solution, Automator.

Automator makes automation easy by letting you drag steps into your workflow. These steps are chained together, so each one takes an input (which can be a file, text, or something else) and outputs an, er, an output. Oftentimes this output is the same thing that was input, sometimes it's something different that was created by the step.

Note: To quickly find these actions start typing their names into the search box at the top of the screen. Make sure Library is highlighted in the left column, otherwise you will only be searching a smaller subcategory and you might not find what you're looking for.

So, this is the workflow that I ended up with. 

The first step is to take the screenshot. I want this to be interactive so that I'll be able to select the exact part of the screen that I want for my screenshot. The other option is to save it to the clipboard or to a location. I first made a folder on my desktop called eyedock lens image and put an image inside of it named new screenshot.png, then I chose the Other option in the Save To: dropdown and navigated to this image.

One thing that I wanted to point out on here is that the steps you drag into automator are usually chained together, meaning that the output of one step is, by default, the input for the next step. This is indicated be the circle in the image above.

However, sometimes we want to break this chain. This is true here. My second step is to ask for some text that will be a name for this picture, which is a step that does not need an image to be passed into it. So, when I added this step I right-clicked on it and chose the Ignore Input option. As you can see (where I put the red 'X' above) there is no visible connection between the steps.

Asking for text will pot up a little dialog box that will ask for some text. I want this to be mandatory so I checked the Require an answer checkbox.

The output of this step is going to be the text that the user types in, and this will become the input for the next step, which is Set value of Variable. I named my variable Name, so now this variable it will equal whatever text the user entered in the above step.

After setting my variable, I chose the Copy to Clipboard  step. This will put the name of my image file on the clipboard so I can just paste it where I want it. This may not be an important step for everyone but it's a helpful one for me.

The next step is Get the specified finder items. This is going to retrieve the screenshot image file that we took in step one. Because this does not require the text from the above steps I once again chose the "Ignore Input" option - we are starting a new chain here. On the Get the specified finder items step I simply clicked the "add" button and navigated to the location of my image file. The output of this step will be the image file, which we're going to pass on to the next step,

Rename Findere Items: Name Single Item. I'm going to rename the full name of the file, so I selected this option and then I used the variable NameI from our second step and appended the text "_original.png". So, if the user enters the text "myPicture" in step 2 then the file will now be named "myPicture_original.png".

After renaming the file I'm going to set another variable that refers to this file. It's always best to make variable names that make sense, so I called this variable Original Image. 

Then, I duplicate the file. The output from this step will be the duplicated file (not the original), so my next step, Rename Finder Items, will rename this file (otherwise it well be called myPicture_original copy.png). I'm ultimately going to make two copies of this image and this one is going to be twice as big, so I will rename this one with the variable name + "@2x.png". In our example it will be myPicture@2x.png. Lastly, I set this to another variable and, trying to keep things organized, I call it 2xImage.

I'm thinking, at this point, that these steps aren't requiring as much explanation. The "2x" file is duplicated, renamed (this time it will simply be myPicture.png), and stored to another variable (1xImage). In the next step we finally scale the image. For my Web site I place images in a position where I want them to be no larger than 150px, so I select the appropriate options to give that result. This scaling will be done in a way that respects the proportions of the image - it won't turn your image into a 150px x 150px square, it'll just make sure it's not larger than 150px in either dimension.

We created a 2x image, but we haven't scaled it to our desired size yet. So, we're going to get that image and do that now. This is why we assigned a variable to that image earlier - it makes it really easy to retrieve and perform more actions on it. So, our next step is to Get the value of variable "2xImage". Note that I once again selected the "ignore input" option so this step wasn't chained to the ones above it.

Then, we scale the image - I wanted this to be twice as big so I selected 300px this time.

Now, all the images I wanted have been created - the original, the 1x, and the 2x. The last step is to upload them. Unfortunately Automator doesn't have any built in steps to upload files, but any good third party app should provide Automator actions. As I mentioned above I use Transmit and it provides exactly what I need for this step.

So, the next step is to drag in the Upload step and configure it with your server credentials.

After I've uploaded the 2x image, I get the 1x image (via the 1xImage variable) and upload that one too.

And that's it!

Now save the app and name it whatever you want - choose something that make sense, like screenshot uploader. You can activate it like you would any other app (by double clicking it). However, if our goal is to increase efficiency, I'd use an app launcher like Spotlight (hit ⌘-space and start typing screenshot uploader, or whatever you named it). I'd also recommend giving your app a custom icon to make it more recognizable (otherwise all your Automator apps will look the same!).

Here it is in action:

Wrap-up

There's about a 97.6% chance that you don't need the exact same thing that I need here. Hopefully you'll find this helpful, though, and take this and customize it for your own needs. Automator is obviously highly customizable, and there's no right or wrong way to solve a problem. In fact, as I typed this up I thought of a couple ways this workflow could be changed to work more efficiently. This is one more way that Automator is like "real" programming: Job one is making something that works, jobs 2 through 99 are refining what you've done - if you're so inclined! Just don't go overboard - it's easy to do, as this xkcd comic sums this up perfectly!

There is one issue I don't like about this workflow. It isn't very smart. If an image is smaller than 300px, or 150px,  it will still try to create images in those sizes. As a consequence a 100px image will be blown up to 150px and 300px and, when you're blowing up images like this, they'll be blurry. This is an issue that could be addressed by writing a script (Applescript or otherwise), but this is beyond the scope of this today's blog post.

One other thing to consider - this script keeps three images on your hard drive (the original, the 1x and the 2x). You may or may not want this. If not, consider customizing it yourself by adding some actions to delete the files after the upload.

My coaches and teammates (PFD Crossfit - check 'em out!)  have been incredibly supportive. In theory, I was a college athlete: I ran track at tiny Ripon College, who's biggest claim to fame is the fact that Han Solo went there. One of the other noteworthy thing about Ripon was that it was the location of the Rippin' Good Cookie factory. Oftentimes long distance runners on the team would run to said factory and bring back a bag full of cookies for the team to snack on after track practice.

So, needless to say, I never developed the best pre-competition dietary rituals so I'm learning as I go. My coach Chris gave me a Word document full concepts like macronutrients and glycogen storage process. I've read through this a few times and I thought I'd share the main points with you here.

Water is the a critical factor in the glycogen storage process. The body needs water in order to store glycogen in the muscles and the liver. 

Digestion is king. You want to look to foods that are EASILY digested by the body. Digestion takes a lot of energy, and the last thing you want to do when you’re staring a competition in the face is thwart valuable energy to a bodily process like digestion. 

For example, rather than a whole banana or whole yam, use baby food variations of these items in the pre comp/intra comp protocols. Every piece of food that’s consumed first think about how easily it can be digested then transported effectively. 

Or you could do this . . .

Get lots of sleep. The week before the competition start getting 45 minutes more sleep than normal.

Yeah, that's easier said than done...

So, I can't help but think about what the nerdy 10 year old version of me would think about my calculator options nowadays. Of course, most of us don't carry around standalone calculators, but we all have pretty good ones built into our phones. The iPhone's built in calculator (while in landscape mode) is already better than that scientific calculator from my youth.

However, there are tons of great calculator apps out there that do amazing, out of the box things. I've actually tried very few of them (after all, how many calculators does someone need?). I've liked CalcBot as a small step up from the built in calculator, and PC Calc seems to be widely regarded as one of the best full featured calculator on the app store. Soulver is kind of a cross between a spreadsheet and a calculator that I find really useful for certain tasks.  MyScript Calculator has the amazing ability to interpret mathematical symbols and numbers that you write on the screen with your finger and then solves the problem.

All that being said, the app that really blew my hair back is Photomath. This app lets you type in math problems in a pretty convenient way, which is no small task, because entering formulas with parentheses, exponents, numerators and denominators, etc, can be a cumbersome process.

Even more fun, though, is the fact that you can actually take a picture of a math problem and it will interpret the math symbols and numbers, clean it up, and solve the problem. If there's a variable in the math problem it will intelligently solve for x.

The really really cool part, however, is that it this app does what all my teachers reprimanded me for NOT doing when I was in school: It shows its work. If you click on the answer the app will show you a long list of steps that it used to solve the problem. Clicking on a step will give a little explanation of which mathematical principles were used for that step.

Whenever I see something like this I imagine voices rising up in protest, crying out  "Wait, kids should be doing this on their own, not letting an app do it for them!". In fact, I can see my 10 year old self discovering something like this and, with an evil laugh, saying "This app will be able to do all my homework for me - ahh ha ha ha ha!".  My adult self, however, is of the opinion that this is an awesome way to acquire the fundamentals of math. In my experience one of the best ways to learn is to break down how someone else solves a problem. Unfortunately not every student has access to someone proficient in math, but with an app like this kids (and adults) can have access to a robotic math tutor. Plus, I think this would be a great way to check your math homework and, if you got the answer wrong, figure out where you went wrong.

Could this be abused? Probably. But I think the upside is a lot greater than the downside.

Also, it's worth noting that the app isn't perfect. Knowing it's limitations can be a learning experience too. For example, I scanned this trigonometric problem from one of my optics textbooks:

From the white box at the bottom it appeared to be scanning the formula correctly, but the answer it was giving was different than the answer in the book (the yellow arrows in the picture above illustrate this). At first I was puzzled, but then I realized I've run into similar problems when writing optics calculator programs. Programming languages usually accept radians for trigonometric functions, and this textbook problem was using degrees. Sure enough, when I converted the degrees to radians the answer agreed with the textbook. So, lesson learned: Computers are great tools, but you can't blindly trust them. Programs take an input, process it, and return an output accurately, but sometimes they process things differently than you expect them to!

To summarize, I continue to be amazed at what app developers are able to do. This is an impressive app and I think it could be a very useful tool for anyone learning math concepts. We live in such exciting times!

Here's a little video explaining the calculator and this new feature.

You don't have to start at a young age, but it helps. Take Aiden, for example. He started training at two years old and has already logged more hours than many people 10 times his age. His chances of making a traveling mowing team by age four are quite good. There, he'll refine his skills by competing against the best of the best and, by the time he's 18, should snag a lawn mowing scholarship to a top university program. 

And, with hard work, dedication, and a little luck - such as avoiding any career ending injuries - perhaps Aiden will be drafted by a pro team some day. Of course, going pro is a whole other level, but, in the right system complete with veteran leadership, good coaching, lots of film study, I'm convinced my boy could be a star. And hopefully he'll buy me a new house. Or at least pay off my school loans.

Check out the gallery below to see some of AIden's training techniques.

To be the best you need to challenge yourself.

Only the weak stop training in the Winter.

The best lawn mowers have an intimate knowledge of their machines.

Sun up to sun down.

Wearing the right gear is important.

Scoping out the competition.

And, lastly, a video illustrating his dedication to his craft.