Автокликер Clickermann :: Форум

Основной раздел => Использование => Topic started by: Cleoss on February 20, 2019, 04:42:08 AM

Title: html5js-либа как лайфак для быстрого рисования и вывода интерфейса
Post by: Cleoss on February 20, 2019, 04:42:08 AM
Привет!

Все старожили тут уже наверняка уже юзают такое, хотя мож кто и не пользуется выводом в хтмыл, на всякий пожарный выкладываю. 

Что позволяет библиотека HTML5.js?

Состав пакета библиотеки (спойлер я не нашёл на форуме, будем так писать -- прямым текстом)

Итак, внешний вид функции/ инклуда/ параметров модуля таков:
Quote
html5js (html, title, hdr, file, posX, posY, sizeX, sizeY, bgcolor, fontcolor, ext, clmn-param, script, css3, jQueryLib

При написании в вашем сценарии это может выглядеть как-то так:
html5js("&gt;<br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>", "MyProject", "Results", "assembld", 10, 10, 390, 490, "#FFFFCC","navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// " ,"" ,0)
или в укороченном виде так:
Code: [Select]
html5js("MyHTML-text", "MyProject", "Results", "assembld", 400, 200, 390, 490, "#ffc","black", "a", 0, ";// ", "", 0)
Пробежимся по значениям параметров:
html, title, hdr, file, posX, posY, sizeX, sizeY, bgcolor, fontcolor, ext, clmn-param, script, css3, jQueryLib
==Параметр ==Тип переменной ==Возможные значения ==Комментарий
htmlstringtext, html, js, cssВводите сюда любой текст, который затем будет отображаться на выведенной скриптом веб-страничке. Можно использовать html-разметку
titlestringtextЗаголовок вашей будущей странички (самая верхняя строка окна)
headerstringtextЗаголовок первого уровня (крупными буквами) внутри странички
filenamestringtextЖелаемое название файла веб-приложения
Position X-axispositive numberint, зависит от разрешения монитора и желаемого месторасположения окнаПозиция окна веб-страницы на экране (зазор слева, расстояние в пикселях от левого края монитора). Задаётся джава-скриптом и в браузерах с отключенными скриптами не работает
Position Y-axispos. num--"-- (то же самое)Позиция окна веб-приложения на экране (зазор сверху, расстояние в пикселях от верхнего края монитора)
Size X-axispos. num--"-- (зависит от желаемого размера окна)Размер окна по горизонтали (ширина в пикселях)
Size Y-axispos. num--"--Размер окна по горизонтали (ширина в пикселях)
BackgroundColor#RRGGBB #rgb htmlEntityнапр., #000000, #FFFFFF, 160 словесных названий цветов (вроде red, green, yellow, black, white, magenta, blue, lightskyblue и т. д.)Цвет фона страницы, задаётся через внутренние css-стили, также можно использовать и внешний CSS-файл clmn.css
FontColorRGB (тот же тип)--"--Цвет шрифта для основного абзаца с текстом. Для вставки новых абзацев пишите <br>
ExtensionstringАнглийские "m" (htMl) или "a" (for web-Application)Укажите предпочитаемый формат приложения: веб-страница Хрома или приложение с движком от ИЕ (файл .hta)
Clickermann parametersint0 или 1Бонусная опция для юзеров Кликерманна 4.14+, при включённой опции (для этого ставим 1) в тело веб-страницы выводятся параметры, передаваемые .cms-скрипту, допустим через сценарий в .bat- файле: "C:\your\path\to\Clickermann.exe" "C:\path2\urScript.cms" anyParameters of your choice. В данном случае на странице внизу будет выведено: "anyParameters of your choice"
JS scriptstringJS codeРазмещайте свой джаваскрипт-код в этом параметре, а сами js-инструкции вместо знака ";" разделяйте с помощью трёх знаков: ";//" (после них можно вставлять пробел для лучшей читабельности кода)
CSS stylesheetstringCSS codeТут может быть ваша реклама css-таблица стилей в inline-формате (понятно, что как в параметре джаваскиптовой всавки кода, так и здесь абзацы по нормам Кликермана не допускаются внутри параметра, также нужно заменить все двойные кавычки " на одинарные ', в т. ч. не забывайте делать это, если вставляете длинный код из других источников, иначе сценарий не загрузится)
jQuery libraryint0 или 1Включаем либу джейКвери (ставим в параметре функции единичку) и юзаем быстрые селекторы DOM-модели, аякс/CORS, мощные и гибкие визуальные эффекты для своей веб-странички (перетаскивание, выделение, изменение размеров выбранных объектов налету, сортировка, диалоговые окна, календари, слайдеры, аккордеон/ вкладки на одной странице, обработчики событий, проверка форм, установка флажков и считывание значений установленных пунктов радио-переключателей и т. п.)

Здесь сам код подключаемой библиотеки:
Для любителей изучать исходники:
Code: (clickermann) [Select]
// 19.02.2019
// Cleoss
//#name "html5js"
sub(js, $jstring)
   while (strpos($jstring, ";//")>0)
      $divdr = strpos($jstring, ";//")
      $newstr=strcut($jstring, 1, $divdr)
      tfWrite($htafilename, $newstr)
      $jstring=strcut($jstring, $divdr+3, strlen($jstring)-$divdr)
   end_cyc
   $divdr = strpos($jstring, ";//")
   $newstr=strcut($jstring, 1, $divdr)
   tfWrite($htafilename, $jstring)
end_sub


// html, title, hdr, file, pos+size, bgcolor+ fontcolor, ext, paramOut, script, css, jQuery
// "html", "title", "hdr", "file", 10, 10, 390, 490, "#FFFFCC", "navy", "a", 0, "alert('Clickermann rules!');//", "", 0
// "&gt;<br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>", "MyProject", "Results", "assembld", 10, 10, 390, 490, "#FFFFCC", "navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// ", "", 0
// Call the function in this way:
//html5js("&gt;<br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>","MyProject","Results","assembld",10, 10, 390, 490, "#FFFFCC","navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// ","",0)

sub(html5js,$ht5html,$ht5title,$ht5hdr,$ht5file,$ht5posX,$ht5posY,$ht5sizeX,$ht5sizeY,$ht5bgcolor,$ht5fontcolor,$ht5ext,$ht5par,$ht5script,$ht5css3,$ht5jQueryLib)
//   $htmTitle = " Project "
//   $header1 ="Results"
//   $htmTxt = "&gt;<br>Check it, bro<hr><b>CLMN</b> screens: <img src='http://crapware.aidf.org/images/editor.png' alt='clmn' height='300' />"
//   $bgcolor ="#FFFFCC" // RGB formats: #ffaacc or #fac or red (second, shortened format is not for IE with its HTA file)
//   $fontcolor ="navy"
//   $htFiletype ="a" // A - application, M - markable HTML
//   $htFiletype=$ht5ext
//   $filename="assembld"
//   $filename=$ht5file
   $wtf = 0.1 // wait some secs
   
   if($ht5file="")
      $ht5file="assembld"
   end_if
   if(($ht5ext="a")|($ht5ext="m"))
      //
   else
      $ht5ext="a"
   end_if
   $htafilename=strconcat($ht5file, ".ht",$ht5ext)
   TFCLEAR ($htafilename)
   //logclear
   
   tfWrite($htafilename, "<!DOCTYPE html><html><head><link rel='shortcut icon' href='clmn31.ico' /><title>")
   wait($wtf)
   if($ht5title="")
      tfWrite($htafilename, "&#x1F191; Clickermann APP &#x1F4A9; (",$htafilename,")")
   else
      tfWrite($htafilename, strconcat("&#x1F191; ",$ht5title, " - Clickermann APP &#x1F4A9; (",$htafilename,")"))
   end_if
   wait($wtf)
   $parTx=""
   if($ht5par=1)
      STRSEPARATE ($_param_str, ";", $pararr)
      $parTx=$pararr[2]
   end_if
   if($ht5jQueryLib=1)
    $jQLnk="<script type='text/javascript' src='jquery-3.3.1.min.js'></script>"
else
    $jQLnk=""
end_if
   tfWrite($htafilename, strconcat("</title><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /><meta charset='utf-8'><script type='text/javascript' src='clmn.js'></script>",$jQLnk,"<link rel='stylesheet' href='clmn.css' type='text/css'><style>.smpl {background-color: #ffe; color: #930; }",$ht5css3,"</style><!--  --><!-- &mdash; &#9762; <br /> <html lang='en'>  --></head><body bgcolor='", $ht5bgcolor, "' id='bd'><font color='", $ht5fontcolor, "'><h1 id='hdr'>", $ht5hdr, "</h1><p id='prgrf'>", $ht5html, "</p></font><textarea id='ta' class='smpl'>Simple sample!</textarea><div id='clmnparam'>",$parTx,"</div><script>"))
   wait($wtf)
   $jscmd=strconcat("",$ht5script)
   if(($ht5sizeX>0)|($ht5sizeY>0))
      $jscmd=strconcat($jscmd, "resizeTo(",$ht5sizeX,", ",$ht5sizeY,");// ")
   end_if
   if(($ht5posX>0)|($ht5posY>0))
      $jscmd=strconcat($jscmd, "moveTo(",$ht5posX,", ",$ht5posY,");// ")
   end_if
   js($jscmd)
   wait($wtf)
   tfWrite($htafilename, "</script></body></html>")
   wait($wtf)
   
   execute($htafilename)
   //halt
end_sub



И для любителей копировать:
Code: [Select]
// 19.02.2019
// Cleoss
//#name "html5js"
sub(js, $jstring)
   while (strpos($jstring, ";//")>0)
      $divdr = strpos($jstring, ";//")
      $newstr=strcut($jstring, 1, $divdr)
      tfWrite($htafilename, $newstr)
      $jstring=strcut($jstring, $divdr+3, strlen($jstring)-$divdr)
   end_cyc
   $divdr = strpos($jstring, ";//")
   $newstr=strcut($jstring, 1, $divdr)
   tfWrite($htafilename, $jstring)
end_sub


// html, title, hdr, file, pos+size, bgcolor+ fontcolor, ext, paramOut, script, css, jQuery
// "html", "title", "hdr", "file", 10, 10, 390, 490, "#FFFFCC", "navy", "a", 0, "alert('Clickermann rules!');//", "", 0
// "&gt;<br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>", "MyProject", "Results", "assembld", 10, 10, 390, 490, "#FFFFCC", "navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// ", "", 0
// Call the function in this way:
//html5js("&gt;<br>Check it, bro<hr><b>CLMN</b> screens <i>in example</i>","MyProject","Results","assembld",10, 10, 390, 490, "#FFFFCC","navy", "a", 0, "alert('Clickermann rules!');// confirm('Agreed?');// ","",0)

sub(html5js,$ht5html,$ht5title,$ht5hdr,$ht5file,$ht5posX,$ht5posY,$ht5sizeX,$ht5sizeY,$ht5bgcolor,$ht5fontcolor,$ht5ext,$ht5par,$ht5script,$ht5css3,$ht5jQueryLib)
//   $htmTitle = " Project "
//   $header1 ="Results"
//   $htmTxt = "&gt;<br>Check it, bro<hr><b>CLMN</b> screens: <img src='http://crapware.aidf.org/images/editor.png' alt='clmn' height='300' />"
//   $bgcolor ="#FFFFCC" // RGB formats: #ffaacc or #fac or red (second, shortened format is not for IE with its HTA file)
//   $fontcolor ="navy"
//   $htFiletype ="a" // A - application, M - markable HTML
//   $htFiletype=$ht5ext
//   $filename="assembld"
//   $filename=$ht5file
   $wtf = 0.1 // wait some secs
   
   if($ht5file="")
      $ht5file="assembld"
   end_if
   if(($ht5ext="a")|($ht5ext="m"))
      //
   else
      $ht5ext="a"
   end_if
   $htafilename=strconcat($ht5file, ".ht",$ht5ext)
   TFCLEAR ($htafilename)
   //logclear
   
   tfWrite($htafilename, "<!DOCTYPE html><html><head><link rel='shortcut icon' href='clmn31.ico' /><title>")
   wait($wtf)
   if($ht5title="")
      tfWrite($htafilename, "&#x1F191; Clickermann APP &#x1F4A9; (",$htafilename,")")
   else
      tfWrite($htafilename, strconcat("&#x1F191; ",$ht5title, " - Clickermann APP &#x1F4A9; (",$htafilename,")"))
   end_if
   wait($wtf)
   $parTx=""
   if($ht5par=1)
      STRSEPARATE ($_param_str, ";", $pararr)
      $parTx=$pararr[2]
   end_if
   if($ht5jQueryLib=1)
    $jQLnk="<script type='text/javascript' src='jquery-3.3.1.min.js'></script>"
else
    $jQLnk=""
end_if
   tfWrite($htafilename, strconcat("</title><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /><meta charset='utf-8'><script type='text/javascript' src='clmn.js'></script>",$jQLnk,"<link rel='stylesheet' href='clmn.css' type='text/css'><style>.smpl {background-color: #ffe; color: #930; }",$ht5css3,"</style><!--  --><!-- &mdash; &#9762; <br /> <html lang='en'>  --></head><body bgcolor='", $ht5bgcolor, "' id='bd'><font color='", $ht5fontcolor, "'><h1 id='hdr'>", $ht5hdr, "</h1><p id='prgrf'>", $ht5html, "</p></font><textarea id='ta' class='smpl'>Simple sample!</textarea><div id='clmnparam'>",$parTx,"</div><script>"))
   wait($wtf)
   $jscmd=strconcat("",$ht5script)
   if(($ht5sizeX>0)|($ht5sizeY>0))
      $jscmd=strconcat($jscmd, "resizeTo(",$ht5sizeX,", ",$ht5sizeY,");// ")
   end_if
   if(($ht5posX>0)|($ht5posY>0))
      $jscmd=strconcat($jscmd, "moveTo(",$ht5posX,", ",$ht5posY,");// ")
   end_if
   js($jscmd)
   wait($wtf)
   tfWrite($htafilename, "</script></body></html>")
   wait($wtf)
   
   execute($htafilename)
   //halt
end_sub



Краткий экскурс в теги хтмл:
<b>bold</b> <i>italics</i> <u>underline</u> <s>strikeout</s> <blink>мигание (deprec.)</blink>
<center>центрирование (deprecated)</center> <font size='24'>Размер</font> <font color='red'>Цвет</font>
<img src='https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' />Картинка (https://www.google.ru/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)
<img src='http://gg.gg/clmn-png' height='100' alt='Картинка с заданной высотой'>
<a href='https;//ya.ru/' name='метка'>Ссылка на Яndex (http://https;//ya.ru/)</> <a href='#метка'>Гиперссылка на заголовок в текущей веб-странице</a> <></>
<h1>Заголовок 1-ого уровня</h1> <h5>Заголовок 5-ого уровня</h5>
Горизонтальная horizRuler <hr />
<marquee>
Бегущая строка (упразднена в документации W3C)
</marquee>
Абзац без обтекания текста <br clear='all'>
Обычный абзац <br>
Юникод-символы: &#x1F602; (hex), &#128514; (dec), entities: &reg; &Ntilde; &sect;
<script type='text/javascript' src='джава-скрипт-файл.js'>Инструкции; джаваскрипта(); </script>
А также <form>, <input>, <button>, <select>, <div>, <table>, etc.
Title: html5js-либа как лайфак для быстрого рисования и отображения интерфейса в Кликер
Post by: Cleoss on February 20, 2019, 04:43:52 AM
(резерв под расширение темы)