Category Archives: Programming

Simple Dark Theme Switch with Vue.JS

Hello,

In this post I’m going to show you how quickly you can add a dark theme switch to your Vue.JS application.

We’re going to start with a blank application. And then we’re going to create a dark-theme CSS file which we’re going to save in public/css/darktheme.css.

This is how the application looks without any CSS.

Now, we’re going to put the following code in darktheme.css:

body {
    background-color: #2c3e50;
}

h1,h2,h3,h4,h5,h6,p {
    color: #42b983;
}

We can test our theme by appending the following line in the <head> of public/index.html

    <link rel="stylesheet" href="<%= BASE_URL %>css/darktheme.css">

Now let’s make this interactive!

In src/App.vue we’ll add a button and the following methods:

    <button @click="darkThemeSwitch">Switch Theme</button>

  methods: {
    _addDarkTheme() {
      let darkThemeLinkEl = document.createElement("link");
      darkThemeLinkEl.setAttribute("rel", "stylesheet");
      darkThemeLinkEl.setAttribute("href", "/css/darktheme.css");
      darkThemeLinkEl.setAttribute("id", "dark-theme-style");

      let docHead = document.querySelector("head");
      docHead.append(darkThemeLinkEl);
    },
    _removeDarkTheme() {
      let darkThemeLinkEl = document.querySelector("#dark-theme-style");
      let parentNode = darkThemeLinkEl.parentNode;
      parentNode.removeChild(darkThemeLinkEl);
    },
    darkThemeSwitch() {
      let darkThemeLinkEl = document.querySelector("#dark-theme-style");
      if (!darkThemeLinkEl) {
        this._addDarkTheme()
      } else {
        this._removeDarkTheme()
      }
    }

Whenever we click on the Switch Theme button, the dark theme should switch back and forth.

This is a quick and dirty way to add a dark theme switch to your Vue.JS application. You can can also take this further by implementing a theme service and persistence support.

Thank you for reading!

My experience with .NET IoT (so far)

cover

I haven’t done any embedded development in a while and I was thinking to build myself a remote controlled toy car with video streaming.

The project is going to take me a while. To build it I’m going to use C#. I’m already too familiar with Python and a little challenge doesn’t hurt.

To interface with the hardware, I’m going to use the .Net Core IoT Libraries from Microsoft.


My idea was to create a set of .Net Core services that communicate internally via gRPC and an ASP.Net Core web application to control the car. (Now that I’m writing this I’m thinking that could possibly drop the web app and use gRPC directly from the client).

The client would be a desktop application that will display the video stream and data from the sensors. It should work with an Xbox controller or else it won’t be fun. 😦

To write it I will probably use Mono or Unity.


After burning the latest version of Raspbian on the board using Etcher and spending a few hours in Rider developing a base for the app. I’ve Installed .Net Core 3 SDK and ran the application. The results were amazing! I’ve checked the thermostat in the office and it was set on 25

readings

And the application only consumes ~10MB RAM! That’s awesome!


I’m really impressed and so far things are looking bright for dotnet/iot. I can’t wait to test the gRpc support and other hardware modules.

The full code can be found here: https://github.com/dnutiu/NucuCar

If you want to run the app on your Raspberry you’ll need to install the .Net Core Sdk (Instructions) and run the following commands:

git clone https://github.com/dnutiu/NucuCar.git
cd NucuCar
dotnet build
cd NucuCar.Sensors
dotnet run


Thanks for reading!

I hope you will give dotnet/iot a try for your next project!

Ghidra Scripting: Annotating Linux system calls

I had some fun this weekend messing around with Ghidra. Having such a powerful tool for free is truly a game changer.

To start scripting in Ghidra, I downloaded the latest Eclipse for Java Developers Version: 2019-09 R (4.13.0), Ghidra and Open JDK, I believe any JDK version 11+ will work.

After downloading the JDK, extract the zip, put it somewhere and modify your PATH and JAVA_HOME environment variables to point to it:

export JAVA_HOME="/home/denis/jdk-13"
export PATH="/home/denis/jdk-13/bin:$PATH"

Next, you should start Ghidra in order to associate the JDK with it, now close it, then start Eclipse. In Eclipse, install the GhidraDev extension from the archive which is found in ghidra_9.1-BETA_DEV/Extensions/Eclipse.

After installing GhidraDev, you may now create a new Ghidra Scripts project.

This is cool because all your scripts are stored in ~/ghidra_scripts and linked to the project, if you change the JDK you may safely delete the project and recreate it without losing files.

If you click Run or Debug, Eclipse will be prompted to start a new Ghidra or Ghidra Headless instance, by clicking Debug, you can set breakpoints in the scripts you want to Debug. Run the scripts by opening Ghidra’s Script Manager and clicking Run. When the code reaches the breakpoints, the script’s execution will stop and you can debug it in Eclipse.

You can then resume the script, cancel it from Ghidra or modify the script without having to restart Ghidra. If you hit the stop button Ghidra will shut down, I’ve encountered some popups complaining that hot code replacement won’t work when I tried to save a script, I ignored it and it worked just fine.

By opening Ghidra Script Manager and right clicking on a script then clicking on Ghidra API Help will open a web browser with the scripting documentation.


To make my script I started with InstructionSearchScript.java as a base, iterated through all instructions, saved the value of EAX, searched for int 0x80 and added a plate comment with the system call’s name.

The final script:

https://github.com/dnutiu/GhidraScripts/blob/master/CommentLinuxSysCall.java

Please note the ugly systemCallNames.put(1, "sys_exit");, I haven’t used Java that much and I couldn’t find a good way to initialize maps in an inline statement. If you have a suggestion please write it in the comments.

To get the system calls names I used a reference table from Shell Storm and some JavaScript to parse the table.

table = document.getElementsByTagName("table")[0];
tableRows = table.children[0].children;

// for each tableRows starting from 1 skip header
for (index = 1; index < tableRows.length; index++) {
    rowData = tableRows[index].children;
    syscallValue = rowData[0].innerText;
    syscallName = rowData[1].innerText;
    console.log(`systemCallNames.put(${syscallValue}, "${syscallName}");`)
}

Running the script on a binary will annotate the system calls it finds by adding a plate comment.


In conclusion, creating my first Ghidra script wasn’t that hard and once I’ve figured out how to setup Eclipse and link it properly the development experience was a bliss. I hope more and more people will adopt Ghidra and contribute to it. Some Ghidra trainings and exercises can be found in ghidra_9.1-BETA_DEV/docs.

Thanks for reading and have a great day!