WACOM is known for stopping support for their pen tablets after some years, especially for the cheaper consumer pen tablets.
The WACOM Bamboo (in my case the CTH-461) is a pretty popular pen tablet and the latest driver wont install natively under Windows 10. Really frustrating for hardware that is still in perfect shape.
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.
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).
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.
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.
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 :)
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.
„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 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 ;)
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.
Always important to stay informed. Here some communities are frequently visit:
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.
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 :)
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.
The following things are becoming more important:
I will use this article to collect things that are already available, diy projects, experiments and things that are in their early stages.
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 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 has made a big jump, with the new Vive Lip tracker and is important for social interactions.
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.
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.
Always crucial to have the right look for yourself in VR :)
„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.
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 is still missing some things, will collect some workarounds here for you to play with.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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 }); }); |
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
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!
While Gutenberg is becoming more stable with each release, documentation is only growing slowly. Many parts are outdated, superficial or completely undocumented.
For more complex or individual requirements you have to dive deep. Gladly the browser console allows you to easily checkout what is driving the editor.
Open your browser developer console and start exploring wp. / wp.data. / wp.api. .
What each function does, can be read in the Block Editor Handbook.
At this stage of the development, many things are still changing. So using the API direcly is mostly a matter of reading the documentation, checking the implementation within the core codebase and using trial & error.
Some mysteries have already been solved by others or they provide the right lead. Check Stack Overflow and especially the WordPress Development area for solutions.
Its still like a treasure hunt most of the time LOL Perfect for those that love to solve puzzles :)
Just my cup of tea or better coffee!
It surely is a benefit, as the whole Gutenberg Editor is build upon React. But for simple tweaks its not a must. But once you start going deeper, you will see the benefit and will learn to love React yourself.
ECMAScript 6 is also known as ES6 and ECMAScript 2015.
ES5 is on its way out and ES6 is supported on all modern browsers since end of 2016.
Older browsers can be supported using a polyfill, that augments those browsers and allows them to use the new ES6 features.
React and also Gutenberg builds on the new Javascript functionality, but ES5 examples can also be found.
You can also easily compile ES6 to ES5 using Babel in your development environment or online.
I will be using the following sections to highlight some things that puzzled me and might help others to get a grip on things. I will be extending this, as I discover or solve more Gutenberg mysteries :)
I will keep the example code in ES5 for now, as that is the easiest way to start tinkering. I will also focus on things that can be used from external code. Most of the small code snippets are connected to each other.
These little code snippets are all connected and showcase how to retrieve a selection from a block and change or remove a text format.
Make sure the editor has loaded and the DOM can be accessed.
|
1 2 3 |
wp.domReady(function() { // Your code here }); |
|
1 2 3 4 |
wp.data.select('core/block-editor').getSelectedBlock(); // Block ID - reference var blockUID = wp.data.select('core/block-editor').getSelectedBlock().clientId; |
|
1 2 3 4 5 |
// Start of selection var selectionStart = wp.data.select('core/block-editor').getSelectionStart(); // End of selection var selectionEnd = wp.data.select('core/block-editor').getSelectionEnd(); |
The actual offset can be found within the OBJECT.
|
1 |
wp.data.select('core/block-editor').getSelectionEnd().offset; |
|
1 2 3 4 5 6 7 8 |
// Get block var block = wp.data.select('core/block-editor').getSelectedBlock(); // Attributes var blockAttributes = block.attributes; // Content var blockContent = block.attributes.content; |
|
1 2 3 4 |
var richTextContent = wp.richText.create( { blockContent }); |
|
1 |
var activeTextFormats = blockContent.formats; |
This function is documented, but wont work from the outside that easily. This normally checks the isActive state of the component. Here a small workaround using Lodash.
|
1 2 3 4 5 6 7 |
var formatToCheck = "core/text-color"; var formatToCheckisActive = true; if(_.find(value.formats[selectionStart], { type: formatToCheck })) { formatToCheckisActive = false; } |
Formats are saved within the Richtext object under formats and the text formats are stored within arrays that correspond to the actual index + range of the selection. So if a text-color has been applied from index 4 to 8, you will find the corresponding array for that.
Works well and does the trick for now. Here the output from the developer console, showing the arrays for an 18 character long paragraph:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
formats: Array(18) 0: Array(1) 0: {type: "core/bold"} length: 1 __proto__: Array(0) 1: Array(1) 0: {type: "core/bold"} length: 1 __proto__: Array(0) 2: [{…}] 3: [{…}] 4: [{…}] 14: [{…}] 15: [{…}] 16: [{…}] 17: [{…}] length: 18 __proto__: Array(0) |
I am using the core/text-color format with applyFormat as an example, can be anything.
|
1 2 3 4 5 6 7 8 |
richTextContent = wp.richText.applyFormat( richTextContent, { type: 'core/text-color', attributes:{class: "some-color-class"} }, selectionStart, selectionEnd ); |
insertObject can insert content at the start of the selection, with the rest between selectionStart and selectionEnd getting removed. There is also insert, which allows you to simply add a HTML string into the Richtext value.
|
1 2 3 4 5 6 |
richTextContent = wp.richText.insertObject( richTextContent, 'core/text-color', selectionStart, selectionEnd ); |
removeFormat allows you to remove a text format from the current selection.
|
1 2 3 4 5 6 |
richTextContent = wp.richText.removeFormat( richTextContent, 'core/text-color', selectionStart, selectionEnd ); |
Would be nice to use toggleFormat here, but that works within native components and not by selection index as the two calls above.
|
1 2 3 |
var prepNewHTML = wp.richText.toHTMLString( {richTextContent } ); |
|
1 2 3 4 5 |
wp.data.dispatch( 'core/block-editor' ).updateBlock( blockUID, { attributes: { content: prepNewHTML } } ); |
I will add some more Gutenberg examples in the future.
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.
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.
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.
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.
Enjoy
Alex
cubicFUSION is my personal development playground. I always planned to make many of my projects public, but time is limited and running customer projects a priority.
I am still doing a big cleanup of my toolset and will see what I can actually share or reuse. Some of these might be useful, inspiration or just an archive of broken ideas ;)
The first public release is cubicFUSION Admin Enhancer. This is a free toolbox that adds useful admin features and resources to help you tweak the WordPress administration. I am always looking for ways to easily white-label the experience for my customers.
The first addon SHORTCODES converts all admin dashboard widgets to simple shortcodes. You can use those shortcodes within Elementor Pro or any other page builder, that allows you to create custom admin dashboards. This makes it easy to build white-label dashboards, while still reusing all those nice dashboard widgets :)
The plugin can be downloaded from the
Projects page or directly from the
WordPress Repository.
Enjoy!
Alex
„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.
„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.“
„Divi Dashboard Welcome is a revolutionary plugin that FINALLY gives you control over the WordPress Dashboard Welcome screen for yours and your client sites.
This means you can get rid of the default WordPress “getting started” content, and add your own branding, or your client’s branding. This allows you to upsell your additional services, create a client support hub, provide useful links or videos, and so much more!“
Everybody seems to be searching for ways to integrate digital communication into their home-office environments or client/customer workflows. But many are not willing to pay huge monthly fees or rely on services like Skype, Zoom, Microsoft Teams or Slack.
For smaller teams meetings, or webinars for people up to 6, their is an alternative! You can easily use Nextcloud and its integrated Talk application for chat & webrtc video/audio streaming capabilities. Combined with the calendar app this becomes a very effective and low-cost solution.
Nextcloud Talk is a fully self hosted audio/video and chat communication service. It features web and mobile apps and is designed to offer the highest degree of security while being easy to use.
Talk makes it easy to call customers and partners in one-to-one or group-scenarios. Users can invite external chat participants with an URL into public rooms. The chat enables participants to easily exchange messages, links and notes.
Share the content of a single window or a full desktop screen for presentations with chat-partners. Manage participants by inviting, muting or removing them. Schedule meetings and be notified when they start. A lobby is provided for guests to wait until the call starts.
Calls are end-to-end encrypted so no communication can be intercepted. Chat logs are stored securely on your own server.
The peer to peer nature of Talk does inflate network traffic, creating one incoming and sending stream per other participant. This places practical limitations on calls that depend on network capabilities.
A typical private Nextcloud Talk setup should handle dozens of calls with each up to 4-6 participants, more if all participants have a good network connection.
Nextcloud is part of many hosting offers and can often be installed with one single click. You will also find hosting providers, that are specialised on Nextcloud hosting and offer you a preinstalled setup to use.
But any decent hosting setup should be enough to roll out your own. Setting up Nextcloud is really easy, as it offers a simple guided installation process.
If you need help setting up your own private instance, get in touch and we can work something out. Depending on your server setup and apps you want, it should not take longer than 60-90 minutes to get it up and running.
Alex, Contact Me
Nextcloud Talk tries to establish a direct peer-to-peer (P2P) connection, thus on connections beyond the local network (behind a NAT or router), clients do not only need to know each others public IP, but the participants local IPs as well. Processing this, is the job of a STUN server. As there is one preconfigured for Nextcloud Talk, still nothing else needs to be done.
But in many cases, e.g. in combination with firewalls or symmetric NAT, a STUN server will not work as well, and then a so called TURN server is required. Now no direct P2P connection is established, but all traffic is relayed through the TURN server, thus additional (at least internal) traffic and resources are used.
Nextcloud Talk will try direct P2P in the first place, use STUN if needed and TURN as last resort fallback. Thus to be most flexible and guarantee functionality of your Nextcloud Talk instance in all possible connection cases, you most properly want to setup a TURN server. COTurn is an open source solution, that offers just that.
If you need to setup your own TURN Server I can help. There are pretty cost effective ways, to host your own.
Alex, Contact Me
ENGLISH: The heidelpay Group is one of the fastest growing German tech companies for international payment transactions. Founded by Mirko Hüllemann in 2003, the company relies on its own innovative solutions such as the secured invoice purchase, purchase by instalments, direct debit and online bank transfers. In addition, heidelpay also cooperates with more than 200 well-known providers of credit cards and wallet solutions.
As a payment institute approved by the German Federal Financial Supervisory Authority BaFin and with over 16 years of experience in e-commerce and at the POS in its favour, the heidelpay Group enables companies of all sizes to make payments worldwide. The full-service payment service provider covers the entire spectrum of electronic payment processing: from processing, procurement, monitoring and risk management to accounts receivable management. Its fully scalable and modular solutions are used by 30,000 national and international customers. The various payment methods are available for e-commerce, m-commerce and stationary points of sale. „
GERMAN: Die heidelpay Group ist eines der am stärksten wachsenden, deutschen Tech-Unternehmen für den internationalen Zahlungsverkehr. Das von Mirko Hüllemann im Jahr 2003 gegründete Unternehmen setzt dabei auf innovative, eigene Lösungen, wie Rechnung, Ratenkauf, Lastschrift und Online-Überweisung. Daneben arbeitet heidelpay mit über 200 namhaften Anbietern von Kreditkarten oder Wallet-Lösungen zusammen.
Als von der Bundesanstalt für Finanzdienstleistungsaufsicht (BaFin) zugelassenes Zahlungsinstitut mit über 16 Jahren Erfahrung im E-Commerce und am POS zu seinen Gunsten ermöglicht die heidelpay-Gruppe Unternehmen jeder Größenordnung den weltweiten Zahlungsverkehr. Der Full-Service-Payment-Dienstleister deckt das gesamte Spektrum der elektronischen Zahlungsabwicklung ab: von der Abwicklung über die Beschaffung, Überwachung und das Risikomanagement bis hin zum Forderungsmanagement. Die voll skalierbaren, modularen Lösungen werden von 30.000 nationalen und internationalen Kunden genutzt. Für E- Commerce, M-Commerce und den stationären Point of Sale stehen die verschiedenen Zahlungsmethoden zur Verfügung.
ENGLISH: On March 19th I took part in the Heidelpay Academy, to be able to support my customers in the integration of all innovative solutions offered by Heidelpay.
I have been a partner since last year and have already integrated direct debit via Heidelpay for a customer.
GERMAN: Am 19.03. habe ich an der Heidelpay Academy teilgenommen, um meinen Kunden in der Zukunft verstärkt bei der Einbindung der innovativen Lösungen von Heidelpay zu unterstützen.
Ich bin schon seit letztem Jahr Partner und habe bereits für einen Kunden das Lastschriftverfahren über Heidelpay integriert.