Thumb-key: A Privacy-conscious android Keyboard Made for Your Thumbs

Thumb-Key

A privacy-conscious keyboard made for your thumbs.

About Thumb-Key

Thumb-Key is a privacy-conscious smart keyboard, made specifically for your thumbs.

It features a 3x3 grid layout, and uses swipes for the less common letters. Its easy to learn, and designed for fast typing speeds.

Instead of relying on profit-driven, privacy-offending word and sentence prediction for accuracy, as do most popular phone keyboards like Gboard and Swiftkey, Thumb-Key uses large keys with predictable positions, to prevent your eyes from hunting and pecking for letters.

As the key positions get ingrained into your muscle memory, eventually you'll be able to approximate the fast speeds of touch-typing, your eyes never having to leave the text edit area.

This project is a follow-up to the now unmaintained (and closed-source) MessageEase Keyboard, which is its main inspiration.

Features

• Highly configurable.
• Customizeable sizing, ThumbKey and MessageEase layouts, dynamic / Material v3 themes, animations, haptic feedback, and audio feedback.
• Open source, AGPL License.

User Guide

• Tap a key, or slide to type a letter.
• Swipe up or down on A to capitalize.
• Double tap the space bar to type a comma, triple tap to type a period.
• Slide left on the backspace key to delete whole words.
• Slide left or right on the spacebar to move the cursor.
• Press the # key to see a numeric keypad, and additional symbols.
• Press the Settings Gear key to configure Thumb-Key.
• Practice typing, and check your words per minute, using monkeytype.com

Thumb-Key Design

A History of Phone Keyboards

Physical keyboards, with the full-size QWERTY layout, were not designed for use on small devices like phones; they were designed specifically for 10 fingers resting on a keybed, sitting on a secure surface.

Phones must be held with the fore-fingers and palm, or held with one hand and typed with the other, leaving only 1 or 2 thumbs (as opposed to 10 fingers) free to perform key-presses. As texting came into being, word prediction came to be seen as the best solution to slow input speeds.

On phones that used the 9-key numeric layout, T9 predictive text was used. Other phones used the full-hand layout with the familiar QWERTY layout, with other proprietary predictive methods.

When phone keyboards became Keyloggers

As phones moved from physical buttons to soft-keyboards, key sizes became smaller and taps more imprecise and error-prone, with better predictive technology picking up the slack.

Smartphone companies like Apple and Google, in an attempt to better their word prediction algorithms, as well as collect potentially profitable information on what their users were typing, began submitting and aggregating all their user's key-taps to their servers, violating user's privacy in the process. Known as Keyloggers, and seen as universally malicious programs on desktop computers, these apps unfortunately became normalized and seen as a necessity on phones.

The lack of innovation on phone keyboard design, is best explained by the potential profitability these companies stand to gain by collecting and aggregating everything a user types; including the commodification of this data directly, or information and trends about you learned from this data, that they can sell to advertisers and 3rd parties. These could include your buying preferences, preferred websites, what you most commonly talk about with friends, and everything you type into search bars and text boxes.

As of today, phone keyboards are in such an abysmal state of privacy, that there aren't many keyboards left that can guarantee not to be logging all of your keystrokes.

MessageEase

As a testament to the stunning lack of innovation on both desktop and phone keyboards, the QWERTY layout from the 1880s is still the dominant layout, even on smartphones in the 21st century.

One company named Exideas created a keyboard app called MessageEase, which relied on the original large 9-key grid of old phones, and managed to acheive comparable fast typing speeds to other keyboards, without relying on big-data-powered word-prediction.

Much research went into MessageEase's design, and many of its users can do > 50 words per minute.

MessageEase is unfortunately unmaintained, and Thumb-Key uses a better alternating-thumb layout letter position (although the original MessageEase Keyboard layout is available in the settings).

Thumb-Key Letter Positions

• Large keys are in a predictable 9-key grid. Eventually, you should be able to keep your eyes on the text input area, rather than hunting-and-pecking for letters, approximating touch-typing.
• Letter positions are based on English text letter frequency. The most common letters are: ETAOINSHR. These 9 letters alone make up ~70% of all English text.
• First 9 letters by frequency are the 9 center key taps. The next 8 are swipes to the center. The next 8 are swipes on the center hub key. Z is last.
• Alternate thumbs for vowels and consonants (Vowels on right side of keyboard, consonants on left). This naturally results in fast digram speeds.
• Prioritize bottom, and right side of keyboard. So EAO should be on the right side, and bottom to top, while TNS is on the left side.

Built With

• Android Jetpack Compose

Installation / Releases

• Releases

How do I add my language or layout?

I'd be happy to accept additions to add more languages, and layouts. To start:

• Read the letter position guidelines above. This means you'll likely need a letter frequency chart for text written in your language.
  • The general rule is: popular vowels on the right, bottom to top, consonants on the left.
• Copy this file, or another sample keyboard from the same folder.
  • Change the characters to whatever you'd like.
  • This file contains both a shifted, and non-shifted keyboard, so make sure you take care of both.
  • You can also add or subtract columns if you want, but the layout must remain a grid. I highly recommend sticking with the 3x3 layout.
• Either open a pull request, or an issue, linking your new keyboard file. I'll handle the rest of the work.

Support / Donate

Thumb-Key will always remain free, open-source software. We've seen many keyboards (and open-source projects in general) go unmaintained after a few years. Recurring donations have proven to be the only way these projects can stay alive.

Your donations directly support full-time development, and help keep this maintained. If you find yourself using Thumb-Key every day, consider donating:

• Support me on Liberapay.
• Support me Patreon.

Crypto

• bitcoin: 1Hefs7miXS5ff5Ck5xvmjKjXf5242KzRtK
• ethereum: 0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01
• monero: 41taVyY6e1xApqKyMVDRVxJ76sPkfZhALLTjRvVKpaAh2pBd4wv9RgYj1tSPrx8wc6iE1uWUfjtQdTmTy2FGMeChGVKPQuV
• cardano: addr1q858t89l2ym6xmrugjs0af9cslfwvnvsh2xxp6x4dcez7pf5tushkp4wl7zxfhm2djp6gq60dk4cmc7seaza5p3slx0sakjutm

Social / Contact

• lemmy.ml/c/thumbkey
• Thumbkey dev chat
• Mastodon

Android IME Resources

• https://github.com/THEAccess/compose-keyboard-ime
• https://stackoverflow.com/questions/65570024/build-software-keyboard-with-jetpack-compose-ime-input-method-with-jetpack-com
• https://developer.android.com/develop/ui/views/touch-and-input/creating-input-method
• https://www.answertopia.com/jetpack-compose/a-jetpack-compose-in-app-purchasing-tutorial/

Download Details:

Author: Dessalines
Source Code: https://github.com/dessalines/thumb-key 
License: AGPL-3.0 license

#kotlin #android #keyboard #app 

Powertoys: Windows System Utilities To Maximize Productivity

Microsoft PowerToys

About

Microsoft PowerToys is a set of utilities for power users to tune and streamline their Windows experience for greater productivity. For more info on PowerToys overviews and how to use the utilities, or any other tools and resources for Windows development environments, head over to learn.microsoft.com!

Installing and running Microsoft PowerToys

Requirements

• Windows 11 or Windows 10 version 2004 (code name 20H1 / build number 19041) or newer.
• Our installer will install the following items:
  • Microsoft Edge WebView2 Runtime bootstrapper. This will install the latest version.

Via GitHub with EXE [Recommended]

Go to Microsoft PowerToys GitHub releases page, click on Assets at the bottom to show the files available in the release. Please use the appropriate PowerToys installer that matches your machine's architecture. For most, it is x64.

• For x64 processors (most common): PowerToysSetup-0.68.0-x64.exe
• For ARM64 processors: PowerToysSetup-0.68.0-arm64.exe

This is our preferred method.

Via Microsoft Store

Install from the Microsoft Store's PowerToys page. You must be using the new Microsoft Store which is available for both Windows 11 and Windows 10.

Via WinGet

Download PowerToys from WinGet. To install PowerToys, run the following command from the command line / PowerShell:

winget install Microsoft.PowerToys -s winget

Other install methods

There are community driven install methods such as Chocolatey and Scoop. If these are your preferred install solutions, you can find the install instructions there.

Contributing

This project welcomes contributions of all types. Help spec'ing, design, documentation, finding bugs are ways everyone can help on top of coding features / bug fixes. We are excited to work with the power user community to build a set of tools for helping you get the most out of Windows.

We ask that before you start work on a feature that you would like to contribute, please read our Contributor's Guide. We will be happy to work with you to figure out the best approach, provide guidance and mentorship throughout feature development, and help avoid any wasted or duplicate effort.

Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution.

For guidance on developing for PowerToys, please read the developer docs for a detailed breakdown. This includes how to setup your computer to compile.

What's Happening

PowerToys Roadmap

Our prioritized roadmap of features and utilities that the core team is focusing on.

0.68 - February 2023 Update

In this release, we focused on releasing new features, stability and improvements.

Highlights

• New utility: Paste as Plain Text allows pasting the text contents of your clipboard without formatting. Note: the formatted text in the clipboard is replaced with the unformatted text. Thanks @carlos-zamora!
• New utility: Mouse Jump allows to quickly move the mouse pointer long distances on a single screen or across multiple screens. Thanks @mikeclayton!
• Add new GPO policies for automatic update downloads and update toast notifications. Thanks @htcfreek!
• Support MSC and CPL files in "Run command" results of PowerToys Run Program plugin. Thanks @htcfreek!
• Add support for log2 and log10 in PowerToys Run Calculator plugin. Thanks @RickLuiken!
• Added experimentation to PowerToys first run experience. There are current page which says "welcome" and a variant with direct instructions on how to use some of the utilities. We want to see if directly showing how to use PowerToys leads to more people using the features :)

General

• Improve metered network detection in runner. Thanks @davidegiacometti!
• Update PowerToys logo used by installer. Thanks @ChaseKnowlden!
• Add new GPO policies for automatic update downloads and update toast notifications. Thanks @htcfreek!
• Update copyright year to 2023. Thanks @ChaseKnowlden!

FancyZones

• Refactored and improved code quality.
• Fix crashing on moving window between monitors with Win + arrows. (This was a hotfix for 0.67)
• Fix issue causing window attributes to not be reset properly. (This was a hotfix for 0.67)
• Fix issue causing window to not be adjusted when layout is changed. (This was a hotfix for 0.67)
• Fix issue causing window not to be unsnapped on drag started. (This was a hotfix for 0.67)
• Fix issue causing layouts not to be applied to new virtual desktops. (This was a hotfix for 0.67)
• Fix issues causing windows not to be restored correctly to their last known zone.

File explorer add-ons

• Add Developer files previewer option to set max file size and fix styling issue. Thanks @Aaron-Junker!
• Improve Developer files previewer exception handling and printing of error messages.
• Fix crash when generating PDF and Gcode file thumbnails. (This was a hotfix for 0.67)

Hosts file editor

• Improve hosts file loading. Thanks @davidegiacometti!
• Improved duplicate hosts finding. Thanks @davidegiacometti!

Keyboard Manager

• Fix typo in Keyboard Manager Editor. Thanks @ChristianLW!

Mouse Utils

• Resolve grammatical error in Mouse Highlighter description. Thanks @WordlessSafe1!
• New utility: Mouse Jump allows to quickly move the mouse pointer long distances on single or across screens. Thanks @mikeclayton!

Paste as Plain Text

• New utility: Paste as Plain Text allows pasting the text contents of your clipboard without formatting. Note: the formatted text in the clipboard is replaced with the unformatted text. Thanks @carlos-zamora!

PowerToys Run

• Show Steam (steam://open/) shortcuts in the Program plugin.
• Localize paths of Program plugin results. Thanks @htcfreek!
• Improved stability of the code used to get the localized names and paths. Thanks @htcfreek!
• Support MSC and CPL files in "Run command" results of Program plugin. Thanks @htcfreek!
• Added missing MSC and CPL settings to the results of Windows Settings plugin. Thanks @htcfreek!
• System plugin: Setting for separate "Open/Empty Recycle bin" results or single result with context menu. (This was implemented based on user feedback for a change in the last build.) Thanks @htcfreek!
• Add support for log2 and log10 in Calculator plugin. Thanks @RickLuiken!
• Removed the TimeZone plugin.
• Fix the crash when loading thumbnail for PDF files. (This was a hotfix for 0.67)

Shortcut Guide

• Added: Dismiss Shortcut Guide with mouse click. Thanks @davidegiacometti!

Quick Accent

• Added Lithuanian characters. Thanks @saulens22!
• Added additional (Chinese) characters. Thanks @ChaseKnowlden!

Settings

• Add missing flyout borders on Windows 10. Thanks @davidegiacometti!
• Add experimentation for oobe landing page. Thanks @chenss3!
• Show icons of user-installed PowerToys Run plugins. Thanks @al2me6!
• Fixed crash when clicking Browse for backup and restore location while running elevated.
• Respect taskbar position when showing system tray flyout. (This was a hotfix for 0.67)
• Show correct Hosts module image. (This was a hotfix for 0.67)

Development

• Turned on C++ code analysis and incrementally fixing warnings.
• Centralize .NET NuGet packages versions. Thanks @snickler!
• Separate PowerToys installer logs and MSI logs to different files.
• Added new GPO rules to the reporting tool.
• Move PowerToys registry entries back to HKLM to fix context menu entries not working on some configurations. (This was a hotfix for 0.67)

What is being planned for version 0.69

For v0.69, we'll work on below:

• Allow installing without UAC.
• New utility: PowerToys Peek
• Stability / bug fixes

PowerToys Community

The PowerToys team is extremely grateful to have the support of an amazing active community. The work you do is incredibly important. PowerToys wouldn’t be nearly what it is today without your help filing bugs, updating documentation, guiding the design, or writing features. We want to say thank you and take time to recognize your work. Month over month, you directly help make PowerToys a better piece of software.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct.

Privacy Statement

The application logs basic telemetry. Our Telemetry Data page (Coming Soon) has the trends from the telemetry. Please read the Microsoft privacy statement for more information.

Build status

Architecture	Solution (Main)	Solution (Stable)	Installer (Main)
x64
ARM64

Download Details:

Author: Microsoft
Source Code: https://github.com/microsoft/PowerToys 
License: MIT license

#csharp #windows #color #picker #desktop #keyboard #managed 

A Flutter Package to Help Add Your Own Custom Keyboard

CustomKeyboard

Add Dependencies

add dependencies in pubspec.yaml file

 custom_flutter_keyboard: ^latest

Steps

build your custom keyboard widget, you need to define follow functions, more details please follow example in Project

const MyKeyboardWidget({
    Key? key,
    required this.controller,
  }) : super(key: key);

  final CustomKeyboardController controller;
  
  /// keep 'name' unique in different custom keyboard widget
  static const CustomTextInputType keyboardType =
      CustomTextInputType(name: 'yourKeyboardType'); 

  /// caculate keyboard height 
  static double getHeight(BuildContext context) {
   
  }

register your custom keyboard widget by CustomKeyboardManager

 CustomKeyboardManager.register(
    MyKeyboardWidget.keyboardType,
    (BuildContext context, CustomKeyboardController controller, String? param) {
      return MyKeyboardWidget(controller: controller);
    },
    MyKeyboardWidget.getHeight,
  );

mock binary message

   CustomKeyboardBinding();

wrap your app by CustomKeyboardApp

   Widget build(BuildContext context) {
    return CustomKeyboardApp(
        child: MaterialApp(
      title: 'Custom KeyBoard',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Custom KeyBoard'),
    ));
  }

wrap widget by CustomKeyboardMediaQueryWidget

   CustomKeyboardMediaQueryWidget(
        child: Builder(builder: (BuildContext context) { 
            return Scaffold(); 
        }));

setup your custom keyboardType in TextField or CupertinoTextField

    TextField(
        keyboardType: MyKeyboardWidget.keyboardType,
    );

support centerModel and fixPadding and receive your custom value change on onResponseValueChange

 CustomKeyboardMediaQueryWidget(
            isCenterModel: true,
            fixPadding: 20,
            onResponseValueChange: (value) {
          
            },)

More Information

For more details, please follow up the example project.

Feel free to pull request when you found issues.

Welcome to connect Email:shawnli1201@gmail.com if you have any questiones.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add custom_flutter_keyboard

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  custom_flutter_keyboard: ^1.1.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:custom_flutter_keyboard/custom_flutter_keyboard.dart'; 

example/lib/main.dart

import 'package:custom_flutter_keyboard/custom_flutter_keyboard.dart';
import 'package:example/my_keyboard_widget.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  registerCustomKeyboard();
  runApp(const MyApp());
}

void registerCustomKeyboard() {
  CustomKeyboardManager.register(
    MyKeyboardWidget.keyboardType,
    (BuildContext context, CustomKeyboardController controller, String? param) {
      return MyKeyboardWidget(controller: controller);
    },
    MyKeyboardWidget.getHeight,
  );
  CustomKeyboardBinding();
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomKeyboardApp(
        child: MaterialApp(
      title: 'Custom KeyBoard',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Custom KeyBoard'),
    ));
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            TextButton(
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => const MixDemoPage()));
                },
                child: const Text('Mix TextField Demo')),
            TextButton(
                onPressed: () {
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => const CenterModelDemoPage()));
                },
                child: const Text('Center Model Demo')),
          ],
        ),
      ),
    );
  }
}

class MixDemoPage extends StatefulWidget {
  const MixDemoPage({Key? key}) : super(key: key);

  @override
  State<MixDemoPage> createState() => _MixDemoPageState();
}

class _MixDemoPageState extends State<MixDemoPage> {
  String _account = '';
  String _pwd = '';
  final TextEditingController _accountController = TextEditingController();
  final TextEditingController _pwdController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _accountController.addListener(() {
      _account = _accountController.text;
    });
    _pwdController.addListener(() {
      _pwd = _pwdController.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CustomKeyboardMediaQueryWidget(
        child: Builder(builder: (BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: const Text('Mix TextField Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('System TextField'),
              TextField(
                  controller: _accountController,
                  decoration: const InputDecoration(labelText: 'Account'),
                  keyboardType: TextInputType.number),
              const SizedBox(height: 20),
              const Text('Custom TextField'),
              TextField(
                  controller: _pwdController,
                  autofocus: true,
                  decoration: const InputDecoration(labelText: 'Password'),
                  keyboardType: MyKeyboardWidget.keyboardType,
                  onSubmitted: (value) {
                    if (kDebugMode) {
                      print(_account);
                      print(_pwd);
                    }
                  })
            ],
          ),
        ),
      );
    }));
  }
}

class CenterModelDemoPage extends StatefulWidget {
  const CenterModelDemoPage({Key? key}) : super(key: key);

  @override
  State<CenterModelDemoPage> createState() => _CenterModelDemoPageState();
}

class _CenterModelDemoPageState extends State<CenterModelDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Center Model Demo'),
        ),
        body: CustomKeyboardMediaQueryWidget(
            isCenterModel: true,
            fixPadding: 20,
            onResponseValueChange: (value) {
              if (kDebugMode) {
                print(value);
              }
            },
            child: Container(
                height: 200,
                color: Colors.grey,
                alignment: Alignment.center,
                child: TextField(
                    decoration: const InputDecoration(labelText: 'Password'),
                    keyboardType: MyKeyboardWidget.keyboardType,
                    onSubmitted: (value) {
                      if (kDebugMode) {
                        print(value);
                      }
                    }))));
  }
} 

Download Details:

Author: Shawnli1201

Source Code: https://github.com/Shawnli1201/CustomKeyBoard

#flutter #custom #keyboard 

Создайте виртуальную клавиатуру в JavaScript

Это простое руководство по JavaScript , которое научит вас создавать виртуальную клавиатуру JavaScript . Виртуальная клавиатура — это своего рода экранный метод ввода.

Если вы используете операционную систему Windows, я уверен, что вы будете использовать виртуальную клавиатуру по умолчанию в Windows. Этот дизайн, который я сделал, немного похож на этот. Он сделан таким современным способом, что вы будете поражены.

Скачать демоверсию

Эту виртуальную клавиатуру можно использовать как для настольных компьютеров, так и для мобильных устройств. Другими словами, в случае с сенсорным экраном этот  экранный визуальный интерфейс  прекрасно работает.

Он не просто разработан. Он реализован с помощью JavaScript, что означает наличие небольшого окна результатов. Если вы нажмете на кнопки на этой экранной клавиатуре , введенный текст появится в поле результата.

Виртуальная клавиатура JavaScript

В этом уроке вы узнаете, как создать виртуальную клавиатуру с помощью ванильного JavaScript . Эту виртуальную клавиатуру можно сравнить с клавиатурой Android.

Вы можете посмотреть демо ниже , чтобы узнать, как работает эта виртуальная клавиатура. Здесь вы найдете живую демонстрацию и исходный код виртуальной клавиатуры JavaScript .

Как видите, эта виртуальная клавиатура JavaScript выполнена в стиле Neumorphism . Это делает дизайн более привлекательным, а кнопки более функциональными.

Во-первых, было создано окно результатов, в котором можно увидеть введенные символы. Проще говоря, дисплей, на котором мы можем видеть всю информацию. На этой виртуальной клавиатуре есть еще одна коробка с множеством кнопок. В основном есть несколько кнопок, пробел и кнопка возврата.

Эту современную виртуальную клавиатуру Javascript очень легко создать. Но для этого вам нужно иметь базовое представление о HTML, CSS и javascript.

Шаг 1:

Отображение виртуальной клавиатуры JavaScript

Теперь я создал дисплей. Ширина отображения этой цифровой клавиатуры javascript составляет 500 пикселей. Поскольку здесь использовался дизайн Neumorphism , вокруг дисплея использовались тени.

<p id=”ip”></p>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: rgb(26, 26, 26);
    font-family: sans-serif;
}
#ip{
    width: 500px;
    min-height: 30px;
    box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
    top: 165px;
    left: 50%;
    margin: -50px auto;
    transform:translateX(-50%) ;
    font-size: 18px;
    text-transform: capitalize;
}

Шаг 2:

Кнопки виртуальной клавиатуры

Теперь все кнопки нужно добавить на виртуальную клавиатуру. Здесь я добавил несколько кнопок в соответствии с моим требованием.

<div class=”keybord”>
        <div class=”row row1″>
            <button>Q</button>
            <button>W</button>
            <button>E</button>
            <button>R</button>
            <button>T</button>
            <button>Y</button>
            <button>U</button>
            <button>I</button>
            <button>O</button>
            <button>P</button>
        </div>
        <div class=”row row2″>
            <button>A</button>
            <button>S</button>
            <button>D</button>
            <button>F</button>
            <button>G</button>
            <button>H</button>
            <button>J</button>
            <button>K</button>
            <button>L</button>
        </div>
            <div class=”row row3″>
                <button>Z</button>
                <button>X</button>
                <button>C</button>
                <button>V</button>
                <button>B</button>
                <button>N</button>
                <button>M</button>
            </div>
            <div class=”row row4″>
                <div class=”space” id=”space”>space</div>
                <div class=”backspace” id=”backspace”>Backspace</div>
            </div>
</div>

Шаг 3:

Дизайн кнопок клавиатуры с помощью CSS

Во-первых, фон кнопок имеет форму прямоугольника шириной 680 пикселей. Ширина каждой кнопки: 50px, высота: 50px.

.keybord{
    box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;
    width: 680px;
    margin:200px auto 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:20px 20px;
    border-radius: 10px;
}
.row{
    margin:5px ;
    user-select: none;
}
 button{
    width: 50px;
    height: 50px;
    font-weight: bold;
    margin: 0 4px;
    border: none;
    background-color: transparent;
    color:white;
    box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black;
    border-radius: 5px;
    cursor: pointer;
}

Кнопки пробела и возврата еще не разработаны в этой мобильной клавиатуре javascript . Я разработал эти кнопки с помощью следующего CSS.

.row4 , .backspace , .space{
    display: flex;
    align-items: center;
    justify-content: center;
}
.keybord .backspace , .space{
    color: white;
    font-weight: bold;
    cursor: pointer;
    /* user-select: none; */
}
.backspace , .space{
    border-radius: 5px;
    box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black;
}
.keybord .space{
    width: 300px;
    height: 50px;
}
.keybord .backspace {
    width: 100px;
    height: 50px;
    margin-left: 15px;
}

Эффект onclick был добавлен к кнопке с помощью CSS ниже. То есть при нажатии на кнопку, кнопка будет меняться.

.keybord .active{
    box-shadow:inset -2px -2px 4px rgb(63, 63, 63) ,
inset 2px 2px 4px black;
    color: yellow;
}

Шаг 4:

Активировать виртуальную клавиатуру с помощью JavaScript

Создайте дизайн экранной виртуальной клавиатуры выше. Однако он еще не эффективен. Сначала определяются константы некоторых элементов HTML. Как мы знаем, мы не можем использовать какой-либо элемент HTML непосредственно в JavaScript.

Прежде чем реализовать эту виртуальную клавиатуру HTML и CSS, позвольте мне дать вам некоторую информацию. Мы будем активировать эти кнопки тремя способами. Это означает, что этой виртуальной клавиатурой можно управлять тремя способами, например, с помощью мыши, внешней клавиатуры и касания.

let button = document.getElementsByTagName(‘button’)
let p = document.getElementById(‘ip’);
let space =document.getElementById(‘space’)
let Backspace = document.getElementById(‘backspace’)

Я договорился активировать эту виртуальную клавиатуру с внешней клавиатурой, используя приведенный ниже JavaScript. Это позволяет вам управлять этой виртуальной клавиатурой javascript с помощью клавиатуры вашего компьютера.

document.body.addEventListener(‘keydown’ , function(index){
    for (let i=0 ; i <button.length ; i++) {
   //UpperCase() method returns the value of the string converted to uppercase
        if(button[i].innerHTML==index.key.toUpperCase()){
            button[i].classList.add(‘active’)
        };
    }
//innerHTML property is part of the Document Object Model
    p.innerHTML+=index.key
    if(index.key==’Backspace’){
        p.innerHTML=p.innerHTML.slice(0 , -10)
    }
})
document.body.addEventListener(‘keyup’ , function(index){
    for(let j=0 ; j<button.length ; j++){
        if(button[j].innerHTML == index.key.toUpperCase()){
            button[j].classList.remove(‘active’)
        }
    }
})

Теперь вы должны выполнять кнопки с помощью мыши. Это означает, что вы можете вручную нажимать на эти кнопки с помощью мыши, и эта кнопка может быть найдена в информационном окне результатов.

for(let x of button){
//MouseDown occurs when the user presses the mouse button
    x.addEventListener(‘mousedown’ , function(){
        x.className=’active’
        p.innerHTML+=x.innerHTML
    })
}
//MouseUp occurs when the user releases the mouse button
for(let y of button){
    y.addEventListener(‘mouseup’ , function(){
        y.className=”
    })
}
space.addEventListener(‘mousedown’,function(){
    space.classList.add(‘active’)
    p.innerHTML+=” “
})
space.addEventListener(‘mouseup’,function(){
    space.classList.remove(‘active’)
})
function back(){
    Backspace.className+=’ active’
    p.innerHTML=p.innerHTML.slice(0 , -1)
}
//onmousedown attribute fires when a mouse button is pressed down on the element
Backspace.onmousedown=back
//onmouseup event occurs when a user releases a mouse button over an element
Backspace.onmouseup=function(){
    Backspace.classList.remove(‘active’)
}

Настало время реализовать эту простую виртуальную клавиатуру для сенсорных экранов. Это позволяет вам управлять этой цифровой клавиатурой с помощью мобильного телефона.

for(let x of button){
//touchstart event occurs when the user touches an element
    x.addEventListener(‘touchstart’ , function(){
        x.className=’active’
    })
}
for(let y of button){
//touchend event occurs when the user removes the finger from an element
    y.addEventListener(‘touchend’ , function(){
        space.classList.remove(‘active’)
    })
}
space.addEventListener(‘touchstart’,function(){
    space.classList.add(‘active’)
})
space.addEventListener(‘touchend’,function(){
    space.classList.remove(‘active’)
})
Backspace.addEventListener(‘touchstart’,function(){
    Backspace.className+=’ active’
})
Backspace.addEventListener(‘touchend’,function(){
    Backspace.classList.remove(‘active’)
})

Выше мы активировали эту виртуальную экранную клавиатуру тремя способами. Пожалуйста, прокомментируйте, как вам нравится этот компонент виртуальной клавиатуры . Используйте кнопку загрузки ниже для исходного кода виртуальной клавиатуры JavaScript.

Оригинальный источник статьи: https://foolishdeveloper.com/

#javascript #keyboard 

在 JavaScript 中创建虚拟键盘

这是一个简单的 JavaScript 教程，将教您如何创建JavaScript 虚拟键盘。虚拟键盘是一种屏幕输入法。

如果您使用的是 Windows 操作系统，我相信您将使用 Windows 中的默认虚拟键盘。我做的这个设计有点像那样。它以如此现代的方式制作，您会惊叹不已。

演示 下载

此虚拟键盘可用于台式机和移动设备。换句话说，在触摸屏的情况下，这个 屏幕上的视觉界面 效果很好。

它不仅仅是设计的。它由 JavaScript 实现，这意味着有一个小的结果框。如果单击此屏幕键盘上的按钮，输入文本将出现在结果框中。

JavaScript 虚拟键盘

在本教程中，您将学习如何使用Vanilla JavaScript创建虚拟键盘。这个虚拟键盘可以比作 Android 键盘。

您可以观看下面的演示以了解此虚拟键盘的工作原理。在这里您可以找到JavaScript 虚拟键盘的现场演示和源代码。

如您所见，这个 JavaScript 虚拟键盘是使用Neumorphism 风格制作的。这使设计看起来更有吸引力，按钮也更实用。

首先，创建了一个结果框，可以在其中看到输入的字符。简单地说，就是一个我们可以看到所有信息的显示器。这个虚拟键盘上还有另一个盒子，上面有很多按钮。基本上有许多按钮、一个空格键和一个退格键。

这个现代 Javascript 虚拟键盘非常容易创建。但是为此，您需要对 HTML、CSS 和 javascript 有基本的了解。

步骤1：

JavaScript 虚拟键盘的显示

现在我已经创建了显示。此 javascript 数字小键盘的显示宽度为 500px。由于此处使用了Neumorphism 设计，因此在显示器周围使用了阴影。

<p id=”ip”></p>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: rgb(26, 26, 26);
    font-family: sans-serif;
}
#ip{
    width: 500px;
    min-height: 30px;
    box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
    top: 165px;
    left: 50%;
    margin: -50px auto;
    transform:translateX(-50%) ;
    font-size: 18px;
    text-transform: capitalize;
}

第2步：

虚拟键盘的按钮

现在所有的按钮都必须添加到虚拟键盘。在这里，我根据我的要求添加了一些按钮。

<div class=”keybord”>
        <div class=”row row1″>
            <button>Q</button>
            <button>W</button>
            <button>E</button>
            <button>R</button>
            <button>T</button>
            <button>Y</button>
            <button>U</button>
            <button>I</button>
            <button>O</button>
            <button>P</button>
        </div>
        <div class=”row row2″>
            <button>A</button>
            <button>S</button>
            <button>D</button>
            <button>F</button>
            <button>G</button>
            <button>H</button>
            <button>J</button>
            <button>K</button>
            <button>L</button>
        </div>
            <div class=”row row3″>
                <button>Z</button>
                <button>X</button>
                <button>C</button>
                <button>V</button>
                <button>B</button>
                <button>N</button>
                <button>M</button>
            </div>
            <div class=”row row4″>
                <div class=”space” id=”space”>space</div>
                <div class=”backspace” id=”backspace”>Backspace</div>
            </div>
</div>

第 3 步：

CSS键盘按钮设计

首先，按钮的背景被赋予宽度为 680px 的盒子形状。每个按钮的宽度：50px，高度：50px。

.keybord{
    box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;
    width: 680px;
    margin:200px auto 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:20px 20px;
    border-radius: 10px;
}
.row{
    margin:5px ;
    user-select: none;
}
 button{
    width: 50px;
    height: 50px;
    font-weight: bold;
    margin: 0 4px;
    border: none;
    background-color: transparent;
    color:white;
    box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black;
    border-radius: 5px;
    cursor: pointer;
}

此javascript 移动键盘尚未设计空格键和退格键。我用以下 CSS 设计了这些按钮。

.row4 , .backspace , .space{
    display: flex;
    align-items: center;
    justify-content: center;
}
.keybord .backspace , .space{
    color: white;
    font-weight: bold;
    cursor: pointer;
    /* user-select: none; */
}
.backspace , .space{
    border-radius: 5px;
    box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black;
}
.keybord .space{
    width: 300px;
    height: 50px;
}
.keybord .backspace {
    width: 100px;
    height: 50px;
    margin-left: 15px;
}

下面的 CSS 已将 onclick 效果添加到按钮。即当你点击按钮时，按钮会发生变化。

.keybord .active{
    box-shadow:inset -2px -2px 4px rgb(63, 63, 63) ,
inset 2px 2px 4px black;
    color: yellow;
}

步骤4：

使用 JavaScript 激活虚拟键盘

创建上面的屏幕虚拟键盘的设计。但是，它尚未生效。首先，确定一些 HTML 元素的常量。正如我们所知，我们不能直接在 JavaScript 中使用任何 HTML 元素。

在实现这个虚拟键盘 HTML 和 CSS 之前，让我给你一些信息。我们将以三种方式激活这些按钮。这意味着这个虚拟键盘可以通过鼠标、外接键盘和触摸三种方式进行控制。

let button = document.getElementsByTagName(‘button’)
let p = document.getElementById(‘ip’);
let space =document.getElementById(‘space’)
let Backspace = document.getElementById(‘backspace’)

我已经安排使用下面的 JavaScript 使用外部键盘激活此虚拟键盘。这允许您使用计算机的键盘控制此 javascript 虚拟键盘。

document.body.addEventListener(‘keydown’ , function(index){
    for (let i=0 ; i <button.length ; i++) {
   //UpperCase() method returns the value of the string converted to uppercase
        if(button[i].innerHTML==index.key.toUpperCase()){
            button[i].classList.add(‘active’)
        };
    }
//innerHTML property is part of the Document Object Model
    p.innerHTML+=index.key
    if(index.key==’Backspace’){
        p.innerHTML=p.innerHTML.slice(0 , -10)
    }
})
document.body.addEventListener(‘keyup’ , function(index){
    for(let j=0 ; j<button.length ; j++){
        if(button[j].innerHTML == index.key.toUpperCase()){
            button[j].classList.remove(‘active’)
        }
    }
})

现在您必须用鼠标执行按钮。这意味着您可以使用鼠标手动单击这些按钮，并且可以在信息结果框中找到该按钮。

for(let x of button){
//MouseDown occurs when the user presses the mouse button
    x.addEventListener(‘mousedown’ , function(){
        x.className=’active’
        p.innerHTML+=x.innerHTML
    })
}
//MouseUp occurs when the user releases the mouse button
for(let y of button){
    y.addEventListener(‘mouseup’ , function(){
        y.className=”
    })
}
space.addEventListener(‘mousedown’,function(){
    space.classList.add(‘active’)
    p.innerHTML+=” “
})
space.addEventListener(‘mouseup’,function(){
    space.classList.remove(‘active’)
})
function back(){
    Backspace.className+=’ active’
    p.innerHTML=p.innerHTML.slice(0 , -1)
}
//onmousedown attribute fires when a mouse button is pressed down on the element
Backspace.onmousedown=back
//onmouseup event occurs when a user releases a mouse button over an element
Backspace.onmouseup=function(){
    Backspace.classList.remove(‘active’)
}

现在是时候为触摸屏实现这个简单的虚拟键盘了。这使您可以通过手机控制此数字键盘。

for(let x of button){
//touchstart event occurs when the user touches an element
    x.addEventListener(‘touchstart’ , function(){
        x.className=’active’
    })
}
for(let y of button){
//touchend event occurs when the user removes the finger from an element
    y.addEventListener(‘touchend’ , function(){
        space.classList.remove(‘active’)
    })
}
space.addEventListener(‘touchstart’,function(){
    space.classList.add(‘active’)
})
space.addEventListener(‘touchend’,function(){
    space.classList.remove(‘active’)
})
Backspace.addEventListener(‘touchstart’,function(){
    Backspace.className+=’ active’
})
Backspace.addEventListener(‘touchend’,function(){
    Backspace.classList.remove(‘active’)
})

上面我们已经通过三种方式激活了这个虚拟屏幕键盘。请评论您对这个虚拟键盘组件的喜爱程度。使用下面的下载按钮获取 JavaScript 虚拟键盘的源代码。

文章原文出处：https: //foolishdeveloper.com/

#javascript #keyboard 

Create a Virtual Keyboard in JavaScript

This is a simple JavaScript tutorial that will teach you how to create a JavaScript Virtual Keyboard. The virtual keyboard is a kind of on-screen input method.

If you’re using the Windows operating system, I’m sure you’ll be using the default virtual keyboard in Windows. This design I made is a bit like that. It is made in such a modern way that you will be amazed.

Demo Download

This virtual keyboard can be used for desktop as well as mobile. In other words, in the case of the touch screen, this on-screen visual interface works beautifully.

It’s not just designed. It is implemented by JavaScript which means there is a small result box. If you click on the buttons on this on-screen keyboard, the input text will appear in the result box.

JavaScript Virtual Keyboard

In this tutorial, you will learn how to create a virtual keyboard using Vanilla JavaScript. This virtual keyboard can be compared to the Android keyboard.

You can watch the demo below to know how this virtual keyboard works. Here you will find the live demo and source code of the JavaScript virtual keyboard.

As you can see, this JavaScript Virtual Keyboard is made using the Neumorphism style. This makes the design look more attractive and the buttons more functional.

First, a result box has been created in which the input characters can be seen. Simply put, a display in which we can see all the information. There is another box that has many buttons on this Virtual Keyboard. There are basically a number of buttons, a space, and a backspace button.

This Modern Javascript Virtual Keyboard is very easy to create. But for this, you need to have a basic idea about HTML, CSS, and javascript.

Step 1:

Display of JavaScript Virtual Keyboard

Now I have created the display. The width of the display of this javascript numeric keypad is 500px. Since Neumorphism design has been used here, shadows have been used around the display.

<p id=”ip”></p>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: rgb(26, 26, 26);
    font-family: sans-serif;
}
#ip{
    width: 500px;
    min-height: 30px;
    box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;
    text-align: center;
    color: white;
    letter-spacing: 1px;
    position: absolute;
    top: 165px;
    left: 50%;
    margin: -50px auto;
    transform:translateX(-50%) ;
    font-size: 18px;
    text-transform: capitalize;
}

Step 2:

The buttons of the Virtual Keyboard

Now all the buttons have to be added to the virtual keyboard. Here I have added some buttons as per my requirement.

<div class=”keybord”>
        <div class=”row row1″>
            <button>Q</button>
            <button>W</button>
            <button>E</button>
            <button>R</button>
            <button>T</button>
            <button>Y</button>
            <button>U</button>
            <button>I</button>
            <button>O</button>
            <button>P</button>
        </div>
        <div class=”row row2″>
            <button>A</button>
            <button>S</button>
            <button>D</button>
            <button>F</button>
            <button>G</button>
            <button>H</button>
            <button>J</button>
            <button>K</button>
            <button>L</button>
        </div>
            <div class=”row row3″>
                <button>Z</button>
                <button>X</button>
                <button>C</button>
                <button>V</button>
                <button>B</button>
                <button>N</button>
                <button>M</button>
            </div>
            <div class=”row row4″>
                <div class=”space” id=”space”>space</div>
                <div class=”backspace” id=”backspace”>Backspace</div>
            </div>
</div>

Step 3:

Keyboard Button Design by CSS

First, the background of the buttons is given the shape of a box with width: 680px used. The width of each button: 50px, height: 50px.

.keybord{
    box-shadow: -3px -3px 5px rgb(63, 63, 63) , 3px 3px 5px black;
    width: 680px;
    margin:200px auto 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:20px 20px;
    border-radius: 10px;
}
.row{
    margin:5px ;
    user-select: none;
}
 button{
    width: 50px;
    height: 50px;
    font-weight: bold;
    margin: 0 4px;
    border: none;
    background-color: transparent;
    color:white;
    box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black;
    border-radius: 5px;
    cursor: pointer;
}

The space and backspace buttons are not yet designed in this javascript mobile keyboard. I have designed those buttons with the following CSS.

.row4 , .backspace , .space{
    display: flex;
    align-items: center;
    justify-content: center;
}
.keybord .backspace , .space{
    color: white;
    font-weight: bold;
    cursor: pointer;
    /* user-select: none; */
}
.backspace , .space{
    border-radius: 5px;
    box-shadow: -2px -2px 4px rgb(63, 63, 63) , 2px 2px 4px black;
}
.keybord .space{
    width: 300px;
    height: 50px;
}
.keybord .backspace {
    width: 100px;
    height: 50px;
    margin-left: 15px;
}

The onclick effect has been added to the button by the CSS below. That is, when you click on the button, the button will change.

.keybord .active{
    box-shadow:inset -2px -2px 4px rgb(63, 63, 63) ,
inset 2px 2px 4px black;
    color: yellow;
}

Step 4:

Activate Virtual Keyboard using JavaScript

Create the design of the onscreen virtual keyboard above. However, it is not yet effective. First, the constants of some HTML elements are determined. As we know we cannot use any HTML element directly in JavaScript.

Before implementing this virtual keyboard HTML, and CSS let me give you some information. We will activate these buttons in three ways. This means that this virtual keyboard can be controlled in 3 ways, such as with the mouse, with the external keyboard, and touch.

let button = document.getElementsByTagName(‘button’)
let p = document.getElementById(‘ip’);
let space =document.getElementById(‘space’)
let Backspace = document.getElementById(‘backspace’)

I have arranged to activate this Virtual Keyboard with the external keyboard using the JavaScript below. This allows you to control this javascript virtual keyboard with your computer’s keyboard.

document.body.addEventListener(‘keydown’ , function(index){
    for (let i=0 ; i <button.length ; i++) {
   //UpperCase() method returns the value of the string converted to uppercase
        if(button[i].innerHTML==index.key.toUpperCase()){
            button[i].classList.add(‘active’)
        };
    }
//innerHTML property is part of the Document Object Model
    p.innerHTML+=index.key
    if(index.key==’Backspace’){
        p.innerHTML=p.innerHTML.slice(0 , -10)
    }
})
document.body.addEventListener(‘keyup’ , function(index){
    for(let j=0 ; j<button.length ; j++){
        if(button[j].innerHTML == index.key.toUpperCase()){
            button[j].classList.remove(‘active’)
        }
    }
})

Now you have to execute the buttons with the mouse. This means that you can manually click on those buttons using the mouse and that button can be found in the information result box.

for(let x of button){
//MouseDown occurs when the user presses the mouse button
    x.addEventListener(‘mousedown’ , function(){
        x.className=’active’
        p.innerHTML+=x.innerHTML
    })
}
//MouseUp occurs when the user releases the mouse button
for(let y of button){
    y.addEventListener(‘mouseup’ , function(){
        y.className=”
    })
}
space.addEventListener(‘mousedown’,function(){
    space.classList.add(‘active’)
    p.innerHTML+=” “
})
space.addEventListener(‘mouseup’,function(){
    space.classList.remove(‘active’)
})
function back(){
    Backspace.className+=’ active’
    p.innerHTML=p.innerHTML.slice(0 , -1)
}
//onmousedown attribute fires when a mouse button is pressed down on the element
Backspace.onmousedown=back
//onmouseup event occurs when a user releases a mouse button over an element
Backspace.onmouseup=function(){
    Backspace.classList.remove(‘active’)
}

Now is the time to implement this simple virtual keyboard for touch screens. This allows you to control this digital keyboard by mobile.

for(let x of button){
//touchstart event occurs when the user touches an element
    x.addEventListener(‘touchstart’ , function(){
        x.className=’active’
    })
}
for(let y of button){
//touchend event occurs when the user removes the finger from an element
    y.addEventListener(‘touchend’ , function(){
        space.classList.remove(‘active’)
    })
}
space.addEventListener(‘touchstart’,function(){
    space.classList.add(‘active’)
})
space.addEventListener(‘touchend’,function(){
    space.classList.remove(‘active’)
})
Backspace.addEventListener(‘touchstart’,function(){
    Backspace.className+=’ active’
})
Backspace.addEventListener(‘touchend’,function(){
    Backspace.classList.remove(‘active’)
})

Above we have activated this virtual onscreen keyboard in three ways. Please comment on how you like this Virtual Keyboard component. Use the download button below for the source of JavaScript Virtual Keyboard.

Original article source at: https://foolishdeveloper.com/

#javascript #keyboard 

Create Customized Keyboards in Flutter

Allows you to create customized keyboards to your liking and use them with [TextField].

Important

This package is considered to be in Alpha stage. Use at your own risk. Documentation is lacking and there are no tests yet. These will be added within the next months.

Feedback or contributions are always welcome.

Features

• Customized keyboards can be anything you like - they are essentially a widget created by you.
• Shows and hides the customized keyboard when the text field is focused or looses focus respectively.
• [onFieldSubmitted] is working as well as having special buttons such as backspace or next.

Getting started

• Add the package to your pubspec.yaml
• Wrap your Scaffold in [KeyboardWrapper]
• Use [CustomTextField] instead of [TextField]
• Use [CustomTextFormField] instead of [TextFormField]
• Create your own customized keyboard (tutorial will follow)

That's it

Usage

More info to follow.

Additional information

This is a preliminary package. More details will follow soon

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add customized_keyboard

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  customized_keyboard: ^0.8.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:customized_keyboard/customized_keyboard.dart'; 

Download Details:

Author: dani-weiss

Source Code: https://github.com/dani-weiss/flutter_customized_keyboard

#flutter #keyboard 

Handle Keyboard Actions in Selenium

Handle Keyboard Actions in Selenium

In this blog we will learn how we can handle Keyboard Actions using selenium Webdriver.Before starting the blog first we must know what is Actions Class how it is used? So,Let’s start.

What is the actions class in Selenium Webdriver?

Actions like clicking a button, similarly entering a keyword in the search bar are prime examples of how we use a mouse or keyboard. Hence ,these interactions are done through the mouse and the keyboard can be automated by using the Actions class in Selenium.

Consequently ,the Actions class is the user-facing API for emulating complex action events. We can directly use this class rather than using the input devices, i.e. keyboard and mouse.

Keyboard Actions

The various keyboard actions that are provided by the Actions class are:-

send_keys(*keys_to_send)

Send keys to the element that is currently in focus.

key_down(value, element=None)

Sends a key press without performing the release. It should only be used with modifier keys like Control, Alt, and Shift.

key_up(value, element=None)

Releases a key. It should only be used with modifier keys like Control, Alt, and Shift.

How to simulate keyboard typing

sendKeys()

Using the Actions class in Selenium, we can implement the sendKeys() method to type specific values in the application.

Code:

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class KeyboardActions {
    public static void main(String[] args) throws InterruptedException{
        System.setProperty("webdriver.chrome.driver", "drivers/chromedriver");
        WebDriver driver = new ChromeDriver();

        //sendKeys()
        driver.get("https://google.com");
        driver.findElement(By.name("q")).sendKeys("selenium"+Keys.ENTER);

        Thread.sleep(2000);
        driver.quit();
    }
}

How to simulate pressing key combination

keyDown()

This method simulates a keyboard action when a specific keyboard key needs to press. So, whenever you need to press a key and then perform specific other actions, we can use the keyDown() method to keep the key pressed.

Code:

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

public class KeyboardActions {
    public static void main(String[] args) throws InterruptedException{
        System.setProperty("webdriver.chrome.driver", "drivers/chromedriver");
        WebDriver driver = new ChromeDriver();

        //keyDown()
        driver.get("https://google.com");
        driver.findElement(By.name("q")).sendKeys("selenium"+Keys.ENTER);
        Actions actionProvider=new Actions(driver);
        Action keyDown = actionProvider.keyDown(Keys.CONTROL).sendKeys("a").build();
        keyDown.perform();
        Thread.sleep(2000);
        driver.quit();
    }
}

How to release pressed keys

keyUp()

This method first focusses on the web element, which gets passed as a parameter to the method. Then, it releases the mentioned key on that Web Element.

Code:

import org.openqa.selenium.By;
import org.openqa.selenium.Keys;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

public class KeyboardActions {
    public static void main(String[] args) throws InterruptedException{
        System.setProperty("webdriver.chrome.driver", "drivers/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("https://google.com");
        Actions actions = new Actions(driver);
        WebElement searchBox = driver.findElement((By.name("q")));
        actions.keyDown(Keys.SHIFT).sendKeys(searchBox,"selenium")
        .keyUp(Keys.SHIFT).sendKeys("selenium").perform();
        Thread.sleep(2000);
        searchBox.clear();

        Thread.sleep(2000);
        driver.quit();
    }
}

How to clear the text

clear()

Thanks for reading!!

References:

https://www.selenium.dev/documentation/webdriver/actions_api/keyboard/

Original article source at: https://blog.knoldus.com/

#selenium #action #keyboard 

HotKey: Simple Global Shortcuts in MacOS

HotKey

Simple global shortcuts in macOS. HotKey wraps the Carbon APIs for dealing with global hot keys to make it easy to use in Swift.

HotKey, along with Color, were created for use in Contrast, a macOS app for checking designs for accessible color combinations.

Installation

Carthage

For installation with Carthage, simply add the following to your Cartfile:

github "soffes/HotKey"

Swift Package Manager

For installation with Swift Package Manager, simply add the following to your Package.swift:

.package(url: "https://github.com/soffes/HotKey", from: "0.1.2")

CocoaPods

For installation with CocoaPods, simply add the following to your Podfile:

pod 'HotKey'

Usage

Simply initialize a HotKey with a key and modifiers:

// Setup hot key for ⌥⌘R
let hotKey = HotKey(key: .r, modifiers: [.command, .option])

This is a convenice initializer that creates a KeyCombo for you. You can also initialize with a Carbon key code and Carbon modifier flags if you’re feeling old school.

Now you can set the keyDownHandler and get callbacks for when your hot key is pressed:

hotKey.keyDownHandler = {
  print("Pressed at \(Date())")
}

You can also implement hotKey.keyUpHandler if you’d like.

You don’t need to think about when handlers are registered and unregistered. This all happens automatically based on the HotKey object’s lifecycle.

Thanks

HotKey was heavily inspired by PTHotKey.

Download Details:

Author: Soffes
Source Code: https://github.com/soffes/HotKey 
License: MIT license

#swift #keyboard #macos 

Ninja-keys: Keyboard Shortcuts interface for Your Website

Ninja Keys

Keyboard shortcut interface for your website that works with Vanilla JS, Vue, and React.

Motivation

A lot of applications support a common pattern where the user hits ⌘+k (or ctrl+k) and a search UI dialog appears. I've recently seen this in Notion, Slack, Linear, Vercel and Algolia, but I'm sure there are plenty more. Apple Spotlight, Alfred and the Raycast app also have a similar pattern, but with different shortcuts. There are already some libraries built for this, but they are too framework specific, like Laravel only or React only Nevertheless, mine is not a silver bullet and if you need more framework integration, check them out too.

I needed a keyboard interface for navigation with static websites without any frameworks. At the same time, I have a few Vue projects where something like this could be useful, so I decided to give it a try for Web Components and Lit Element.

Integrations

• Vue 3 Example - Codesandbox
• Vue 2 Example - Codesandbox
• React Example - Codesandbox
• React/NextJS
• Static Html - Codesandbox
• Svelte - Codesandbox
• SolidJS wrapper

Features

• Keyboard navigation
• Light and dark theme built in
• Built-in icon support from Material font and custom svg icons
• Nested menu - a tree or flat data structure can be used
• Auto register your shortcuts
• Root search - for example, if you search "Dark," it will find it within the "Theme" submenu
• CSS variable to customize the view
• Customizable hotkeys to open/close etc. Choose what best fits your website.

Why the "Ninja" name?

Because it appears from nowhere and executes any actions quickly... Or because it allows your users to become keyboard ninjas 🙃

Install from NPM

npm i ninja-keys

Import if you are using webpack, rollup, vite or other build system.

import 'ninja-keys';

Install from CDN

Mostly for usage in HTML/JS without a build system.

<script type="module" src="https://unpkg.com/ninja-keys?module"></script>

or inside your module scripts

<script type="module">
  import {NinjaKeys} from 'https://unpkg.com/ninja-keys?module';
</script>

Usage

Add the tag to your HTML.

<ninja-keys> </ninja-keys>

<script>
  const ninja = document.querySelector('ninja-keys');
  ninja.data = [
    {
      id: 'Projects',
      title: 'Open Projects',
      hotkey: 'ctrl+N',
      icon: 'apps',
      section: 'Projects',
      handler: () => {
        // it's auto register above hotkey with this handler
        alert('Your logic to handle');
      },
    },
    {
      id: 'Theme',
      title: 'Change theme...',
      icon: 'desktop_windows',
      children: ['Light Theme', 'Dark Theme', 'System Theme'],
      hotkey: 'ctrl+T',
      handler: () => {
        // open menu if closed. Because you can open directly that menu from it's hotkey
        ninja.open({ parent: 'Theme' });
        // if menu opened that prevent it from closing on select that action, no need if you don't have child actions
        return {keepOpen: true};
      },
    },
    {
      id: 'Light Theme',
      title: 'Change theme to Light',
      icon: 'light_mode',
      parent: 'Theme',
      handler: () => {
        // simple handler
        document.documentElement.classList.remove('dark');
      },
    },
    {
      id: 'Dark Theme',
      title: 'Change theme to Dark',
      icon: 'dark_mode',
      parent: 'Theme',
      handler: () => {
        // simple handler
        document.documentElement.classList.add('dark');
      },
    },
  ];
</script>

Library using flat data structure inside, as in the example above. But you can also use a tree structure as below:

{
  id: 'Theme',
  children: [
    { id: 'light' title: 'light_mode', },
    { id: 'System Theme',
      children: [
        { title: 'Sub item 1' },
        { title: 'Sub item 2' }
      ]
    }
  ]
}

Attributes

Example

<ninja-keys placeholder="Must app is awesome" openHotkey="cmd+l" hideBreadcrumbs></ninja-keys>

Data

Array of INinjaAction - interface properties below | Name | Type | Description | |----------|-------------------------|----------------------------------------------------------------------------------------| | id | string | Unique id/text. Will be displayed as breadcrumb in multimenu | | title | string | Title of action | | hotkey | string(optional) | Shortcut to display and register | | handler | Function(optional) | Function to execute on select | | mdIcon | string(optional) | Material Design font icon name | | icon | string(optional) | Html to render as custom icon | | parent | string(optional) | If using flat structure use id of actions to make a multilevel menu | | keywords | string(optional) | Keywords to use for search | | children | Array(optional) | If using flat structure then ids of child menu actions. Not required on tree structure | | section | string(optional) | Section text. Like a header will be group with other same sections |

Methods

Example

const ninja = document.querySelector('ninja-keys');
ninja.open() 
// or
ninja.open({ parent: 'Theme' })

Events

Component wide events

Both handler of action and component event selected emitted when user submit form or select item.

But event selected can be used to handle edge cases, so it's not recommended to write each action logic here. It’s better to use the action handler property.

For example, if a user enters a search query and there is an empty list, listening to this event you can handle that.

ninja.addEventListener('change', (event) => {
  console.log('ninja on change', event.detail);
  // detail = {search: 'your search query', actions: Array<NinjaAction>}
})
ninja.addEventListener('selected', (event) => {
  console.log('ninja on selected', event.detail);
  // detail = {search: 'your search query', action: NinjaAction | undefined }
  if (event.detail.action){
  // perform API search for example
  }
   
})

Themes

Component supports a dark theme out-of-box. You just need to add a class.

<ninja-keys class="dark"></ninja-keys>

If you need more style control, use any of the CSS variables below.

CSS variables

Example

ninja-keys {
  --ninja-width: 400px;
}

CSS Shadow Parts

Allowing you to style specific elements from your style. Because styles are encapsulated by Shadow DOM, it will be annoying to create css variables for all properties. That's why you can use ::part to make a custom look for the component. It's supported by all modern browsers

Example style using parts

ninja-keys::part(actions-list) {
  padding: 8px;
}
ninja-keys::part(ninja-action) {
  border-radius: 8px;
  border-left: none;
}

ninja-keys::part(ninja-selected) {
  background: rgba(51, 51, 51, 0.1);
}


ninja-keys::part(ninja-input) {
  color: #14b8a6;
}

ninja-keys::part(ninja-input)::placeholder {
  color: #f43f5e;
}

ninja-keys::part(ninja-input-wrapper) {
  background: rgba(244, 63, 93, 0.3);
}

Icons

By default, components use icons from https://fonts.google.com/icons

For example, you can just set mdIcon to light_mode to render a sun icon.

To add Material icons for your website, you need to add them to your HTML, for example

<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

If you want custom icons, you can use svg or img to insert it with an icon property for action with ninja-icon class. Example:

{
  title: 'Search projects...',
  icon: `<svg xmlns="http://www.w3.org/2000/svg" class="ninja-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
  </svg>`,
  section: 'Projects',
},

You can also change the width and font using CSS variables

ninja-keys {
  --ninja-icon-size: 1em;
}

Change or hide footer

<ninja-keys> 
  <div slot="footer">You can use a custom footer or empty div to hide it</div>
</ninja-keys>

Dev Server

npm run start

Linting

To lint the project run:

npm run lint

Formatting

Prettier is used for code formatting. It has been pre-configured according to the Lit's style.

Demo

https://ninja-keys-demo.vercel.app/

Download Details:

Author: ssleptsov
Source Code: https://github.com/ssleptsov/ninja-keys 
License: MIT license

#typescript #react #keyboard #vue #svelte 

A Swift Library That Helps You Build Custom Keyboard Extensions

About KeyboardKit

KeyboardKit is a Swift library that helps you build custom keyboards with Swift and SwiftUI. It extends the native keyboard APIs and provides you with a lot more functionality than is otherwise available.

The end result can look something like this...or entirely different:

KeyboardKit lets you create keyboards that mimic the iOS stock keyboard in a single line of code. These keyboards can be customized to great extent to change their input keys, keyboard layout, design, behavior etc.

You can also use entirely custom views with the rich features of KeyboardKit, to create completely custom keyboard extensions. Most of the KeyboardKit features can be used on all major Apple platforms as well.

Supported Platforms

KeyboardKit supports iOS 13, macOS 11, tvOS 13 and watchOS 6.

Although KeyboardKit builds on all platform, some features are unavailable on some platforms.

Installation

KeyboardKit can be installed with the Swift Package Manager:

https://github.com/KeyboardKit/KeyboardKit.git

or with CocoaPods:

pod KeyboardKit

You can add the library to the main app, the keyboard extension and any other targets that need it.

Getting started

The online documentation has a getting-started guide that will help you get started with the library.

Documentation

The online documentation has articles, code examples etc. that let you overview the various parts of the library and understand how they all connect to each other.

The online documentation is currently iOS-specific. To generate documentation for other platforms, open the package in Xcode, select a simulator then run Product/Build Documentation.

Localization

KeyboardKit is localized in 60 keyboard-specific locales (read more):

🇦🇱 🇦🇪 🇦🇲 🇧🇾 🇧🇬 🇦🇩 🏳️ 🇭🇷 🇨🇿 🇩🇰 
 

🇳🇱 🇧🇪 🇺🇸 🇬🇧 🇺🇸 🇪🇪 🇫🇴 🇵🇭 🇫🇮 🇫🇷 
 

🇧🇪 🇨🇭 🇬🇪 🇩🇪 🇦🇹 🇨🇭 🇬🇷 🇺🇸 🇮🇱 🇭🇺 
 

🇮🇸 🇮🇩 🇮🇪 🇮🇹 🇹🇯 🇹🇯 🇹🇯 🇱🇻 🇱🇹 🇲🇰 
 

🇲🇾 🇲🇹 🇲🇳 🇳🇴 🇮🇷 🇵🇱 🇵🇹 🇧🇷 🇷🇴 🇷🇺 
 

🇷🇸 🇷🇸 🇸🇰 🇸🇮 🇪🇸 🇰🇪 🇸🇪 🇹🇷 🇺🇦 🇺🇿 
 

Features

KeyboardKit comes packed features to help you build amazing and powerful keyboards:

• 💥 Actions - KeyboardKit comes with keyboard actions like characters, emojis, actions, custom ones etc.
• 🎨 Appearance - KeyboardKit comes with an appearance engine that lets you easily style your keyboards.
• 💡 Autocomplete - KeyboardKit can present autocomplete suggestions as the user types.
• 🗯 Callouts - KeyboardKit can show input callouts, as well as long press callouts with secondary actions.
• 😊 Emojis - KeyboardKit defines emojis and emoji categories that you can use in your own keyboards.
• ⌨️ External Keyboards - KeyboardKit lets you detect whether or not an external keyboard is used.
• 👋 Feedback - KeyboardKit keyboards can give and haptic feedback feedback as the user types.
• 👆 Gestures - KeyboardKit comes with keyboard-specific gestures that you can use in your own keyboards.
• 🔤 Input - KeyboardKit supports creating alphabetic, numeric and symbolic and custom input sets.
• 💱 Layout - KeyboardKit supports creating keyboard layouts for various devices, locales etc.
• ⌨️ Keyboard - KeyboardKit supports keyboard types like alphabertic, can inspect a keyboard's state etc.
• 🌐 Locales- KeyboardKit defines keyboard-specific locales with localized content and assets.
• 👁 Previews - KeyboardKit defines a bunch of tools that simplify previewing keyboard views in SwiftUI.
• ➡️ Proxy - KeyboardKit defines a bunch of extensions to UITextDocumentProxy.
• 🚏 Routing - KeyboardKit lets you route text to other destinations than the main app.
• ⬅️ RTL - KeyboardKit supports RTL (right-to-left) locales, such as Arabic, Persian, Kurdish etc.
• ⚙️ Settings - KeyboardKit has tools for accessing and linking to an app's keyboard settings.
• 🎨 Styles - KeyboardKit defines a bunch of styles that simplify customizing the look of various components.

KeyboardKit Pro

KeyboardKit Pro extends KeyboardKit with pro features, such as additional locales, autocomplete engines, more extensions, additional views etc. It lets you create fully localized system keyboards with a single line of code.

KeyboardKit Pro requires a commercial license. Licenses can be purchased from the website or from Gumroad.

Demo Applications

This project contains a Demo folder with three demo apps that lets you try out KeyboardKit.

Demo uses KeyboardKit and lets you type in a light and dark text field. It has three keyboards:

• English has a SystemKeyboard with the standard, English locale.
• Unicode has a SystemKeyboard with custom, unicode-based inputs.
• Custom has a completely custom input sets and keyboard layout.

ProDemo uses KeyboardKit Pro and supports all keyboard locales, LTR and RTL, autocomplete etc. It has two keyboards:

• System LTR has a SystemKeyboard with all left-to-right locales.
• System RTL has a SystemKeyboard with all right-to-left locales.

Just open and run any of these projects, then enable the keyboards you want to try under System Settings.

Note that you need to enable full access to try some features, like audio and haptic feedback.

Contact

Feel free to reach out if you have questions or if you want to contribute in any way:

• E-mail: info@getkeyboardkit.com
• Twitter: @getkeyboardkit
• Website: getkeyboardkit.com

Download Details:

Author: KeyboardKit
Source Code: https://github.com/KeyboardKit/KeyboardKit 
License: MIT license

#swift #emoji #macos #keyboard #ios 

17 Open Source Technologists Share Their Popular Keyboards

Whether you are looking for comfort or cool-factor, choosing a keyboard is a deeply personal decision. Here are some of our favorite keyboards.

Keyboards are necessary to work with a computer system whether it's for coding, writing, or moving around items in a spreadsheet. They allow access to a computer's peripherals and are used to get deep into the operating system of any computer. Keyboards come in all shapes and sizes. Some are more comfortable to use than others. We asked our community members to share the best (and the worst) keyboard they'd ever used. Some of the answers might surprise you!

Top 4 favorite keyboards

Keyboards rank right after editors and languages on the official list of things that programmers argue about.

My favorite keyboards:

• NeXT Extended Keyboard: With the pipe in the right place.
• Apple Macintosh II Extended Keyboard: Those buckling springs felt great!
• IBM Model M: Oh what a joyous noise!
• Tokyo 60 HHKB (Happy Hacking KeyBoard) kit: Just the keyboard I always wanted.

—Erik O'Shaughnessy

Two-handed layout

Probably the most obscure keyboard would be the Maltron one-handed keyboard I ended up using for several months while recovering from RSI—it was actually really good to use once you learn where the keys are!
 

(Ruth Cheesley CC BY-SA 4.0)

 
My favorite keyboard of all time is the one I currently have, the Kinesis Advantage2 LF. I have mapped it as close as I could get to the Maltron two-handed layout (which is a bajillion times more efficient, once you have re-mapped your brain to a different layout). Took me about a year to be fully efficient, but I can still use my hands so it was worth the hard work!

(Ruth Cheesley, CC BY-SA 4.0)

 
I wrote about becoming a bilingual typist here and did a mini video series charting my progress in learning one-handed typing (while learning how to record videos for work!) which is on YouTube.

—Ruth Cheesley

All the feels

I bought a Logitech MX Keys wireless keyboard at the beginning of the pandemic and I just love the feel and responsiveness of the keys when I type. It's by far my favorite keyboard of all time.

—Will Kelly

Plug-and-play

(Miriam Goldman CC BY-SA 4.0)

The best keyboard is my current one. It's a Logitech K850 and it pairs with a mouse. It's wireless and isn't a huge drain on batteries. It comes with a nice little pad for the heel of your hand, and if you prop it up with the stand, it ends up being at the perfect height. I don't have much time to spend configuring my peripherals, so having this be plug-and-play is fantastic.

—Miriam Goldman

Nostalgic keyboards

Probably my favorite quirky keyboard to use is a DIY 7-key chorder based on this design (great for wearable computing projects where you want a fully functional keyboard that leaves one of your hands free). You can find some images from mine at various stages of prototyping, along with BoM and open (GPL 3.0) schematics and PCB etch here.

I also have a nostalgic fondness for the IBM Model M. You need a particular kind of powered PS/2 to USB converter in order to use one on modern machines.

I've always wanted a Symbolics Lisp "Space-cadet" but they're quite hard to come by. Perhaps someday…

While it's not even remotely cheap, I love my 3" RGB underlit SUZOHAPP trackball. It's like I'm playing Centipede at my workstation!

I wired it up with three RGB backlit arcade buttons (available from the same supplier) so that it operates just like a 3-button mouse in my XWindows session.

—Jeremy Stanley

The best keyboard

I have a Vortex Race 3 with Cherry MX Silver switches and it is the best keyboard in the world (in my opinion). My only complaint is that it has an oversized Esc key, so it's hard (basically impossible) to find fun new keycap sets for it. If I ever upgrade, it will be to a similar keyboard with half-height throws and the same switches.

—Deb Richardson

Cheap and cheerful

The best cheap, cheerful modern keyboard I've found is the A4TECH KV-300H. It weighs more than most keyboards and gives the closest feel to a laptop. It has a built-in USB hub too!

—Leigh Morresi

Curvy keyboards

I always loved my original Microsoft Natural keyboard. The Microsoft hardware division did a great job with that. It was rock solid, and the curved shape meant my fingers and wrists were spared repetitive strain injury. Mine was an original Natural Elite keyboard, with the PS/2 mini-DIN connector and USB adapter. Despite taking great care of this keyboard, and it taking care of me, the keyboard finally died in 2018.

(Jim Hall, CC BY-SA 4.0)

I replaced it with a Perixx PERIBOARD-512 keyboard. This is very similar to the Microsoft Natural Elite keyboard, so my fingers didn't have to re-learn a keyboard layout. I bought one in white and another in black, but I use the black one most of the time because of my black desk mat.

(Jim Hall, CC BY-SA 4.0)

When I want to feel really retro, I dig out my IBM Model M keyboard. I don't have an original Model M anymore, but I do own a very good reproduction from Unicomp. I bought it in 2010 and it's a tank. I could fight off a zombie horde with that, and later use it to write another article.

—Jim Hall

Left-handed

As a left-hander, I think ALL keyboards are the worst. What good is having a numeric keypad on the right-hand side of the keyboard when you're left-handed? Even those keyboards that don't have a keypad still put the arrow keys on the lower right. Yes, some mouses are made hand-neutral and some forward-thinking companies have even made left-handed mouses. It might take some time before a left-handed keyboard is made.

—Gary Smith

The best and the worst

The best keyboard: Microsoft Natural Keyboard Elite or a Thinkpad keyboard with trackpoint.

The worst keyboard: the onscreen keyboard on my phone now (soooooo many typos).

—John 'Warthog9' Hawley

Keyboard loyalty

I am going to buck the Model M and mechanical keyboard trend. Yes, they are great, and yes I really liked them when I first started using them. 

Like Jim, I got one of the Microsoft Natural keyboards when they came out—and when I needed to replace it, I picked up the Logitech model that the Microsoft one was based on. I've been pretty loyal to Logitech since. I upgraded to the K350 Wave when it came out and it was time to go wireless. This last time, I upgraded to the ERGO K860, and I LOVE IT. 

I'm also a big fan of trackballs when not using a touchpad, and currently use an MX ERGO (ever since they discontinued my beloved M570).

—Kevin Sonney

Ergonomics is key

(Kelly Dassing CC BY-SA 4.0)

When it was time to replace my keyboard in 2021, I had very specific requirements in mind. As someone with hypermobile joints and chronic wrist pain, an ergonomic keyboard became the obvious choice. I waded through several options before landing on the Logitech ERGO K860. Its large, padded wrist rest, adjustable height front feet, and chiclet-style keys make for the most comfortable keyboard I've ever used. It took a little while to get accustomed to the angled, separated layout, but now I much prefer it to "standard" keyboards.

In contrast, the worst keyboard I ever used was your average, tall and loud key Logitech keyboard. It just wasn't comfortable, and its responsiveness was unreliable. I'll never go back.

—Kelly Dassing

Sentimental keyboard

This is my favorite keyboard for sentimental reasons:

(Seth Morabito, CC BY-SA 2.0)

—Greg Scott

IBM Model M

The best is simply the IBM Model M, although I won a Das Keyboard recently, and it is pretty good.

As far as the worst, there is a myriad of horrible squishy keyboards out there, and most of them are terrible.

—Bob Murphy

Gamer-proof keyboard

I only use thumb-based, wireless trackballs, and all of them are off-brand. I avoid anything else. I am a fan of Logitech (who pioneered the design) in general, but Logitech is overpriced, and a lot of the off-brand designs have lithium batteries that charge with USB-C cable, whereas Logitech still makes me insert a AA battery.

For keyboards, all I use now are wired, brown switch mechanicals (sort of quiet but not really, and tactile switches.) I love the feel and can type for hours and hours with them. I have a lighted (not RGB) version, which I really like, too, and it's very off-brand and cheap. True mechanicals don't have to be expensive if you're not gaming with them. The expensive ones for gaming are built to be thrown across the room with force and survive when you die for the hundredth time on some stupidly tough boss. But I just use them for typing. It is hard to find ones that aren't all rainbow-colored, because most are built for gamers.

—Evan "Hippy" Slatis

DIY keyboard

The worst keyboards are most of them. Especially the ones you tend to get as a new employee, the cheapest ones are from your computer's manufacturer. Mushy keys and way too big for the desks the company provides you.

I started to buy (and build) my own keyboards and it was a revelation. As I have small hands and short fingers, I really enjoy ortholinear keyboards. I ended up building a Planck which I still love. I use Brown Cherry switches. I also use blank keycaps for family and friends because I experiment with different layouts and don't have to move keycaps around each time. My Planck is also great for traveling because it fits on top of my laptop.

I then got an Atreues, which is similar to the Planck but slightly curved for your hands. While I really like that one too, I switched to a Kyria which is a split keyboard. That helps me a lot with movement and shoulders as I can have my trackball in between the keyboard instead of in front of or by the side. My Kyria (which I didn't build myself) has Kailh Pro Light Green switches, which are a bit more clicky than Cherry Brown but now I only work from home and can click away without disturbing anyone. And they're really not that loud.

—Jimmy Sjölund

My favorite keyboard

I do miss the feel of the old IBM 3270 beam spring keyboards, but the accompanying 80×25 monitor? Not so much. Nor the whole EBCIDIC thing. And given that the last time I touched one of those was probably 1983 or so, maybe it wasn't that much better...

Here's my favorite and current keyboard:

(Chris Hermansen, CC BY-SA 4.0C

This is the Drop Tokyo60 season 4. Mine has Kailh Box Navy switches which need good force and provide good feedback. I borrowed a switch tester from a friend to figure that out.

What I mostly like about this keyboard is the layout. I've used vi for 20 years on keyboards with this layout and that nonsense of putting the shift lock (who uses Shift Lock anyway) where the Control key belongs!

—Chris Hermansen

Happy hacking

The writers have spoken! I was able to collect a good sample of what keyboards are most user friendly and which ones are currently loathed. I hope you can use this information to find a keyboard suitable to your needs. Remember that a bunch of keyboards can be formatted to fit your own personal preferences. Happy keyboard hunting!

Original article source at: https://opensource.com/

#opensource #keyboard 

How to Change The Android Keyboard Size in This Tutorial

Android - How to change keyboard size (with screenshots)

Each Android keyboard application comes with its own settings. One of the settings available is to change the keyboard size itself.

This tutorial shows you how to change the keyboard size on your Android phone, making it bigger and smaller according to your preferences.

You will learn how to change keyboard size for the Google Keyboard and Samsung Keyboard.

Change Google Keyboard (Gboard) size on Android

The Google Keyboard is the default keyboard that’s included in vanilla Android OS.

It’s also published on the Google Play Store under the name of Gboard.

To change the keyboard size of Gboard, you need to follow these steps:

• Tap on any input bar you can find on your phone to make the keyboard appear, then tap on the gear icon.
• In the settings menu, tap on the Preferences option
• Inside Preferences, you’ll find One-handed mode and Keyboard height options.

Use the screenshots below to help you perform the steps above:

Gboard steps to change size

The One-handed mode and Keyboard height options control the size of your Gboard. You can change these options as you see fit.

The available Keyboard height options are as follows:

Gboard height options

The following screenshot shows the size comparison of Gboard from extra-tall to extra-short:

Gboard size from tallest to shortest

On the other hand, the one-handed mode allows you to change the keyboard size as shown below:

Gboard one-handed mode size

You are free to change the keyboard size under the available options offered by the Gboard app.

Let’s see how to change the keyboard size for Samsung Keyboard next.

Change Samsung Keyboard size on Android

The Samsung Keyboard is the default keyboard bundled with Samsung phones and tablets. You can change the Samsung keyboard size from its settings.

While the Samsung Keyboard is present on your screen, tap on the gear icon to bring up the settings menu.

Inside the settings, scroll down until you see Size and transparency and Font size options.

Tap on one of the options to change the keyboard or its font size. Use the following screenshots to help you:

Samsung Keyboards steps to change its layout and font size

Now you’ve learned how to change the keyboard size for Gboard and Samsung Keyboard.

Please keep in mind that an Android keyboard application always has its own settings.

When you’re switching the keyboard used on your Android phone, then the size of the keyboard will change based on the settings for the new keyboard.

You need to search the settings menu for your keyboard application and change the available options.

Original article source at: https://sebhastian.com/

#android #keyboard 

KeyboardLayoutGuide, Back From When It Didn't Exist

⌨️ KeyboardLayoutGuide

Apple's missing KeyboardLayoutGuide

•  No Subclassing / Protocol inheritance / obscure overrides
•  No more keyboard notification handling
•  UIKit Friendly
•  Takes safeArea into account
•  Only animates if view is fully on screen

How to use it

Simply constrain your views to the KeyboardLayoutGuide's top anchor the way you would do natively:

override func viewDidLoad() {
    super.viewDidLoad()

    // Pin your button to the keyboard
    button.bottomAnchor.constraint(equalTo: view.keyboardLayoutGuide.topAnchor).isActive = true
}

Bonus: if you're using Stevia, this gets even more concise \o/

button.Bottom == view.keyboardLayoutGuide.Top

If you add your view in Interface Builder, don't forget to enable the "Remove at build time" checkbox for the bottom constraint:

Safe Area

By default, KeyboardLayoutGuide will align your item with the bottom safe area. This is a behaviour that can be opt out by using keyboardLayoutGuideNoSafeArea instead of keyboardLayoutGuide.

Installation

The Swift Package Manager (SPM) is now the official way to install KeyboardLayoutGuide. The other package managers are now deprecated as of 1.7.0 and won't be supported in future versions.

Swift Package Manager

Xcode > File > Swift Packages > Add Package Dependency... > Paste https://github.com/freshOS/KeyboardLayoutGuide

CocoaPods - Deprecated

To install KeyboardLayoutGuide via CocoaPods, add the following line to your Podfile:

target 'MyAppName' do
  pod 'Keyboard+LayoutGuide'
  use_frameworks!
end

Carthage - Deprecated

To install KeyboardLayoutGuide via Carthage, add the following line to your Cartfile:

github "freshos/KeyboardLayoutGuide"

Manually

Just add Keyboard+LayoutGuide.swift to your Xcode project.

Download Details:

Author: freshOS
Source Code: https://github.com/freshOS/KeyboardLayoutGuide 
License: MIT license

#swift #keyboard #ios #layout 

RxKeyboard: Reactive Keyboard in iOS

RxKeyboard

RxKeyboard provides a reactive way of observing keyboard frame changes. Forget about keyboard notifications. It also perfectly works with UIScrollViewKeyboardDismissMode.interactive.

Getting Started

RxKeyboard provides two Drivers.

/// An observable keyboard frame.
let frame: Driver<CGRect>

/// An observable visible height of keyboard. Emits keyboard height if the keyboard is visible
/// or `0` if the keyboard is not visible.
let visibleHeight: Driver<CGFloat>

/// Same with `visibleHeight` but only emits values when keyboard is about to show. This is
/// useful when adjusting scroll view content offset.
let willShowVisibleHeight: Driver<CGFloat>

Use RxKeyboard.instance to get singleton instance.

RxKeyboard.instance

Subscribe RxKeyboard.instance.frame to observe keyboard frame changes.

RxKeyboard.instance.frame
  .drive(onNext: { frame in
    print(frame)
  })
  .disposed(by: disposeBag)

Tips and Tricks

🔗 I want to adjust UIScrollView's contentInset to fit keyboard height.

RxKeyboard.instance.visibleHeight
  .drive(onNext: { [scrollView] keyboardVisibleHeight in
    scrollView.contentInset.bottom = keyboardVisibleHeight
  })
  .disposed(by: disposeBag)

🔗 I want to adjust UIScrollView's contentOffset to fit keyboard height.

RxKeyboard.instance.willShowVisibleHeight
  .drive(onNext: { [scrollView] keyboardVisibleHeight in
    scrollView.contentOffset.y += keyboardVisibleHeight
  })
  .disposed(by: disposeBag)

🔗 I want to make UIToolbar move along with the keyboard in an interactive dismiss mode. (Just like the wonderful GIF above!)

If you're not using Auto Layout:

RxKeyboard.instance.visibleHeight
  .drive(onNext: { [toolbar, view] keyboardVisibleHeight in
    toolbar.frame.origin.y = view.frame.height - toolbar.frame.height - keyboardVisibleHeight
  })
  .disposed(by: disposeBag)

If you're using Auto Layout, you have to capture the toolbar's bottom constraint and set constant to keyboard visible height.

RxKeyboard.instance.visibleHeight
  .drive(onNext: { [toolbarBottomConstraint] keyboardVisibleHeight in
    toolbarBottomConstraint.constant = -1 * keyboardVisibleHeight
  })
  .disposed(by: disposeBag)

Note: In real world, you should use setNeedsLayout() and layoutIfNeeded() with animation block. See the example project for example.

Anything else? Please open an issue or make a Pull Request.

Dependencies

• RxSwift (>= 6.0)
• RxCocoa (>=6.0)

Requirements

• Swift 5.1
• iOS 9+

Contributing

In development, RxKeyboard manages dependencies with Swift Package Manager. Use the command below in order to generate a Xcode project file. Note that .xcodeproj file changes are not tracked via git.

$ swift package generate-xcodeproj

Installation

Using CocoaPods:

pod 'RxKeyboard'

Using Carthage:

binary "https://raw.githubusercontent.com/RxSwiftCommunity/RxKeyboard/master/RxKeyboard.json"

⚠️ With Carthage, RxKeyboard only supports binary installation:

• 0.9.2
  • Xcode 10.1 (10B61)
  • Swift 4.2.1 (swiftlang-1000.11.42 clang-1000.11.45.1)
• 0.9.0
  • Xcode 10 (10A255)
  • Swift 4.2 (swiftlang-1000.11.37.1 clang-1000.11.45.1)
• 0.8.2
  • Xcode 9.3 (9E145)
  • Swift 4.1.0 (swiftlang-902.0.48 clang-902.0.37.1)
• 0.7.1
  • Xcode 9.1 (9B55)
  • Swift 4.0.2 (swiftlang-900.0.69.2 clang-900.0.38)
• 0.7.0
  • 9.0.1 (9A1004)
  • Swift 4.0 (swiftlang-900.0.65.2 clang-900.0.37)

Download Details:

Author: RxSwiftCommunity
Source Code: https://github.com/RxSwiftCommunity/RxKeyboard 
License: MIT license

#swift #keyboard #ios #rxswift