inkmorse/demo.html at master · celso/inkmorse · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Ink Morse Component Demo</title>
        <meta name="description" content="">
        <meta name="author" content="ink, cookbook, recipes">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <!-- Place favicon.ico and apple-touch-icon(s) here  -->

        <link rel="shortcut icon" href="http://cdn.ink.sapo.pt/3.0.0/img/favicon.ico">
        <link rel="apple-touch-icon-precomposed" href="http://cdn.ink.sapo.pt/3.0.0/img/touch-icon.57.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://cdn.ink.sapo.pt/3.0.0/img/touch-icon.72.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://cdn.ink.sapo.pt/3.0.0/img/touch-icon.114.png">
        <link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.0.0/img/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
        <link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.0.0/img/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
        <link rel="apple-touch-startup-image" href="http://cdn.ink.sapo.pt/3.0.0/img/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">

        <!-- load inks css from the cdn -->
        <link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.0.0/css/ink-flex.min.css">
        <link rel="stylesheet" type="text/css" href="http://cdn.ink.sapo.pt/3.0.0/css/font-awesome.min.css">

        <!-- load inks css for IE8 -->
        <!--[if lt IE 9 ]>
            <link rel="stylesheet" href="http://cdn.ink.sapo.pt/3.0.0/css/ink-ie.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <![endif]-->

        <!-- test browser flexbox support and load legacy grid if unsupported -->
        <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.0.0/js/modernizr.js"></script>
        <script type="text/javascript">
            Modernizr.load({
              test: Modernizr.flexbox,
              nope : 'http://cdn.ink.sapo.pt/3.0.0/css/ink-legacy.min.css'
            });
        </script>

        <!-- load inks javascript files from the cdn -->
        <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.0.0/js/holder.js"></script>
        <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.0.0/js/ink-all.js"></script>
        <script type="text/javascript" src="http://cdn.ink.sapo.pt/3.0.0/js/autoload.js"></script>

        <script type="text/javascript" src="ink.morse.js"></script>
    </head>

    <body>

        <!--[if lte IE 9 ]>
        <div class="ink-alert basic">
            <button class="ink-dismiss">&times;</button>
            <p>
                <strong>You are using an outdated Internet Explorer version.</strong>
                Please <a href="http://browsehappy.com/">upgrade to a browser</a> to improve your web experience.
            </p>
        </div>
        -->
    <div class="ink-grid">

        <section class="column-group gutters">
            <div class="large-100 medium-100 small-100 vertical-space">
                <h1><i class="fa fa-headphones"></i> Ink Morse Module</h1>

                <p>Because 1836, but also because Ink and WebAudio</p>

                <form class="ink-form" onsubmit="return(false);">
                    <div class="control-group column-group gutters">


                        <div class="control all-100">
                            <label for="message" class="all-100">Message</label>
                            <div class="control all-100">
                                <input type="text" id="message" placeholder="Please input some text">
                                <small>Allowed chars: A-Z0-9!&+=/(?_".@'-;!),:</small>
                            </div>
                        </div>

                        <div class="control all-25 small-100">
                                <label for="wpm" class="all-100">Words per minute</label>
                                <div class="control all-100">
                                    <input type="text" id="wpm" value="20">
                                </div>
                        </div>

                        <div class="control all-25 small-100">
                                <label for="freq" class="all-100">Frequency</label>
                                <div class="control all-100">
                                    <input type="text" id="freq" value="1300">
                                    <small>50 to 15000 will work, maybe</small>
                                </div>
                        </div>

                        <div class="control all-25 small-100">
                                <label for="volume" class="all-100">Volume</label>
                                <div class="control all-100">
                                    <input type="text" id="volume" value="1">
                                    <small>0.1 to 1</small>
                                </div>
                        </div>

                        <div class="control all-25 small-100">
                                <label for="sr" class="all-100">Sample Rate</label>
                                <div class="control all-100">
                                    <input type="text" id="sr" value="44100">
                                    <small>22050 to 96000, maybe</small>
                                </div>
                        </div>

                        <div class="all-100">
                            <button id="play" class="ink-button green">Play</button>
                            <button id="stop" class="ink-button red">Stop</button>
                        </div>

                        <div class="all-100">
                            <p id="notify"></p>
                        </div>

                    </div>
                </form>

            </div>
        </section>

    </div>


    <footer class="clearfix">
        <div class="ink-grid">
            <ul class="unstyled inline half-vertical-space">
                <li class="active"><i class="fa fa-github"></i> <a href="https://github.com/celso/inkmorse">Github code</a></li>
            </ul>
            <p class="note">Celso Martinho</p>
        </div>
    </footer>

    <script type="text/javascript">

    Ink.requireModules(['Ink.Dom.Event_1','Ink.Ext.Morse_1'],function( InkEvent, MorseObject ){

        var Morse=new MorseObject;

        InkEvent.observe(Ink.i('message'), 'keyup', function(event) {
            Ink.i('message').value=Ink.i('message').value.toUpperCase();
        });

        InkEvent.observe(Ink.i('play'), 'click', function(event) {
            Morse.wpm = Ink.i('wpm').value;
            Morse.freq = Ink.i('freq').value;
            Morse.volume = Ink.i('volume').value;
            Morse.sample_rate = Ink.i('sr').value;
            Morse.prepare();
            Morse.onWord=function(w){
                Ink.i('notify').innerHTML+=w;
            };
            var message = Ink.i('message').value;
            if( message.length ) {
                Ink.i('notify').innerHTML='Playing';
            }
            else
            {
                Ink.i('notify').innerHTML='No message to play';
            }
            Morse.play(message);
        });

        InkEvent.observe(Ink.i('stop'), 'click', function(event) {
            Morse.stop();
            Ink.i('notify').innerHTML='Stopped';
        });

    });

    </script>

    </body>
</html>