e. i. f. - wordpress.com · orthographic coding, auditory short-term memory, language skills/verbal...

Engineering Innovation Filippin for the LS Dreams Contest 2014-2015 Phase 05 – Final memory

1

E. I. F. Enginnering Innovation Filippin

Phase 05

Final memory

Dyhelper

Dyhelper

Dyslexic students Helper


2

Index:

1. General presentation ………………………………………………………………………….pag. 3

The idea………………………………………………………………………….…….…..pag. 4

The dyslexia …………………………………………………………………….………..pag. 4

2. Meeting with the students: suggestions …………………………………………………….pag. 6

3. How to use it …………………………………………………………………………………...pag. 8

4. Improvement: reading the position of the eyes …………………………………….…….pag. 12

5. How it’s made ………………………………………………………………………………...pag. 14

What is Processing ……………………………………………………………….……pag. 15


3

1. General presentation

Dyhelper

Dyhelper

DyHelper is an application for tablets and smartphones that facilitates the reading of texts written

for people with dyslexia.

It is suitable for students at school that have to read and study, but also for adults who have to read

some documents on a tablet or on their smartphones.

DyHelper is easy to use, simple to install and can improve the lives of students who feel inferior

because they are slow to read or are not self-sufficient in reading and understanding long and

complex texts.

(Can suffer dyslexia disorders both children and adolescents)

DyHelper was conceived, designed and built by students for helping other students!

Dyhelper

students

helping

students

Dyhelper

Dyhelper

students

helping

students


4

The idea

The idea of the project rises from a question that we asked our friends with dyslexia problems,

regarding the products on the market at the present time for facilitating reading and understanding

(learning).

The answer we received triggered us to proceed towards the development of a new application for

tablet or smartphone optimized for the goal.

In our idea the app highlights the text the student is reading, enlarging it as through a magnifying

glass, changes the colour of the text and the background colour in order to optimize the contrast, the

sharpness and the brightness. Through a sensor (maybe the front webcam installed in every tablet)

the app scans the eyes movements and determines which line the student is reading.

All the parameters (colour, font type, font size, background colour, etc.) is customizable.

The dyslexia

“Dyslexia, or developmental reading disorder (DRD), is characterized by difficulty with learning

to read and with differing comprehension of language despite normal or above-average

intelligence.

This includes difficulty with phonological awareness, phonological decoding, processing speed,

orthographic coding, auditory short-term memory, language skills/verbal comprehension, and/or

rapid naming.

Dyslexia is the most common learning difficulty and most recognized reading disorder. There are

other reading difficulties that are unrelated to dyslexia.

(Example of dyslexic vision of a text)


5

(Example of dyslexic vision of a text)

Through compensation strategies and therapy, dyslexic individuals can learn to read and write with

educational support. There are techniques and technical aids that can manage or even conceal

symptoms of the disorder.

There is some evidence that the use of specially tailored fonts may provide some measure of

assistance for people who have dyslexia. Among these fonts are Dyslexie and OpenDyslexic,

which were created with the notion that many of the letters in the Latin alphabet are visually

similar and therefore confusing for people with dyslexia. Dyslexie, along with OpenDyslexic, put

emphasis on making each letter more unique to assist in reading.” (From: Wikipedia.org)

OpenDyslexic is a free font type that can be downloaded from internet and installed on your

computer.

(Sample of the font OpenDyslexic)

(Sample of the font OpenDyslexic)

“Sample text with font type: "Times New Roman", height: 12 and colour: black “

“Sample text with font type: "Times New Roman", heig ht: 12 and

colour: black “


6

2. Meeting with the students: suggestions

In order to achieve a useful product and that will fully satisfy the needs of students with dyslexia we

decided to organize a meeting with all the students of our school, attending the high school, asking

them what are the characteristics that had to have a text to be read without problems to those in

need.

The meeting took place in a classroom of the institute after the students concerned had received an

invitation by the members of our group and by the tutor, and freely decided to participate. It is not

often, in fact, that kids with dyslexia want to reveal their disability, afraid of being different,

disadvantaged and being teased by others.

Also, sometimes, they don’t want to be helped by teachers using the tools and compensation

strategies, that even the law recognizes them, for fear of being accused of favoritisms by the other

students.

So, after talking with everyone individually, we gave them the freedom to participate or not at the

meeting.

(Picture of the meeting with the dyslexic students;

Francesco Galeazzi e Francesco Val show the app demo)


7

In this meeting we asked them which was the best combination of size, font type, text color and

background color that allow them to see more clearly the texts.

Subsequently we showed the group of students different combinations of colours and fonts, and

collected their feedback to find the best combination.

As a result, it is common for all students the need for the sentence they are reading must be

detached from the rest of the text, and with a larger font than normal (greater than 16). Not all

students need to change the font type or color inversion (light text on a dark background). Some

students have the need of a underlined text.

In our application we chose to separate the sentence you are reading, replacing the font with the font

"OpenDyslexia", that the width is 22 pixels, that the text color is red in a black background.

Just like this:

Open Dyslexic text with red color and

black background.

At the moment, our app does not allow the user to choose these settings.

It will be provided in a future release of the app.

(Picture of the meeting with the dyslexic students;

Francesco Galeazzi e Francesco Val show the app demo)


8

3. How to use it

The application works through a process that allows to convert any text file into an HTML file that

will be displayed by the browser installed on the tablet.

The application that we have created can operate both on Android than iOS systems.

Processing Apk Browser (Chrome)

Source file App for tablet HTML file Final file

Dyhelper

Dyhelper

(Diagram of the application)

As you can see from the diagram the source must be in TXT (.txt) form, so that the app can convert

it for the use. The app will convert the file in HTML form.

Those who want to use this application have to extract from the document or from the website they

are visiting, the pure text and create a file with extension .txt .

Imagining that this app can be used in class, and imagining that the professor provides some

documents to study, he will derive from the file provided the only text to create a txt file.

E.g. : dyslexia web page on wikipedia (http://en.wikipedia.org/wiki/Dyslexia)


9

From this page you will derive only the text, creating a .txt extension file.

(txt file derived from the web page)

Then you can launch the application that will transform the text file into an html file that you can

open with the browser installed on your device (tablet or smartphone).

The application will prompt you to select the file you want to convert:

(dialog box to choose the txt file)

Once you open the file, you will notice the text that was in the original file, in a gray color on a

white background.

The program automatically recognizes the first line and highlights it as the title (with a greater

height and red).


10

(HTML file screenshot -images manually added- )

(Zoom of the first two paragraphs)

If you tap with your finger the first sentence, it will appear highlighted, with the font

"OpenDyslexic", red in a black background.

(Screenshot with the first paragraph highlighted)


11

(Zoom of the first paragraph)

When you finished to read the phrase you can touch the next sentence and move the focus from the

first sentence to the second.

(Screenshot with the second paragraph highlighted)

(Zoom of the second paragraph)

In this way a student with dyslexia can read the entire document, formed by many paragraphs,

easily and safely without straining the eyes and attention.

This improves the student's self-esteem and independence, because he can read alone and in time

just like the other classmates.


12

4. Improvement: reading the position of the eyes

As improvement of the project it is possible to use the front camera, present in many tablet devices

and smartphones, to frame the face of the person in front and tracks the movement of his eyes to

automatically highlighting the line that is reading, without touching the screen with your finger.

This can be accomplished by implementing in the app an algorithm for the eye-tracking.

“The eye tracking is the process of measuring the ocular fixation point or the motion of an eye

relative to the head. Such measures can be obtained through an eye tracker and can be used in the

study of the visual anatomical and physiological, cognitive linguistics and in the design of

commercial products.”

The most widely used current designs are video-based eye trackers. A camera focuses on one or

both eyes and records their movement as the viewer looks at some kind of stimulus. Most modern

eye-trackers use the center of the pupil and infrared / near-infrared non-collimated light to create

corneal reflections (CR). The vector between the pupil center and the corneal reflections can be

used to compute the point of regard on surface or the gaze direction. A simple calibration

procedure of the individual is usually needed before using the eye tracker.

(From wikipedia.org )

The eye-tracking algorithms are also used to see where the glance stops when visiting a webpage,

reads an article or see an advertisement. This help in the design of web pages and advertising pages.

(Examples of study of the position of the eyes in the visit of a web page)


13

In our project, the eye-tracker starts with the launch of the app, and after a first calibration of the

look of the user, constantly monitors the movement of the eyes defining, in this way, what is the

line to be highlighted.

Practically it replaces the use of the mouse (in the computer) or the touch of a finger (in touch

devices) interacting the user with the device using only the eyes.

(During the calibration phase the algorithm studies the movement of the eyes of the person)

(Simulation of a study of eye tracking on the web page for the example)


14

5. How it’s made

The final file that is used by the student is an HTML format file, i.e. a file of the type that is used to

make web pages.

“HTML is a markup language that describes how to layout or graphical display (layout) of the content, text or otherwise, of a web page through formatting tags. Although HTML supports inserting scripts and external objects such as images or movies, not a programming language: not providing any definition of variables, data structures, functions and control structures that can implement programs, its code is in only able to structure and decorate textual data.” (From wikipedia.org - HTML)

In our case, let’s take for example the first paragraph of the text:

To make the interactive highlight as shown in chapter 3 we should added the following commands

(TAG) in HTML:

The creation of the interactive HTML file happens, hence, inserting every paragraph in this

structure with the tags and commands written above.

The automation of the process happens via an app, written in Processing, which scans the entire

proposed text, separates each paragraph, and inserts the necessary tags.

Dyslexia, also sometimes known as alexia or developmental reading disorder, is characterized

by difficulty with learning to read and with differing comprehension of language despite normal

or above-average intelligence.

<span id="myDiv1"

onMouseOver ="var div1 = document.getElementById('myDiv1');

div1.style.color='red';

div1.style.backgroundColor='black';

div1.style.fontSize='22px';

div1.style.fontFamily='OpenDyslexic';"

onMouseOut="var div1 = document.getElementById('myDiv1');

div1.style.color='darkgray';

div1.style.backgroundColor='white';

div1.style.fontSize='15px';

div1.style.fontFamily='Times New Roman';">

(… here is the text …)

</span>

<BR>


15

What is Processing

Processing is a programming language, development environment, and online community.

Since 2001, Processing has promoted software literacy within the visual arts and visual

literacy within technology. Initially created to serve as a software sketchbook and to teach

computer programming fundamentals within a visual context, Processing evolved into a

development tool for professionals. Today, there are tens of thousands of students, artists,

designers, researchers, and hobbyists who use Processing for learning, prototyping, and

production.

e. i. f. - wordpress.com · orthographic coding, auditory short-term memory, language skills/verbal...

Documents