Skip to content

Instantly share code, notes, and snippets.

@yswallow

yswallow/bata.html

Last active August 24, 2020 05:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save yswallow/63ed1675d8c7fa3dcab2e31f52367412 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save yswallow/63ed1675d8c7fa3dcab2e31f52367412 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bata.html
<html>
<head>
<meta charset="UTF-8">
<title>Mouse.ini generator</title>
</head>
<body>
<div class="wrapper">
<div id="left-column">
<h1>Mouse.ini設定ツール</h1>
<div class="box">
<!-- Configure Application -->
<div>
<div class="block">アプリケーション実行ファイル名: </div>
<div><input class="saveConfigWhenChange" id="application-name" type="text"></input></div>
</div>
<div><div class="block">キャプション名: </div><div><input class="saveConfigWhenChange" id="caption" type="text"></input></div></div>
<div>
<!-- add button -->
<button id="add-button">追加</button>
<button id="remove-button">削除</button>
<button id="create-button">新規作成</button>
</div>
</div>
<div>
<!-- list -->
<h4>設定リスト</h4>
<ol id="configuration-list">
</ol>
</div>
<div>
<!-- download link -->
<a download="Mouse.ini" id="download-link" href="data:,">download</a>
</div>
<textarea id="output"></textarea>
</div>
<div id="right-column">
<div class="box">
<!-- Area Selection Editor -->
<canvas id="selection-area" width="480" height="360"></canvas>
<span>
(<span id="start-x">0</span>,<span id="start-y">0</span>)-(<span id="end-x">0</span>,<span id="end-y">0</span>)
</span>
<button id="upload-image">背景をアップロード</button>
</div>
<div class="wrapper">
<div>
<input class="saveWhenChange" id="hide-mouse" type="checkbox"></input>
<label for="hide-mouse">操作中はマウスアイコンを消す</label>
</div>
<!-- line2 -->
<div>
<input class="saveWhenChange" id="line2Pass" type="checkbox">
<label for="line2Pass">左ドラッグのみ</label>
</div>
</div>
<div>
ボタンの位置:
<select class="saveWhenChange" id="position">
<option value="">カーソルの周りに表示</option>
<option value="L">左端に表示</option>
<option value="R">右端に表示</option>
<option value="H">ボタンを表示しない</option>
</select>
</div>
<div>
<div class="block">現在の設定:</div>
<table>
<tr><td>中ボタン</td><td id="center-button-current-action">無効</td></tr>
<tr><td>左ボタン</td><td id="left-button-current-action">Ctrl+ドラッグ</td></tr>
<tr><td>右ボタン</td><td id="right-button-current-action">距離でPinch/Pan</td></tr>
<tr><td>ホイール</td><td id="wheel-current-action">ドラッグ+距離によるホイール操作</td></tr>
</table>
</div>
<div class="button-function-selection">
<div class="wrapper">
<div>
<div class="block">
設定変更:
</div>
<select id="button-name">
<option value="1">中ボタン</option>
<option value="2">左ボタン</option>
<option value="3">右ボタン</option>
<option value="4">ホイール</option>
</select>
</div>
<span class="button-config">
<div>
<input class="saveWhenChange" type="radio" id="disable" name="button1">
<label for="disable">無効</label>
</div>
</span>
<span class="button-config">
<div class="block">
<input type="radio" id="enable" name="button1" checked>
<label for="enable">マウスとして有効</label>
</div>
<div class="detail">
<div>
<input class="button-mouse-detail" type="checkbox" id="drag" checked>
<label for="drag">ドラッグ</label>
</div>
<div>
<input class="button-mouse-detail" type="checkbox" id="Ctrl">
<label for="Ctrl">Ctrl</label>
</div>
<div>
<input class="button-mouse-detail" type="checkbox" id="Alt">
<label for="Alt">Alt</label>
</div>
<div>
<input class="button-mouse-detail" type="checkbox" id="wheel">
<label for="wheel">距離によるホイール操作</label>
</div>
</div>
</span>
<span class="button-config">
<div class="block">
<input class="saveWhenChange" type="radio" id="touch" name="button1">
<label for="touch">タッチパネル</label>
</div>
<div class="detail">
<div>
<input class="button-touchpanel-detail saveWhenChange" type="radio" id="zoom-only" name="touch-action">
<label for="zoom-only">距離でPinch/Pan</label>
</div>
<div>
<input class="button-touchpanel-detail saveWhenChange" type="radio" id="zoom-and-drag" name="touch-action">
<label for="zoom-and-drag">距離でPinch/Pan + ドラッグ操作</label>
</div>
</div>
</span>
</div>
</div>
</div>
</div>
<script>
//start document
/*
list of programs:
* class definision
* global variables
* reset configuration creation area script
* area selection script
* line1 editor
* add column script
* download link generation script
*/
//end document
//start global variables
textArea_output = document.getElementById("output");
downloadLink = document.getElementById("download-link");
applicationName = document.getElementById("application-name");
caption = document.getElementById("caption");
hideMouse = document.getElementById("hide-mouse");
centerButtonCurrentAction = document.getElementById("center-button-current-action");
leftButtonCurrentAction = document.getElementById("left-button-current-action");
rightButtonCurrentAction = document.getElementById("right-button-current-action");
wheelCurrentAction = document.getElementById("wheel-current-action");
dragCheckbox = document.getElementById("drag");
ctrlCheckbox = document.getElementById("Ctrl");
altCheckbox = document.getElementById("Alt");
wheelCheckbox = document.getElementById("wheel");
zoomRadioButton = document.getElementById("zoom-only");
zoomDragRadioButton = document.getElementById("zoom-and-drag");
buttonDisable = document.getElementById("disable");
buttonEnable = document.getElementById("enable");
buttonTouchpanel = document.getElementById("touch");
buttonMouseDetails = document.getElementsByClassName("button-mouse-detail");
buttonTouchpanelDetails = document.getElementsByClassName("button-touchpanel-detail");
buttonSelection = document.getElementById("button-name");
// not in ButtonConfigWrapper
configuration_list = document.getElementById("configuration-list");
add_button = document.getElementById("add-button");
createButton = document.getElementById("create-button");
saveConfigWhenChanges = document.getElementsByClassName("saveConfigWhenChange");
getAreaItems = function() {
return document.getElementsByClassName("areaItem");
}
getConfigItems = function() {
return document.getElementsByClassName("configItem");
}
var CanvasWrapper = {
canvas : document.getElementById("selection-area"),
//selected : false,
zoom : 1.5,
//clicked : false,
state: null,
//startX : 0,
//startY : 0,
startPosition: null,
previousPosition: null,
resizingType: 0,
resizingArea: null,
resizingCursorType: "auto",
update: function() {
areas = configs.getCurrent().areas;
for(i=0; i<areas.length; i++) {
areas[i].updateList();
}
},
clear : function(ctx) {
this.ctx.clearRect(0,0,320*this.zoom,240*this.zoom);
},
drawTempRect: function(e) {
position = this.getPosition(e);
this.ctx.fillStyle = "red";
this.ctx.fillRect(
this.startPosition.absoluteX,
this.startPosition.absoluteY,
position.absoluteX-this.startPosition.absoluteX,
position.absoluteY-this.startPosition.absoluteY
);
},
setStartPosition: function(e) {
this.startPosition = this.getPosition(e);
},
getPosition : function(e) {
rect = e.target.getBoundingClientRect();
const position = {};
position.absoluteX = e.clientX - rect.left;
position.absoluteY = e.clientY - rect.top;
position.x = parseInt( position.absoluteX / this.zoom);
position.y = parseInt( position.absoluteY / this.zoom);
return position;
}
}
CanvasWrapper.ctx = CanvasWrapper.canvas.getContext("2d");
const ButtonConfigWrapper = {
applicationName: document.getElementById("application-name"),
caption: document.getElementById("caption"),
hideMouse: document.getElementById("hide-mouse"),
onlyLeftDrag: document.getElementById("line2Pass"),
centerButtonCurrentAction: document.getElementById("center-button-current-action"),
leftButtonCurrentAction: document.getElementById("left-button-current-action"),
rightButtonCurrentAction: document.getElementById("right-button-current-action"),
wheelCurrentAction: document.getElementById("wheel-current-action"),
dragCheckbox: document.getElementById("drag"),
ctrlCheckbox: document.getElementById("Ctrl"),
altCheckbox: document.getElementById("Alt"),
wheelCheckbox: document.getElementById("wheel"),
zoomRadioButton: document.getElementById("zoom-only"),
zoomDragRadioButton: document.getElementById("zoom-and-drag"),
buttonDisable: document.getElementById("disable"),
buttonEnable: document.getElementById("enable"),
buttonTouchpanel: document.getElementById("touch"),
buttonMouseDetails: document.getElementsByClassName("button-mouse-detail"),
buttonTouchpanelDetails: document.getElementsByClassName("button-touchpanel-detail"),
buttonSelection: document.getElementById("button-name"),
buttonAlign: document.getElementById("position"),
validate: function() {
disabled = ! ButtonConfigWrapper.buttonEnable.checked;
ButtonConfigWrapper.dragCheckbox.disabled = disabled;
ButtonConfigWrapper.ctrlCheckbox.disabled = disabled;
ButtonConfigWrapper.altCheckbox.disabled = disabled;
ButtonConfigWrapper.wheelCheckbox.disabled = disabled;
disabled = ! ButtonConfigWrapper.buttonTouchpanel.checked;
ButtonConfigWrapper.zoomRadioButton.disabled = disabled;
ButtonConfigWrapper.zoomDragRadioButton.disabled = disabled;
},
clearTouchSelection: function() {
this.zoomRadioButton.checked = false;
this.zoomDragRadioButton.checked = false;
},
mouseDisabled: function(bool) {
ButtonConfigWrapper.dragCheckbox.disabled = bool;
ButtonConfigWrapper.ctrlCheckbox.disabled = bool;
ButtonConfigWrapper.altCheckbox.disabled = bool;
ButtonConfigWrapper.wheelCheckbox.disabled = bool;
},
touchDisabled: function(bool) {
ButtonConfigWrapper.zoomDragRadioButton.disabled = bool;
ButtonConfigWrapper.zoomRadioButton.disabled = bool;
},
detailSettingDisabled: function(bool) {
this.buttonDisable.disabled = bool;
this.buttonEnable.disabled = bool;
this.buttonTouchpanel.disabled = bool;
},
clear: function() {
this.applicationName.value = "";
this.caption.value = "";
this.hideMouse.checked = false;
this.onlyLeftDrag.checked = false;
this.buttonAlign.value = "";
this.centerButtonCurrentAction.innerText = "(empty)";
this.leftButtonCurrentAction.innerText = "(empty)";
this.rightButtonCurrentAction.innerText = "(empty)";
this.wheelCurrentAction.innerText = "(empty)";
this.buttonSelection.value = 1;
this.buttonEnable.checked = true;
this.dragCheckbox.checked = true;
this.ctrlCheckbox.checked = false;
this.altCheckbox.checked = false;
this.wheelCheckbox.checked = false;
this.validate();
},
saveMouseButtonConfig: function(e) {
button = ButtonConfigWrapper.getButton();
button.writeBit(1,ButtonConfigWrapper.dragCheckbox.checked);
button.writeBit(2,ButtonConfigWrapper.ctrlCheckbox.checked);
button.writeBit(4,ButtonConfigWrapper.altCheckbox.checked);
button.writeBit(8,ButtonConfigWrapper.wheelCheckbox.checked);
},
saveButtonMode: function() {
if(ButtonConfigWrapper.buttonDisable.checked) {
ButtonConfigWrapper.setButtonMode(0);
} else if(ButtonConfigWrapper.buttonTouchpanel.checked) {
if(ButtonConfigWrapper.zoomRadioButton.checked) {
ButtonConfigWrapper.setButtonMode(16);
} else if(ButtonConfigWrapper.zoomDragRadioButton.checked) {
ButtonConfigWrapper.setButtonMode(17)
} else {
ButtonConfigWrapper.setButtonMode(16);
}
} else if( ButtonConfigWrapper.buttonEnable.checked ){
ButtonConfigWrapper.setButtonMode(
ButtonConfigWrapper.dragCheckbox.checked*1
+ ButtonConfigWrapper.ctrlCheckbox.checked*2
+ ButtonConfigWrapper.altCheckbox.checked*4
+ ButtonConfigWrapper.wheelCheckbox.checked*8
);
} else {
ButtonConfigWrapper.setButtonMode(1);
}
},
getButton: function() {
return configs.getCurrent().areas.getActiveArea().button[ButtonConfigWrapper.buttonSelection.value];
},
setButtonMode: function(num) {
this.getButton().mode = num;
},
getButtonMode: function() {
return this.getButton().mode;
}
};
//end global variables
//start class definision
function createConfig(parent) {
const config = {};
config.parent = parent;
config.elements = {
root: document.createElement("li"),
exeName: document.createElement("span"),
caption: document.createElement("span"),
areas: document.createElement("ul")
};
configuration_list.appendChild(config.elements.root);
config.elements.root.appendChild(config.elements.exeName);
config.elements.root.append(":");
config.elements.root.append(config.elements.caption);
config.elements.root.appendChild(config.elements.areas);
config.elements.root.setAttribute("class", "configItem");
config.elements.root.config = config;
config.elements.root.addEventListener("click", (e)=>{
n = e.target;
while(! n.config) {
n = n.parentElement;
if(! n) {
break;
}
}
console.log(n);
n.config.parent.activate(n.config);
n.config.display();
}, true);
config.exeName = "";
config.caption = "";
config.areas = [];
config.areas.defaultArea = createArea(0,0,320,240,null);
config.areas.displayAll = function() {
for(i=0; i<this.length; i++) {
this[i].drawRect("blue");
}
};
config.areas.getActiveArea = function() {
if(this.length==0) {
return this.defaultArea;
}
return this[this.length-1];
};
config.areas.chooseActiveArea = function(position) {
for(i=this.length-1; i>=0; i--) {
place = this[i].cursorPlace(position)
if( place&2 && place&64 ) {
area = this[i];
area.activate();
this.splice(i,1);
this.push(area);
this.displayAll();
return area;
}
}
return null;
}
config.areas.removeActiveArea = function() {
this.pop();
}
config.areas.removeArea = function(area) {
while(i=areas.indexOf(area) && i!=-1) {
areas.splice(i,1);
}
}
config.save = function() {
this.exeName = applicationName.value;
this.caption = caption.value;
};
config.update = function() {
this.elements.exeName.innerText = this.exeName;
this.elements.caption.innerText = this.caption;
}
config.display = function() {
applicationName.value = this.exeName;
caption.value = this.caption;
CanvasWrapper.clear();
this.areas.displayAll();
area = this.areas.getActiveArea();
area.activate();
this.update();
}
config.toString = function() {
return (""+this.exeName+":"+this.caption);
}
return config;
}
const configs = [ ];
configs.push(createConfig(configs));
configs.activeIndex = 0;
configs.getCurrent = function() {
return this[this.activeIndex];
}
configs.activate = function(config) {
console.log(config);
this.activeIndex = this.indexOf(config);
console.log(this.activeIndex);
if(this.activeIndex==-1) {
this.activeIndex = this.length-1;
}
items = getConfigItems();
for(i=0; i<items.length; i++) {
if(i==this.activeIndex) {
items[i].setAttribute("id","selectedConfigItem");
} else {
items[i].removeAttribute("id");
}
}
}
configs.getCurrent().display();
function createArea(x1, y1, x2, y2, config) {
const area = {};
// configuration for canvas
area.update = function(x1, y1, x2, y2) {
this.x1 = x1 < x2 ? x1 : x2;
this.x2 = x1 < x2 ? x2 : x1;
this.y1 = y1 < y2 ? y1 : y2;
this.y2 = y1 < y2 ? y2 : y1;
}
area.update(x1,y1,x2,y2);
area.drawRect = function(color) {
ctx = CanvasWrapper.ctx;
ctx.fillStyle = "black";
ctx.fillRect(
CanvasWrapper.zoom*this.x1, CanvasWrapper.zoom*this.y1,
CanvasWrapper.zoom*(this.x2-this.x1), CanvasWrapper.zoom*(this.y2-this.y1)
);
ctx.fillStyle = color;
ctx.fillRect(
CanvasWrapper.zoom*this.x1+2, CanvasWrapper.zoom*this.y1+2,
CanvasWrapper.zoom*(this.x2-this.x1)-4, CanvasWrapper.zoom*(this.y2-this.y1)-4
);
};
area.is_inner = function(position) {
return ( this.cursorPlace(position) == 66 );
}
area.is_border = function(position) {
place = this.cursorPlace(position);
return ( place&2 && place&64 && place!=66 )
}
area.cursorPlace = function(position) {
bit = 0;
width = 4;
if(position.x < this.x1+width) {
bit += 1;
} else if( this.x2-width < position.x ) {
bit += 4;
}
if(this.x1-width < position.x && position.x < this.x2+width) {
bit += 2;
}
if( position.y < this.y1+width) {
bit += 32;
} else if(this.y2-width < position.y) {
bit += 128;
}
if(this.y1-width < position.y && position.y < this.y2+width ) {
bit += 64;
}
return bit;
}
area.getCursorName = function(position) {
i = this.cursorPlace(position);
bitx = i % 32;
bity = parseInt(i / 32);
cursorName = "auto"
if( bitx==3 || bitx==6) {
if( bity==2 ) {
cursorName = "ew-resize";
}
} else if( bity==3 || bity==6 ) {
if( bitx==2) {
cursorName = "ns-resize";
}
}
if( i==198 || i==99 ){
cursorName = "nwse-resize";
} else if( i==195 || i==102) {
cursorName = "nesw-resize";
} else if ( i==66 ) {
cursorName = "move"
}
return cursorName;
}
area.move = function(x,y) {
x /= CanvasWrapper.zoom;
y /= CanvasWrapper.zoom;
this.x1 += parseInt(x);
this.x2 += parseInt(x);
this.y1 += parseInt(y);
this.y2 += parseInt(y);
}
// configuration to register configuration
area.hideCursor = false;
area.buttonAlign = "";
area.onlyLeftDrag = false;
area.button = [ undefined, createButtonConfig(), createButtonConfig(), createButtonConfig(), createButtonConfig() ];
area.activate = function() {
this.drawRect("red");
ButtonConfigWrapper.centerButtonCurrentAction.innerText = this.button[1].toString();
ButtonConfigWrapper.leftButtonCurrentAction.innerText = this.button[2].toString();
ButtonConfigWrapper.rightButtonCurrentAction.innerText = this.button[3].toString();
ButtonConfigWrapper.wheelCurrentAction.innerText = this.button[4].toString();
ButtonConfigWrapper.hideMouse.checked = this.hideCursor;
ButtonConfigWrapper.onlyLeftDrag.checked = this.onlyLeftDrag;
ButtonConfigWrapper.buttonAlign.value = this.buttonAlign;
others = getAreaItems();
for(i=0;i<others.length;i++) {
others[i].removeAttribute("id");
}
this.elements.root.setAttribute("id","selectedAreaItem");
this.activeateConfigArea();
};
area.activeateConfigArea = function() {
config = this.button[ ButtonConfigWrapper.buttonSelection.value ];
config.display();
};
area.updateCurrentAction = function() {
switch(parseInt(ButtonConfigWrapper.buttonSelection.value)) {
case 1:
ButtonConfigWrapper.centerButtonCurrentAction.innerText = this.button[1].toString();
break;
case 2:
ButtonConfigWrapper.leftButtonCurrentAction.innerText = this.button[2].toString();
break;
case 3:
ButtonConfigWrapper.rightButtonCurrentAction.innerText = this.button[3].toString();
break;
case 4:
ButtonConfigWrapper.wheelCurrentAction.innerText = this.button[4].toString();
Wbreak;
}
}
area.toString = function() {
return( "(" + this.x1 + "," + this.y1 + ")-(" + this.x2 + "," + this.y2 + ")" );
}
area.updateList = function() {
this.elements.x1.innerText = this.x1;
this.elements.x2.innerText = this.x2;
this.elements.y1.innerText = this.y1;
this.elements.y2.innerText = this.y2;
};
area.elements = {
root: document.createElement("li"),
x1: document.createElement("span"),
x2: document.createElement("span"),
y1: document.createElement("span"),
y2: document.createElement("span")
};
area.elements.root.setAttribute("class", "areaItem");
area.elements.root.append("(");
area.elements.root.appendChild(area.elements.x1);
area.elements.root.append(",");
area.elements.root.appendChild(area.elements.y1);
area.elements.root.append(")-(");
area.elements.root.appendChild(area.elements.x2);
area.elements.root.append(",");
area.elements.root.appendChild(area.elements.y2);
area.elements.root.append(")");
area.elements.root.area = area;
if(config) {
config.elements.areas.appendChild(area.elements.root);
}
return area;
}
function createDefaultArea() {
const area = {};
// configuration for canvas
area.update = function(x1, y1, x2, y2) { };
area.drawRect = function(color) {
};
area.is_inner = function(position) {
return false;
}
area.is_border = function(position) {
return false;
}
area.cursorPlace = function(position) {
return 0;
}
area.getCursorName = function(position) {
return "auto";
}
area.move = function(x,y) {
}
// configuration to register configuration
area.hideCursor = false;
area.buttonAlign = "";
area.button = [ createButtonConfig(), createButtonConfig(), createButtonConfig(), createButtonConfig() ];
area.activate = function() {
centerButtonCurrentAction.innerText = this.button[0].toString();
leftButtonCurrentAction.innerText = this.button[1].toString();
rightButtonCurrentAction.innerText = this.button[2].toString();
wheelCurrentAction.innerText = this.button[3].toString();
ButtonConfigWrapper.hideMouse.checked = this.hideCursor;
ButtonConfigWrapper.buttonAlign.value = this.buttonAlign;
}
return area;
}
function createButtonConfig() {
const config = {
mode: 1
};
config.setBit = function(position) {
this.mode |= position;
};
config.unsetBit = function(position) {
if( this.mode & position ) {
this.mode -= position;
}
};
config.writeBit = function(position, bool) {
if(bool) {
this.setBit(position);
} else {
this.unsetBit(position);
}
};
config.toString = function() {
console.log(this);
if(this.mode==0) {
return "無効"
} else if(this.mode&16) {
base = "距離でPinch/Pan"
if(this.mode&1) {
base += " + ドラッグ操作"
}
return base;
} else if(this.mode & 15) {
actions = [];
if(this.mode&2) {
actions.push("Ctrl");
}
if(this.mode&4) {
actions.push("Alt");
}
if(this.mode&1) {
actions.push("ドラッグ");
}
if(this.mode&8) {
actions.push("距離によるホイール操作")
}
return actions.join(" + ")
} else {
return "エラーが発生しました。"
}
};
config.display = function(){
if(this.mode==0) {
ButtonConfigWrapper.buttonDisable.checked = true;
} else if(this.mode&16) {
ButtonConfigWrapper.buttonTouchpanel.checked = true;
if(this.mode&1) {
ButtonConfigWrapper.zoomDragRadioButton.checked = true;
} else {
ButtonConfigWrapper.zoomRadioButton.checked = true;
}
} else if(this.mode & 15) {
ButtonConfigWrapper.buttonEnable.checked = true;
ButtonConfigWrapper.dragCheckbox.checked = this.mode&1;
ButtonConfigWrapper.ctrlCheckbox.checked = this.mode&2 ? true : false;
ButtonConfigWrapper.altCheckbox.checked = this.mode&4 ? true : false;
ButtonConfigWrapper.wheelCheckbox.checked = this.mode&8 ? true : false;
}
ButtonConfigWrapper.validate();
}
return config;
}
var DisplayArea = {
startX : document.getElementById("start-x"),
startY : document.getElementById("start-y"),
endX : document.getElementById("end-x"),
endY : document.getElementById("end-y"),
updateStart: function(position) {
this.startX.innerText = position.x;
this.startY.innerText = position.y;
},
updateEnd: function(position) {
this.endX.innerText = position.x;
this.endY.innerText = position.y;
}
}
//end class definision
//start area selection script
canvas = CanvasWrapper.canvas;
canvas.addEventListener("mousemove", (e)=>{
var position = CanvasWrapper.getPosition(e);
DisplayArea.updateEnd(position);
if(CanvasWrapper.state) {
CanvasWrapper.clear();
configs.getCurrent().areas.displayAll();
if(CanvasWrapper.state=="creatingArea") {
CanvasWrapper.drawTempRect(e);
} else if(CanvasWrapper.state=="resizingArea"){
CanvasWrapper.drawTempRect(e);
} else if(CanvasWrapper.state=="movingLine"){
switch(CanvasWrapper.resizingType) {
case 98:
CanvasWrapper.resizingArea.y1 = position.y;
break;
case 67:
CanvasWrapper.resizingArea.x1 = position.x;
break;
case 70:
CanvasWrapper.resizingArea.x2 = position.x;
break;
case 194:
CanvasWrapper.resizingArea.y2 = position.y;
break;
}
CanvasWrapper.resizingArea.drawRect("red");
} else if(CanvasWrapper.state=="movingArea") {
resizingArea = CanvasWrapper.resizingArea;
area = createArea(
resizingArea.x1, resizingArea.y1,
resizingArea.x2, resizingArea.y2,
null
);
diff_x = position.x - CanvasWrapper.startPosition.x;
diff_y = position.y - CanvasWrapper.startPosition.y;
area.move(diff_x, diff_y);
area.drawRect("red");
}
} else {
activeArea = configs.getCurrent().areas.getActiveArea();
if(activeArea) {
e.target.style.cursor = activeArea.getCursorName(position);
}
DisplayArea.updateStart(position);
}
});
canvas.addEventListener("pointerdown", (e)=>{
var position = CanvasWrapper.getPosition(e);
DisplayArea.updateStart(position);
activeArea = configs.getCurrent().areas.chooseActiveArea(position);
CanvasWrapper.setStartPosition(e);
if(activeArea) {
CanvasWrapper.resizingArea = activeArea;
configs.getCurrent().areas.removeActiveArea();
activeArea.drawRect("red");
if(activeArea.is_border(position)) {
CanvasWrapper.state = "resizingArea";
CanvasWrapper.resizingCursorType = activeArea.getCursorName(position);
e.target.style.cursor = CanvasWrapper.resizingCursorType;
cursorPlace = activeArea.cursorPlace(position);
CanvasWrapper.resizingType = cursorPlace;
staticPosition = {};
if( cursorPlace == 99 ) {
staticPosition.x = activeArea.x2;
staticPosition.y = activeArea.y2;
} else if( cursorPlace == 102 ) {
staticPosition.x = activeArea.x1;
staticPosition.y = activeArea.y2;
} else if( cursorPlace == 195 ) {
staticPosition.x = activeArea.x2;
staticPosition.y = activeArea.y1;
} else if( cursorPlace == 198 ) {
staticPosition.x = activeArea.x1;
staticPosition.y = activeArea.y1;
} else {
CanvasWrapper.state = "movingLine";
}
if(CanvasWrapper.state == "resizingArea") {
staticPosition.absoluteX=staticPosition.x*CanvasWrapper.zoom,
staticPosition.absoluteY=staticPosition.y*CanvasWrapper.zoom
CanvasWrapper.startPosition = staticPosition;
}
} else if(activeArea.is_inner(position)) {
CanvasWrapper.state = "movingArea";
e.target.style.cursor = "move";
}
} else {
CanvasWrapper.state = "creatingArea";
}
});
/*
if(CanvasWrapper.state=="creatingArea") {
} else if(CanvasWrapper.state=="resizingArea"){
} else if(CanvasWrapper.state=="movingLine"){
} else if(CanvasWrapper.state=="movingArea") {
}
*/
canvas.addEventListener("pointerup", (e)=>{
position = CanvasWrapper.getPosition(e);
if(CanvasWrapper.state=="creatingArea") {
area = createArea(
CanvasWrapper.startPosition.x,
CanvasWrapper.startPosition.y,
position.x, position.y,
configs.getCurrent()
);
configs.getCurrent().areas.push(area);
} else {
if( CanvasWrapper.state=="resizingArea" ) {
CanvasWrapper.resizingArea.update(
position.x, position.y,
CanvasWrapper.startPosition.x, CanvasWrapper.startPosition.y
);
} else if( CanvasWrapper.state=="movingLine" ) {
} else if( CanvasWrapper.state=="movingArea" ) {
diff_x = position.x - CanvasWrapper.startPosition.x;
diff_y = position.y - CanvasWrapper.startPosition.y;
CanvasWrapper.resizingArea.move(diff_x, diff_y);
}
configs.getCurrent().areas.push( CanvasWrapper.resizingArea )
}
CanvasWrapper.state = null;
CanvasWrapper.selected = true;
CanvasWrapper.clear();
configs.getCurrent().areas.displayAll();
if(CanvasWrapper.resizingArea) {
CanvasWrapper.resizingArea.drawRect("red");
CanvasWrapper.resizingArea = null;
}
CanvasWrapper.update();
generateOutputText();
});
//end area selection script
saveWhenChangeElements = document.getElementsByClassName("saveWhenChange");
ButtonConfigWrapper.save = function() {
config = configs.getCurrent();
//save common config
config.exeName = applicationName.value;
config.caption = caption.value;
//save to area
area = config.areas.getActiveArea();
area.hideCursor = ButtonConfigWrapper.hideMouse.checked;
area.onlyLeftDrag = ButtonConfigWrapper.onlyLeftDrag.checked;
area.buttonAlign = ButtonConfigWrapper.buttonAlign.value;
ButtonConfigWrapper.saveButtonMode();
config.display();
generateOutputText();
};
for(i=0; i<saveWhenChangeElements.length; i++) {
el = saveWhenChangeElements[i];
el.addEventListener("change", ButtonConfigWrapper.save);
}
ButtonConfigWrapper.clear();
for(i=0; i<ButtonConfigWrapper.buttonMouseDetails.length;i++) {
el = ButtonConfigWrapper.buttonMouseDetails[i];
el.addEventListener("change", (e)=>{
ButtonConfigWrapper.saveMouseButtonConfig(e);
ButtonConfigWrapper.validate();
configs.getCurrent().areas.getActiveArea().updateCurrentAction();
generateOutputText();
});
}
ButtonConfigWrapper.buttonEnable.addEventListener("change", (e)=>{
if(e.target.checked) {
for(i=0;i<ButtonConfigWrapper.buttonMouseDetails.length;i++) {
ButtonConfigWrapper.buttonMouseDetails[i].disabled = false;
}
for(i=0; i<ButtonConfigWrapper.buttonTouchpanelDetails.length;i++) {
ButtonConfigWrapper.buttonTouchpanelDetails[i].disabled = true;
}
}
ButtonConfigWrapper.saveButtonMode()
configs.getCurrent().areas.getActiveArea().updateCurrentAction();
generateOutputText();
});
ButtonConfigWrapper.buttonSelection.addEventListener("change", (e)=>{
config = configs.getCurrent().areas.getActiveArea().button[ parseInt(e.target.value) ]
console.log(config);
config.display();
});
//start add column script
createButton.addEventListener("click", (e)=>{
configs.push(createConfig(configs));
configs.activeIndex += 1;
CanvasWrapper.clear(null);
configs.getCurrent().display();
});
for(i=0; i<saveConfigWhenChanges.length; i++) {
el = saveConfigWhenChanges[i];
el.addEventListener("change", (e)=>{
config = configs.getCurrent()
config.save();
config.update();
generateOutputText();
})
}
/*
add_button.addEventListener("click", (e)=>{
//append to list
config = configs.getCurrent();
li = document.createElement("li");
config.exeName = applicationName.value;
config.caption = caption.value;
configuration_list.appendChild(li);
div = document.createElement("div");
span = document.createElement("span");
span.innerText = config.toString();
span.addEventListener("click", (e)=>{
configs.activate(config)
});
div.appendChild(span);
div.setAttribute("class","sameApplication");
li.appendChild(div);
areas = document.createElement("ol");
div.appendChild(areas);
for(i=0;i<config.areas.length;i++) {
area = document.createElement("li")
area.innerText = config.areas[i].toString();
areas.appendChild(area);
}
});
*/
configs.getCurrent().display()
function generateOutputText() {
outputText = "";
for(i=0; i<configs.length; i++) {
outputText += "\n";
config = configs[i];
if(! config.areas.length) {
outputText += ("[");
if(config.exeName.length) {
outputText += (config.exeName);
}
if(config.caption.length) {
outputText += (":"+config.caption);
}
if(area.hideCursor) {
outputText += (",1");
}
outputText += ("]\n");
} else {
for(j=0; j<config.areas.length; j++) {
area = areas[j];
//make line1
outputText += "\n";
if( config.exeName.length==0 && config.caption.length==0 ) {
} else {
outputText += ("[");
if(config.exeName.length) {
outputText += (config.exeName);
}
if(config.caption.length) {
outputText += (":"+config.caption);
}
if(area.hideCursor) {
outputText += (",1");
}
outputText += ("]\n");
}
//make line2
outputText += (
"("+area.x1+","+area.y1+")-("+area.x2+","+area.y2+")"+"\n"
);
//make line3
outputText += area.buttonAlign;
modes = []
for(i=1;i<=4;i++) {
modes.push(area.button[i].mode);
}
outputText += modes.join(",")+"\n";
}
}
}
textArea_output.value = outputText;
generateDownloadLink(outputText);
}
//end add column script
//start download link generation script
function generateDownloadLink(text) {
downloadLink = document.getElementById("download-link");
data = encodeURI(text.split("\n").join("\r\n"))
downloadLink.href = "data:,"+data;
}
//end download link generation script
</script>
<style>
canvas {
border: solid;
display: block;
}
.block {
display: block;
}
div.hidden {
visibility: hidden;
}
.wrapper {
display: flex;
}
div.detail {
border-top: solid 1px;
}
span.button-config {
border: solid 1px;
}
div#left-column {
margin-right: 2em;
}
ol#configuration-list {
height: 16em;
}
textarea#output {
height: 8em;
/*display: none;*/
}
button#upload-image {
position: relative;
left: 2em;
}
div.sameApplication {
cursor: pointer;
}
#selectedAreaItem {
background-color: #FF8888;
}
#selectedConfigItem {
background-color: aquamarine;
}
</style>
</body>
</html>
Raw
mouse_ini-generator.html
<html>
<head>
<meta charset="UTF-8">
<title>Mouse.ini generator</title>
</head>
<body>
<h1>Mouse.ini generation tool</h1>
<div class="box">
<!-- Area Selection Editor -->
<canvas id="selection-area" width="640" height="480"></canvas>
<table>
<tr>
<td><b>start:</b></td>
<td>x: <span id="start-x">0</span></td>
<td>y: <span id="start-y">0</span></td>
</tr>
<td><b>end:</b></td>
<td>x: <span id="end-x">0</span></td>
<td>y: <span id="end-y">0</span></td>
</table>
</div>
<div></div>
<div class="box">
<!-- Configure Application -->
<table>
<tr><td>アプリケーション実行ファイル名: <input id="application-name" type="text"></input></td></tr>
<tr><td>キャプション名: <input id="caption" type="text"></input></td></tr>
<tr><td><input id="hide-mouse" type="checkbox"></input>操作中はマウスアイコンを消す</td></tr>
</table>
</div>
<div>
<!-- add button -->
<button id="add-button">add</button>
</div>
<div>
<!-- list -->
<h4>Configuration List</h4>
<ol id="configuration-list">
</ol>
</div>
<div>
<a download="Mouse.ini" id="download-link">download</a>
</div>
<textarea id="output"></textarea>
<script>
//start document
/*
list of programs
* global variables
* reset configuration creation area script
* area selection script
* line1 editor
* add column script
* download link generation script
*/
//end document
//start global variables
var canvasSelected = false;
displayArea_startX = document.getElementById("start-x");
displayArea_startY = document.getElementById("start-y");
displayArea_endX = document.getElementById("end-x");
displayArea_endY = document.getElementById("end-y");
textArea_output = document.getElementById("output");
downloadLink = document.getElementById("download-link");
applicationName = document.getElementById("application-name");
caption = document.getElementById("caption");
hideMouse = document.getElementById("hide-mouse");
//end global variables
//start reset configuration creation area script
function resetConfigurationCreationArea() {
applicationName.value = ""
caption.value = ""
clearCanvas(canvas.getContext("2d"));
canvasSelected = false;
hideMouse.checked = false;
}
//end reset configuration creation area script
//start area selection script
var zoom = 2;
function getPosition(e) {
rect = e.target.getBoundingClientRect();
var absoluteX = e.clientX - rect.left;
var absoluteY = e.clientY - rect.top;
var x = ( absoluteX / zoom).toFixed();
var y = ( absoluteY / zoom).toFixed();
return [ x, y, absoluteX, absoluteY ];
};
function clearCanvas(ctx) {
ctx.clearRect(0,0,640,480);
}
var clicked = false;
var start_x = 0;
var start_y = 0;
canvas = document.getElementById("selection-area");
//ctx = canvas.getContext("2d");
canvas.addEventListener("mousemove", (e)=>{
var position = getPosition(e);
var absolute_x = position[2];
var absolute_y = position[3];
if(clicked) {
if(canvas.getContext) {
displayArea_endX.innerHTML = position[0];
displayArea_endY.innerHTML = position[1];
ctx = canvas.getContext("2d");
clearCanvas(ctx);
ctx.fillRect(start_x, start_y, absolute_x-start_x, absolute_y-start_y);
}
} else {
if(!canvasSelected) {
displayArea_startX.innerHTML = position[0];
displayArea_startY.innerHTML = position[1];
}
}
});
canvas.addEventListener("pointerdown", (e)=>{
var position = getPosition(e);
displayArea_startX.innerHTML = position[0];
displayArea_startY.innerHTML = position[1];
start_x = position[2];
start_y = position[3];
clicked = true;
});
canvas.addEventListener("pointerup", (e)=>{
clicked = false;
canvasSelected = true;
});
//end area selection script
//start add column script
configuration_list = document.getElementById("configuration-list");
add_button = document.getElementById("add-button");
add_button.addEventListener("click", (e)=>{
//append to list
//li = document.createElement("li");
//make line1
textArea_output.append("\r\n")
if( applicationName.value.length==0 && caption.value.length==0 ) {
} else {
textArea_output.append("[");
if(applicationName.value.length) {
textArea_output.append(applicationName.value);
}
if(caption.value.length) {
textArea_output.append(":"+caption.value);
}
if(hideMouse.value) {
textArea_output.append(",1");
}
textArea_output.append("]\r\n");
}
//make area configuration
if(canvasSelected) {
startX = displayArea_startX.innerText;
startY = displayArea_startY.innerText;
endX = displayArea_endX.innerText;
endY = displayArea_endY.innerText;
text = "("+startX+","+startY+")-("+endX+","+endY+")\r\n";
textArea_output.append(text)
}
resetConfigurationCreationArea();
generateDownloadLink();
});
//end add column script
//start download link generation script
function generateDownloadLink() {
downloadLink = document.getElementById("download-link");
data = encodeURI(textArea_output.value)
downloadLink.href = "data:,"+data;
}
//end download link generation script
</script>
<style>
canvas {
border: solid;
}
div.box {
border: solid;
}
/*textarea#output {
display: none;
}*/
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment