Добрый вечер. В качестве эксперимента решил собрать схему. С выбором задачи долго не задумывался, выбрал из книги "Выразительный JavaScript", которая называется "Белка-оборотень" ( ссылка на перевод книги в Habrahabr). Там есть полное и подробное описание решения задачи на JavaScript.  Вкратце Иногда, обычно между восемью и десятью часами вечера, Жак против своей воли превращается в небольшого грызуна с пушистым хвостом.
С одной стороны, Жак рад, что он не превращается в классического волка. Превращение в белку влечёт меньше проблем. Вместо того, чтобы волноваться о том, не съешь ли ты соседа (это было бы неловко), он волнуется, как бы его не съел соседский кот. После того, как он дважды просыпался на очень тонкой ветке в кроне дуба, голый и дезориентированный, он приучился запирать окна и двери в своей комнате на ночь, и класть несколько орешков на пол, чтобы чем-то занять себя.
Так решаются проблемы с котом и дубом. Но Жак всё ещё страдает от своего заболевания. Нерегулярные обращения наводят его на мысль, что они должны быть чем-то вызваны. Сначала он думал, что это происходит только в те дни, когда он прикасался к деревьям. Он перестал это делать, и даже стал избегать подходить к ним. Но проблема не исчезла.
Перейдя к более научному подходу, Жак решил вести ежедневный дневник всего, чем он занимался, записывая туда, обращался ли он в белку. Так он надеется сузить круг вещей, приводящих к трансформации. Чтобы охватить большой набор различных элементов в схеме, было решено использовать БД Firebase (в неё предварительно был загружен журнал из задачи), для наглядности: таблицу и круговую диаграмму. Что получилось: Add(MainForm,1,49,42)
{
Width=#3:771|
Height=#3:584|
Caption=#15:Белка-оборотень|
}
Add(ArrayEnum,5,350,112)
{
link(onEnum,108:doGet,[])
link(onEnd,152:doEnum,[(398,125)(398,159)(175,159)(175,188)])
link(Array,440:Var3,[(356,91)])
}
Add(Button,7,98,98)
{
Left=14
Top=210
Width=#2:80|
Enabled=0
Caption=#10:Корреляция|
Point(doEnabled)
link(onClick,166:doEvent1,[])
}
Add(ArrayEnum,17,504,112)
{
link(onEnum,383:doPosition,[])
}
Add(MathParse,97,364,182)
{
MathStr=#50:($table[3] * $table[0] - $table[2] * $table[1]) / |30:sqrt(($table[2] + $table[3]) *|25:($table[0] + $table[1]) *|25:($table[1] + $table[3]) *|24:($table[0] + $table[2]))|
DataCount=1
Args=#5:table|
link(table,341:table,[(370,168)(332,168)(332,228)(293,228)])
}
Add(JSON_Field,108,434,112)
{
Name=#6:events|
link(onGet,17:doEnum,[])
}
Add(Version,110,49,161)
{
Version=#4:0.60|
Description=#19:Превращение в белку|
InternalName=#8:Squirrel|
}
Add(Debug,114,735,238)
{
WEName=#6:коэф.:|
}
Add(JSON_Enum,116,357,315)
{
link(onEnum,183:doEvent1,[(409,321)(409,244)])
link(onEndEnum,288:doEvent1,[])
link(Object,375:Var2,[])
}
Add(JSON_Field,118,595,238)
{
link(onGet,127:doString,[])
link(Object,377:Var3,[(601,222)(461,222)(461,301)])
}
Add(Memory,126,546,238)
{
link(onData,118:doGet,[])
}
Add(FormatStr,127,679,238)
{
Mask=#6:%1: %2|
link(onFString,114:doEvent,[])
link(Str1,291:Var1,[(685,224)(657,224)])
}
Add(Array,131,707,42)
{
Array=#2:[]|
}
Add(ArrayAdd,133,707,119)
{
link(Array,143:Var3,[(713,98)])
link(Value,17:Item,[(720,108)(748,108)(748,159)(510,159)])
}
Add(If_else,134,623,112)
{
Type=5
Op2=Real(-1)
link(onFalse,133:doAdd,[])
}
Add(GetDataEx,143,707,91)
{
link(Data,131:Array,[])
}
Add(ArrayEnum,152,189,182)
{
link(onEnum,367:doEvent1,[])
link(onEnd,116:doEnum,[(235,195)(235,321)])
link(Array,384:Var1,[(195,98)])
}
Add(Hub,166,147,98)
{
OutCount=3
link(onEvent1,189:doAdd,[(898,104)(898,307)])
link(onEvent2,5:doEnum,[(255,111)(255,118)])
link(onEvent3,445:doWork3,[(174,118)(174,141)(32,141)])
}
Add(Hub,183,483,238)
{
link(onEvent1,126:doValue,[])
link(onEvent2,209:doCompare,[(525,251)(525,314)])
}
Add(ChartData,188,777,231)
{
}
Add(ChartDataAddColumn,189,910,301)
{
Title=#6:Events|
link(onAdd,190:doAdd,[])
link(Data,379:Var3,[(916,287)])
}
Add(ChartDataAddColumn,190,973,301)
{
Title=#4:Phis|
Type=1
}
Add(ArrayBuilder,192,693,308)
{
Items=#6:Events|4:Phis|
link(onBuild,194:doAdd,[])
link(Events,291:Var3,[(699,297)])
}
Add(ChartDataAddRow,194,742,308)
{
link(onAdd,300:doNext,[])
link(Data,253:Var1,[(748,287)])
}
Add(ChartPie,197,777,385)
{
Left=105
Top=245
Width=#3:314|
Title=#30:Препятствует обращению в белку|
link(Data,273:Var2,[])
}
Add(If_else,209,595,308)
{
Type=1
Op2=Real(0)
link(onTrue,310:doCalc,[])
link(Op1,248:Var2,[])
}
Add(Firebase,223,112,42)
{
ApiKey=#39:AIzaSyD2mvX7Mzl_u3pV4IpncNhmzosvV4Asb-s|
AuthDomain=#21:proba.firebaseapp.com|
DatabaseURL=#28:https://proba.firebaseio.com|
StorageBucket=#26:firebase-proba.appspot.com|
link(onInit,224:doReference,[])
}
Add(FBNode,224,175,42)
{
Path=#7:journal|
link(onReference,391:doRead,[])
}
Add(Memory,226,294,42)
{
link(onData,405:doTable,[])
}
Add(Loader,239,623,49)
{
Left=392
Top=245
Point(doVisible)
}
Add(GetDataEx,248,595,280)
{
link(Data,118:Result,[])
}
Add(GetDataEx,253,777,280)
{
link(Data,188:Data,[])
}
Add(InfoTip,254,938,21)
{
Info=#17:Возникли вопросы:|0:|28:- Очистка массива ChartData;|38:- Поиск элемента в массиве .indexOf();|35:- Перевод массива в строку .join();|63:- Элемент для определения конца загрузки JS-файлов (библиотек).|
HAlign=0
@Width=239
@Height=151
}
Add(DoData,259,546,49)
{
Data=Real(0)
link(onEventData,239:doVisible,[])
}
Add(ChartPie,261,812,518)
{
Left=434
Top=245
Width=#3:314|
Title=#29:Вероятность обращения в белку|
link(Data,273:Var3,[(818,371)])
}
Add(JSON_Enum,262,455,462)
{
link(onEnum,265:doEvent1,[])
link(onEndEnum,261:doDraw,[(497,475)(497,524)])
link(Object,376:Var2,[])
}
Add(Hub,265,511,462)
{
link(onEvent1,267:doValue,[(535,468)(535,405)])
link(onEvent2,269:doCompare,[])
}
Add(JSON_Field,266,595,399)
{
link(Object,376:Var3,[(601,371)])
}
Add(Memory,267,546,399)
{
link(onData,266:doGet,[])
}
Add(If_else,269,595,469)
{
Type=4
Op2=Real(0)
link(onTrue,278:doNext,[])
link(Op1,275:Var2,[])
}
Add(ChartDataSet,272,756,469)
{
Column=1
link(Data,277:Var2,[])
link(Row,279:Var3,[(769,455)])
link(Value,275:Var3,[(783,448)])
}
Add(GetDataEx,273,777,364)
{
link(Data,253:Var2,[])
}
Add(GetDataEx,275,595,441)
{
link(Data,266:Result,[])
}
Add(ChartDataSet,276,700,469)
{
link(onSet,272:doSet,[])
link(Data,277:Var1,[(706,371)])
link(Row,279:Var2,[])
link(Column,286:Value,[])
link(Value,267:Value,[(727,462)(552,462)])
}
Add(GetDataEx,277,756,364)
{
Angle=1
link(Data,273:Var1,[])
}
Add(Counter,278,644,469)
{
link(onCounter,276:doSet,[])
}
Add(GetDataEx,279,707,448)
{
Angle=3
link(Data,278:Value,[(687,455)(687,513)(650,513)])
}
Add(Memory,286,714,399)
{
Default=Real(0)
}
Add(Hub,288,420,322)
{
OutCount=3
link(onEvent1,197:doDraw,[(455,328)(455,391)])
link(onEvent2,295:clearChartData,[(450,335)(450,363)])
link(onEvent3,262:doEnum,[(444,342)(444,468)])
}
Add(GetDataEx,291,651,290)
{
Angle=3
link(Data,126:Value,[(552,297)])
}
Add(MultiElementEx,295,875,357)
{
@Comment=#17:Очистка ChartData|
AddHint(69,23,0,0,@Comment)
link(Counter,300:Value,[(881,349)(832,349)])
link(CharData,379:Var2,[])
}
BEGIN_SDK
Add(MultiElementEditorEx,294,7,7)
{
WorkCount=#14:clearChartData|
DataCount=#7:Counter|8:CharData|
@VOffset=28
@HOffset=147
link(clearChartData,299:doFor,[])
}
Add(ChartDataSet,296,161,98)
{
link(onSet,297:doSet,[])
link(Data,308:Var2,[])
link(Row,309:Var2,[])
}
Add(ChartDataSet,297,217,98)
{
Column=1
link(Data,308:Var3,[(223,21)])
link(Row,309:Var3,[(230,84)])
}
Add(For,299,35,35)
{
link(onEvent,306:doData,[(83,41)(83,104)])
link(End,294:Counter,[(41,21)(160,21)])
}
Add(DoData,306,98,98)
{
Data=Real(0)
link(onEventData,296:doSet,[])
}
Add(GetDataEx,308,161,14)
{
link(Data,294:CharData,[])
}
Add(GetDataEx,309,168,77)
{
Angle=3
link(Data,299:Position,[(41,84)])
}
END_SDK
Add(Counter,300,826,308)
{
}
Add(MathParse,310,644,308)
{
MathStr=#8:abs($X1)|
DataCount=1
Args=#2:X1|
link(onResult,192:doBuild,[])
link(X1,248:Var3,[(650,287)])
}
Add(MultiElementEx,341,287,182)
{
@Comment=#8:tableFor|
link(end,97:doCalc,[])
link(event,368:Var1,[(293,168)(244,168)])
link(jornal,440:Var2,[])
}
BEGIN_SDK
Add(MultiElementEditorEx,340,7,7)
{
WorkCount=#8:tableFor|
EventCount=#3:end|
VarCount=#5:table|
DataCount=#5:event|6:jornal|
@VOffset=287
@HOffset=476
@Width=825
@Height=480
link(tableFor,346:doEvent1,[])
link(table,388:Var2,[])
}
Add(MathParse,343,483,245)
{
MathStr=#9:[0,0,0,0]|
DataCount=0
Args=#0:|
}
Add(Hub,344,357,91)
{
OutCount=5
link(onEvent1,362:doData,[])
link(onEvent2,386:doRead,[(403,104)(403,146)])
link(onEvent3,357:doGet,[(398,111)(398,202)])
link(onEvent4,356:doCalc,[(393,118)(393,237)])
link(onEvent5,340:end,[(387,125)(387,300)])
}
Add(ArrayEnum,345,273,91)
{
link(onEnum,344:doEvent1,[])
link(Array,340:jornal,[(279,49)(496,49)])
}
Add(Hub,346,105,294)
{
OutCount=3
link(onEvent1,343:doCalc,[(325,300)(325,251)])
link(onEvent2,345:doEnum,[(227,307)(227,97)])
}
Add(If_else,355,525,140)
{
Type=5
Op2=Real(-1)
link(onTrue,359:doCalc,[])
}
Add(MathParse,356,630,231)
{
MathStr=#19:$table[$index] += 1|
DataCount=1
Args=#5:table|5:index|
link(table,388:Var3,[(636,217)(622,217)(622,287)])
link(index,364:Var2,[])
}
Add(JSON_Field,357,469,196)
{
Name=#5:белка|
link(onGet,358:doCompare,[])
}
Add(If_else,358,525,196)
{
Type=5
Op2=Real(0)
link(onTrue,360:doCalc,[])
}
Add(MathParse,359,581,140)
{
MathStr=#8:$X1 += 1|
DataCount=1
Args=#2:X1|
link(X1,363:Var1,[(587,133)])
}
Add(MathParse,360,581,196)
{
MathStr=#8:$X1 += 2|
DataCount=1
Args=#2:X1|
link(X1,364:Var1,[(587,182)])
}
Add(Memory,361,637,91)
{
Default=Real(0)
}
Add(DoData,362,525,91)
{
Data=Real(0)
link(onEventData,361:doValue,[])
}
Add(GetDataEx,363,637,126)
{
link(Data,361:Value,[])
}
Add(GetDataEx,364,637,175)
{
link(Data,363:Var2,[])
}
Add(ObjectReader,386,420,140)
{
EventFields=#8:onevents|
link(onevents,389:doPosition,[])
}
Add(GetDataEx,388,483,280)
{
link(Data,343:Result,[])
}
Add(Position,389,476,140)
{
link(onPosition,355:doCompare,[])
link(Search,340:event,[])
}
END_SDK
Add(Hub,367,252,182)
{
link(onEvent1,341:tableFor,[])
link(onEvent2,370:storePhi,[(280,195)(280,251)])
}
Add(GetDataEx,368,238,228)
{
Angle=3
link(Data,152:Item,[(195,235)])
}
Add(MultiElementEx,370,357,245)
{
@Comment=#14:Запись коэф. Ф|
AddHint(-111,36,0,0,@Comment)
link(event,368:Var3,[(363,235)])
link(phi,97:Result,[])
}
BEGIN_SDK
Add(MultiElementEditorEx,369,21,21)
{
WorkCount=#8:storePhi|
VarCount=#3:map|
DataCount=#5:event|3:phi|
@VOffset=77
@HOffset=126
link(storePhi,372:doSet,[])
link(map,374:Var2,[(153,151)(76,151)])
}
Add(Object,371,70,28)
{
}
Add(JSON_Field_Set,372,140,98)
{
link(Object,374:Var3,[(146,77)])
link(Name,369:event,[])
link(Value,369:phi,[])
}
Add(GetDataEx,374,70,70)
{
link(Data,371:Object,[])
}
END_SDK
Add(GetDataEx,375,357,294)
{
link(Data,370:map,[])
}
Add(GetDataEx,376,455,364)
{
link(Data,377:Var2,[])
}
Add(GetDataEx,377,455,294)
{
Angle=3
link(Data,375:Var3,[])
}
Add(GetDataEx,379,882,280)
{
Angle=3
link(Data,253:Var3,[])
}
Add(Position,383,560,112)
{
link(onPosition,134:doCompare,[])
link(String,384:Var2,[])
}
Add(GetDataEx,384,560,91)
{
Angle=1
link(Data,143:Var1,[])
}
Add(SimpleTable,390,476,7)
{
Left=105
Top=14
Width=#3:645|
Height=#3:219|
Columns=#143:[{"title":"События","align":"left","type":"text","width":"500px"},{"title":"Обращение в белку","align":"center","type":"text","width":"125px"}]|
}
Add(FBReadMessage,391,231,42)
{
link(onRead,226:doValue,[])
}
Add(MultiElementEx,405,357,42)
{
@Comment=#34:Конвертирование данных для таблицы|
AddHint(-149,-35,0,0,@Comment)
link(arrayTable,441:doEvent1,[])
}
BEGIN_SDK
Add(MultiElementEditorEx,404,7,7)
{
WorkCount=#7:doTable|
EventCount=#10:arrayTable|
@VOffset=70
@Width=468
link(doTable,407:doEnum,[])
}
Add(ArrayEnum,407,77,77)
{
link(onEnum,430:doEvent1,[])
}
Add(ObjectReader,426,196,84)
{
EventFields=#19:onevents.toString()|
link(onevents.toString(),435:doAdd,[])
}
Add(Hub,430,147,77)
{
OutCount=3
link(onEvent1,434:doClear,[(179,83)(179,34)])
link(onEvent2,426:doRead,[])
link(onEvent3,432:doGet,[(178,97)(178,146)])
}
Add(JSON_Field,432,196,140)
{
Name=#5:белка|
link(onGet,438:doAdd,[])
}
Add(Array,434,252,28)
{
Array=#2:[]|
}
Add(ArrayAdd,435,252,84)
{
link(Array,439:Var2,[])
}
Add(ArrayAdd,438,315,140)
{
link(onAdd,404:arrayTable,[(411,146)(411,83)])
link(Array,439:Var3,[(321,70)])
}
Add(GetDataEx,439,252,63)
{
link(Data,434:Array,[])
}
END_SDK
Add(GetDataEx,440,294,84)
{
link(Data,226:Value,[])
}
Add(Hub,441,413,42)
{
OutCount=3
link(onEvent1,390:doAddRow,[(451,48)(451,13)])
link(onEvent2,259:doData,[])
link(onEvent3,445:doWork1,[(440,62)(440,82)(32,82)])
}
Add(Switch,442,49,98)
{
DataOn=Real(0)
DataOff=Real(1)
link(onSwitch,7:doEnabled,[])
}
Add(HubEx,445,28,98)
{
link(onEvent,442:doSwitch,[])
}
Add(InfoTip,446,497,196)
{
Info=#53:Вывод первой диаграммы с отрицательными коэфициентами|
HAlign=0
@Width=519
@Height=158
}
Add(InfoTip,447,385,399)
{
Info=#53:Вывод второй диаграммы с положительными коэфициентами|
VAlign=2
HAlign=0
@Width=519
@Height=165
}
1. Отсутствие компонента поиска элемента в массиве Array .indexOf(), т.к. поиск в строке использует тот же метод, то было решено использовать этот компонент  ; 2. Отсутствие компонента преобразования массива в строку Array .join() либо .toString(), использовал  , где прописывал .toString(). Кстати, это универсальный компонент, где можно прописывать любые методы к объектам или массивам; 3. Отсутствие компонента или иного способа очистки массива в ChartData, после прорисовки первой диаграммы использовал изменение значений в массиве пустыми элементами; 4. Не плохо было бы иметь компонент определяющее конец загрузки JS-файлов (библиотек) на странице, т.е. после чего можно было бы активировать работу программы.  Dilma, если можно было выйти из вышеуказанных ситуаций другими способами, то укажи как, а если нет, то может принять их в качестве предложения и внести новые компоненты? В целом, очень рад использованию Hion в разработке web-приложении, по возможности готов и дальше его тестировать. Вроде пока всё, что вспомню, добавлю. Желаю успехов! Редактировалось 4 раз(а), последний 2017-03-25 09:02:36
|
Поиск
Друзья
Администрация