Archive for the ‘Webtechnology’ Category

No Comments

Setting several properties of dataset of any DOM element, writing to the dataset property

Tuesday, June 21st, 2022

One of the greatest additions in writing JS of the last years for writing clean code are arrow functions, classes and several ways of Destructuring assingment.

Arrow functions let you skip, several verbose terms like the function keyword, return keyword and {} character, while maintaining readability. Easy, once you mastered the new syntax!.

What is Destructuring assingment?

Let’s assume you fetch a stock json:

let json= {name:"SHELL PLC",isin:"GB00BP6MXD84",price:"25.00","volume":"2500000",time:"2022-06-22:09-06"}

They old way of dealing with this was to write everything out to assign values to variables:

var name = json.name;
var isin= json.isin
var price = json.price;
var volume=json.volume;
var time = json.time;

Destructuring assingment let you do this more succinct:

let {name,isin,price,volume,time}=json

That is nice code.

Destructuring arrays, or csv rows:

let {name,isin,price,volume,time}=row.split(",")

Sure there is more on parsing cvs rows than just splitting on “,” but this is an example and you get the drift. When you totally control the csv file, using “,” only as separator, it should do the job.

Writing to the datatset property?

I dearly miss something for setting the dataset property of an element concisely.

The dataset read-only property of the HTMLElement interface provides read/write access to custom data attributes (data-*) on elements.

Note: The dataset property itself can be read, but not directly written. Instead, all writes must be to the individual properties within the dataset, which in turn represent the data attributes.

So you can’t simply do something like this:

document.querySelector("#stock").dataset=json

You have to write it all out, and that is  verbose:


let elStock = document.querySelector("#stock")
elStock.dataset.name=json.name;
elStock.isin=json.isin
elStock.price=json.price

Well there is a workaround.

Imitate writing to the dataset property directly, Object.assign()

According to the specs you can’t directly write the dataset, but you can do this:

Object.assign(document.querySelector("#stock"),json)

Result:

<body data-name="SHELL PLC" data-isin="GB00BP6MXD84" data-price="25.00" data-volume="2500000" data-time="2022-06-22:09-06">

A piece of cake. That is as easy as writing the dataset.property directly.

To extract dataset into variables destructuring assignment does work.

let {name,isin,price}=document.body.dataset

I used `Object.assign` in an older project for writing several properties to the style attribute, but it works as well for the dataset property.

No Comments

How to check the Signing Certificate on an Android app / apk (II)

Friday, June 17th, 2022

This is an 2022 update of an older post.

If you own a Android Phone, and you want to use Signal instead of Whatsapp or Telegram for privacy matters, and, for the same privacy matters, you prefer to use open source Android AOSP instead of the commercial Android variant that is enriched spoiled with proprietary Google services,  or you don’t have a Google Account on your phone, or you don’t use Google Play but the free F-Droid software-store, there is a solution. You can download the Signal APK from their website.

To verify that the signing certificate on the APK matches the SHA256 fingerprint on the Signal website you can use the following one-liner.

As Matthew (kudos) pointed out, the certification file has a new name in recent Signal APK’s.

So the one-liner changed a bit:

f="Signal-Android-website-prod-universal-release-5.40.4.apk" ; unzip -p "$f" $(unzip -l "$f" | grep '.RSA' | awk '{print $4}') | keytool -printcert

Hopefully this version will be future proof as the one-liner now uses his suggestion to search/grep for a .RSA file.

Output

Owner: CN=Whisper Systems, OU=Research and Development, O=Whisper Systems, L=Pittsburgh, ST=PA, C=US
Issuer: CN=Whisper Systems, OU=Research and Development, O=Whisper Systems, L=Pittsburgh, ST=PA, C=US
Serial number: 4bfbebba
Valid from: Tue May 25 17:24:42 CEST 2010 until: Tue May 16 17:24:42 CEST 2045
Certificate fingerprints:
SHA1: 45:98:9D:C9:AD:87:28:C2:AA:9A:82:FA:55:50:3E:34:A8:87:93:74
SHA256: 29:F3:4E:5F:27:F2:11:B4:24:BC:5B:F9:D6:71:62:C0:EA:FB:A2:DA:35:AF:35:C1:64:16:FC:44:62:76:BA:26
Signature algorithm name: SHA1withRSA
Subject Public Key Algorithm: 1024-bit RSA key
Version: 3

As you can see, still the same fingerprint.

3 Comments

Kodi on Bullseye, playing 4K on the RPI4

Friday, March 18th, 2022

Getting the most out of your (cheap) hardware is always a challenge. Selling hardware is easier then supporting hardware.

The Raspberry Pi 4 has strong multimedia capabilities, it can playing 4K media 60fps, but getting it done isn’t a piece of cake. Even playing 1080HD content on YouTube can be a problem, but that’s probably because YouTube is more about tracking and selling adds than playing media.

A bold statement? Think about it this way. Any 1080p movie will play fine outside a browser in Kodi, any movie will play fine without DRM (Digital Rights Management). It chokes on the DRM en-/decryption. By definition: DRM is tracking.

Historically LibreElec is the best distribution for a Raspberry Pi as a multimedia device. LibreElec’s goal: just enough OS to support Kodi, and it is highly optimized for that.

Yes it’s powerful. You can install add-ons like MPD for music, or RetroPie-alike  for games. Also docker containers are available for HomeAssistant, MQTT and Nginx. So a RPI with LibreElec can be pretty powerful.

Still LibreElec is limited, and the RPI4 is capable of doing more.

Kodi on Raspberry used to work pretty well, until big changes in the 5.10 kernel came. It more or less stopped working on Buster. Compiling it yourself was quite a hassle, that actually failed more than it succeeded. I wrote about that before and it failed in most cases for most users including myself, I must admit.

But now luckily RPI-engineers stepped up:  Kodi in Rapsberry Pi OS is more or less supported again.

At least it’s easy again to install Kodi in Bullseye. But you still need a bit more tweaks to get it running smoothly.

To install Kodi in Bullseye

No OS can beat this 🙂 :

sudo apt install kodi

Install addons

Two important add-ons that can’t be installed from within Kodi like in LibreElec, but you have to resort to apt again:

TVHeadend-client (DVB-T tv)

sudo apt install kodi-pvr-hts

Only the client is installed with this command, this assumes a TV-Headend server is running on another local IP-address.

Inputstream-adaptive helper to play DRM protected (Widevine) content

sudo apt-get install kodi-inputstream-adaptive

The add-on then will extract (and update) the needed libs from internet automatically.

To enable HEVC HW decoding, you have to tweak /boot/config.txt

Add this line (only for RPI4)

dtoverlay=rpivid-v4l2

For 4K HEVC playback tweak this line:

# Enable DRM VC4 V3D driver
dtoverlay=vc4-kms-v3d,cma-512

Mount NFS shares

Somehow Kodi on Bullseye stopped discovering NFS by default. Don’t worry to much, just give it a little manual bump.

  • Choose Browse for new share -> Add network location -> Protocol -> Network File System (NFS)
  • Entering the your ip-address as Server address and Remote path manually, adding up to something like nfs://192.168.0.3:/path/to/mnt/
  • Click OK, then it will list.
  • Select and click OK.

Conclusion

Changes in `/boot/config.txt` require a reboot.

After all these steps, playing 4K HEVC content with HW-acceleration should work fine on a Raspberry Pi 4.

That’s all. Let me know if it’s working for you.

 

No Comments

No display after update to LibreElec 10.0.1 on a Raspberry Pi 4

Tuesday, November 9th, 2021

Last weekend I did an upgrade on my Kodi/LibreElec 10.0.0 RPI4 to 10.0.1.

All went well initially, I also did a firmware upgrade, but after rebooting I got a blank screen.

For a moment I thought Kodi didn’t boot at all, but on my Kore remote app, I saw that it was connected.

Also I could hear the GUI sounds. I disconnected my monitor, tried different HDMI inputs and different settings on the monitor. To no avail. Rebooted my Pi again. Shut it down, disconnected the power, connected it again, and rebooted. Still a blank screen. Could see the blown up pixel for a while, but blank screen afterward.

Still I could hear the GUI sounds, and I could even start a DVB-T TV channel.

So Kodi was working, but there was no HDMI output! Then intuitively I changed the audio-output from IQAudioDAC to HDMI and suddenly it started working! I changed it again to IQAudioDAC and screen output kept working.

And it did since!

Somehow changing the audio output fixed the blank screen output on my Raspberry Pi 4. Weird.

And don’t ask me why, but I’m still happy with this LibreElec / Kodi setup on my Raspberry Pi 4.

Changing Audio output remotely on Kodi

To change the audio output for Kodi remotely, instead of using the GUI or the Kore remote app and a lot of clicks, you can use these commands from another PC or phone:

Change to HDMI

curl -v -H "Content-type: application/json" -d '{"jsonrpc":"2.0","method":"Settings.SetSettingValue", "params":{"setting":"audiooutput.audiodevice","value":"PI:HDMI"},"id":1}' http://yourpi.local:8080/jsonrpc

Change to analogue

curl -v -H "Content-type: application/json" -d '{"jsonrpc":"2.0","method":"Settings.SetSettingValue", "params":{"setting":"audiooutput.audiodevice","value":"PI:Analogue"},"id":1}' http://yourpi.local:8080/jsonrpc

 

Remember to change the domain/hostname ot an IP-address if you wish to run the command from your Android phone.

Above commands work great as Termux Widget shortcuts on your Android Phone.

3 Comments

Playing 4K smoothly on the Pi4, compiling Kodi 19 on Raspberry Pi OS

Thursday, June 24th, 2021

Kodi is the best software to watch video on a Raspberry Pi. The Raspberry Pi 4 supports 4K, but the only software that can play it well is Kodi. That’s a bit disappointing, knowing the the Pi4 is already available since early 2019.

On the other hand, Kodi is nice open source software, with a thriving community.

Playing video in a browser is energy-wise, (privacy-wise IMHO) and performance-wise a bad thing. Try playing YouTube movies in a browser and in Kodi (unofficial YouTube plugin), and see the differences. Stuttering play, and high CPU usage in the browser, smooth play and lower CPU usage in Kodi.

The best performance for Kodi is offered by LibreELEC, a lightweight ‘Just enough OS’ Linux distribution. if you wanna run the latest Kodi on Raspberry Pi OS, you’ll need to compile it yourself at the moment.

Compile instructions Kodi 19

There isn’t yet an updated version Kodi 19 in Raspberry Pi OS, so you’ll need to compile Kodi 19 yourself. Big underlying changes in the way video and hardware-accceleration is done in the new kernel 5.10 broke Kodi 18.7 and

On the Kodi forum there are several attempts to compile a working version, but apparently that is not so simple. Still I used those instructions as a base, but added the kernel-header packages ` as a dependency and use a patched version of Kodi.

# sudo apt update && sudo apt full-upgrade -y


sudo apt install                                                     \
autoconf automake autopoint autotools-dev cmake cpp curl default-jre \
g++ gawk gcc gdc gettext git gperf libasound2-dev libass-dev             \
libavahi-client-dev libavahi-common-dev libbluetooth-dev             \
libbluray-dev libbz2-dev libcdio-dev libcec4 libcec-dev              \
libcrossguid-dev libcurl4-openssl-dev libcwiid-dev libdbus-1-dev     \
libdrm-dev libegl1-mesa-dev libenca-dev libflac-dev libfmt3-dev      \
libfontconfig-dev libfreetype6-dev libfribidi-dev libfstrcmp-dev     \
libgbm-dev libgcrypt-dev libgif-dev libgles2-mesa-dev libglew-dev    \
libglu1-mesa-dev libgnutls28-dev libgpg-error-dev libgtest-dev       \
libinput-dev libiso9660-dev libjpeg-dev liblcms2-dev liblirc-dev     \
libltdl-dev liblzo2-dev libmariadb-dev libmicrohttpd-dev libnfs-dev  \
libogg-dev libomxil-bellagio-dev libpcre3-dev libplist-dev           \
libpng-dev libpulse-dev libshairplay-dev libsmbclient-dev            \
libsqlite3-dev libssl-dev libtag1-dev libtiff5-dev libtinyxml-dev    \
libtool libudev-dev libunistring-dev libva-dev libvdpau-dev          \
libvorbis-dev libxkbcommon-dev libxmu-dev libxrandr-dev libxslt1-dev \
libxt-dev lsb-release meson nasm ninja-build python3-dev python3-pil \
python-support rapidjson-dev raspberrypi-kernel-headers swig unzip \
uuid-dev wayland-protocols yasm zip zlib1g-dev

Then you need a special GBM version of Kodi, but instead of this version.

wget https://github.com/popcornmix/xbmc/archive/gbm_matrix.zip

I used a patched version:

wget https://github.com/graysky2/xbmc/archive/refs/heads/gs-gbm_matrix.zip

Then this workaround is needed, Raspberry Pi OS uses a different path for some files. This just creates a symbolic link to the right path.


# drm_fourcc error workaround
sudo mkdir /usr/include/drm/ 
sudo ln -s /usr/include/libdrm/drm_fourcc.h /usr/include/drm/drm_fourcc.h

Extract the downloaded zip:

unzip gs-gbm_matrix.zip

Enter the map

cd xbmc-gs-gbm_matrix

Create build directory:

mkdir kodi-build

Enter build directory

cd kodi-build

Then make:

cmake .. -DCMAKE_INSTALL_PREFIX=/usr/local -DCORE_PLATFORM_NAME=gbm -DAPP_RENDER_SYSTEM=gles -DX11_RENDER_SYSTEM=gles -DENABLE_INTERNAL_FMT=ON -DENABLE_INTERNAL_FLATBUFFERS=ON -DENABLE_INTERNAL_SPDLOG=ON -DENABLE_VAAPI=OFF -DENABLE_VDPAU=OFF

Then compile

cmake --build . -- VERBOSE=1 -j$(getconf _NPROCESSORS_ONLN)

If done properly, ti should take about 2 hours. Afterwards you can start Kodi with `kodi-build/kodi-gbm`

That’s all. And don’t forget to backup your existing Kodi profile.

Occasionally the script exits with an error. Seems it’s running out of memory. Just restart the building process, executing the cmake –build command, to finish compiling.

UPDATE:

For Raspberry Pi Bullseye see this new post:

1 Comment

Serve images in next-gen formats, start using webp

Friday, June 11th, 2021

Since Apple added webp support in Safari on both desktop and mobile devices, it’s worth serving images in webp to significantly reduce the size of your images while preserving their quality.  As a guess, you can save 50-66% bandwidth on your images!

Yes, mother earth will like that!

Webp is nowadays supported by 95% of all devices

You can check webp support here, in general you will will be covered for about 95% of all users. A small 5% is using older (out-of-date) software, that probably shouldn’t be used anymore. Now they have a reason to stop using it.

https://caniuse.com/webp

Creating next-gen webp images

Converting jpg to webp isn’t difficult on a modern Linux computer:

convert -quality 50 image.jpg  image.webp

I guess no explanation is needed here.

For a directory of images you could do something like :

mogrify -quality 50 -format webp *.jpg

Creating next-gen webp images the smart way on multi-core machines

On a multi-core machine, start using those cores by running tasks parallel:

parallel "convert -quality 50 -auto-orient {} {.}.webp" ::: *.jpg

This will use all cores and threads and speed up generating next-gen images considerably, 800%  on a modern quad-core machine.

Advantages of webp images

  • webp supports transparency
  • webp supports animation
  • webp supports 24bit RGB color-support
  • smaller size

For PNG images you can save 90% bandwidth, when the main reason to use PNG is transparency.

What about image quality?

Image quality is a subjective matter. I find it acceptable to use a 50% quality by default. Compared to jpg: 60% size reduction, and less artifacts but a bit smoother. That’s OK for me.