In layout.html if i change the layout from the drop down then also keyboard always remains the same.

[mithundebnath]

In layout.html if i change the layout from the drop down then also keyboard always remains the same. I already have included the required js file in the head section. I need two languages hindi and bengali. So i Have written like this

var layouts = [
            // 'title , file name , layout name'
            "Hindi, hindi, hindi",
            "Bengali (qwerty-1), bengali, bengali-qwerty-1",
            "Bengali (qwerty-2), bengali, bengali-qwerty-2",
            ],

        t, o = '',

I have also included both .js files i.e. for hindi.js and bengali.js. I can see the changes in "lang" dropdown So Its working till here. I can also see the change in $('h2').text(title) when i change in dropdown.But the keyboard doesnt change. i have noticed the code in layouts.html is like this

$('#multi').keyboard({
            layout: 'qwerty',   // <---may be here is the problem
            stayOpen: true
        })
        // activate the typing extension
        .addTyping({
            showTyping: true,
            delay: 50
        });

        $('#lang')
        .html(o)
        .change(function(){
            var kb = $('#multi'),
                $this = $(this),
                $opt = $this.find('option:selected'),
                title = $opt.text(),
                layout = $this.val(),
                file = $opt.data('filename');
            $('h2').text(title);
            if (!$.keyboard.language.hasOwnProperty(file)) {
                $.getScript('layouts/' + file + '.js', function(){
                    showKb( layout );
                });
            } else {
                showKb( layout );
            }
        }).trigger('change');

I always get "qwerty" layout. But If i change manually i.e. like this

$('#multi').keyboard({
            layout: 'hindi' //...then I get get the hindi Layout.

Even i did try to do like this,

$('#multi').keyboard({
            layout: 'qwerty',  // <---may be here is the problem
            stayOpen: true
        })
        // activate the typing extension
        .addTyping({
            showTyping: true,
            delay: 50
        }); // this code i have written inside the  
$('#lang')
        .html(o)
        .change(function(){

....function and tried to change the "layout: 'qwerty' " statement with layout: $this.val() and layout: title, In both the cases whatever in the first line of the dropdown is choosen by default,Then I change the dropdown it does not give any effect to the layout. What should i write so that i can change the the layout dynamically with the change in the dropdown???

[Mottie]

Hi @mithundebnath!

I think the easiest solution would be to just load the desired layouts, since there are only two:

<script src="layouts/bengali.js"></script>
<script src="layouts/hindi.js"></script>

Then add the following code (demo):

$(function () {

    var layouts = [
        'hindi',
        'bengali-qwerty-1',
        'bengali-qwerty-2'
    ],
    addSelect = function (keyboard) {
        var select = '<select class="layout">';
        $.each(layouts, function(i,layout){
            select += '<option value="' + layout + '">' + layout + '</option>';
        });
        $( select + '</select>' )
            .appendTo( keyboard.$keyboard )
            .val( keyboard.options.layout )
            .change( function(){
                keyboard.options.layout = $(this).val();
                keyboard.reveal(true);
            });
    };

    $('#keyboard').keyboard({
        layout: 'hindi',
        visible: function (e, keyboard, el) {
            addSelect( keyboard );
        }
    })
    // activate the typing extension
    .addTyping({
        showTyping: true,
        delay: 50
    });

});

I included this bit of css to position the select to the right side, but really it can be positioned anywhere you desire. If you want it at the top, then change appendTo to prependTo in the above code.

.layout {
    float: right;
}

The only issue you might encounter is when swapping layouts, anything new typed into the keyboard will be lost. So maybe set autoAccept to true, or if that isn't desirable, I can modify the above code to save the value between swaps.

In a future version, I plan to include a select within the layout where you can choose the layout as above.

[mithundebnath]

Hello Sir, Thanks for the early reply.I understood the thing and copy and paste the code.its working fine.But sir i want to show the drop down outside the keyboard.what i want to do is when the page loads for the first time it will have the the drop down and text area or text box.now if i click inside the text box then keyboard will appear and the language will be the drop down selected language.Now if i change the the language from the drop down then the keyboard language should also change.

[Mottie]

The setup is very similar, but this time there is no need to use the visible callback.

Try this code (demo):

HTML

<script src="http://mottie.github.com/Keyboard/layouts/bengali.js"></script>
<script src="http://mottie.github.com/Keyboard/layouts/hindi.js"></script>

<select>
    <option value="hindi">hindi</option>
    <option value="bengali-qwerty-1">bengali-qwerty-1</option>
    <option value="bengali-qwerty-2">bengali-qwerty-2</option>
</select>

<input class="keyboard" type="text" />
<textarea class="keyboard"></textarea>

Script

$(function () {

    $('.keyboard').keyboard()
    // activate the typing extension
    .addTyping({
        showTyping: true,
        delay: 50
    });

    // make sure this is added after the keyboards are initialized
    $('select').change(function () {
        var layout = $(this).val();
        $('.keyboard').each(function(){
            var kb = $(this).data('keyboard');
            kb.options.layout = layout;
            // refresh keyboard if already visible
            if (kb.$keyboard.length) {
                kb.reveal(true);
            }
        });
    }).change();   

});

[mithundebnath]

Hello Sir, Thanks for the desired solution.Its working fine. Sir there is one thing i want to say.In hindi .js file in the " 'shift' : [... " section there is a wrong entry.on the second line which starts with {tab} from left to right on 13th position there is " \u099e ".its betwen \u0922 and \u091E.Sir its a bengali alphabet.it is also present in bengali.js file in the " 'alt-shift' : [ " section 2nd line right most position.it should be here as its a bengali alphabet but it should not be therein the hindi.js.We pronounce it as "nio" both in bengali and hindi.its unicode in bengali is 099e and in hindi is 091E. 091E is present there in hindi.js. /u099e should only be there in bengali.js not in hindi.js. Once again thanks sir for your time and help.

[Mottie]

Could you please post the changes you mentioned in a comment here? It would help ensure that I don't make any mistakes while making the correction.

Also, if you have time, I would appreciate feedback on any of these layouts I've been working on:

• Assamese - INSCRIPT
• Devanagari - INSCRIPT
• Gujarti
• Hindi Traditional
• Kannada
• Marathi
• Nepali
• Punjabi
• Tamil
• Telugu
• Urdu

Please feel free to use any of the above layouts.

[mithundebnath]

Hello Sir, The change which is require to take place in hindi.js file is remove the \u099e from the 'shift' : [ part.Its there in the second line from right side second last.Replace the 'shift' : part with the following code :

'shift' : [
    '~ \u0967 \u0968 \u0969 \u096A \u096B \u096C \u096D \u096E \u096F \u0966 \u0903 \u090B {bksp}',
    '{tab} \u0914 \u0910 \u0906 \u0908 \u090A \u092D \u0919 \u0918 \u0927 \u091D \u0922 \u091E \u0911',
    '\u0913 \u090F \u0905 \u0907 \u0909 \u092B \u0931 \u0916 \u0925 \u091B \u0920 {enter}',
    '{shift} "" \u0901 \u0923 \u0928 \u0935 \u0933 \u0936 \u0937 \u0964 \u095F {shift}',
    '{accept} {alt} {space} {alt} {cancel}'
],

Sir I Know Assamese and it is also familiar to my mother tongue bengali. So I would love to learn more from your assamese inscript. Nepali and hindi alphabets are same.It is called Devanagari.Sir I dont know the alphabets of other mantioned languages.

[Mottie]

Oh, I also have "Devanagari - INSCRIPT" which I added above.

Even though the Nepali and Hindi alphabets are the same, the layouts may be different. I generated the above keyboards from keyboard layouts provided by Microsoft.

I also updated the above files to replace unicode with common characters like replacing \u0030 with 0, and \u0031 with 1, etc...

[mithundebnath]

Hello Sir, In assamese.js few alphabets are missing i.e. it does not have all the assamese alphabets. I will mail you once i reach the desired layout.

[Mottie]

I've added all the above layouts into the keyboard-layouts-microsoft.js file in the layouts folder. You can see them all in the layouts3 demo.

Otherwise, I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.

[mithundebnath]

Hello Sir, Thanks for the solution.It will be very useful,specially for those who are working in indic language layouts. Sir I do have few more things to ask.At present I am at home.Once I return I will communicate with you and will try to learn few more things.

regards, Mithun