Forem: Gökhan ERGEN

Clean code, programming

Gökhan ERGEN — Thu, 17 Apr 2025 00:00:36 +0000

Getting to Know Syntactic Sugar in Programming

Gökhan ERGEN ・ Apr 16

How to Check if a Value is a Number in JavaScript

Gökhan ERGEN — Mon, 14 Apr 2025 19:51:35 +0000

In JavaScript, determining whether a value is truly a number can be trickier than it first appears. Especially when dealing with user input — where values like "123" may look like numbers but are actually strings — choosing the right approach is crucial.

😅 The NaN Dilemma
When coding, we often encounter numbers that are formatted or manipulated without proper validation, leading to unexpected results like NaN. This is one of those moments where you stare at your screen and wonder, "How did this happen?" Understanding how to properly check for valid numbers is essential to avoid these frustrating situations.

In this post, we’ll explore the most common ways to check if a value is numeric in JavaScript and compare their behavior.

1. Using typeof for Type Checking

typeof x === 'number'

This is the most basic method to check whether a value is of type "number". However, it has some caveats:

typeof 123       // "number"
typeof NaN       // "number"
typeof Infinity  // "number"
typeof '123'     // "string"

❗ Both NaN and Infinity are considered numbers — which may not always be what you want.

2. Using Number.isFinite() — The Safest Method

Number.isFinite(x)

This method checks whether the value is:
A number, and A finite value (i.e., not NaN, Infinity, or -Infinity)

Number.isFinite(123)        // true
Number.isFinite('123')      // false
Number.isFinite(NaN)        // false
Number.isFinite(Infinity)   // false

✅ If you want to make sure the value is a real, usable number, this is your best choice.

3. Using !isNaN(Number(x)) — Allowing Coercion

!isNaN(Number(x))

This method is useful if you want to accept numeric strings (e.g., "123"), and convert them before checking:

!isNaN(Number("123"))     // true
!isNaN(Number("abc"))     // false
!isNaN(Number(""))        // true (empty string becomes 0)

❗ Be cautious: an empty string ("") is converted to 0, which means this will return true.

4 - Detecting Integer Numbers
To determine whether a value is an integer, JavaScript provides the Number.isInteger() method. It returns true if the value is of type number and has no decimal part.

Value	`typeof x === 'number'`	`Number.isFinite(x)`	`!isNaN(Number(x))`
`123`	✅	✅	✅
`'123'`	❌	❌	✅
`'abc'`	❌	❌	❌
`NaN`	✅	❌	❌
`Infinity`	✅	❌	✅
`''`	❌	❌	✅

🧠 When to Use Which?
✅ Use Number.isFinite(x) when you only want real numeric values (excluding NaN and Infinity)
✅ Use !isNaN(Number(x)) if you also want to accept strings like "123"
⚠️ Use typeof x === 'number' only for quick type checks, but not for strict validation

Optimizing the Knapsack Problem Using Stochastic Hill Climbing Algorithm

Gökhan ERGEN — Sat, 12 Apr 2025 18:46:53 +0000

Introduction

In this blog, we will explore how to solve the well-known Knapsack Problem using the Stochastic Hill Climbing algorithm. The Knapsack Problem is a classic optimization problem where the goal is to maximize the value of selected items, subject to weight constraints. Specifically, we'll use the stochastic version of the hill climbing algorithm, which is a local search method that helps in finding the optimal or near-optimal solution for such combinatorial optimization problems.

## The Knapsack Problem
In the 0/1 Knapsack Problem, you are given a set of items, each with a weight and a value. The goal is to select a subset of these items such that:

The total weight of the selected items does not exceed the maximum weight limit of the knapsack.
The total value of the selected items is as large as possible.

In our case, the problem consists of 10 items, each with a specified price and weight. The objective is to select the items that maximize the total price without exceeding a weight of 10 kg.

Algorithm Selection: Stochastic Hill Climbing

We will use the Stochastic Hill Climbing algorithm to solve this optimization problem. This variant of the Hill Climbing algorithm adds randomness to the local search process, which allows it to explore the solution space more effectively by not always choosing the best immediate neighbor. This randomness can help avoid local optima and increase the chances of finding the global optimum.

Problem Setup

We are given two arrays:

prices: Contains the values of the items.
weights: Contains the weights of the items.

We also have a maximum weight limit (max_kg) and a certain number of iterations (epochs) to run the algorithm. Our goal is to find a solution where the total weight is less than or equal to 10 kg, and the total price is maximized.

import numpy as np
from local_search import LocalSearch
import numpy as np
import matplotlib.pyplot as plt

local_search = LocalSearch()


prices = np.array([60, 50, 70, 30, 80, 90, 100, 40, 110, 120])
weights = np.array([0.5, 1.2, 2, 3, 0.7, 0.9, 1.5, 0.2, 0.6, 2.5])
max_kg = 10
epochs = 1000
problem_dimension = 10

def objective_function(solution):
    total_price = np.sum(np.multiply(prices, solution))
    if total_price == 0:
        return 10000
    return 1 / total_price


def extra_condition_fn(solution):
    return np.sum(np.multiply(solution, weights)) <= max_kg


def custom_generate_neighbours_fn(neighborhood_count, dim, best_solution):
    neighborhoods = []

    for _ in range(neighborhood_count):
        probs = np.random.uniform(0, 1, dim)
        copied_solution = np.array(best_solution, copy=True)
        inversible_indices = np.where(probs >= 0.5)
        for i in inversible_indices[0]:
            copied_solution[i] = 1- copied_solution[i]
        neighborhoods.append(copied_solution)


    return np.array(neighborhoods)

def calculate_initial_solution_fn(dim):
    return np.zeros(dim)



epoch_results = local_search.fit(objective_function, epochs, 
                                 problem_dimension,
                                 extra_condition_fn=extra_condition_fn,
                                 calculate_initial_solution_fn = calculate_initial_solution_fn,
                                 custom_generate_neighbours_fn=custom_generate_neighbours_fn ,
                                 algorithm_type="stochastic_hill_climbing")

np.set_printoptions(precision=3, suppress=True)

plt.plot(range(0,1000), 1 / np.array(epoch_results).ravel())
plt.title(f"Best Price: {1 / local_search.best_solution_value} KG: {np.sum(np.multiply(local_search.best_solution, weights))}")
plt.xlabel("Iteration")
plt.ylabel("Price")
plt.show()

Results

Best Solution Found -> [1 1 1 0 1 1 1 0 1 1]
prices = np.array([60, 50, 70, 30, 80, 90, 100, 40, 110, 120])
weights = np.array([0.5, 1.2, 2, 3, 0.7, 0.9, 1.5, 0.2, 0.6, 2.5])

This means that
The best price found is calculated as follows: 1*60 + 50*1 + 70*1 + 30*0 + 80*1 + 90*1 + 100*1 + 40*0 + 110*1 + 120*1 = 680
The best weight found is calculated as follows: 1*0.5 + 1.2*1 + 2*1 + 3*0 + 0.7*1 + 0.9*1 + 1.5*1 + 0.2*0 + 0.6*1 + 2.5*1 = 9.9

Key Steps in the Code:

Objective Function: The goal is to maximize the total price. We define an objective function that takes a solution (a binary array representing selected items) and returns the inverse of the total price. A high penalty is applied when no items are selected.
Extra Condition: We add a constraint to ensure that the total weight of the selected items does not exceed the given weight limit.
Neighbor Generation: The custom_generate_neighbours_fn function generates neighboring solutions by randomly flipping the selection of items based on probabilities. This randomness helps the algorithm avoid getting stuck in local optima.
Initial Solution: The initial solution is defined as selecting no items (all zeros).
Stochastic Hill Climbing: The fit() method of LocalSearch runs the algorithm, iterating through epochs and refining the solution until the best solution is found or the maximum number of iterations is reached.

Pomodoro Technique: The Easiest Way to Boost Your Productivity

Gökhan ERGEN — Mon, 31 Mar 2025 08:14:37 +0000

Ref: https://pixabay.com/vectors/egg-timer-egg-timer-timer-kitchen-154763/

Nowadays, many people struggle with time management. If you feel distracted while studying, working, or handling projects, the Pomodoro Technique might be just what you need!

What is the Pomodoro Technique?

The Pomodoro Technique is a simple yet effective time management method developed by Francesco Cirillo in the 1980s. This technique aims to enhance focus by breaking work into short intervals.

How to Apply the Pomodoro Technique?

The key steps of the Pomodoro Technique are as follows:

Choose Your Task: Decide what you will work on.
Set a Timer for 25 Minutes: Start a focused work session for 25 minutes.
Start Working: Avoid distractions and concentrate on your task.
Take a 5-Minute Break When Time's Up: After 25 minutes of work, take a short break.
Take a Longer Break After Four Pomodoros: Once you complete four Pomodoros, take a longer break of 15–30 minutes.

Advantages of the Pomodoro Technique

Better Focus: Short work intervals prevent distractions.
Improved Time Management: You complete tasks in a planned manner.
Increased Motivation: Small achievements boost your motivation.
Prevention of Burnout: Regular breaks help maintain long-term productivity.

Some Pomodoro Apps

Pomodone (An app integrated into workflow systems)
Focus Booster (A tool offering detailed analytics for professional users)
PomoBoost (Available on Google Play)- A simple app we have been being developed.

PomoBoost Example Screen

Conclusion

The Pomodoro Technique is a fantastic solution, especially for those struggling with focus and productivity. If you have difficulty managing your time, try this technique to boost your work efficiency. Start with small steps and experience the difference!
Do you use the Pomodoro Technique? Share your experiences in the comments!

References:
https://en.wikipedia.org/wiki/Pomodoro_Technique

Local Search vs Stochastic Hill Climbing: Python Implementation, Testing, and Comparative Analysis

Gökhan ERGEN — Mon, 31 Mar 2025 08:10:43 +0000

Optimization of Benchmark Functions Using Local Search and Stochastic Hill Climbing

The optimization of five benchmark functions using the Local Search and Stochastic Hill Climbing algorithm.

In Local Search, neighborhoods was generated by radius size and selected the best neighborhood.

Local Search (LS):

1- Generate an initial solution

2- In each iteration,

Generate a set of neighboring solutions based on the current solution using a predefined radius size.
Select the best solution from the generated neighbors.
Compare the selected neighbor with the current best solution.
If the selected neighbor is superior to the current solution, update the current solution and proceed to the next iteration; otherwise, terminate the algorithm.

Stochastic Hill Climbing (SHC):

1- Generate an initial solution.

2- In each iteration,

Generate a set of neighboring solutions based on the current solution using a predefined radius size.
Randomly select one of the neighboring solutions.
Compare the selected neighbor with the current best solution.
If the selected neighbor is superior to the current solution, update the current solution and continue to the next iteration until the maximum number of iterations is reached.

Neighborhood count: 1000

Radius scale size: 0.1

Domain: (-5.12, 5.12)

Table 1 - Functions and Global Minimum Values

De Jong 1st Function

2nd De Jong Rosenbrock’s Saddle Function

4th De Jong Function

Rastrigin’s Function

Griewangk’s Function

Local Search Results

- De Jong 1st Function

2nd De Jong Rosenbrock’s Saddle Function

- 4th De Jong Function

Rastrigin’s Function

- Griewangk’s Function

Stochastic Hill Climbing Results

*- De Jong 1st Function
*

- 2nd De Jong Rosenbrock’s Saddle Function

- 4th De Jong Function

- Rastrigin’s Function

- Griewangk’s Function

Comparison Tables

Local Search (LS) demonstrated high computational efficiency, whereas Stochastic Hill Climbing (SHC) generally yielded better results. Both methods are variants of local search; however, their neighborhood selection strategies differ. SHC selects a neighboring solution randomly, while LS always chooses the best available option. Additionally, LS terminates if no improvement is found, whereas SHC continues until the maximum number of iterations is reached.

Local search (LS) also employs a greedy approach in this context, as it aims to improve the current solution at each step by selecting the best neighboring solution. This approach often leads the algorithm to become stuck in a local optimum, as it consistently chooses the most favorable option available without considering alternative paths.

Link for codes: https://github.com/gokhanergen-tech/python-local-search-stochastic-hill-climbing

References

Signal Visualization in Discrete-Time Domain

Gökhan ERGEN — Wed, 05 Mar 2025 13:26:35 +0000

In this application, we analyze and visualize the discrete-time signal represented by the following function:

y(k)=5cos(2πf1kTs)−2sin(2πf2kTs)

where:

f1 and f2 are the signal frequencies,
k represents the discrete-time index,
Ts is the sampling period.

The signal values were computed and visualized using both stem and line plots to illustrate its discrete and continuous representations. These graphs help in understanding the periodic behavior and frequency components of the signal in the time domain.
A dropdown menu labeled "Examples" has been added, allowing users to switch between different examples seamlessly. This feature enhances usability by providing quick access to various signal processing demonstrations.

We can change the function parameters.

We will encounter an interface where you can configure settings and view the signal graphs.

Calculation Used In The App

Ts = 1/Fs
x = [0, 1, 2, … N]
y = [(5*np.cos(2*pi*f1s*k*Ts)-2*sin(2*pi*f2s*k*Ts)) foreach k in x]
power = np.power(y,2)
energy = np.sum(power)
rmse = np.sqrt(energy/self.N)
average = np.mean(y)
variance = (1/self.N)np.sum(np.power((y-average),2))
std = np.sqrt(variance)
median = np.median(y)
own_mean = mean_own(y)
own_rmse = rmse_own(y)
own_variance = variance_own(y, own_mean)
own_std = math.sqrt(own_variance)
own_median = median_own(y)
own_average_power = own_rmse*2
own_energy = own_average_power*len(y)
To show as time
x = [i/fs foreach i in x]

Increasing N

If N increases, the signal sample time will also increase, resulting in a wider range of signals observed in the graph.

If fs increases, Ts will reduce. In this case, the signals we will be able to see in the graph will be limited.

When fs = 500 and N = 250 are the same, the graph appears identical to the case where fs = 200 and N = 100.
We can observe signal analyses in the table.

Github Link: https://github.com/gokhanergen-tech/dearpygui-signal-waveforms

A GUI App Which You Can Visulise Signal Waveforms With Python

Gökhan ERGEN — Sun, 16 Feb 2025 20:56:02 +0000

In this App, you can visulise three signal waveforms such as Sinusoidal, Square, and saw-toothed. Also, these signals has some params which you can setting them. The application was developed with dearpygui providing UI components for desktop apps. If you want to write a detailed blog about dearpygui, please comment :).

A: Ampitute

You can setting the ampitute of the waves.

A constant value which offsets veritcally

FI0: Initial Phase

Phase shift

Fs: Sampling Frequency

This is a sampling frequency showing how many samples is collected per a second.

Fsig: Frequency Signal

We can use this to take the cycle count of signals. A cycle takes 1/Fsig seconds.

If Fsig is 0.2hz then the cycle count will be 5 seconds.

you can visulise sinusoidal sampled signal, squared sampled signal, and saw-toothed sampled signal by using above the params. The time range of signals is splitted (max_time-min_time)*Fs because Fs is sampling frequence per a second.

The program, which you change the params has a basic interface.

Sinusoidal Wave
As a default, selected waveform is sinusoidal.
Signal time range is between 0 and 10 and uses A*sin(2*π*Fsig*t+fi0)+dc as a formula to be drawn.
In case A = 4,

We can use that positive side is about max 5 and negative side is min -3, because DC is 1 so signal shifts verticaly to up 1 step.
Square Wave

You will see a squared sampled signal.
signal_wave = sin(2*πFsig*t)
if signal_wave >=0, 1
otherwise, -1
**Saw-toothed Wave*

I use scipy library to draw saw-toothed wave form.
All of these signal waveforms use the same params.
Lets change the time range as -100 to 100. We will see this graph sinusoidal waveforms.

I changed Fsig to 0.5. This means T = 1/0.5 = 2s cycle time.

Python Version: 3.11.5
Scipy: 1.11.3
Numpy: 1.26.0
Dearpygui: 1.9.0

Github Link: https://github.com/gokhanergen-tech/dearpygui-signal-waveforms

Installing A Linux Distribution Using WSL

Gökhan ERGEN — Thu, 13 Feb 2025 13:57:39 +0000

WSL means Windows Subsystem For Linux. You can use linux on Windows and execute its commands. In this blog, we will see wsl commands and Ubuntu Installation.

Check Before Installation

You need to have Windows 10 (version 2004 and later) and Windows 11
WSL Installation

It is easy to do this via one command
wsl --install
By using this command, you can install wsl features and Ubuntu.

Maybe, you want to install a specific distribution of Ubuntu.

wsl --install -d <any-ubuntu-distribution>
If you want to download the list of linux distributions.

wsl --list --online wsl -l -o
You can also see whether the distributions you installed are working or not.

wsl --list --verbose
Updating WSL and Checking Its Version

wsl --version wsl --update
More Options About WSL

You can check options by using below the command.

wsl --help
Removing a Distribution

You can delete your distribution, but you should be careful because most things related to the distribution you want to delete will be removed.

Please check the reference: Removing a Distribution

wsl --unregister <installed-distribution>
Limiting WSL’s Resource Usage

First of all, you need to create a wslconfig file as below, but this is available in wsl 2 distributions.

C:\Users\UserName.wslconfig

If you want check the versions of your distributions.

wsl -l -v
Finally, your linux distribution is ready. You can install vscode, dockerize your app and write code.

You can look these:

1 - Basic Info About WSL

2- Advance Settings Configuration

Raspberry PI Apache Web Server, Pigpio and Ultrasonic Sensor With Java By Using PI4J Library

Gökhan ERGEN — Sat, 02 Mar 2024 13:16:52 +0000

What is Raspberry PI

Raspberry PI was developed for low cost and to teach students about computers. But today, it can also be used for personal and daily use. You can create circuits and projects on it. It is an embedded Linux system that becomes more powerful with new versions.

You can build your own circuits on it, create servers and work on image processing. Raspberry takes its name from the name of the fruit and PI comes from Python, which belongs to RPI and also refers to the number PI.

As seen in Figure 1, Raspberry PI model 4b has 4 USB ports, 1 Gigabit internet port and 2 HDMI converter ports.

Raspberry PI as an Embedded System

Embedded systems can be defined as a combination of hardware and software such as memory, IO and CPU. Raspberry PI is a mini computer that can fit in our hands and we can think of it as an embedded system. A system can be obtained by combining hardware, and software is required for this system to perform certain functions. The software contains the commands for the hardware to perform its function, and the commands are converted into the language that the machine understands, that is, 0s and 1s. Instructions are executed on the processor. This logic also works in embedded systems, and we can write software containing commands and manage hardware on Raspberry PI.

Installing Apache Server on Raspberry PI

The application was made on a 4GB version of the Raspberry PI 4B model. There is an SD card slot on it. A 32GB SD card was used as storage.

In order to make any development, a Linux system must be installed. First of all, we make the SD card bootable. Operating system is a system software. Thanks to this software, we can manage the hardware. In addition, the operating system is a software and we can produce and run software through this software.

Linux-based Raspberry PI OS was installed on this computer. This operating system offers us GUI and you can also use the terminal so you can benefit from the services of the operating system.

After downloading the software here, it can be used with a laptop or another computer with SD card reader feature. With this program, you can easily install the operating system by choosing an operating system on your SD card. To get information about installation and more, you can visit their website [9].

You can use Raspberry PI on a display that supports HDMI. For this, you can connect your HDMI converter cable to the micro HDMI port to the monitor.

In the picture in Figure 5, 2 USBs were used for the keyboard and mouse and were powered by a power adapter. Raspberry PI is ready for use with a bootable SD card.

Figure 6 Raspberry PI OS

In Figure 6, you can go to the configuration settings and make keyboard settings and activate the SSH option. You can also access your computer’s command line remotely via SSH.

Figure 7 Raspberry PI OS Configuration Settings

Figure 8 Terminal Screen

In Figure 8, we opened the terminal software and will operate on the command line. First of all, we can get the current version of our packages and new versions with update, and we can move the packages we have to the latest version with upgrade. If yes or no questions come up during the process and you want the default to be yes, you can add the -y argument.

Figure 9 Apache Installation

You can easily install the Apache web server by entering the sudo apt-get install apache2 command.

Figure 10 Learning Apache Server Status

You can find out whether the web server is active or not with sudo systemctl status apache2 command.

Figure 11 Accessing the Address on the Local Network

You can access your 32-bit address assigned to you on the local network with the hostname -I command. The web page was served by Apache via this address.

Figure 12 Apache Default Page Location

Apache http server is served at /var/www/html by default. For detailed information, you can visit [18][19]. It will contain an index.html file.

Figure 13 /var/www/html Folder Content

Figure 14 Changing Html File Content

You can use the file content using nano or vim, whichever you prefer.

Figure 15 Accessing the Web Page

You can access the web page by typing the address you obtained with the hostname -I command into the URL section.

Raspberry PI Pigpio Usage and Java PI4J Distance Sensor Example

We can say that Pigpio is a tool that allows us to operate the pins on the Raspbery PI.

There is also a library that you can use with Java language. PI4J is an I/O library that allows us to develop with Raspberry PI. You can do various projects with this library.

Java is a powerful language that has a lot of support and you will not have any difficulty in searching for resources, and if you already have experience in this language, you will not have any difficulty. First of all, let’s give information about writing and reading values on some small pins with pigpio.

Figure 16 Pigpio Installation

If the package is not installed, you can quickly install it with sudo apt-get pigpio command.

Figure 17 Pigpiod Status

You can see the status of the package with sudo systemctl status pigpiod command.

Figure 18 Basic Pigpio Commands

pigs modes ‘pin code’ ‘mode (w)write or (r)read’

pigs modes 17 w

pigs modes 17 r

Pin 17 is set to read or write mode.

pigs w 17 1 with this command, high, i.e. 3.3v, was transmitted to pin 17.

At this stage, if an LED circuit is installed on the relevant pin, the LED will turn on. In this case, pigs w 17 0 will switch to the off state, that is, low. pigs r 17 checks whether there is voltage on pin 17 or not. If it exists, it returns 1, otherwise it returns 0.

Distance Sensor with Java PI4J Library

Let’s look at an example distance sensor application with the Java pi4j library. Pi4j library uses the pigpio package and you can check out the sources for detailed information [20].

Figure 19 Distance Sensor Circuit

Figure 20 https://www.researchgate.net/figure/Raspberry-Pi-4-pin-details_fig4_352212777

In the application, 1 HC-SR04 distance sensor, 1 LED and 2 resistors were used. The red LED turns on when the distance between the sensor and the object is less than 10cm. GPIO 2 was connected to echo on the sensor and GPIO 3 was connected to trigg. 3.3v was used as voltage. GPIO 17 pin was used for the LED.

Figure 21 Distance Sensor Application Command Line

Figure 22 Example Distance Less than 10cm

Figure 23 Distance More Than 10cm

Github: https://github.com/gokhanergen-tech/pi4j-java-distance-sensor-and-vcore-raspberry-pi

As a result, Raspberry PI is a popular educational computer today. You can install a web server such as Apache on it or use it in your daily work. You can design circuits and make projects using sensors. You may not limit yourself to the programming language and you can choose other programming languages as needed. Within the scope of this article, examples of a library developed in Java language were shown.

Sources

1-https://www.researchgate.net/figure/The-structure-of-the-Raspberry-Pi-4B_fig1_370357718

2-https://www.deviceplus.com/raspberry-pi/the-history-of-raspberry-pi/

3-https://electronicguidebook.com/is-raspberry-pi-an-embedded-system%EF%BF%BC/

4-https://www.raspberrypi.com/software/

5-https://mediatrend.mediamarkt.com.tr/windows-10-bootable-usb-nasil-yapilir/

6-https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/

7-https://www.freecodecamp.org/news/command-line-for-beginners/

8-https://www.prepbytes.com/blog/operating-system/operating-system-services

9- Raspberry Pi Documentation — Getting started

10-https://pimylifeup.com/raspberry-pi-apache/

11-https://linuxize.com/post/how-to-create-groups-in-linux/

12-https://www.freecodecamp.org/news/file-permissions-in-linux-chmod-command-explained/

13-https://devconnected.com/how-to-list-users-and-groups-on-linux/

14-https://www.geeksforgeeks.org/permissions-in-linux/

15-https://stackoverflow.com/questions/29475138/what-is-the-difference-between-update-and-upgrade

16-https://www.ihs.com.tr/blog/apache-nedir/

17-https://ubuntu.com/tutorials/install-and-configure-apache#3-creating-your-own-website

18-https://ubuntu.com/server/docs/how-to-configure-apache2-settings#:~:text=The%20default%20value%20is%20%2Fvar,create%20that%20directory%20if%20necessary!

19-https://operavps.com/blog/vim-vs-nano/#:~:text=Nano%20can%20be%20suitable%20for,capabilities%20to%20improve%20your%20productivity.

20- https://pi4j.com/about/

21-https://www.researchgate.net/figure/Raspberry-Pi-4-pin-details_fig4_352212777

22-https://kalitut.com/control-gpio-pigpiod-commands/

23-https://raspberrypi.stackexchange.com/questions/17121/ultrasonic-sensor-get-distance-with-java

24-https://github.com/gokhanergen-tech/pi4j-java-distance-sensor-and-vcore-raspberry-pi
^

Graph Library graphjs-react updated to 1.0.3

Gökhan ERGEN — Wed, 15 Nov 2023 21:12:20 +0000

GraphJS React is a graph library to view or visualize your data which you collect or find.

We wrote a blog about this library. If you do not read it, you should go to this link: https://dev.to/gokhanergentech/new-react-chart-library-for-basic-charts-graphjs-react-16ed

Lets talk about this version.

Added LineChart labelled or number

<LineChart
  data={[
    [
      {
        color: 'rgb(197,104,176)',
        x: '2005',
        y: 66357782
      },
      {
        color: 'rgb(231,205,242)',
        x: '2006',
        y: 28585057
      },
      {
        color: 'rgb(104,222,112)',
        x: '2007',
        y: 83097927
      },
      {
        color: 'rgb(174,227,215)',
        x: '2008',
        y: 40312901
      },
      {
        color: 'rgb(225,116,228)',
        x: '2009',
        y: 64665550
      },
      {
        color: 'rgb(197,206,222)',
        x: '2010',
        y: 83476844
      }
    ],
    [
      {
        color: 'rgb(174,183,141)',
        x: '2005',
        y: 16388224
      },
      {
        color: 'rgb(103,131,243)',
        x: '2006',
        y: 72801715
      },
      {
        color: 'rgb(187,144,151)',
        x: '2007',
        y: 17787543
      },
      {
        color: 'rgb(135,199,171)',
        x: '2008',
        y: 31304136
      },
      {
        color: 'rgb(177,186,201)',
        x: '2009',
        y: 34091381
      },
      {
        color: 'rgb(211,119,199)',
        x: '2010',
        y: 11001680
      }
    ]
  ]}
  height={400}
  labels={[
    {
      color: 'blue',
      name: 'A'
    },
    {
      color: 'red',
      name: 'B'
    }
  ]}
  onPointClick={() => {}}
  onPointOver={() => {}}
  title={{
    label: 'Countries\' Populations'
  }}
  titles={{
    x: 'Year',
    y: 'Population'
  }}
  width={400}
  xAxisLabels={[
    '2005',
    '2002',
    '2006',
    '2007',
    '2008',
    '2009',
    '2010'
  ]}
/>

You can see the usage of the chart.

Added wheel scaling for bar and line charts

You can also help to develop this library. We use example project to use the charts and also storybook.

https://github.com/gokhanergen-tech/graphjs-react

New React Chart Library For Basic Charts - graphjs-react

Gökhan ERGEN — Mon, 30 Oct 2023 10:55:00 +0000

Charts are very important for data visualization. You can use it on Data Science. There are a lot of chart types such as pie, tunnel, line charts, etc. By using these, the predicting of future data situation is probably and you can also understand and analysis data. In this blog, I will show the chart library named graphjs-core which I have still developed. You can also join us to develop the library.

Note: The library has been being developed and currently there are bar, tunnel and bar charts.

Installation
Follow the instructions to install GraphJS-React

npm install graphjs-react

Usage
Add GraphJS-React CSS file to your index.js.

import 'graphjs-react/index.css'

Bar Chart
You can create basic bar chart by using this library.

<BarChart
height={400}
onBarClick={() => {}}
data={[
  {
    color: 'rgb(110,221,234)',
    x: 'Ocak',
    y: -68
  },
  {
    color: 'rgb(106,226,126)',
    x: 'Şubat',
    y: -54
  },
  {
    color: 'rgb(154,222,111)',
    x: 'Mart',
    y: -37
  },
  {
    color: 'rgb(126,187,225)',
    x: 'Nisan',
    y: 56
  },
  {
    color: 'rgb(156,206,128)',
    x: 'Mayıs',
    y: 83
  },
  {
    color: 'rgb(116,245,247)',
    x: 'Haziran',
    y: -78
  },
  {
    color: 'rgb(235,196,136)',
    x: 'Temmuz',
    y: 30
  },
  {
    color: 'rgb(186,117,243)',
    x: 'Ağustos',
    y: 75
  },
  {
    color: 'rgb(221,157,208)',
    x: 'Eylül',
    y: -63
  },
  {
    color: 'rgb(252,122,106)',
    x: 'Ekim',
    y: 10
  },
  {
    color: 'rgb(193,139,193)',
    x: 'Kasım',
    y: 27
  },
  {
    color: 'rgb(254,173,150)',
    x: 'Aralık',
    y: -52
  }
]}
width={400}
  />

Tunnel Chart

<FunnelChart
  data={[
    {
      backgroundColor: 'lightgreen',
      name: 'K',
      value: 999
    },
    {
      backgroundColor: 'green',
      name: 'B',
      value: 168
    },
    {
      backgroundColor: 'yellow',
      name: 'E',
      value: 114
    },
    {
      backgroundColor: 'red',
      name: 'C',
      value: 93
    },
    {
      backgroundColor: 'black',
      name: 'D',
      value: 32
    }
  ]}
  height={500}
  width={500}
/>

Above an example code for Tunnel Chart

Pie Chart

<Pie
  data={[
    {
      backgroundColor: 'lightgreen',
      name: 'K',
      textColor: 'white',
      value: 136
    },
    {
      backgroundColor: 'green',
      name: 'B',
      textColor: 'yellow',
      value: 85
    },
    {
      backgroundColor: 'red',
      name: 'C',
      textColor: 'white',
      value: 53
    },
    {
      backgroundColor: 'black',
      name: 'D',
      textColor: 'white',
      value: 22
    },
    {
      backgroundColor: 'yellow',
      name: 'E',
      textColor: 'black',
      value: 30
    }
  ]}
  legend
  onMouseClickPiece={() => {}}
/>

Pie Chart is generally used for showing data with percent. You can see that how to view data comprehensively.

Line Chart is coming soon :)

visit here for more details,

https://www.npmjs.com/package/graphjs-react?activeTab=readme

If you learn about charts theoretically

https://www.computerhope.com/jargon/b/barchart.htm

ToastJS and Fetching with React apps

Gökhan ERGEN — Tue, 08 Aug 2023 19:05:23 +0000

You can add your react app and make fetching

Installation

Follow the instructions to install ToastJS-React

npm install toastjs-react

Usage

Add ToastJS-React CSS file to your index.js.

You must add your app components or elements between

import { ToastContainer } from 'toastjs-react'
import 'toastjs-react/index.css'
return (
 <ToastContainer maxMessageCount={5} position="center">
  <App />
 </ToastContainer>);

You can limit your max toasts in your projects using below.

Change Your Maximum Toast

maxMessageCount={5} // Optional, default = 10

Change Your Toast Position

position={"left"|"right"|"center

You could have many toasts in your screen. ToastJS-React is going to add them to a queue. It will show them in order.

For example:

You have 8 toasts. And you set your max toast = 5 then firstly you are going to see 5 toasts until they become to fade out. Next,

you are going to see other 3 toasts.

// Import useGlobalMessage Hook
 import { useGlobalMessage } from 'toastjs-react';

 // Call It In Your Component
 const toast = useGlobalMessage();

 // And Show It!
 toast.show({
    type: "success",
    message: "You have been added your item succesfully.",
    autoCloseWithTimeout: true,
    timeout: 2000,
});

Also, you can make fetching

fetchingOptions?:{
           promise: Promise<any>
           errorComponent: (response?:any)=>React.ReactElement
           successComponent: (response?:any)=>React.ReactElement
           response: (response: object, hasError: boolean) => void
   }

If you want to learn a lot, visit to https://www.npmjs.com/package/toastjs-react?activeTab=readme