22. May 2023

Extending iPanorama 360 with an arial / floor – map

WHAT IS IPANORAMA 360?

iPanorama 360 for WordPress is a specialized plugin that enables users to create and display interactive 360-degree virtual tours or panoramic images on WordPress websites. It extends the functionality of the WordPress content management system by providing a user-friendly interface and a range of features specifically tailored for creating and showcasing 360-degree content.

With iPanorama 360 for WordPress, you can upload panoramic images or sets of photographs and convert them into interactive virtual tours or panoramic sliders. The plugin offers customization options to adjust the appearance and behavior of the panoramas, such as controlling the speed of rotation, choosing navigation controls, adding hotspots, and incorporating multimedia elements like images, videos, or audio.

The plugin integrates seamlessly with WordPress, allowing you to embed the created virtual tours or panoramic images directly into your website pages or posts. You can also customize the tour settings, such as enabling or disabling auto-rotation, adjusting the initial zoom level, or defining the starting viewpoint.

iPanorama 360 for WordPress typically provides an intuitive visual editor that enables users to create and edit their virtual tours or panoramas using a drag-and-drop interface. This makes it easier to add hotspots, link to other panoramas or external content, and customize the appearance and functionality of the tour.

IPANORAMA 360 FEATURES

3 Scene Types – cube, sphere and cylinder
HotSpots – allows you to mark different areas that you want to point out
Virtual Tour – travel from one to another scene by clicking on special hotspots
Tooltip System – the plugin has a build-in powerful tooltip system
Compass – you can be sure to look forward
Preview Image – you can set an image that will show as a preview
Fullscreen – you can toggle from the normal state to fullscreen and back
Mouse Wheel – zoom with mouse wheel scrolling
Keyboard – arrows can be used for navigation through the scene
Touch – touch was used for navigation tasks
Autoplay – the scene autorotate around a vertical axis
Awesome Looks – 2 predefined themes
View customization – create your own theme

You can testdrive iPanorama 360 using the Lite version or get the Pro version. The only limitation for the Lite version, is the ability to only create one panorama.

ADDING AN ARIAL / FLOOR MAP TO IPANORAMA 360!

portalZINE NMN | Development meets Creativity | cubicfusion hotspot8

I have tested many different solutions for 360 panoramas in the past and many have been lacking in one or more areas. I always seem to be coming back to iPanorama 360 for my projects, due to its solid editor and support.

One major problem for iPanorama 360 has been the ability to attach an Arial-map / Floor-map to the panorama. Others tried to fill that void, but mostly failed on Mobile.

There are solutions out there that could be reused (Image Map Pro / ImageLinks ) and integrated with iPanorama 360.

I decided to build an image hotspot solution myself, that can also tie into iPanorama. I am building out all the things I need and more :)

portalZINE NMN | Development meets Creativity | cubicfusion hotspot1

portalZINE NMN | Development meets Creativity | cubicfusion hotspot2

CURRENT & PLANNED FEATURES

Hotspot drag and drop positioning.
Image Hotspot or SVG based hotspots (Size, Fill , Border, Color).
Hotspot in and out animations.
Tooltip system, supporting full Media and HTML. Still expanding on that. I am not sure yet, what will finally be in the first version.
Popover option.
iPanorama 360 – Add arial / floor map support. Guided setup, with full automatic integration in the future. Only 1 week into development, so this might change.
iPanorama 360 – Radar view, which hooks into the current camera view and shows you what you are seeing on the map.
External link support.
Custom ID and classes per hotspot, to allow additional hooks or visual changes.
Hotspot JS Events (Click, Over, Out and Active)
REST Api
Shortcode support. Fully detached from iPanorama, which allows to add it to a popover, slideout or any other design construct you envision.
TWIG Template support, for the shortcode, to easily tweak the layout.
Elementor support.
Gutenberg support.

The first version is basically done and I will be using it for a client shortly. If you are interested, please feel free to get in touch. Will setup a demo page soon or link to the client using it ;)

PREVIEW

Cheers

3. March 2023

Bookstack: Embed local CSV files

What is Bookstack

BookStack is an open-source, web-based platform for organizing, storing, and sharing knowledge and documentation. It was developed to provide a user-friendly and intuitive interface for creating and managing knowledge bases, wikis, and other types of structured content.

BookStack allows users to create books, chapters, and pages, and to organize them hierarchically. Users can also add images, files, and links to their content, and collaborate with others by assigning roles and permissions. BookStack also supports full-text search, version control, and commenting, making it easy to find and update information.

BookStack is written in PHP and uses the Laravel framework, and it is available for free under the MIT License.

What are you using it for?

This is my internal homelab documentation system, I use it for private and client related content. Bookstack is fast, clean and well documented. It has really elevated the way I store and access important reminders / how-tos and documentation.

The system provides API access and has many ways to tweak it. Bookstack documentation.

Why display CSV files?

CSV stands for “Comma-Separated Values”. It is a simple file format used to store tabular data, such as spreadsheets or databases, in plain text. In a CSV file, each line represents a row of data, and each column is separated by a comma (or sometimes a semicolon or tab).

There are always CSV exports or other data stored in CSV format, that i need quick access to sometimes.

Bookstack allows to add files to pages and insert links to them, but it does not embed or parse those files in any way. There are similar hacks to mine, this example allows to embed PDFs and here the main Hacks page.

Lets get started!

We need something to parse the CSV file and something to display the information in a nice visual & flexible grid.

I am choosing Papa Parse for the CSV parsing, wrote about it a long time ago and still using it actively for many projects.

Papaparse can handle CSV files with different delimiters, encodings, and line endings, and can also handle complex data formats, such as quoted values, escaped characters, and multi-line cells. The library is widely used in web applications, data analysis tools, and other software that deal with CSV data.
Grid.js is my library of choice to display the parsed information in a nice grid.

Grid.js is a modern and open-source JavaScript library for building responsive and customizable data tables in web applications.

It provides a simple and intuitive API for creating, styling, and populating tables with data from various sources, including JSON, CSV, and Excel files.

Grid.js supports features such as sorting, filtering, pagination, column resizing, and cell formatting, as well as advanced features such as tree grids, custom renderers, and editable cells. The library also includes built-in plugins for exporting data to different formats, such as CSV, Excel, and PDF.

Include the file in Bookstack

Included and linked CSV files look something like that in source.

<p id="bkmrk-samplecsvfile_2kb.cs">
<a href="https://bookstack.instance/attachments/12" target="_blank" rel="noopener">SampleCSVFile_2kb.csv</a>
</p>

<a href="https://bookstack.instance/attachments/12" target="_blank" rel="noopener">SampleCSVFile_2kb.csv</a>

</p>

Tweak the header

The settings allow you to add custom code to your instance. Another option would be to tweak template files, but its easier to do these light tweaks using the header customizer.

This can be found under: https://bookstack.instance/settings/customization

Add required libs

Either link them externally or better use locally stored versions of these.

Papa Parse
Grid.JS

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/papaparse@5.4.0/papaparse.min.js"></script> 
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

Find CSV links in the page and append to link

This searches the page_content for elements that have “.csv” in their textContent.
Gets textContent and the href of the link.
The link is passed to Papa Parse for processing.
On completion the data result is split into the header row and the rest.
That data is passed to Grid.JS and added to a container element after the link.
Grid.JS provides a ton of configuration options, I added the most common as a starting point. This includes different ways to style the grid.

<script>
function init() {
    document.querySelectorAll('.page-content  a').forEach((node, i) => {
        let parent = node;
        let unique = i;
        let text = node.textContent
        let link = node.href

        if (text.search(".csv") !== -1) {            
            let header;
            let rows = [];
            let json = JSON.parse(node.getAttribute("title"));

            Papa.parse(link, {
                download: true,
                header: false,
                complete: function(results) {
                    results.data.map(function(data, index) {
                      if(!!json){                         
                        let removeValFrom = json.remove_cols;
                      	data = data.filter(function(value, index) {
     			  return removeValFrom.indexOf(index) == -1;
			})
                      }
                        if (index == 0) {
                            header = data;
                        } else {
                            rows.push(data);
                        }
                    });
                    const csv_wrapper = document.createElement("div");
                    csv_wrapper.setAttribute("id", "csv_wrapper_" + unique_id);
                    parent.after(csv_wrapper);

                    new gridjs.Grid({
                        search: true,
                        columns: header,
                        data: rows,
                        fixedHeader: true,
                        sort: true,
                        pagination: {
                            limit: 6
                        }
                    }).render(document.getElementById("csv_wrapper_" + unique_id));

                }
            });
        }
    });
}
window.addEventListener('DOMContentLoaded', init);
</script>

function init() {

document.querySelectorAll('.page-content a').forEach((node, i) => {

let parent = node;

let unique = i;

let text = node.textContent

let link = node.href

if (text.search(".csv") !== -1) {

let header;

let rows = [];

let json = JSON.parse(node.getAttribute("title"));

Papa.parse(link, {

download: true,

header: false,

complete: function(results) {

results.data.map(function(data, index) {

if(!!json){

let removeValFrom = json.remove_cols;

data = data.filter(function(value, index) {

return removeValFrom.indexOf(index) == -1;

})

}

if (index == 0) {

header = data;

} else {

rows.push(data);

}

});

const csv_wrapper = document.createElement("div");

csv_wrapper.setAttribute("id", "csv_wrapper_" + unique_id);

parent.after(csv_wrapper);

new gridjs.Grid({

search: true,

columns: header,

data: rows,

fixedHeader: true,

sort: true,

pagination: {

limit: 6

}

}).render(document.getElementById("csv_wrapper_" + unique_id));

}

});

}

});

}

window.addEventListener('DOMContentLoaded', init);

</script>

Github: Will be adding more hacks, as I clean some of them up :)

A bonus

You can use the title attribute to pass some config data, in JSON format. Currently only to strip columns, but will extend that a bit more for flexible usage ;)

portalZINE NMN | Development meets Creativity | json grid js

{"remove_cols":[0,1,2,3,6,7,8,9,10]}

1	{"remove_cols":[0,1,2,3,6,7,8,9,10]}

The result

Should look something like that …

portalZINE NMN | Development meets Creativity |

Enjoy coding …

1. November 2021

Hosting MP3 files on Google Drive + HTML5 Audio Player

What Google Drive Sharing offers us!

I am doing a Podcast on portalZINE.TV since last year and always host a backup of the MP3 episodes on Google Drive.

The link that you create, when enabling file sharing on Google Drive, can not be used to actually embed it on your website.

The link looks something like that:

https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing

1	https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing

To actually use it directly, we need to get the ID. Sure, you could just extract the ID, but often we just want to copy and paste. The sharing link is also your actual reference to the original file, which I store together with the podcast.

Apply a simple RegEX

We use a simple Regex to extract the ID:

https://drive.google.com/file/d/([a-zA-Z0-9_]+)\/

1	https://drive.google.com/file/d/([a-zA-Z0-9_]+)\/

PHP

$input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";

preg_match("/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//", $input, $match);

$GoogleDriveFileID = $match[1];

$input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";

preg_match("/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//", $input, $match);

$GoogleDriveFileID = $match[1];

JAVASCRIPT

var input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";

var res = input.match(/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//)

var googleDriveFileID = res[1];

var input = "https://drive.google.com/file/d/78BygKccgGms9ET2lUM0RPVUI1T0U/view?usp=sharing";

var res = input.match(/https:\/\/drive.google.com\/file\/d\/([a-zA-Z0-9_]+)\//)

var googleDriveFileID = res[1];

Just use it!

This ID can than be used to embed the file directly using HTML5 audio controls.

Its important to use the “https://docs.google.com/uc?export=open&id=” url to open the file, as it provides the direct access to the shared file

 <audio controls>
 <source src="https://docs.google.com/uc?export=open&id=<?php echo $GoogleDriveFileID; ?>" type="audio/mp3">
<p>This browser does not support HTML5 audio</p>
 </audio>

<source src="https://docs.google.com/uc?export=open&id=<?php echo $GoogleDriveFileID; ?>" type="audio/mp3">

<p>This browser does not support HTML5 audio</p>

</audio>

31. October 2021

Importing CSV files with HTML5 and Papa Parse!

PAPA PARSE

Papa Parse is a powerful, in-browser CSV parser for the big boys and girls :)
If you do need easy CSV parsing and conversion back to CSV, take a look at it!

// Parse CSV string
var data = Papa.parse(csv);

// Convert back to CSV
var csv = Papa.unparse(data);

// Parse local CSV file
Papa.parse(file, {
	complete: function(results) {
		console.log("Finished:", results.data);
	}
});

// Stream big file in worker thread
Papa.parse(bigFile, {
	worker: true,
	step: function(results) {
		console.log("Row:", results.data);
	}
});

// Parse CSV string

var data = Papa.parse(csv);

// Convert back to CSV

var csv = Papa.unparse(data);

// Parse local CSV file

Papa.parse(file, {

complete: function(results) {

console.log("Finished:", results.data);

}

});

// Stream big file in worker thread

Papa.parse(bigFile, {

worker: true,

step: function(results) {

console.log("Row:", results.data);

}

});

SIMPLE TESTDRIVE

 <input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />

1	<input type="file" name="File Upload" id="txtFileUpload" accept=".csv" />

document.getElementById('txtFileUpload').addEventListener('change', upload, false);

 function upload(evt) {
  
	var data = null;
	var file = evt.target.files[0];
	var reader = new FileReader();
	reader.readAsText(file);
	reader.onload = function(event) {
		var csvData = event.target.result;
		
		 var data = Papa.parse(csvData, {header : true});
		
		console.log(data);
		
	};
	reader.onerror = function() {
		alert('Unable to read ' + file.fileName);
	};

}

document.getElementById('txtFileUpload').addEventListener('change', upload, false);

function upload(evt) {

var data = null;

var file = evt.target.files[0];

var reader = new FileReader();

reader.readAsText(file);

reader.onload = function(event) {

var csvData = event.target.result;

var data = Papa.parse(csvData, {header : true});

console.log(data);

};

reader.onerror = function() {

alert('Unable to read ' + file.fileName);

};

}

ABOUT

Papa Parse is the fastest in-browser CSV (or delimited text) parser for JavaScript. It is reliable and correct according to RFC 4180, and it comes with these features:

Easy to use
Parse CSV files directly (local or over the network)
Fast mode
Stream large files (even via HTTP)
Reverse parsing (converts JSON to CSV)
Auto-detect delimiter
Worker threads to keep your web page reactive
Header row support
Pause, resume, abort
Can convert numbers and booleans to their types
Optional jQuery integration to get files from <input type="file"> elements
One of the only parsers that correctly handles line-breaks and quotations

USAGE

I am currently using it to quickly parse Adobe Audition CSV marker files and prepare them for storage for my podcast.

Name	Start	Duration	Time Format	Type	Description
Ankündigungen	0:20.432	0:00.000	decimal	Cue	
Stargate Table Read	1:12.811	0:00.000	decimal	Cue	
Dune Part One 2021	1:58.677	0:00.000	decimal	Cue	
Dust - Cosmo	2:20.925	0:00.000	decimal	Cue	
Nina - Beyond Memory	2:51.276	0:00.000	decimal	Cue

Name Start Duration Time Format Type Description

Ankündigungen 0:20.432 0:00.000 decimal Cue

Stargate Table Read 1:12.811 0:00.000 decimal Cue

Dune Part One 2021 1:58.677 0:00.000 decimal Cue

Dust - Cosmo 2:20.925 0:00.000 decimal Cue

Nina - Beyond Memory 2:51.276 0:00.000 decimal Cue

Papa.unparse(tabData, {	
	delimiter: "\tab",
	header: true,
	newline: "\r\n",
	skipEmptyLines: true
})

Papa.unparse(tabData, {

delimiter: "\tab",

header: true,

newline: "\r\n",

skipEmptyLines: true

})

Papa Parse @ GitHUB

Homepage / Demo

29. August 2021

WPML – Going multilingual with WordPress

Getting started

“WPML (WordPress Multilingual) makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs.” – WPML

I have been running and setting up multilingual websites for more than 12 years. WordPress and related integrations have gladly come a long way to make our life’s a lot easier.

For basic content WPML is almost plug & play, but I do see more and more sites / customers struggling with more complex setups. WPML is one of the most popular multilingual plugins and is used on x00.000 of websites.

Just so you know, WPML is a commercial solution!

Settings for almost everything

The amount of settings has increased a lot over the years and offers possible solutions for almost any content / plugin setup.

But for more complex setups, I would suggest to hire a professional to look over the settings or study the plugin documentation carefully.

Especially with a lot of content, it can quickly increase problems and the need to revisit specific content over and over again.

How to translate

WPML lets you translate any text that comes from themes / theme frameworks (DIVI, Elemetor, Gutenberg …), plugins, menus, slugs, SEO and additionally supported integrations (Gravity Forms, ACF, WooCommerce …).

You can translate content internally for yourself, using translation management to translate with an internal team of translators or get help from external translators / translation services.

The latest version also offers AI translations, which allows you to get a decent start for most of your content.

In addition to the above, WPML String Translation allows you to translate texts that are not in posts, pages and taxonomy. This includes the site’s tagline, general texts in admin screens, widget titles and many other areas.

Is it worth its money

Well, I am a bit biased. I have not looked much at other solutions for the past 5 years, as it offers all I really need.

I have used it on projects from 2 to 15 languages and it scales nicely. At least with proper hosting attached!

Anything can be tweaked through the API, Hooks and custom integrations. I have build additional WPML tools for my customers, to streamline some of the repeating / boring tasks.

Their support is responsive and the forum already provides a huge amount of answers to most of the questions that might come up.

If you develop / maintain multiple customer websites with multilingual content, the investment is quickly
amortized. I do offer WPML to my maintenance package customers, maybe something to consider ;)

Its an essential solution in my WP toolbox.

WPML 4.5

WPML 4.5 is on its way and will include a “Translate Everything” feature, among other fixes and enhancements.

Translate Everything allows you to translate all of your site’s content automatically as you create it. You can then review the translations on the front-end before publishing.

WPML / Documentation

9. April 2021

VR is here! Are you already infected?

Watching from the sidelines

VR has not just arrived, but it finally arrived for me and the masses ;)

I have been watching VR evolving from the sidelines for the past few years. Its been a fun ride, from the first prototypes to what we have now.

The biggest problem in the past, has been image quality and the huge upfront investment for me. With the latest generation all of this has completely changed.

As a developer …

I am constantly keeping up with new technologies and have been diving into WebVR for some time now.

Its so easy to export your own simple Unity VR project into WebVR and integrate it into your own web projects.

Unreal Engine also provides options to work on VR projects. Or build upon the WebXR API.

Microsoft also has a foot in the door, with MRTK (Allows to integrate teleporting easily / Releases).

Oculus Quest 2

With the announcement of the Oculus Quest 2 last year, I finally decided to dive in myself. Standalone VR allows me to concentrate on WebVR and experiment, while still having the option to expand into the linked PC-universe in the future as well.

PC Link / PC Rig / PC VR

I have no plans to invest into a beefy gaming rig yet, but have been trying out cloud solutions using Shadow and Paperspace Gaming / Paperspace $10 Coupon (KS4Q2TA).

Update: Latency is the biggest problem with these solutions and it can be a hit & miss! My Paperspace experience was close to perfect for pure desktop experiences, for VR sadly not :) Can not testdrive Shadow right now, as the waitinglist is already showing September 2021 LOL CRAZY! Local latency can be greatly optimized by using Wi-Fi 6 or Wi-Fi Direct.

With the current GPU prices, building a machine makes hardly any sense. I would love to build a small form-factor PC with a Shuttle XPC for example ;) Maybe later this year ….

I invested in VR-Comfort for now ;) I transformed the Oculus Quest 2 into a FrankenQuest with the DAS-Mod (HTC VR VIVE Deluxe Audio Strap). Loving the new look, audio and perfect weight balance :) Perfect for longer sessions.

Building a VR READY PC in 2021

I am officially infected. I decided to upgrade an old computer to minimum VR specs, to at least tryout PC-VR :)
The final build is ghetto and really a tight fit, but it works perfectly :)

For 2021 and the current shortages, this is a big win! The whole upgrade was about 400 EUR, with 250 EUR for the new GPU.

Here are my current PC-VR specs:

Area	Before	After / Comment
PC	Fujitsu P900 – i3	Nice clean case. Mainboard D2990 (ultra small μATX). Really tiny! This would normally not be my dream mainboard, but I am using what I have :) Trying to keep costs low.
Power Supply	Stock	EVGA 600 W1. Better cooling and needed power for the GPU.
CPU	i3 – 2120	i7 2600K . Big change in overall performance.
CPU Cooler & Fan	Stock	Be Quiet Pure Rock Slim BK030. (Had to do some mods to install it)
RAM	8GB	Enough for now.
GPU	NVIDIA 1030 GTX – Low profile	NVIDIA 1060 6gb Inno3D. That card takes up all slots, had to add a riser card to play with some USB 3.0 cards :)
USB3	USB2	Inateck PCIe USB 3.0 – KTU3FR-4P , again connected via a riser card! Make sure that the card gets proper power (green light on the card itself), that is why another Inateck card failed to connect or had random disconnects ;) That card charges and connects perfectly with the Oculus Quest 2. I was almost giving up and glad I found a working solution ;)
USB LINK		Using a 3m long cable from KIWI Design, works without any problems and has secure fit on the Oculus Quest 2
Bluetooth	–	Bluetooth 4.0 – Asus BT-400

All that is required, has been added and now the PC VR universe is open for exploration :) As hardware is getting more expensive every week, I updated a second machine with comparable specs and have 2 machines that can run VR with entry /decent specs :)

Interesting Platforms

There are many new platforms providing access to new tools and often an easy access to a broader community. Some of them with nice build tools in VR.

Facebook Horizon Venues (Beta Access only)
REC Room
Altspace VR (Unity World Builder) / Altspace VR for Enterprise + Microsoft Mesh
Microsoft Mesh Platform / Mixed Reality Developer Program
Firefox Hubs (Mozilla Spoke)
VRChat
Sansar
VIRCadia
Tivoli Cloud (Blender Tools)

Open Source

“OpenXR is an open, royalty-free standard for access to virtual reality and augmented reality platforms and devices. It is developed by a working group managed by the Khronos Group consortium.”

You will find a bunch of efforts on the way, to build the next open multi-platform VR solution.

Building experiences in VR

Building with Unity is always an option, but not the best solution for those that are just getting started or for those that just want a simple starting point to experiment ;)

Zoe – Immersive 3D Creation Platform
Create content directly in VR or using Unity :) Zoe is a perfect tool for Educators & Institutions.
A-Frame. A web framework for building 3D/AR/VR experiences. Make 3D worlds with HTML and Entity-Component For Quest, Rift, WMR, SteamVR, mobile, desktop
OpenSpace 3D – OpenSpace3D is a free and open-source platform, designed to create virtual and augmented-reality applications or games. If you are a 3D artist, a designer, a lab researcher, or just someone with a lot of passion and curiosity, you don’t need software development skills to use our platform.
Amazon Sumerian is a set of tools for creating high-quality virtual reality (VR) experiences on the web. With Sumerian, you can construct an interactive 3D scene without any programming experience, test it in the browser, and publish it as a website that is immediately available to users.
Mozilla Spoke – Create 3D social scenes for Hubs
Wonderland Engine is a development platform for web-based graphics applications. It comes with an accessible 3D editor application – the Wonderland Editor – and an efficient WebAssembly based runtime that runs in the browser.

VR Office

Another evolving area is the office space. Some of the platforms above already dive into that area, like XRDesktop. But Oculus / Facebook itself is working on its Infinite Office integration.

Other solutions help to mirror your PC within VR and open new ways for collaboration:

The biggest problem is the mirroring of the keyboard. As soon as that is solved, this might become usable. Immerse VR provides an option to overlay a virtual representation of your keyboard, by mapping your real-life keyboard in VR.

Communities

Always important to stay informed. Here some communities are frequently visit:

Tools

Oculus TrayTool – It’s a free application that helps you get the most out of your Oculus Rift & Oculus Quest, when connected via Link.

Here to stay

VR is here to stay, I would have never though it would take off 2020 / 2021. But we all face new challenges and technology is evolving to make space for new possibilities.

Not all gaming

While gaming / fitness / social are the entry point for VR currently, this whole market will expand quickly in 2021.

Really looking forward to new possibilities and another facet of my developer life.

Looking forward meeting some of you in the VR-Multiverse :)

Enjoy coding ….

26. March 2021

Tracking your body in VR

A new passion!

VR is a new passion of mine, that I play with in my freetime, but also explore as a developer and tech enthusiast.

As video quality has evolved a lot in the past 2 years, the big topic now is full body immersion.

What needs to be tracked in VR?

The following things are becoming more important:

Hand-Tracking: hand & fingers, touch, grab & place …
Eye-Tracking: left & right eye, focus …
Lip-Tracking: speech, facial expressions
Body-Tracking: arms, legs, hips …
Free Locomotion without boundaries
Smell & Taste-Tracking
Brain & Neural Tracking

I will use this article to collect things that are already available, diy projects, experiments and things that are in their early stages.

Hand Tracking

Hand & finger tracking is already making its way into consumer products. It is still not widely integrated, but has made big jumps the past year.

Eye Tracking

Eye tracking is not only important to make avatars more life-like, but also to track your eye focus and help to reduce processor load.

Lip Tracking

Lip tracking has made a big jump, with the new Vive Lip tracker and is important for social interactions.

Body Tracking / Tracking parts of the body

Body tracking is one of the areas, that has so many projects attached to it. There are so many neat solutions out there, that almost anyone can use it by now.

KinectToVR – Full-Body Tracking with your Kinect for Xbox 360, Kinect for Xbox One or PlayStation Move + Eye
SlimeVR – Open Source Full Body Tracking. Crowd Supply / Youtube
DecaMove – Hip tracking. They also offer an Android App, to do the same.

Free Locomotion Tracking

Free locomotion is one of the biggest challenges in VR right now. You can increase your playarea, but that is still limiting and requires space. Their are VR treadmills, but none of them really reproduces life-like natural movement yet. And those solutions that come close, are still out of your reach. Most of the tracking above is somehow covered and will be available soon, while real locomotion is really the hardest to solve of them all.

Natural Locomotion – Natural Locomotion is an application that emulates the controller thumbstick input (to use in any game), to walk, run and jump more naturally moving your arms or your feet. It includes a driver for SteamVR for this purpose.

Tools & Software

VirtualHere – allows USB devices to be used remotely over a network just as if they were locally connected!

Avatars

Always crucial to have the right look for yourself in VR :)

Ready Player Me – Avatars

Lets get started ….

2. December 2020

cubicFUSION Themes for Klaro!

“Klaro [klɛro] is a simple consent management platform (CMP) and privacy tool that helps you to be transparent about the third-party applications on your website. It is designed to be extremely simple, intuitive and easy to use while allowing you to be compliant with all relevant regulations (notably GDPR and ePrivacy).”

The tool is developed by KIPROTECT and can be found on Github.

Black & White

As I integrated Klaro on a couple of websites so far, I decided to make my work a bit easier and start building some basic clean themes for it.

I have a basic white and black&white theme so far. The download includes a testdrive folder, to showcase the themes. The white theme is also used on this website ;)

I really hate those standard consent management modals, that integrate badly into the website native design.

Klaro does a good job allowing to override its core theme and makes it a bit more pleasant. We do have to live with those modals from now on ;)

The themes are Sass-based and provide easy configuration options.

Enjoy!

cubicFUSION Themes for Klaro! @ Github

Klaro! Tweaks

Klaro is still missing some things, will collect some workarounds here for you to play with.

Missing events for consent modal open / closed …

Updates: Github Discussion
– 0.7.10 also adds custom callbacks to services (onAccept, onDecline, onInit) NICE!

Used a simple MutationObserver to do some magic for now, without diving into the core Klaro code for now. I am sure they already have an event listener or watcher setup.

var cm_event = document.createEvent('Event');

cm_event.initEvent('consentModalOpen', true, true);

document.addEventListener('consentModalOpen', function (e) {
    console.log("consentModalOpen")
}, false);
	
document.addEventListener("DOMContentLoaded", function(e) {        

        var cm_target 	= document.getElementById( "klaro" ),
			cm_visible 	= false;	

        var observer 	= new MutationObserver(function(mutationRecords) {          

            if(document.querySelectorAll('#klaro .cookie-modal').length > 0 && cm_visible == false){	
                cm_visible = true;
                document.dispatchEvent(cm_event);
              
            }else{
                cm_visible = false;
            }
        });

      observer.observe(cm_target, {
        childList: true, 
        subtree: true, 
        characterDataOldValue: true 
      });
});

var cm_event = document.createEvent('Event');

cm_event.initEvent('consentModalOpen', true, true);

document.addEventListener('consentModalOpen', function (e) {

console.log("consentModalOpen")

}, false);

document.addEventListener("DOMContentLoaded", function(e) {

var cm_target = document.getElementById( "klaro" ),

cm_visible = false;

var observer = new MutationObserver(function(mutationRecords) {

if(document.querySelectorAll('#klaro .cookie-modal').length > 0 && cm_visible == false){

cm_visible = true;

document.dispatchEvent(cm_event);

}else{

cm_visible = false;

}

});

observer.observe(cm_target, {

childList: true,

subtree: true,

characterDataOldValue: true

});

6. November 2020

Welcome Dashboard with Gutenberg – cubicFUSION Admin Enhancer 0.2.5

What’s new / What changed ?

Admin Enhancer is the first free plugin released under the cubicFUSION brand. The plugin is still work in progress, but a tool that is already used within some of my client projects. I am using this plugin to centralise things I love & need, when sending out a finished website or project.

NEW: DASHBOARD GUTENBERG / DASHBOARD TEMPLATES
NEW: ADMIN TOOLBAR
UPDATE: SHORTCODES

Addons included …

This version includes a new addon “GUTENBERG DASHBOARD“, that allows you to build a White-Label Admin Dashboards using the Gutenberg Editor.

It integrates with the SHORTCODES addon and allows to drop in the dashboard widgets via its own Gutenberg Block.

The Block provides settings to overwrite CSS from the admin widgets, allowing you tweak them a bit — for better visual integration. The Dashboard template itself can be tweaked using CSS and Sass via SCSS now 😉

I am also releasing the first integration of the “ADMIN TOOLBAR” addon, which allows you to tweak some of the admin toolbar and footer options (Hide WP Logo, Hide Toolbar on Frontend, Hide Menu Items ..)

Already working on 0.3 … ENJOY!

cubicFUSION – Admin Enhancer
WordPress Repository

14. May 2020

2020: WordPress Admin White Label Solutions ( Personal Favorites )

I am always looking for easy ways to white label the WordPress administration for myself and my clients. A nice personal touch for each project and an easy way to declutter the interface.

These are my personal favorites, that I use on a regular basis.

Admin Themes / Login Page

There are a lot of solutions out there, but many break easily and are really heavy to load. Some of these solutions I tried also break easily on new WordPress Upgrades. The first two below are currently my favorites.

Slate Pro ( Commercial )
“Slate Pro is a powerful WordPress admin theme plugin that reimagines WordPress with a clean and simplified design. White label your WordPress install with custom colors, a custom login screen, custom admin branding, and more. Slate Pro is now multisite compatible! Network activate to control the look of all sub-sites.”

Slate Pro is a clean and simple admin theme, that does not try to alter the interface completely. Small changes that make a difference. Color adjustments, logos, simple menu & widget enhancements and login page tweaks. Compared to other solutions it has been a stable experience, even after multiple WordPress Updates.

This is an install and enjoy solution!
Kodeo Admin UI ( Free – Open Source )
“Kodeo Admin UI turns your WordPress backend into a clean and modern user interface. All elements are well designed and arranged for the best user experience.”

Kodeo is another clean interface, that goes further than Slate Pro. Many areas of the admin theme have been changed. It works well with most 3rd party plugins, but I have had problems with some plugins doing their own little interface tweaks.
With Kodeo your WordPress Admin completely transforms and gives it a really modern & clean look.

This is an install and tweak solution! You might need to trim certain CSS properties to make it work for everything.
Material WP ( Commercial )
“Material Design version of the WordPress Admin Interface”

I have used this once or twice in the past. Its more of a honorable mention. The admin theme transforms the interface completely, but can feel sluggish on slower servers. It has an impressive set of options and gets regular updates.

This is again an install and tweak solution! It works with most of the 3rd party plugins and Gutenberg, but some things might need to be trimmed by hand.

Menu Editors & User Groups

When sharing the administration with your customer, you often need to make it as simple a possible for them. Depending on your setup, the menu becomes cluttered and overwhelming really fast.

I often trim menus for each user role, to make only those options accessible that are really needed.

Admin Menu Editor Pro ( Free / Commercial )
This tool has been part of many of my projects and has been a solid solution for years. You can hide & move menus, create new menus, tweak menus by user role, hide plugins and also tweak the admin toolbar with an extra addon.
Worth every penny! There is a free version available, that might just provide enough functionality for your next project.
Groups ( Free )
“Groups is designed as an efficient, powerful and flexible solution for group-oriented memberships and content access control. It provides group-based user membership management, group-based capabilities and access control for content, built on solid principles. Groups is light-weight and offers an easy user interface, while it acts as a framework and integrates standard WordPress capabilities and application-specific capabilities along with an extensive API.”

This plugin allows you to add new user groups easily and can tie into the plugin above.

User Profiles

When sharing the administration with multiple users, its always nice to add some personality to the user profiles as well.

WP User Profiles
“WP User Profiles is a sophisticated way to edit users in WordPress.”

The plugin provides other small addons, like WP User Avatars. Neat plugin to tweak admins, editors and other users.

Admin Dashboard Replacements

cubicFUSION Admin Enhancer (Free)

This is a new plugin I am currently working on. The current shortcodes addon can help you integrate dashboard widgets into the dashboard builders below.

I am also working on my own dashboard builder, that requires none of the solutions below and builds upon WordPress core functionality.
Dashboard Welcome for Elementor (Free)

“Dashboard Welcome by PowerPack Elements gives you full control over the WordPress welcome panel using Elementor.

You can personalize the dashboard with content and design built with Elementor. You can add heading, contact information, form, video, images, affiliate links, etc.

While the above plugin is free, you need a Elementor Pro License to use it!
Dashboard Welcome for Beaver Builder (Free)

“Welcome by Beaver Addons gives you full control over the WordPress welcome panel using Beaver Builder.

You can personalize the dashboard with content and design built with Beaver Builder. You can add heading, contact information, form, video, images, affiliate links, etc.”

Even though the plugin above is free, Beaver Builder is a commercial plugin!
Divi Dashboard Welcome ($22)

“Divi Dashboard Welcome gives you control over the WordPress Dashboard Welcome screen …”

The plugin requires the Divi Page Builder. Both plugins are commercial!

Enjoy
Alex