How to make a tab to move the window of an HTA Application in VBScript? - hta

I am playing around with HTA Applications, I am making a program launcher for a usb device.
I have the caption set to "no" so that I can make a flat UI application. Because I disabled the caption I have no bar to move the window around.
I have tried all sorts of things but cant figure it out. I want a little tab in the bottom right corner to move the window around the screen. Not like a square, but a triangle to fit in the corner. Can anyone help me with this?

Here's a simple script which moves the window.
window.onload = function () {
var grip = document.getElementById('grip'),
oX, oY,
mouseDown = function (e) {
if (e.offsetY + e.offsetX < 0) return;
oX = e.screenX;
oY = e.screenY;
window.addEventListener('mousemove', mouseMove);
window.addEventListener('mouseup', mouseUp);
},
mouseMove = function (e) {
window.moveTo(screenX + e.screenX - oX, screenY + e.screenY - oY);
oX = e.screenX;
oY = e.screenY;
},
gripMouseMove = function (e) {
this.style.cursor = (e.offsetY + e.offsetX > -1) ? 'move' : 'default';
},
mouseUp = function (e) {
window.removeEventListener('mousemove', mouseMove);
window.removeEventListener('mouseup', mouseUp);
};
grip.addEventListener('mousedown', mouseDown);
grip.addEventListener('mousemove', gripMouseMove);
}
The HTML & CSS
<div id="grip"></div>
#grip {
position: fixed;
bottom: 0px;
right: 0px;
border-bottom: 25px solid #ff0000;
border-left: 25px solid transparent;
}
Notice, that the only visible part of the #grip is the border-bottom of the div.

Related

Zooming createjs canvas prevents button click

When the canvas that contains a createjs is zoomed using a zoom style (e.g. zoom: 0.5) buttons on the canvas have a different click target that is either on only one side of the button or no target at all.
var stage, label;
function init() {
stage = new createjs.Stage("demoCanvas");
stage.name = "stage";
var background = new createjs.Shape();
background.name = "background";
background.graphics.beginFill("red").drawRoundRect(0, 0, 150, 60, 10);
label = new createjs.Text("foo", "bold 24px Arial", "#FFFFFF");
label.name = "label";
label.textAlign = "center";
label.textBaseline = "middle";
label.x = 150/2;
label.y = 60/2;
var button = new createjs.Container();
button.name = "button";
button.x = 75;
button.y = 40;
button.addChild(background, label);
stage.addChild(button);
// listeners
var targets = [stage,button,label,background];
for (var i=0; i<targets.length; i++) {
var target = targets[i];
target.on("click", toggleText, null, false, null, false);
}
stage.update();
}
function toggleText(evt) {
label.text = (label.text == 'foo') ? 'bar' : 'foo';
stage.update();
}
body{
margin: 0;
text-align: center;
}
#demoCanvas{
background: tan;
width: 500px;
height: 300px;
transform-origin: 0 0;
transform: scale(0.2); // Firefox = This does not cause problem with button clicking
zoom: 0.2; // Other browsers = This causes a problem with button clicking in Chrome
}
<html>
<head>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
</head>
<body onload="init();">
<canvas id="demoCanvas"></canvas>
</body>
</html>
Note that this will not fail in the SO snippet so I have also made this available as a Pen.
This behaviour presents itself in Chrome but not in Firefox (which recognises the transform: scale() style instead).
If the canvas needs to be scaled in the DOM how can this be done in Chrome without causing buttons to fail?
The zoom css style is considered non-standard so for Chrome and other Browsers you can use transform : scale() as well. I can confirm that zoom does break CreateJS - if you wanted to, you could add an issue to their EaselJS GitHub - not sure if it is worth fixing when transform : scale() can be used. Cheers.
CSS ZOOM: "Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future."

PaperJS, Need to select items underneath a transparent raster using Mouse Down

I have a Canvas with multiple raster images.
I use onMouseDown on Tool to find select the item which was clicked.
I have a new requirement.
Suppose, two images overlap each other, and the upper image is partially transparent. That makes the lower image visible. But when I try to click on the lower image, obviously I end up choosing the upper image.
Failed Attempt
I tried to use the getPixel(point) function on Raster. I thought if I can figure that the selected pixel is transparent, I can ignore that raster and look for other items. But I am not getting the color value that I am expecting (transparent or not) using this function.
So, my second thought was that I need to change the mousedown event point from the global co-ordinate space to local raster co-ordinate space. It still did not work.
Is there a way to achieve what I want?
Code
tool.onMouseDown = (event) => {
project.activeLayer.children.forEach((item) => {
if (item.contains(event.point)) {
// check if hit was on a transparent raster pixel
const pixel = item.getPixel(event.point)
console.error(pixel.toCSS(true))
// 2nd attempt
const pixel = item.getPixel(item.globalToLocal(event.point))
console.error(pixel.toCSS(true))
}
}
}
There is a simpler way to do what you want to achieve.
You can rely on project.hitTestAll() method to do a hit test on all items.
Then, if the hit item is a raster, hit pixel color information will be contained in hitResult.color. hitResult.color.alpha is all you need to check if a raster was hit on a non-transparent pixel.
Here is a sketch demonstration of the solution.
const dataUrl = 'data:image/png;base64,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';
const lowOpacity = 0.3;
// create 2 rasters
new Raster({
source: dataUrl,
opacity: lowOpacity,
onLoad: function() {
this.position = view.center - 100;
}
});
new Raster({
source: dataUrl,
opacity: lowOpacity,
onLoad: function() {
this.position = view.center + 100;
}
});
// on mouse down
function onMouseDown(event) {
// unselect previously selected items
paper.project.selectedItems.forEach(item => {
item.selected = false;
item.opacity = lowOpacity;
});
// do a hit test on all project items
const hitResults = project.hitTestAll(event.point);
// for each hit result
for (let i = 0; i < hitResults.length; i++) {
const hitResult = hitResults[i];
// if item was hit on a non transparent pixel
if (hitResult && hitResult.color && hitResult.color.alpha > 0) {
// select item
hitResult.item.selected = true;
hitResult.item.opacity = 1;
// break loop
break;
}
}
}

How can I change input blink caret style with easy css, js

I wonder how can I use css/javascript to adjust the blinking cursor inside the search box with CSS?
Is it possible to replace default blinkig caret to horizontal blinking icon
I don't think it is so hard. I made a quick example, which works in most modern browsers except Safari.
It draws the caret on a canvas, and sets it as a background of the input, on a position calculated from the browsers caret position.
It checks if the browser supports the caret-color css property, and if it doesn't it doesn't do anything, because both the system caret, and our caret will be visible in the same time. From the browsers I tested, only Safari doesn't support it.
$("input").on('change blur mouseup focus keydown keyup', function(evt) {
var $el = $(evt.target);
//check if the carret can be hidden
//AFAIK from the modern mainstream browsers
//only Safari doesn't support caret-color
if (!$el.css("caret-color")) return;
var caretIndex = $el[0].selectionStart;
var textBeforeCarret = $el.val().substring(0, caretIndex);
var bgr = getBackgroundStyle($el, textBeforeCarret);
$el.css("background", bgr);
clearInterval(window.blinkInterval);
//just an examplethis should be in a module scope, not on window level
window.blinkInterval = setInterval(blink, 600);
})
function blink() {
$("input").each((index, el) => {
var $el = $(el);
if ($el.css("background-blend-mode") != "normal") {
$el.css("background-blend-mode", "normal");
} else {
$el.css("background-blend-mode", "color-burn");
}
});
}
function getBackgroundStyle($el, text) {
var fontSize = $el.css("font-size");
var fontFamily = $el.css("font-family");
var font = fontSize + " " + fontFamily;
var canvas = $el.data("carretCanvas");
//cache the canvas for performance reasons
//it is a good idea to invalidate if the input size changes because of the browser text resize/zoom)
if (canvas == null) {
canvas = document.createElement("canvas");
$el.data("carretCanvas", canvas);
var ctx = canvas.getContext("2d");
ctx.font = font;
ctx.strokeStyle = $el.css("color");
ctx.lineWidth = Math.ceil(parseInt(fontSize) / 5);
ctx.beginPath();
ctx.moveTo(0, 0);
//aproximate width of the caret
ctx.lineTo(parseInt(fontSize) / 2, 0);
ctx.stroke();
}
var offsetLeft = canvas.getContext("2d").measureText(text).width + parseInt($el.css("padding-left"));
return "#fff url(" + canvas.toDataURL() + ") no-repeat " +
(offsetLeft - $el.scrollLeft()) + "px " +
($el.height() + parseInt($el.css("padding-top"))) + "px";
}
input {
caret-color: transparent;
padding: 3px;
font-size: 15px;
color: #2795EE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
If there is interest, I can clean it a bit and wrap it in a jQuery plugin.
Edit: forgot about the blinking, so I added it. A better way will be to add it as css animation, in this case the caret should be in a separate html element positioned over the input.
Changing the color of the caret is supported by the latest standards. But not changing its width is not, which I think is a shame because it is a question of accessibility for vision-impaired people.
One approach for implementing such a change yourself is first trying to figure out what is the position the caret is blinking at, then overlaying it with an element that looks like the caret but is perhaps wider etc.
Here's an article on how to go about doing such a thing. It's a good article but the end-solution is kind of complicated as a whole. But see if it solves your problem:
https://medium.com/#jh3y/how-to-where-s-the-caret-getting-the-xy-position-of-the-caret-a24ba372990a
Here is perhaps a simpler explanation for how to find the care x-y position:
How do I get the (x, y) pixel coordinates of the caret in text boxes?

Slide Card Style HTML CSS JS

I'm looking to do a slide-card style website with html/css/js.
I have seen some nice examples like:
http://www.thepetedesign.com/demos/onepage_scroll_demo.html
http://alvarotrigo.com/fullPage/
However, what these DON'T seem to do is slide a page out WHILE the page underneath is visible, as if they were a stack of index cards. Parallax scrolling does this, but it typically will wipe the existing area, rather then scroll/move it off screen. Any ideas?
Here is a fiddle using JQuery that does something like what you are looking for, you could implement it with that one scroll effect of the card sliders and have it animate in probably.
http://jsfiddle.net/d6rKn/
(function(window){ $.fn.stopAtTop= function () {
var $this = this,
$window = $(window),
thisPos = $this.offset().top,
setPosition,
under,
over;
under = function(){
if ($window.scrollTop() < thisPos) {
$this.css({
position: 'absolute',
top: ""
});
setPosition = over;
}
};
over = function(){
if (!($window.scrollTop() < thisPos)){
$this.css({
position: 'fixed',
top: 0
});
setPosition = under;
}
};
setPosition = over;
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(function(){setPosition();});
setPosition();
};
})(window);
$('#one').stopAtTop();
$('#two').stopAtTop();
$('#three').stopAtTop();
$('#four').stopAtTop();
See the fiddle for HTML and CSS.
Not my fiddle just grabbed it with a quick google search.

Overlay canvas (WebGL) with canvas (three.js)

I have two canvases. The first is supposed to be the background and it's content is rendered via raw WebGL (3D). The second canvas is supposed to overlay the first one and is mainly transparent. It's content is rendered via three.js (3D content). Unfortunately the second canvas is not drawn on top of the first one, but next to it.
How can I draw the second canvas above the first one with transparent three.js scene background?
Update:
I integrated gaitat's idea. However it's still not working (see Fullscreen screenshot. Twice rendered grey box due to Oculus Rift support.). Canvas 2 is still not on top of the first one and it's background is not transparent as well. As a reminder: The grey square is drawn via raw WebGL on a canvas called webglcanvas. The box is rendered via three.js on leapcanvas.
Code 1 (Initialization of canvases and divs [Xtend/Java]):
Browser::getDocument().getElementById("view").appendChild(webglDiv)
val Element webGLCanvasDiv = Browser::getDocument().createDivElement()
webGLCanvasDiv.style.setCssText("position: absolute")
webGLCanvasDiv.style.setCssText("z-index: 8")
webGLCanvasDiv.setId("webGLCanvasDiv")
Browser::getDocument().getElementById("webglDiv").appendChild(webGLCanvasDiv)
val webGLCanvas = Browser::getDocument().createCanvasElement()
webGLCanvas.setWidth(viewportWidth)
webGLCanvas.setHeight(viewportHeight)
webGLCanvas.style.setCssText("border-bottom: solid 1px #DDDDDD")
webGLCanvas.setId("webglcanvas")
Browser::getDocument().getElementById("webGLCanvasDiv").appendChild(webGLCanvas)
val Element webGLLeapDiv = Browser::getDocument().createDivElement()
webGLLeapDiv.style.setCssText("position: absolute")
webGLLeapDiv.style.setCssText("z-index: 10")
webGLLeapDiv.setId("webGLLeapDiv")
Browser::getDocument().getElementById("webglDiv").appendChild(webGLLeapDiv)
val leapCanvas = Browser::getDocument().createCanvasElement()
// canvas size is handled via renderer in Javascript
leapCanvas.setId("leapcanvas")
Browser::getDocument().getElementById("webGLLeapDiv").appendChild(leapCanvas)
Code 2 (Rendering of three.js scene [Javascript])
var foreground = $doc.getElementById("leapcanvas");
var camera, scene, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
camera = new $wnd.THREE.PerspectiveCamera(75, 500 / 500, 1, 10000);
camera.position.z = 500;
scene = new $wnd.THREE.Scene();
geometry = new $wnd.THREE.BoxGeometry(200, 200, 200);
material = new $wnd.THREE.MeshNormalMaterial();
mesh = new $wnd.THREE.Mesh(geometry, material);
scene.add(mesh);
renderer = new $wnd.THREE.WebGLRenderer({
canvas : foreground,
alpha : true
});
renderer.setSize(viewportWidth / 2, viewportHeight);
renderer.setClearColor(0x000000, 0);
}
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene, camera);
}
Assuming you have in your .html
<div id="container">
<div id="webglContainer"></div>
<div id="threeContainer"></div>
</div>
in your .css you need
/* make the canvases, children of the this container */
#container {
position: relative;
}
#webglContainer {
position: absolute;
pointer-events: none; /* this element will not catch any events */
z-index: 8; /* position this canvas at bottom of the other one */
}
#threeContainer {
position: absolute;
z-index: 10; /* position this canvas on top of the other one */
}

Resources