Skip to content

Commit

Permalink
Merge pull request #1 from alanzchen/keydown
Browse files Browse the repository at this point in the history 
Fixes media key crash
  • Loading branch information
@alanzchen
alanzchen authored Jul 13, 2020
2 parents 9cefe5d + 11c0488 commit 0ea96ef
Show file tree
Hide file tree
Showing 5 changed files with 273 additions and 96 deletions.
287 changes: 213 additions & 74 deletions aidn.jp/mikutap/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,90 +1,229 @@
<!DOCTYPE html>
<html lang="ja">

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="description" content="クリック/タッチすることで、モーショングラフィックスと共に音を奏でるインタラクティブコンテンツの初音ミク版。">
<meta name="twitter:site" content="@daniwell_aidn">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://aidn.jp/shared/img/og/mikutap.png">
<meta property="og:locale" content="ja_JP">
<meta property="og:title" content="Mikutap">
<meta property="og:type" content="article">
<meta property="og:url" content="https://aidn.jp/mikutap/">
<meta property="og:image" content="https://aidn.jp/shared/img/og/mikutap.png">
<meta property="og:site_name" content="AIDN">
<meta property="og:description" content="クリック/タッチすることで、モーショングラフィックスと共に音を奏でるインタラクティブコンテンツの初音ミク版。">
<meta property="fb:app_id" content="260132667518211">
<head
prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"
>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0"
/>
<meta
name="description"
content="クリック/タッチすることで、モーショングラフィックスと共に音を奏でるインタラクティブコンテンツの初音ミク版。"
/>
<meta name="twitter:site" content="@daniwell_aidn" />
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:image"
content="https://aidn.jp/shared/img/og/mikutap.png"
/>
<meta property="og:locale" content="ja_JP" />
<meta property="og:title" content="Mikutap" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://aidn.jp/mikutap/" />
<meta
property="og:image"
content="https://aidn.jp/shared/img/og/mikutap.png"
/>
<meta property="og:site_name" content="AIDN" />
<meta
property="og:description"
content="クリック/タッチすることで、モーショングラフィックスと共に音を奏でるインタラクティブコンテンツの初音ミク版。"
/>
<meta property="fb:app_id" content="260132667518211" />
<title>Mikutap</title>
<link rel="apple-touch-icon" href="https://aidn.jp/mikutap/icon.png">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400" rel="stylesheet">
<link charset="UTF-8" href="../shared/sp/css/common.css" rel="stylesheet">
<link charset="utf-8" href="css/mikutap.css" rel="stylesheet">
<script>window.$ = window.jQuery = require('./js/jquery.min.js');</script>
<link rel="apple-touch-icon" href="https://aidn.jp/mikutap/icon.png" />
<link
href="https://fonts.googleapis.com/css?family=Quicksand:400"
rel="stylesheet"
/>
<link charset="UTF-8" href="../shared/sp/css/common.css" rel="stylesheet" />
<link charset="utf-8" href="css/mikutap.css" rel="stylesheet" />
<script>
window.$ = window.jQuery = require("./js/jquery.min.js");
</script>
<!-- <script charset="utf-8" src="js/jquery.min.js"
type="text/javascript"></script> -->
<script charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"
type="text/javascript"></script>
<script charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"
type="text/javascript"></script>
</head>
<script
charset="utf-8"
src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.11/pixi.min.js"
type="text/javascript"
></script>
<script
charset="utf-8"
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"
type="text/javascript"
></script>
</head>

<body>
<body>
<div id="view"></div>
<div id="scene_top">
<h1>Mikutap</h1>
<div id="ng">
<p class="atten">申し訳ございません、<br>お使いの端末又はブラウザには対応しておりません。</p>
</div>
<div class="ok">
<p id="bt_start"><a href="index.html">START</a></p>
</div>
<p id="bt_about"><a href="index.html">ABOUT</a></p>
<div class="ok">
<p class="attention">※サウンドをオンにしてお楽しみください。</p>
</div>
<p class="tit">SHARE:</p>
<p class="con"> <span class="sns" id="bt_tw"><img src="../shared/img/sns/twitter_w.png" alt="tweet"></span>
<span class="sns" id="bt_fb"><img src="../shared/img/sns/facebook_w.png" alt="share"></span> <span
class="sns" id="bt_gp"><img src="../shared/img/sns/google_w.png" alt="google+"></span> </p>
<h1>Mikutap</h1>
<div id="ng">
<p class="atten">
申し訳ございません、<br />お使いの端末又はブラウザには対応しておりません。
</p>
</div>
<div class="ok">
<p id="bt_start"><a href="index.html">START</a></p>
</div>
<p id="bt_about"><a href="index.html">ABOUT</a></p>
<div class="ok">
<p class="attention">※サウンドをオンにしてお楽しみください。</p>
</div>
<p class="tit">SHARE:</p>
<p class="con">
<span class="sns" id="bt_tw"
><img src="../shared/img/sns/twitter_w.png" alt="tweet"
/></span>
<span class="sns" id="bt_fb"
><img src="../shared/img/sns/facebook_w.png" alt="share"
/></span>
<span class="sns" id="bt_gp"
><img src="../shared/img/sns/google_w.png" alt="google+"
/></span>
</p>
</div>
<div id="scene_loading">
<hr size="1" color="#fff">
<hr size="1" color="#fff" />
</div>
<div id="scene_main">
<div class="set">
<p class="attention">CLICK &amp; DRAG or PRESS ANY KEY!</p>
<p id="bt_feedback"><a href="index.html">FEEDBACK: ON</a></p>
<p id="bt_backtrack"><a href="index.html">BACKTRACK: ON</a></p>
</div>
<div class="set">
<p class="attention">CLICK &amp; DRAG or PRESS ANY KEY!</p>
<p id="bt_feedback"><a href="index.html">FEEDBACK: ON</a></p>
<p id="bt_backtrack"><a href="index.html">BACKTRACK: ON</a></p>
</div>
</div>
<div id="about_cover"></div>
<div id="about">
<div id="about_in">
<p class="close"><span id="bt_close">×</span></p>
<p class="con"> Voiced by <a href="https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x"
target="_blank">Hatsune Miku</a> </p>
<p class="con"> Created by <a href="https://aidn.jp/daniwell/" target="_blank">daniwell</a> (<a
href="https://twitter.com/daniwell_aidn" target="_blank">twitter</a>) </p>
<p class="link">Inspired by <a href="http://patatap.com/" target="_blank">Patatap</a><br>(Wonderful
website!)</p>
</div>
<div id="about_in">
<p class="close"><span id="bt_close">×</span></p>
<p class="con">
Voiced by
<a
href="https://ec.crypton.co.jp/pages/prod/vocaloid/mikuv4x"
target="_blank"
>Hatsune Miku</a
>
</p>
<p class="con">
Created by
<a href="https://aidn.jp/daniwell/" target="_blank">daniwell</a> (<a
href="https://twitter.com/daniwell_aidn"
target="_blank"
>twitter</a
>)
</p>
<p class="link">
Inspired by <a href="http://patatap.com/" target="_blank">Patatap</a
><br />(Wonderful website!)
</p>
</div>
</div>
</body>
<script charset="UTF-8" src="../shared/js/common.js" type="text/javascript"></script>
<script charset="utf-8" src="js/mikutap.js" type="text/javascript"></script>
<script>
require('electron').ipcRenderer.on('ping', (event, message) => {
var keydownEvent = jQuery.Event("keydown", {keyCode: parseInt(message)})
var keyupEvent = jQuery.Event("keyup", {keyCode: parseInt(message)})
$(window).trigger(keydownEvent)
$(window).trigger(keyuupEvent)
})
jQuery(document).ready(()=> {
$("#bt_start a").click()
})
</script>
</html>
</body>
<script
charset="UTF-8"
src="../shared/js/common.js"
type="text/javascript"
></script>
<script charset="utf-8" src="js/mikutap.js" type="text/javascript"></script>
<script>
$(document).ready(() => {
$("#bt_start a").click();
});
const ioHook = require("iohook");
const keyNames = {
0: "§",
1: "Esc",
2: "1",
3: "2",
4: "3",
5: "4",
6: "5",
7: "6",
8: "7",
9: "8",
10: "9",
11: "0",
12: "-",
13: "=",
14: "Backspace",
15: "Tab",
16: "q",
17: "w",
18: "e",
19: "r",
20: "t",
21: "y",
22: "u",
23: "i",
24: "o",
25: "p",
26: "[",
27: "]",
28: "Enter",
29: "Left Ctrl",
30: "a",
31: "s",
32: "d",
33: "f",
34: "g",
35: "h",
36: "j",
37: "k",
38: "l",
39: ";",
40: "'",
41: "`",
42: "Left Shift",
43: "\\",
44: "z",
45: "x",
46: "c",
47: "v",
48: "b",
49: "n",
50: "m",
51: ",",
52: ".",
53: "/",
};

function getKeyCode(keycode) {
console.log(keycode);
var char = keyNames[keycode];
console.log(char);
var keyCode = char.charCodeAt(0);
if (keyCode > 90) {
// 90 is keyCode for 'z'
return keyCode - 32;
}
return keyCode;
}

ioHook.on("keydown", (event) => {
try {
var keycode = getKeyCode(event.keycode);
console.log(keycode);
if (keycode) {
var keydownEvent = $.Event("keydown", {
keyCode: parseInt(keycode),
});
var keyupEvent = $.Event("keyup", {
keyCode: parseInt(keycode),
});
$(window).trigger(keydownEvent);
$(window).trigger(keyupEvent);
}
} catch (error) {
console.log(error);
}
});

ioHook.start()
</script>
</html>
2 changes: 1 addition & 1 deletion aidn.jp/mikutap/js/mikutap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -613,7 +613,7 @@ var MainManager = function() {
x = 12 * Math.random() + 6),
t = n % m.length,
(0 < C[t].length ? C[t].pop() : new m[t](b,t)).play()));
console.log(C);
// console.log(C);
}
this.resize = function() {
if (w) {
Expand Down
22 changes: 2 additions & 20 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,11 @@
'use strict';

const { app, BrowserWindow, screen } = require('electron')
const ioHook = require('iohook');

function getKeyCode(char) {
var keyCode = char.charCodeAt(0);
if(keyCode > 90) { // 90 is keyCode for 'z'
return keyCode - 32;
}
return keyCode;
}
const console = require('console')

function createWindow () {
// Create the browser window.
const { width, height } = screen.getPrimaryDisplay().size
console.log(screen.getPrimaryDisplay().size)
const win = new BrowserWindow({
type: "desktop",
width: width,
Expand All @@ -27,19 +18,10 @@ function createWindow () {
enableLargerThanScreen: true,
hasShadow: false
})
ioHook.on('keypress', ({ keychar }) => {
try {
var k = String.fromCharCode(keychar)
var keycode = getKeyCode(k)
win.webContents.send("ping", keycode)
} catch (error) {
console.log(error)
}
});

// and load the index.html of the app.
win.loadFile('aidn.jp/mikutap/index.html')
// win.webContents.toggleDevTools()
ioHook.start(true)
}

// This method will be called when Electron has finished
Expand Down
Loading

0 comments on commit 0ea96ef

Please sign in to comment.