clavier.html 5.14 KB
Newer Older
1
2
3
4
{% load static %}
<!DOCTYPE html>
<html>
<head>
5
    <title>Clavier phonographémique</title>
6
    <meta charset="utf-8">
Sylvain Coulange's avatar
Sylvain Coulange committed
7
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
8
    <link rel="stylesheet" type="text/css" href="{% static 'styles/kinephones_style_v2.css'%}">
Sylvain Coulange's avatar
Sylvain Coulange committed
9
    <link rel="stylesheet" type="text/css" href="{% static 'styles/clavier.css'%}">
10
11
12
13
14

    <!-- <script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="{% static 'js/html2canvas.min.js' %}"></script>
    <script src="{% static 'js/download.js' %}"></script>
15
16
</head>
<body>
17
    {% include 'header.html' %}
18
    <div id="mainZone">
19
        <h2>Clavier phonographémique <span class="phon_p">p</span><span class="phon_u">ou</span><span class="phon_r_maj">r</span><span> </span><span class="phon_e">é</span><span class="phon_k">c</span><span class="phon_r_maj">r</span><span class="phon_i">i</span><span class="phon_r_maj">re</span><span> </span><span class="phon_a_maj_nas">en</span><span> </span><span class="phon_k">c</span><span class="phon_u">ou</span><span class="phon_l">l</span><span class="phon_9">eu</span><span class="phon_r_maj">rs</span></h2>
20
        <button id="div2png">Exporter en png (expérimental)</button>
21
22
        <!-- <button id="div2pdf">Exporter en pdf (expérimental)</button> -->
        
Sylvain Coulange's avatar
Sylvain Coulange committed
23
        <div class="fenetre textZone" id="textZone" contenteditable="false" spellcheck="true">
24
            <span id="g0" class="startPoint" onclick="putAnchor(this.id)">&nbsp;</span><span id="gEnd" onclick="putAnchorOnLast()">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
25
26
27
            <div class="outputParam" id="outputParam">
                <span onclick="bg2white()" class="glyphicon glyphicon-adjust" aria-hidden="true" title="Changer la couleur du fond"></span><br/>
                <span onclick="toggleContentEditable()" id="btnContentEditable" class="glyphicon glyphicon-edit" aria-hidden="true" title="(dé)vérrouiller la saisie"></span>
Sylvain Coulange's avatar
Sylvain Coulange committed
28
            </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
29
        </div>
30
31
32
    </div>

    <div class="boutons">
33
34
35
36
37
38
39
40
41
42
        <button onclick="writeGraph('. ','punct')" class="btn-car">.</button>
        <button onclick="writeGraph(', ','punct')" class="btn-car">,</button>
        <button onclick="writeGraph(' ? ','punct')" class="btn-car">?</button>
        <button onclick="writeGraph(' ! ','punct')" class="btn-car">!</button>
        <button onclick="writeGraph(' : ','punct')" class="btn-car">:</button>
        <button onclick="writeGraph(' ; ','punct')" class="btn-car">;</button>
        <button onclick="writeGraph('-','punct')" class="btn-car">-</button>
        <button onclick="writeGraph(' « ','punct')" class="btn-car">«</button>
        <button onclick="writeGraph(' » ','punct')" class="btn-car">»</button>
        <button onclick="writeGraph(' ','punct')" class="btn-car-space">Espace</button>
43
        <button onclick="writeEnter()" class="btn-car">Entrer</button>
44
45
        <button onclick="erasePreviousSpan()" class="btn-car">Effacer</button>
        <button onclick="eraseAll()" class="btn-car">Tout effacer</button>
46
47
48
        <button class="btn-car" onclick="gotoPrecedent()" title="Aller à la graphie précédente"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></button>
        <button class="btn-car" onclick="gotoNext()" title="Aller à la graphie suivante"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
        <button class="btn-car" onclick="putAnchorOnLast()" title="Aller à la dernière graphie"><span class="glyphicon glyphicon-step-forward" aria-hidden="true"></span></button>
49
50
51
    </div>
    
    <div class="clavier-graphiesZone">
52
        <div class="clavier" id="clavier">
53
            <embed id="svgFond" src="../static/svg/00.svg" class="superposeBack">
Sylvain Coulange's avatar
Sylvain Coulange committed
54
            <img id="pngPochoir" class="superpose">
Sylvain Coulange's avatar
Sylvain Coulange committed
55
56
            <img id="pngCalq" class="superpose">
            <embed id="svgClick" src="../static/svg/00-click.svg" class="superpose">
57
58
59
60
            <div class="control-clavier">
                <img src="../static/png/moins.png" id="btn-min" title="réduire le clavier"/>
                <img src="../static/png/plus.png" id="btn-max" title="agrandir le clavier"/>
            </div>
61
62
63
        </div>

        <div class="graphies">
Sylvain Coulange's avatar
Sylvain Coulange committed
64
            <div id="graphiesZone" class="graphiesZone"></div>
65
66
        </div>
    </div>
Sylvain Coulange's avatar
Sylvain Coulange committed
67
68
    
    <div class="fenetre btn-calq-div">
Sylvain Coulange's avatar
Sylvain Coulange committed
69
70
        <input type="image" class="btn-calq" src="../static/png/btn_rien.png" title="Panneau vierge" id="btn-rien" />
        <input type="image" class="btn-calq" src="../static/png/btn_vsm.png" title="Voisements et position langue" id="btn-vsm" />
71
        <input type="image" class="btn-calq btnfocus" src="../static/png/btn_bch.png" title="Formes de bouche" id="btn-bch" />
Sylvain Coulange's avatar
Sylvain Coulange committed
72
        <input type="image" class="btn-calq" src="../static/png/btn_cpsg.png" title="Coupes sagitales" id="btn-cpsg" />
Sylvain Coulange's avatar
Sylvain Coulange committed
73
74
    </div>

75
    {% include 'footer.html' %}
76

77
    
78
    <script src="{% static 'js/clavier.js' %}"></script>
79
    
80
    
81
</html>