Re: [SailfishDevel] Accent with maliit keyboard (QML mockup)

Tue, 03 Dec 2013 13:45:48 -0800 

Hello,

Le lundi 02 décembre 2013, dcali...@free.fr a écrit :
> which would give after pressing it (like the shift key):
> à|w|é
> shift|æ|è|
> Fn|ç|ù
> 
> Are my explanations clearer ? What piece of code should I give a look
> at to add a key that acts like the shift key by changing the layout
> of the whole keyboard (once if pressed once or locked if pressed
> twice) ?
Ok, maybe I was not clear so I made a small working QML mockup. Can
anyone would tell me how to implement this in a Maliit plugin so it
would replace the current French layout ?

Press the "up" button near to capslock button to obtain the alternative
layout.

I didn't implement the triple states (none, once, locked) of capslock
and the new altgr button (only none and once states), but the idea is
here !

Please help !

Damien.

PS : the position of the different letters in the alternative layout is
just an idea.

import QtQuick 2.0
import Sailfish.Silica 1.0

ApplicationWindow {
  initialPage: page

  Page {
    id: page
    Column {
    PageHeader {
      title: "Useless keyboard"
    }

    Row {
	BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "À" : "A" : fn.highlighted ? "à" : "a"; id: "kbd_a" }
               onClicked: { test.text += kbd_a.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "Z" : "z"; id: "kbd_z" }
               onClicked: { test.text += kbd_z.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "É" : "E" : fn.highlighted ? "é" : "e"; id: "kbd_e" }
               onClicked: { test.text += kbd_e.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "È" : "R" : fn.highlighted ? "è" : "r"; id: "kbd_r" }
               onClicked: { test.text += kbd_r.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ê" : "T" : fn.highlighted ? "ê" : "t"; id: "kbd_t" }
               onClicked: { test.text += kbd_t.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "Y" : "y"; id: "kbd_y" }
               onClicked: { test.text += kbd_y.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ù" : "U" : fn.highlighted ? "ù" : "u"; id: "kbd_u" }
               onClicked: { test.text += kbd_u.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Î" : "I" : fn.highlighted ? "î" : "i"; id: "kbd_i" }
               onClicked: { test.text += kbd_i.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ô" : "O" : fn.highlighted ? "ô" : "o"; id: "kbd_o" }
               onClicked: { test.text += kbd_o.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "P" : "p"; id: "kbd_p" }
               onClicked: { test.text += kbd_p.text; caps.highlighted = false; fn.highlighted = false } }
    }
    Row {
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "Q" : "q"; id: "kbd_q" }
               onClicked: { test.text += kbd_q.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "S" : "s"; id: "kbd_s" }
               onClicked: { test.text += kbd_s.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ë" : "D" : fn.highlighted ? "ë" : "d"; id: "kbd_d" }
               onClicked: { test.text += kbd_d.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "F" : "f"; id: "kbd_f" }
               onClicked: { test.text += kbd_f.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "G" : "g"; id: "kbd_g" }
               onClicked: { test.text += kbd_g.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "H" : "h"; id: "kbd_h" }
               onClicked: { test.text += kbd_h.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "J" : "j"; id: "kbd_j" }
               onClicked: { test.text += kbd_j.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ï" : "K" : fn.highlighted ? "ï" : "k"; id: "kbd_k" }
               onClicked: { test.text += kbd_k.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "L" : "l"; id: "kbd_l" }
               onClicked: { test.text += kbd_l.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "M" : "m"; id: "kbd_m" }
               onClicked: { test.text += kbd_m.text; caps.highlighted = false; fn.highlighted = false } }
    }
    Row {
        IconButton { width: page.width / 10.; icon.source: "image://theme/icon-m-capslock"; id: "caps"
	             onClicked: { highlighted = !highlighted } }
	IconButton { width: page.width / 10.; icon.source: "image://theme/icon-m-up"; id: "fn"
	             onClicked: { highlighted = !highlighted} }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "W" : "w"; id: "kbd_w" }
               onClicked: { test.text += kbd_w.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "X" : "x"; id: "kbd_x" }
               onClicked: { test.text += kbd_x.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? fn.highlighted ? "Ç" : "C" : fn.highlighted ? "ç" : "c"; id: "kbd_c" }
               onClicked: { test.text += kbd_c.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "V" : "v"; id: "kbd_v" }
               onClicked: { test.text += kbd_v.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "B" : "b"; id: "kbd_b" }
               onClicked: { test.text += kbd_b.text; caps.highlighted = false; fn.highlighted = false } }
        BackgroundItem { width: page.width / 10.; Label { text: caps.highlighted ? "N" : "n"; id: "kbd_n" }
               onClicked: { test.text += kbd_n.text; caps.highlighted = false; fn.highlighted = false } }
        IconButton { width: page.width / 5.; icon.source: "image://theme/icon-m-backspace"; id: "kbd_back" }
    }
	Label {
	  id: test
	  font.pixelSize: Theme.fontSizeLarge
          color: Theme.highlightColor
	  anchors.horizontalCenter: parent.horizontalCenter
	}
        Label {
	  text: "please type on the useless keyboard"
        }
    }
  }
}

#include <sailfishapp/sailfishapp.h>

Q_DECL_EXPORT int main(int argc, char *argv[])
{
  return SailfishApp::main(argc, argv);
}

TEMPLATE = app
TARGET = ukbd
DEPENDPATH += .
INCLUDEPATH += .
CONFIG += link_pkgconfig
PKGCONFIG += sailfishapp
QT += qml quick

packagesExist(qdeclarative5-boostable) {
  DEFINES += HAS_BOOSTER
  PKGCONFIG += qdeclarative5-boostable
} else {
  warning("qdeclarative-boostable not available; startup times will be slower")
}

isEmpty(PREFIX)
{
  PREFIX = /usr
}

DEPLOYMENT_PATH = $$PREFIX/share/$$TARGET

SOURCES += ukbd.cpp

_______________________________________________
SailfishOS.org Devel mailing list

Reply via email to