SVG text as HTML background

И що чак сега се сетих, че мога да ползвам SVG text като background?! И не само текст. Че даже мога да си го променям динамично през javascript! Така някои дизайни можеше да станат по-фън-шуй. По-добре късно от колкото без SVG.
Едно примерче:

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Try it</button>

<p style="min-height: 400px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<script>
function myFunction() {
   let txt = "SVG Txt";

   let s = window.btoa(`
<svg height="400" width="800" xmlns="http://www.w3.org/2000/svg">
   <text x="0" y="120" font-weight="bold" font-size="160" fill="#fef" stroke="#ddd">${txt}</text>
</svg>`
);

   document.querySelector("p").style.background = `url('data:image/svg+xml;base64,${s}') no-repeat top left`;
}
</script>

</body>
</html>

Demo: text_as_background.html

Share and Enjoy !

0Shares
0 0

Simple Tile Calculator – прост калкулатор за редене на плочки

Престои ми ремонт и имам нужда от нещо, което да ми смята бързо броя плочки, като добавя фугите. За това си написах калкулатор на jacascript. Представлява обикновена web-страница. Работи с почти всички модерни браузери. Калкулатора може да се зареди от тук:
Tile Calculator

Или да се изтегли: TileCalculator_v.001.zip

Кратко видео, което показва моя начин на ползване на това тулче:

Share and Enjoy !

0Shares
0 0

JavaScript GUI – бързо, вкусно, лесно с GLUEScript

Днес докато се ровех за интересни нови неща около JavaScript интепретатора на mozilla – SpiderMonkey попаднах на много интересна среда за програмиране GLUEScript, базирана на този интерпретатор. За графичния потребителски интерфейс (GUI) се използват wxWidgets.
Възможността да се пишат GUI програми с JavaScript особено много ме гизкефи. JavaScript е доволно популярен и приложим език за програмиране. Информация в мрежата бол.
Ето едно много просто приложение, което показва лекотата за писане с GLUEScript – температурен конвертор между Фаренхайд и Целзий:

var wx = require("wx");
wx.theApp.onInit = function()
{
  var frame = new wx.Frame(null, wx.Id.ANY, "Fahrenheit to Celsius Converter", { x:-1, y: -1}, new wx.Size(307, 73));
  var panel = new wx.Panel(frame, wx.Id.ANY);
  var button = new wx.Button(panel, wx.Id.EXIT, "Convert", { x : 112, y : 8 });
 
	var textbox1 = new wx.TextCtrl(panel, wx.Id.EXIT, "", { x : 6, y : 8 });
	var textbox2 = new wx.TextCtrl(panel, wx.Id.EXIT, "", { x : 192, y : 8 });
 
	button.onClicked = function(event){
		textbox2.value = (textbox1.value - 32)*5/9;
	}
  frame.center();  
  frame.show();
  return true;
}

Запазваме програмата като converter_c_to_t.js и я изпълняваме през промпта или конзолата:

glue converter_f_to_c.js

Резултат:
JavaScript GUI - Fahrenheit to Celsius Converter
С WinRar можем да направим програмката изпълнимо exe, като включим всички необходими файлове: F_to_C_Converter.exe

Share and Enjoy !

0Shares
0


0

ТОТО 6 от 49 генератор – Javascript generate random unique numbers

Скоро в форума на DBG коментирахме скрипт за генериране на случайни числа за тото 6 от 49. Аз си написах собствен JavaScript генератор, който използва специфични и важни javascript трикове:
1. Генериране на обхват от числа
2. Проверка дали дадено число е част от масив
3. Възходящо сортиране на масив от числа
Ето и кода за тото-генератора:

// Деклариране на минимално и максимално число
var min = 1;
var max = 49;
// Брой на случайно-генерираните числа
var randnums = 6;
/* =================================== */
var nums = [];
var c = 0;
var seqarr =[];
 
function compare(a,b){return a - b}
 
for (var num = min; num <= max; num++){nums.push(num)}
 
do{
	var el = nums[Math.floor(Math.random() * nums.length)];
	if(seqarr.indexOf(el) != -1){continue}
	else {
		seqarr.push(el);
		c++;
	}
}while(c<randnums);
 
document.write(seqarr.sort(compare));

Пример може да се види тук:
JavaScript Random Numbers – ТОТО 6 от 49

Share and Enjoy !

0Shares
0


0