Coder Social home page Coder Social logo

likethemammal / daisywheeljs Goto Github PK

View Code? Open in Web Editor NEW
80.0 8.0 8.0 43.95 MB

The Steam "Big Picture" Daisywheel ported to JS and CSS. Supports Gamepad API.

Home Page: https://likethemammal.github.io/daisywheeljs/

License: MIT License

JavaScript 86.14% CSS 13.37% HTML 0.49%

daisywheeljs's Introduction

DaisywheelJS

The Steam "Big Picture" Daisywheel ported to Javascript and CSS. Works with the Gamepad API, available in the latest modern browsers.

Note

This interface is something every game with text input needs. Not a single game should present a QWERTY keyboard to a user with a controller in their hands. I ported this so that the growing HTML5 gaming community can use it in their games as a standard library in the user interface toolkit.

DaisywheelJS Screenshot

A live demo can be found here

Setup/Install/Documentation

Instructions on use can be found at http://likethemammal.github.io/daisywheeljs/.

There you'll find:

Contributing

To setup your own build and/or contribute, pull down a clone of the repo. Run npm install to install dependencies. After making changes to either the daisywheel.js file or the less files run gulp and a build version of the files will be generated. The process should look like this:


git clone [email protected]:likethemammal/daisywheeljs.git
cd daisywheeljs
npm install

//make some changes

gulp

Attributions

gamepad-mod.js interfaces with the browser API and organizes the data sent over in the controller's events. It was a modification of the gamepad.js library found in the example code for the HTML5Rocks gamepad tester, which can be found in its orginal form here

License

This is licensed under the MIT Open-source License.


todo

  • multilanguage support
  • controller brand specific button images
  • complex actions (attach to a text editor like Atom or Light Table)

daisywheeljs's People

Contributors

likethemammal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

daisywheeljs's Issues

X-box one support

Is there full xbox one controller support? Switching between caps and numbers isn't properly registering

Cleanup the window

Right now flux is stored on the window. This includes all it's actions too. flux should be passed around more efficiently than this, and it should be taken off the window object.

RT does not work

LT switches letters to numbers, and RT is supposed to switch lowercase to uppercase.
What I see is no reaction to RT whatsoever. Is there a way to check for if RT is registered at all?

Better error handling would help

The error handling for the gamepad api and the daisywheel itself is lacking. It would really help to be able to see whats going on. Maybe even add in a debug mode.

Copy to clipboard

Adding a copy to clipboard option to one of the controller controls would help make the library more portable. This would also mean it could be packaged up as a chrome web app and provided as a utility. Just a thought..

No controllers recognized

I have two controllers plugged in:

  • Standard PC Xbox 360 controller
  • Hori Real Arcade Pro.4, which emulates a DS4 controller

Neither are recognized by the demo site (saying "Connect a gamepad to use the Daisywheel"). The console shows no errors, aside this deprecation warning:

[Deprecation] GainNode.gain.value setter smoothing is deprecated and will be removed in M64, around January 2018. Please use setTargetAtTime() instead if smoothing is needed. See https://www.chromestatus.com/features/5287995770929152 for more details.

http://html5gamepad.com/ finds and reads them correctly, showing

image

Input field should change focus with cursor changing.

If the user types out a long string of text, they can navigate back to edit other parts of the text but the input's focus will stay where it originally was. The focus of the input needs to change as the cursor pushs the edge of the field, either left or right.

Sound effects for the win!

There should be sound effects for each action the daisywheel makes. Moving the analog. Selecting a symbol. Space. Backspace. Arrow keys. etc.

Font quality rendering

The font quality degrades at certain screen sizes, based on the scale of the flower. There might be some css optimizations that can be made. It could also be improved by giving the text their own rendering context layer. Not sure on that last one, but it might help.

Text selection is messed up and cursor is invisible

When clicking with the mouse, the text in the main input can't be selected.

When using the controller the cursor isn't visible unless you click the input element directly. This includes when using the dpad and the backspace and space functionality.

Button repeat speed is too fast

This UI seems very nice, but I can barely type with this. I have to really peck at the keys quickly.
And once I had typed something and tried to backspace a letter, I backspaced everything I typed. And there's no undo to get it back.

Confirm and dismiss buttons

Is there a need for dismiss and confirm buttons? Because there is always an input field visible, there isn't any reason for an actual dismiss/close and confirm/send button. Is there a use case for this feature? Could it just be an option?

Look into the ability to cycle through all inputs

This question on Stackoverflow mentions a use case where the user might want to cycle through available inputs.

This could be accomplished a few different ways.

  • A tab keyboard event could be faked and cause the focus of the lib to change.
  • The lib could keep track of all inputs with the class of daisywheel and cycle through them intentionally.

Either way there needs to be a new control for triggering the cycle. No idea what gamepad button that should be tho. There also might need to be a new UI element to show the cyclable inputs.

Create Troubleshooting section.

Troubleshooting section should explain how to connect common gamepads to different OS's. Heres some current notes. Make this a table

Windows 8/8.1:
XBOX 360 - Should just work. LINK TO DRIVERS
Chrome:
Dualshock - Mention and link to XInput. Link to getting blutooth to work. Also mention MotionJoy. (Worked, blutooth was a little slow)

Linux:
XBOX 360 - LINK TO: Program that runs the xbox 360 controller emulator.
PS3 - Link to page explaining how to run ps3 controller.
Sixaxis/DualShock - Can act strange, may need to be mapped correctly. And may cause the interface to spasm. (Different behavior for firefox and chrome) (https://help.ubuntu.com/community/Sixaxis) Could be the program itself.

Chrome OS:
XBOX 360 - TBA
PS3 - Maybe through blutooth.
OUYA - Maybe trough blutooth.

OSX:
TBA

Also try to get Steam Controller support.

Mentions:
Might need to restart browser completely for it to recognize the gamepad.
Need to press a button for the browser to be able to recognize the gamepad.

Button layout config

I tried daisywheel.js on my Xbox One controller, and it worked fine. However, I tried it on my Nintendo Switch wired controller, and it produced weird results:

  • The face buttons are in the wrong order.
  • None of the shoulder buttons responded.

This is likely due to different mappings from physical buttons to button IDs.

Docs mention "katakana" but show hirigana in example

Katakana:
["ア", "イ", "ウ", "エ", "オ", "カ", "キ", "ク", "ケ", "コ", "サ", "シ", "ス", "セ", "ソ", "タ", "チ", "ツ", "テ", "ト", "ナ", "ニ", "ヌ", "ネ", "ノ", "ハ", "ヒ", "フ", "ヘ", "ホ", "マ", "ミ", "ム", "メ", "モ", "ヤ", "ユ", "ヨ", "ラ", "リ", "ル", "レ", "ロ", "ワ", "ヰ", "ヱ", "ヲ", "ン", "ッ", "ヽ", "゛", "゜"]
Hirigana:
["あ", "い", "う", "え", "お", "か", "き", "く", "け", "こ", "さ", "し", "す", "せ", "そ", "た", "ち", "つ", "て", "と", "な", "に", "ぬ", "ね", "の", "は", "ひ", "ふ", "へ", "ほ", "ま", "み", "む", "め", "も", "や", "ゆ", "よ", "ら", "り", "る", "れ", "ろ", "わ", "ゐ", "ゑ", "を", "ん", "っ", "ゝ", "゛", "゜"]


As a side note, each would require 13 petals, including the diacritics, assuming a single layer (like is used for the capital letters of Latin scripts, with the trigger button switching layers). I wonder what Japanese users would actually want. Since there are five vowels, it doesn't map nicely to the four buttons. Would using a chord of buttons, like X+A, or a shoulder/trigger button, for an extra letter-entering key, make it more natural? That way each petal could represent a consonant. Anyways, just food for thought.

  • 26/4 = 6.5 (English, which is currently displayed on 8 petals, with extra symbols)
  • 52/4 = 13 (Katakana/Hirigana)
  • 52/5 =10.4 (Katakana/Hirigana divided by consonant)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.