Over the last 6 months I have moved house, and had multiple parts of my family visit, travelled interstate and suffice to stay with a full time job it has been hectic for me. Yet in the middle of all this I ran into many issues that made it painfully obvious that I needed a NAS. My dad’s laptop was having severe issues and the only solution that I could find was to reinstall windows. Say what you want about the cost of macs, this is not something I have needed to do on a mac. Reinstalling meant that I had to back everything up on to one drive (he has a subscription) and then having to reinstall windows and add the files back. This was a solid half day of effort.

It got me thinking if my dad didn’t have a one drive subscription, I’d have to go out and buy a external hard drive and then have to back up over USB. I also noted that we have to have so many subscriptions now, One drive, Apple iCloud, Google One, and so and so on. They are all expensive and increase in price year on year. I wanted to look at a solution that had no ongoing costs, an would allow me to store backups for all of my computers and devices as well as potentially act as control centre for my home.

Research

With that aim in my mind I started researching. My initial idea was to buy a Synology NAS. I have come to appreciate the ease of close systems as long as they allow me to do what I want. I use a mac and iPhone, because its easy. I don’t have to worry about things breaking randomly, or drivers failing. Yet Synology was not the answer. They have been mired in controversy recently as they have been pushing updates to their systems to only allow hard drives with Synology firmware. It was a clear an egregious attempt at vendor lock in. As I said I don’t mind if the convenience outweighs the cost, but if you look at the prices $450 AUD for a Synology 4TB hard drive was $150 AUD for the Seagate 4TB hard drive, this is, excuse my Australian, clearly taking the piss.

Synology was out initially on a economic front an even though they have reversed this policy, I cannot trust them to bring it back later, so they are out on a moral front as well.

So I continued my search there are boxes from Ubiquiti, Ugreen and others, yet they all had issues in one way or another, whether its the quality of the product, software support or other limitations. In the end I decided to abandon prebuilts and look at building my own NAS. As I googled around I came across a build that I liked.

Brian McMoses builds NASs every year. He has put a good deal of thought into the choices he makes. I chose the 2025 version as a base for mine.

https://blog.briancmoses.com/2024/11/diy-nas-2025-edition.html

Building the NAS

I chose to use 4TB drives which I got for $113 which at the time and even more so today is a great bargain. The small form factor is an added advantage as I need it to be easily movable. The other choices i made were to only go for 16GB of ram and I went with an i3 rather than the n100. The reasons for such? It has better performance and for ram? Cost. For the same reasons I didn’t use an app drive instead I partitioned the os drive to act as an app drive. This saved cost but introduces risk for me.

I chose to install TrueNas Scale, over all the other options out there. This is open source software and also free. I chose it over Open Media Vault and HexOS for both cost, openness, ease of use and feature availability reasons. I am very happy with the choice.

I used this method to partition the NVME drive to support the boot partition and apps partition on one drive. It is not recommended and not supported but as with al my project I want to learn as much as I can.

https://www.reddit.com/r/truenas/comments/lgf75w/scalehowto_split_ssd_during_installation/?share_id=7FNx79h5XJcC9OYsxSdcT

My overall cost for this project can be seen in the table below.

Overall it was relatively cheap for today. I recommend buying the motherboard of Aliexpress but everything else from local stores during sales. The stores tend to have great deals.

Issues

I had one annoying issue. The hard drive bay fan ran full tilt all the time. To solve it I disconnected it. It isn;t noisy anymore. This is a well known issue this board. I probably would have bought a different one if I had done a bit more research. The other major issue is that the board only has 6 slots for HDDs, 1 NVME and 1 SSD. This limits expansion possibilities but that is fine.

Conclusion

Overall I am very happy with my NAS and it has been running for 3-4 months now. I have deployed applications like Jellyfin, and tailscale on it. These though will be the topic of another post.

Before we do get into it, please subscribe to my blog.

For those who want to read my first attempt you can find it here:

Vibe Coding Part 1

For a quick summary my two mistakes were:

1. Writing short prompts

2. Not understanding the api and frameworks I was using, even at a basic level.

I corrected mistake 2 by reading up on extensions api. I now know the difference between content and background scripts. I also understand how message passing works which will come later.

With the script that I had written earlier I found multiple issues, it only worked on the loaded urls, and it didn’t look forward at other urls on the page leading to being kind of useless to what I actually wanted to do.

So I went back to claude better armed, my prompt is below:

create a chrome extension which grabs all url hostnames and javascript urls, 
puts them into two seperate arrays and then logs them when page load is complete

My prompt had a much clearer description on exactly what I wanted to do, and Claude generated a ton of code for me and surprisingly (compared to my previous effort), I only had one error.

Why did this error occur, 
Uncaught SyntaxError: Identifier 'observer' has already been declared do not rewrite code

Claude actually solved it this time:

I see the issue. The error "Uncaught SyntaxError: Identifier 'observer' has already been 
declared" happens because we have both the content script automatically injected by the 
manifest (via the content_scripts entry) AND manually injected through the 
chrome.scripting.executeScript call in background.js. 

This creates a conflict where the content script runs twice, causing the 'observer' variable 
to be declared multiple times.Let's fix this by choosing one injection method. Since we have 
it defined in the manifest's content_scripts section, we should remove the manual injection 
from background.js:

Claude also generated extraneous code. The entire background.js is useless as claude did not pass any messages from content.js to it.

//content.js
// Initialize arrays to store the hostnames and JavaScript URLs
hostnames = [];
jsUrls = [];

// Function to extract hostname from a URL
function extractHostname(url) {
  try {
    return new URL(url, window.location.href).hostname;
  } catch (e) {
    return null;
  }
}

// Function to collect all hostnames from various elements
function collectHostnames() {
  // Add current page hostname
  const currentHostname = window.location.hostname;
  if (currentHostname && !hostnames.includes(currentHostname)) {
    hostnames.push(currentHostname);
  }

  // Collect hostnames from all links
  document.querySelectorAll('a[href]').forEach(link => {
    const hostname = extractHostname(link.href);
    if (hostname && !hostnames.includes(hostname)) {
      hostnames.push(hostname);
    }
  });

  // Collect hostnames from images
  document.querySelectorAll('img[src]').forEach(img => {
    const hostname = extractHostname(img.src);
    if (hostname && !hostnames.includes(hostname)) {
      hostnames.push(hostname);
    }
  });

  // Collect hostnames from iframes
  document.querySelectorAll('iframe[src]').forEach(iframe => {
    const hostname = extractHostname(iframe.src);
    if (hostname && !hostnames.includes(hostname)) {
      hostnames.push(hostname);
    }
  });

  // Collect hostnames from sources
  document.querySelectorAll('source[src]').forEach(source => {
    const hostname = extractHostname(source.src);
    if (hostname && !hostnames.includes(hostname)) {
      hostnames.push(hostname);
    }
  });

  // Collect hostnames from audio/video elements
  document.querySelectorAll('audio[src], video[src]').forEach(media => {
    const hostname = extractHostname(media.src);
    if (hostname && !hostnames.includes(hostname)) {
      hostnames.push(hostname);
    }
  });
}

// Function to collect all JavaScript URLs
function collectJsUrls() {
  document.querySelectorAll('script[src]').forEach(script => {
    const url = script.src;
    if (url && !jsUrls.includes(url)) {
      jsUrls.push(url);
    }
  });
}

// Function to log the collected data
function logData() {
  console.log('--- URL and JS Logger Extension ---');
  console.log('Hostnames collected:', hostnames);
  console.log('JavaScript URLs collected:', jsUrls);

  // Send data to background script
  chrome.runtime.sendMessage({
    action: 'urlDataCollected',
    data: {
      hostnames: hostnames,
      jsUrls: jsUrls
    }
  });
}

// Wait for the page to fully load
window.addEventListener('load', () => {
  // Give a short delay to ensure dynamic content has loaded
  setTimeout(() => {
    collectHostnames();
    collectJsUrls();
    logData();
  }, 1000);
});

// Observe DOM changes to catch dynamically added content
const observer = new MutationObserver((mutations) => {
  let shouldUpdate = false;

  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      shouldUpdate = true;
    }
  });

  if (shouldUpdate) {
    collectHostnames();
    collectJsUrls();
  }
});

// Start observing the document
observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

// Stop observing after 10 seconds to prevent continuous updates
setTimeout(() => {
  observer.disconnect();
  collectHostnames();
  collectJsUrls();
  logData();
}, 10000);

My favourite part of all this is it runs. As a proof of concept it works much better than what I had built and Claude’s first attempt. This actually demonstrates that vibe coding is actually useful!

If you’ve been on LinkedIn or Reddit there has been a huge push for vibe coding. It talks about people building entire applications without any programming expertise, solving problems quickly, rapid iteration, and so on and so forth. It sounds awesome, I am not a professional coder by any means, but I work in the tech industry and I have a lot of ideas. So it sounded perfect.

What I wanted to Build

What I wanted to build was simple, I just wanted something that would pull all urls that where loaded on a page, whether it was initial load or by js in the background. Now for this to happen I needed to run in the browser but outside the webpage. The best option is something Google hates, Extensions. I also have zero experience developing extensions, but I do know enough JS to be dangerous.

This was the opportunity I had been waiting for. Now I’m not going to pay for anything, so no integrated IDE environments, meaning no cursor or copilot. I read through all the AI rankings, (I didn’t really) I just remembered that everyone was hyping Claude, so thats what I tried with.

The first prompt I used was:

how do I detect a url call on a page

Its a pretty poor prompt, but interestingly Claude actually understood me intent (Yes using “understood” is wrong when speaking about LLMs but it highlights how deterministic language is). The output had 4 different options:

1. Using the Fetch API or XMLHttpRequest Event Listeners

2. Using the Performance API

3. Using Browser DevTools Network Monitor

4. Using Service Workers

All of these are good ideas, and I would not have thought of options 2 and 3. However none of these work for me because I can’t load JS on the page as I want to monitor pages I don’t own. So I reframed my question.

how about using an extension

I will skip all of the ai fluff agreeing with the suggestion. It again gave me three options.

1. Use an existing module - for my purposes useless.

2. Extension using a service worker

3. Extension using a content injection model.

So whats the difference between a service worker extension and a content injection extension? I didn’t know at the time. To be honest I am not clear on it now either. It is something that I need to look into when I further develop this extension that I am building. So going with the theme of this I went with the vibe and I chose option 2. To see where it would take me. This is the code it gave me.

{
  "name": "URL Call Detector",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
  "background": {
    "service_worker": "background.js"
  }
}

// background.js
chrome.webRequest.onBeforeRequest.addListener(
  function(details) {
    console.log("URL call detected:", details.url);
    // You can also log method, type, timestamp, etc.
    return {cancel: false}; // Don't block the request
  },
  {urls: ["<all_urls>"]},
  ["blocking"]
);

This code is remarkably close to what I wanted to achieve, in fact it looked perfect. I pulled it altogether into chrome and tried to run it but it failed with errors. Now I have some background context on why it was failing. Google had recently (read June 2024) deprecated Manifest v2. Now I wouldn’t really know much about this except for the fact that this broke every adblocker out there. The replacement module Manifest v3 is a poor replacement as it doesn’t allow the same level of access to block ads.

Why did I suspect that this was the issue, well, the manifest version is set to 3, and we have the “blocking tag.” I ended up going to the docs and yep that was the issue. In a blue box at the top of the page with a star

So I went back to Claude because this is an experiment in vibe coding.

request blocking does not work with manifest3

It decided to start from scratch and decided to give me this code:

// background.js
// For monitoring requests without blocking them
chrome.declarativeNetRequest.onRuleMatchedDebug.addListener(
  (info) => {
    console.log("Matched URL:", info.request.url);
    // Store the request info if needed
    chrome.storage.local.get(['requests'], (result) => {
      const requests = result.requests || [];
      requests.push({
        url: info.request.url,
        method: info.request.method,
        timestamp: Date.now()
      });
      chrome.storage.local.set({requests: requests});
    });
  }
);

// Set up rules to match all requests
chrome.declarativeNetRequest.updateSessionRules({
  addRules: [{
    id: 1,
    priority: 1,
    action: { type: "allow" },
    condition: {
      urlFilter: "*",
      resourceTypes: ["main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "other"]
    }
  }]
});

This did not work either, I went back to Claude with the error that I found.

Trying to use option 1 leads to the error 
Uncaught TypeError: Cannot read properties of undefined (reading 'addListener')

In response Clade decided to start again. It generated new code that did not work either. To cut a long story short I kept going back with errors and it kept coming back with solutions that did not work. After a an hour or two of this bullshit (Note my frustration at this point). What was worse was that it was generating even more complex code, rather than continuing to solve my problem. It generated a popup.htm file, and even more things.

In the end out of sheer frustration I deleted everything and went back to the original prompt response and went to the original docs. This is what I ended up with.

chrome.webRequest.onBeforeRequest.addListener(
    function(details) {
      console.log(details.urls);
    },
    {urls: ["<all_urls>"]},
  );

It worked!

So what where the fundamental errors? There were actually 2, the first was Claude generating more and more complex code without understanding what I was trying to do. Also I was feeding it bad info because of the second issue. When you run a background service the errors or the log output does not appear in the default console. Instead there is a seperate console that you have to open a seperate console. This means that there was a really good chance (read definite) that I was feeding Claude the wrong error messages as well.

Conclusion

You have to remember there are claims that people are deploying entire applications after building it with vibe coding with no programming experience. My experience demonstrates that these claims are highly suspect. A person with no programming experience is not going to be able to utilise AI in a productive manner. We need to have a basic understanding and also need to read docs to be able to utilise this correctly. What I did find is that if I need to generate basic code quickly, this is super useful. I generated a website and it looked great. After I understood how to test properly the generated code actually makes sense.

Before we get started lets quickly go over the features that we absolutely need in the application.

1. A budgeting application needs to keep track of transactions. It needs to check for expenses and income.

2. These transactions need labels of some kind. How do we know if income is from salary or is it from rent. This is why we should be able to categorise transactions. Transactions can belong to multiple categories as well. Consequently we should have categories.

3. Now that we know how money is flowing we need to track where its going to. We have accounts for this purpose. We have bank accounts which store money and where want to track expenses to. We also have expense accounts, eg. loan accounts and credit cards. In these cases do we want to track the transactions or do we want to track payments. For a budgeting app we want to see credit card transactions, but we want to track payments as expenses as we only pay when we pay the credit card.

4. Now that we have an underlying idea of the financial side of the application, we need to decide on the more generic features of the application. We need user models, groups, so we can have multiple budgets etc.

Before we can commit to backend frameworks and database models and the like we need to understand the flow if data. This will help shape both the UI and also the server calls and database models that need to be built.

The actions the user can take are:

1. User creates account.

2. User logs in.

3. User requests support

4. User updates settings.

5. User creates account.

6. User creates category.

7. User creates transaction.

There are only 7 actions that need to be implemented for the Minimum Viable Product and only 3 that are part of the “finance” portion of the application.

Choosing a Framework

Now that we have described the app and the operations of the app, lets look at what framework to use. Modern day development uses react on top of nextjs or other JS framework that spans both front end and back end. The problem for me is that I want to deploy quickly and I don’t have time to learn a framework. I have a pretty strong background in python and also raw JS. Further to this my sql is intermediate at best if I were to be generous.

For me this means choosing a python web framework and the two that I have used in the past are Django and Flask. I have no interest in implementing users or building everything from scratch. Django does a lot of things automatically and its batteries included method is what I want to use. It provides an administration page to manage all the database models, as well as user models that can be used for our own user management. Further by using groups we can solve the groups issue as well.

Database & Models

Django also allows us to build database models, that can be deployed on pretty much any relational db engine. For production postgres is the obvious choice. Its open source well supported and scales relatively easily. We know that Django implements models directly in the framework itself. This actually allows us to abstract away many to many relationships as well, making model development quick and easy.

Category Model

The category model is the simplest of all the models. All we need is name and a description. There is nothing else required right at this moment.

Account Model

The account model should contain a name and description like the categories. It should also contain the type of account. Is it an expense account like a credit card or is it a normal account like a bank account. Finally it should contain a balance figure. By having a balance number it avoids us having to pull every single transaction from all history to calculate the balance.

Transactions Model

The transaction model is the most complex. It requires:

• The transaction date

• A name

• A description

• A foreign key to the account to which the transaction is.

• A foreign key to the user who created it

• A Many to Many relationship with all the categories to which its associated. (A category can be associated with many transactions, and a transaction can be associated with many categories).

• The amount of the transaction and if its an income or expense. In my case I specified that this should be two seperate fields so a transaction could contain both income and expense at the sam time. Further by doing this we can avoid signed numbers as well. Rather we can use the most basic type an unsigned int to represent value.

  • With money calculations we need to use the integer or big integer fields to store or validate date. The reason for this is quite simple, floats are inaccurate and poor representations of money. See here for a longer discussion of the topic.

  • For our purposes storing in cents makes the most sense as it doesn’t need that much precision.

Conclusion

We’ll leave it here for today, over the next set of articles we’ll look at building out the application on one thread and look at designing the fundamental features of the budgeting application. Sign up to my newsletter so that you can follow along.

Let’s explore why budgeting apps are important and why I chose to build my own.

Why You Need a Budgeting App

1. Gain Control Over Your Finances
Most people including me had a vague idea of their financial situation (bad) until they start tracking it. Budgeting apps should provide clarity by showing you exactly where your money goes. Whether you're trying to pay off debt, save for a big purchase, or stop living pay check to pay check, tracking your finances is the first step.

2. Set and Track Goals
Want to save $200k for a down payment? Cut your food spending by $20? A budgeting app makes goal-setting tangible, allowing you to break your big dreams into manageable steps and monitor your progress over time.

3. Eliminate Mindless Spending
Seeing daily, weekly, and monthly spending patterns in real time helps cut back on impulse buys. Once you recognise patterns (e.g. too much takeout, unused subscriptions), you can change behaviour and reallocate funds toward things that truly matter.

4. Automate and Simplify
Manually tracking expenses in a notebook or spreadsheet can work but it painful and confusing quickly. Apps automate data entry, categorise expenses, and may even pull in transactions from your bank or credit card, making it easier to keep up with your budget.

Why You Should Build Your Own Budgeting App

While apps like YNAB, Frollo, and EveryDollar are popular for a reason, they’re not without downsides. Building your own budgeting application gives you total control and offers several benefits that off the shelf apps just can’t match.

1. You Can Build the Features You Need
Most budgeting apps try to serve a broad audience. As a result, they often include features you’ll never use or leave out the ones you desperately need. Maybe you need envelope style budgeting but with crypto integration. Or maybe you want a visual calendar view of your cash flow. When you build your own app, you build what you need.

With Yafa I wanted a couple of features in particular. I wanted unlimited accounts, unlimited categories, take actions based on categories and the like. This was not something available to me with the other apps.

2. Say Goodbye to Monthly Fees
Many top-tier budgeting tools come with subscription fees ranging from $5 to $15 a month. That might not seem like much, but it adds up—especially when the whole point is to save money. Building your own app is a one-time investment of time and (possibly) some initial setup cost, but it can save hundreds over the years.

Yafa is built to be free. I have minimised all my costs for running the application. Its sits behind Cloudflare, it runs on a cloud provider, where costs are amortised over the multiple services I run. To me the costs of running an application are minimal to non-existant. The true cost is my time and for various reasons deploying Yafa is well worth the trouble.

3. Learn Valuable Skills
Even if you’re not a professional developer, creating your own budgeting app is a great way to learn programming, data structures, API integration, and UX design. It’s a practical project with real-world value.

4. Integrate With Your Life Seamlessly
Want to pull data from your custom bank API? Sync it with your calendar? Add voice command capabilities? Building your own app means you’re only limited by your creativity. You can integrate your budgeting tool into your digital ecosystem in ways no third-party app ever could.

I don’t want to sync with my bank accounts, but I want the ability to search my data and make connections via search. By having access to the database I can do this. By building it as a feature I can give anyone thsi power.

What You’ll Need to Get Started

• Tech Stack: Depending on your skills, you can use a web-based stack (React, Node.js, Firebase), a spreadsheet-powered backend (Google Sheets + Apps Script), or even a mobile-first approach (Flutter, Swift).

• Budgeting Features: Think categories, recurring expenses, goal tracking, graphs, and reporting.

• Security: Implement strong encryption and consider offline storage or local hosting to ensure your data stays secure.

• UI/UX: Clean design is crucial for daily usability—don’t skip on making it intuitive and visually appealing.

Over the coming weeks I will get into a technical deep dive of how I built Yafa, how to use it, its quirks, its features and ultimately why I think you should use it.

Final Thoughts

Using a budgeting app is one of the smartest ways to stay in control of your finances. Off-the-shelf solutions can work for many, they often come with compromises. If you’re looking for a tailored, cost-effective, and private solution, yafa may be the solution for you.

Over the course of this series, I will go through features, design choices and how we put privacy first to build a solution first for myself and for you. Jump on board and not only will you gain a deeper understanding of your finances, but you'll also build something that grows with you and that might just be the best investment you make all year.

Check Yafa out here: yafa.v1shnu.com

The code needed to collect the values from this object is also complicated. For most inputs you can get the value by calling .value. In this case you have to write your own code to get the value.

var category = Array.from(category_select.options).filter(function (option) {
    return option.selected;
}).map(function (option) {
    return option.value;
});

Styled Multi Select

Our solution needs to have two key features, the first is that it should be much better looking and second it should be easy to get the value. This is why I built the styled Multi Select which quickly shows all selected values, with a stylised drop down that matches the bootstrap style.

To get the value, you simply call the value function.

sms.value

Conclusion:

I have used this extensively. To get a hold of this element you can get it from my github.

Github

The products and services offered on this domain are offered as is and there is no guarantee of any sort. Usage of these services does not imply any contract of any sort unless otherwise guaranteed by law.

If you have any concerns please reach out to hello@v1shnu.com.

Any personal information we gather will be treated as per our privacy policy.

Building a Digital Photo Frame is important proof of concept in demonstrating how open-source technologies can be utilized to build a product that can not only compete with but also exceed what’s available in the market.

Our Aims:

Digital photo frames are a solved problem. You can buy as many as you want at all price ranges, from less than a $100 to over $600. Beyond the obvious as a learning exercise, why do we do this. There are multiple problems with existing photo frames.

These are:

1. The vast, vast majority of digital photo frames have LCD panels. This means that to show an image they need to be powered, making them in my opinion vastly inferior to an existing photo frame. Worse still LCD panels have viewing angles which means you have to stand in one spot to see the image perfectly.

2. Commercial photo frames often use old buggy and old versions of software and run on top of old and buggy hardware. This means that the experience of using the photo frame is terrible. They are slow buggy and entirely useless. Uploading photos and getting it setup is an entirely difficult process.

3. Commercial photo frames never update their software and often run modified versions of existing commercial software. Furthermore, they often connect to Wi-Fi and the internet. This results in insecure devices connecting to the internet and increases the chances of security breaches at home, from theft of personal photos on device through to ransomware and involvement of your network on cyberattacks.

4. Finally commercial hardware is locked down and built by factories with three or four factors of separation from the end user. This means that if anything breaks down, there is no way to get it fixed. The device is never getting repaired and even if the retailer replaces it, the device will end up in landfill as another piece of e-waste.

My aim is quite simple. I want to address the issues that we have seen above. That is simply it. Point 1 was unsolvable even a few years ago. We have a solution now and it is E-Ink. Yes, the same technology that runs the Kindle and known for being black and white is our solution.

Modern E-Ink can display up to 7 colours which is more than enough to cover the colour space when we apply various intelligent algorithms. Further to this, E-Ink is like paper, it stays in the set state when the power is turned off and it doesn’t emit light, rather it reflects it. This combined together means that we don’t have an angles problem and we don’t have a power problem.

Challenges two to four can be resolved far more quickly by using opensource or well supported technologies. In our case we are using the Raspberry Pi 0w for this proof of concept. This device is well supported and was first released in 2017. More than 6 years later it is still being sold and with the operating system based on Linux, it will continue to receive updates and continually be supported. This means that our device could have individual parts upgraded thereby preventing e-waste.

Build Guide

There are two parts to this build guide. The physical product and the software component. Both are important to ensure the success of the product. The Physical component affects the look and feel of the device, and we need to make sure that any design looks as good or better than what is available. The software component determines how smooth the operation of using it is. For the purposes of this version, we are going to have a simple rotating display with uploads of photos via ssh. In future we will implement a web server for the Raspberry Pi that can be used to connect to Wi-Fi as well as upload images.

Physical Build Guide

Building the device is the last part of the process. However, it has the most considerations as it is the first thing that people see and feel. There are many approaches we could have taken, and I chose a traditional look. There are multiple approaches we could have taken; we could have gone completely the opposite way and created a post-modern piece, or we could have built something that showed off the technological aspects.

As mentioned, we chose the traditional route. There is a reason photo frames have been unchanged for centuries. There is a frame, a glass front and so on. In fact I just bought a relatively cheap frame from a local retailer. With a few modifications I was able to fit the E-Ink screen into a traditional frame. The Raspberry Pi 0w is a tiny and slim device which can be attached to the back quite easily. Even as a prototype the device looks quite good.

Parts List

Software Build Guide

The software build guide is straightforward as well, we have utilized the Waveshare libraries which allow us to minimize the software that needs to be written. What we have done is a script that updates the screen with the picture from a folder that the converter programs update with new photos. We also update a file to keep track of the photo that is being displayed.

from waveshare_epd import epd5in65f
from PIL import Image
from os import listdir

try:
    imagefiles = [f for f in listdir("photos")]
    print(imagefiles)

    with open("currimage.txt","r") as f:
        line = f.readline()
        displayImage = ""
        if line:
            index = imagefiles.index(line)
            if index == len(imagefiles)-1:
                index = 0
            else:
                index = index + 1
            displayImage = imagefiles[index]
        else:
            displayImage = imagefiles[0]

    with open("currimage.txt","w") as f:
        f.write(displayImage)

    #Clear and set the WaveShare Display
    epd = epd5in65f.EPD()
    epd.init()
    epd.Clear()

    Himage = Image.open("photos/"+displayImage)
    epd.display(epd.getbuffer(Himage))
    epd5in65f.epdconfig.module_exit()

We then set up a bash script to be run very hour via a cron job.

#!/bin/bash

#Change to the right directory update this to point 
cd /home/pi/PhotoFrame
#Run Script
python photoframe.py

# m h  dom mon dow   command
0 * * * * /home/pi/PhotoFrame/photoframe.sh

Download all code and follow installation guidelines from GitHub

Future Work

This is a prototype to prove that this is possible, however there are various improvements that can be made.

1. Currently the only way to upload photos is via ssh. This is fine for a single one-off solution, however if this were to be turned into a product, we would need to have another method to upload photos.

2. There is no way to change wifi connections or set up in hotspot mode. This will need to be available for people to set up their device.

3. Finally, this is a prototype, a proper product would need to have all the parts integrated in a single circuit board. This would make the product thinner, and we would not see any exposed cables as we do with the prototype.

4. The last major change would be moving away from the fully fledged computer in the Pi to a microcontroller like the Pico. This would reduce the overall cost of the product.

Conclusion

Consumer electronics are rarely profitable, especially in commoditized spaces like digital photo frames. Even from a cost analysis, this device would cost around $200 per unit to build. This puts it already out of reach of most people. To be profitable we would have to sell it for $400 - $500 which is at the high end of the digital photo frame market. Changes in the design and volume discounts would bring the price down.

While this may put a dampener on the idea of sales, it achieves our other aims. To encourage people to build their own products, and beyond that it has highlighted that we can build a better product that what is available on the market. This ultimately achieved what we set out to do.

Have ideas on what I should build next? Put it into the comments.

This post briefly looks at what is required to create an image file that can be displayed on the Waveshare 5.65inch ACeP 7-Color E-Paper E-Ink Display Module. It goes into the required format and links to a script that converts images into the correct format, which is available on Github.

Converting Images:

There are a couple of challenges with utilizing the Waveshare libraries. The image must be the exact size of the display and they must be in the right 7 colour format. Finally, it needs to be in bmp format. Otherwise, the code crashes or in the best case it won’t be displayed correctly on the platform.

Format Conversion:

Format conversion is pretty straightforward, you can utilize various tools to convert a file to bmp. The script that has been provided will do this automatically.

def toBMP(input):
    image = Image.open(input).convert('RGB')
    return image

Resizing:

For the “5.65inch ACeP 7-Color E-Paper E-Ink Display Module” which I’ve used the size is 600x448 pixels. This size is different on different screens so make sure that you check the size before beginning to resize the image.

The naïve way to resize an image is to crop it. However, if you crop a modern photo with millions of pixels, you’re going to end up with a tiny corner of an image. To solve this issue, we need to first scale the image down to have a length or height of 600px depending on whether you have a landscape of portrait image. Following that we need to crop the corresponding height or length to 448px.

Again we face an issue, we cannot just crop the height, it may be that after the resizing it may be less than the expected 448px and so we need to pad the image to make it the exact size.

Further to this we should not just crop or pad on the top or bottom, we need to divide it in two and apply it to both the top and bottom. This will minimise the total data loss in the image.

def cutToSize(image, outLength, outHeight):

    length, height = image.size

    if length < height:
        image = image.rotate(90, expand=1)

    length, height = image.size

    ratio = length/outLength
    tempHeight = height/ratio

    image = image.resize((outLength, math.floor(tempHeight)))

    difference = tempHeight - outHeight

    partVal = abs(difference)/2

    bot = math.ceil(partVal)
    top = math.floor(partVal)

    if difference > 0:
        image = image.crop((0, top, outLength, tempHeight-top))
        image = image.rotate(180, expand=1)

    elif difference < 0:
        tempImage = Image.new(image.mode, (outLength, outHeight), (255, 255, 255))
        tempImage.paste(image, (0, top))
        image = tempImage

    return image

Changing the Colors:

The next step is changing the colors. The E-ink display I used only supports 7 colors. The palette can be seen below. This is pretty awesome as for the longest time E-ink only supported black and white. However, it does mean we have to change the image’s colour palette from 256 colours (for BMP files) to 7.

The simplest approach is to find the closest matching color and apply it.

This would look strange, and we would lose a lot of detail. This raises the question, is there a better way?

Yes, there is, and this method is called dithering. Dithering is where randomized noise is introduced to reduce banding as we saw in the previous image. Banding is the solid bands of colours that you saw in the example above. Dithering also creates the illusion of colour depth. It does this by taking advantage of the human eye which perceives a collection of colours as a mixture of these colours. This allows 7 colours to create a much bigger colour space. This allows us to get high quality pictures on the screen without having to sacrifice to much detail in the images.

Applying this in code is not straightforward, the documentation is poor and the what I have built is from combining multiple stack overflow answers and various gists.

def palette7Convert(image):
    palettedata = [0x00, 0x00, 0x00,
                   0xff, 0xff, 0xff,
                   0x00, 0xff, 0x00,
                   0x00, 0x00, 0xff,
                   0xff, 0x00, 0x00,
                   0xff, 0xff, 0x00,
                   0xff, 0x80, 0x00,
                  ]


    for i in range(0, 249 * 3):
        palettedata.append(0)

    p_img = Image.new('P', (600, 448))
    p_img.putpalette(palettedata)

    image = image.quantize(palette=p_img, dither=1)

    return image

Conclusion**:**

Converting an image to be displayed on the 7 colour E ink display is more involved than originally expected. The script allows us to avoid the manual work of creating each image independently thereby saving us time and effort.

This article delves into the creation of personalized celestial maps using the D3-Celestial library, catering to the trend of commemorating special occasions with starry mementos. The author simplifies the process through client-side development and dynamic data input. Challenges and solutions, such as constellation name issues and browser compatibility, are discussed, and the project successfully delivers a functional and accurate star map.

Check it out at Night Sky

Introduction:

There is an enduring trend where you can get a printout of the night sky of your special occasion to keep as a memento or give away. It is a thoughtful and fun gift to give that makes a lot of sense, and for me I’ve always had a love of space, and astronomy. The problem is if you google for something like this, you will get a bunch of choices and all of them look pretty similar.

When I see something like this I start to wonder, is this as difficult as I think it might be? The answer was no, not at all. You can even do it all client side.

Building Night Sky:

The first thing I needed to do was to get all of the data. Five minutes on Google let me find an even better solution, which was d3-celestial. This was a better solution because it integrates data collection, processing, and display all in one. For those not in the know, D3.js is a well-known library used for visualizing data. What you can do with it is pretty epic. Many of the stunning visual graphics on the internet are generated by the creative use of D3.js.

D3-Celestial provides us with a Celestial map with all of the features that every other paid service has. Looking at the way certain sites work, I am 100% sure they use this library. The great thing about this library is there is almost no code to write all you have to do is modify a JSON configuration.

var config = { 
    width: 0,           // Default width, 0 = full parent element width; 
                       // height is determined by projection
    projection: "airy",    // Map projection used: see below
    projectionRatio: null,   // Optional override for default projection ratio
    transform: "equatorial", // Coordinate transformation: equatorial (default),
                             // ecliptic, galactic, supergalactic
    center: null,       // Initial center coordinates in set transform
                        // [longitude, latitude, orientation] all in degrees 
                        // null = default center [0,0,0]
    orientationfixed: true,  // Keep orientation angle the same as center[2]
    geopos: null,       // optional initial geographic position [lat,lon] in degrees, 
                        // overrides center
    ...

The library is optimized for use with npm, however, we can still use it directly, which is what I did. This is simpler and faster.

The only information we need to collect from the user is the latitude, longitude, and time at this location. We need this information as these three factors determine which direction you are facing. As the Earth spins, the stars and constellations move. Once we feed this data in, it generates a star chart with all of the info we require, including stars, constellations, deep space objects, the sun, moon and planets and their positions.

The json config also gives us the option to add in lines, modify projection type, change background colour and make a whole host of changes to make the image look pretty. This is what it looks like by default on my version.

Launching Night Sky:

The next step was to launch this. From what I could see some players in this space generate the maps server side while others do it client side or don’t display the map at all. Instead, they exist purely to sell a physical product. The applications use a major cloud provider like Google or run applications on Vercel which has a generous free tier. The way that I wrote Night Sky means that I can deploy my application as a static application. I could deploy it in an s3 bucket, on Github pages or even a cheap hosting provider.

I chose to do it via Cloudflare. I already owned a domain name through them and most importantly, it is free to host a static website via Cloudflare pages. The advantage over Github pages is that we can have many projects with their own domain names. I also wanted to understand Cloudflare’s feature set, so it was a double win for me.

Launching on Cloudflare was easy, all you had to do was link to your Github repository. Any updates to the repository are automatically collected and deployed by Cloudflare. Having only ever deployed webpages in the days of Wordpress, having an automated pipeline is amazing.

Night Sky Challenges

No writeup is complete without highlighting the challenges that have occurred. This was a relatively simple project and the D3-Celestial library is well built. However, there have been a couple of issues. The first was constellation names showing up as undefined, and the second was canvas size being too large on non-Chromium based browsers.

In the example config the constellation name set is set to “iau” however in the dataset there is no “iau” dataset. Instead, you have to use the “name” dataset. It caused a weird bug where on initial load with constellations enabled it would correctly load, however, any subsequent load would see constellation names load as undefined.

The non-Chromium browser issue was fixed by adding in a single line into the css.

canvas{
    max-width: 100% !important;
}

This bug affected Safari, Firefox and all iOS browsers which is a huge part of modern web traffic.

Conclusion

This was a simple project but it achieved what it set out to do, build a working, accurate star map. Check it out at Night Sky.