What it does:
- make a AHK-Gui with ActiveX control
- Write() a HTML-string to the Browser.Document
- AHK sends relevant data via Number.innerHTML and Number.Click()
- Browser responds to id="Number" onclick="drawBackground()"
Horizon Slider.ahk
Code: Select all
#NoEnv
SetBatchLines, -1
SetWorkingDir, %A_ScriptDir%
SplitPath, A_ScriptName,,,, AppName
Slider_options = Vertical NoTicks Center ToolTip AltSubmit
startTag = <meta http-equiv="x-ua-compatible" content="ie=edge">
; make Gui with ActiveX control
Gui, 1: New, Resize -Theme, %AppName%
Gui, Add, Slider, h120 HWND_Sld gSld_onChange %Slider_options%
Gui, Add, ActiveX, x0 y0 w600 h450 vBrowser, about:%startTag%
Browser.Document.Open()
Browser.Document.Write(get_Html(AppName))
Browser.Document.Close()
; initially sky = 40%
Number := Browser.Document.getElementById("Number")
GuiControl,, %_Sld%, % Number.innerHTML := 40
Gui, Show, x100 y100
return ; end of auto-execute section
GuiClose:
ExitApp
GuiSize: ; resize events
GuiControl, Move, Browser, w%A_GuiWidth% h%A_GuiHeight%
Number.Click()
return
Sld_onChange: ; slider events
GuiControlGet, n,, %_Sld%
Number.innerHTML := n, Number.Click()
return
get_Html(Name) { ; return a string made from html/js-files
FileRead, Haystack, %Name%.html
FileRead, Script, %Name%.js
Needle = <script src="%Name%.js">
return StrReplace(Haystack, Needle, "<script>" Script)
}
Horizon Slider.html
Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="Horizon Slider.js"></script>
</head>
<body style="margin:0" onload="onLoad()">
<canvas id="Canvas"></canvas>
<p id="Number" onclick="drawBackground()"></p>
</body>
</html>
Horizon Slider.js
Code: Select all
var number;
var canvas;
var ctx;
//------------------------------------------------------------------------------
function onLoad() { // window.onLoad
//------------------------------------------------------------------------------
number = document.getElementById('Number');
canvas = document.getElementById('Canvas');
ctx = canvas.getContext('2d');
drawBackground();
}
//------------------------------------------------------------------------------
function drawBackground() { // draw background
//------------------------------------------------------------------------------
resizeCanvas();
ctx.fillStyle = get_Gradient(number.innerHTML / 100);
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
//------------------------------------------------------------------------------
function resizeCanvas() { // resize Canvas
//------------------------------------------------------------------------------
canvas.width = window.innerWidth;
canvas.height = window.innerHeight * 0.9;
}
//------------------------------------------------------------------------------
function get_Gradient(cut) { // return gradient with horizon @cut
//------------------------------------------------------------------------------
// cut is a number between 0.0 and 1.0
var gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0.0, '#00A2E8'); // color of sky
gradient.addColorStop(cut, '#FFFFFF'); // color of horizon
gradient.addColorStop(1.0, '#1F9F44'); // color of terrain
return gradient;
}
Screenshot
- LICEcap.gif (991.88 KiB) Viewed 1318 times
- Horizon Slider.zip
- (1.6 KiB) Downloaded 79 times