Tag Archives: javascript

SVG text as HTML background

Posted on by
Reply

И що чак сега се сетих, че мога да ползвам 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="https://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 !

Shares

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

Posted on by
Reply

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

  • Кода е изцяло пренаписан, като вече е обектен, което ще ме улесни да прилагам нови методи на редене
  • Добавен е диагонален модел за редене на плочките
  • Добавен е генериран код за CAD-софтуера QCad

Програмата работи с всички модерни браузери и мобилни устройства. Калкулатора може да се зареди онлайн от тук:
Tile Calculator

Изтегляне на калкулатора + source: Simple_Tile_Calculator-v.002.zip

След разархивиране на архива може да се ползва само html-файла в основната директория. В папката source е развойната версия на калкулатора с scss-кода.

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

Share and Enjoy !

Shares




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

Posted on by
Reply

Днес докато се ровех за интересни нови неща около 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 !

Shares




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

Posted on by
Reply

Скоро в форума на 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 !

Shares