webOS Forums - форум пользователей телевизоров на webOS

[soft42]

Тут новая идея вбрела в голову. Сделать для телевизора LG приложение по картинам художников.
Суть следующая: на экране отображается картина и предлагается несколько вариантов ответов - фамилий художников. Указал правильно, появляется следующая картина.
Если ответ неправильный, то выводится подсказка. Алгоритм несложный. Главное найти качественные изображения картин.
Думаю, приложение будет полезным для студентов художественных вузов и для всех интересующихся живописью.
Телевизор с большим экраном тут точно не лишний. Можно спокойно рассмотреть все мелкие детали картины.
И ещё необходимо решить вопрос с авторским правом. А то не примут к публикации, как это случилось с автологотипами. Почитал инет. Сканы картин можно взять в Википедии, там их очень много.
И там-же у каждой картины в правом нижнем углу указан признак.

bogatyri.png (2.98 МБ) Просмотров: 1082

Богатыри, Виктор Васнецов, 1898

Для картины "Богатыри" В.Васнецова указан признак "Общественное достояние". Если щелкнуть по этой ссылке, то открывается следующая страничка.

publicdomain.png (63.26 КБ) Просмотров: 1082

Общественное достояние, нет авторских прав

"Этот файл был определён как свободный от известных ограничений авторского права, а также связанных и смежных прав."
Получается, что изображение можно использовать в приложении. Но на всякий случай перестрахуюсь. Сначала сделаю приложение на 10 картин.
Если прокатит, то можно потом добавить ещё изображения. Пока сделал только заставку. 4 картины и 3 рамки сменил, прежде чем остановился на этом варианте!

author.png (1.62 МБ) Просмотров: 1082

Главное окно приложения

Продолжение следует

[Diz]

soft42
Рукоплещу идее! Плюс иностранцев сможете познакомить с нашим искусством .

[soft42]

Ну вот, что-то можно опубликовать. Файл appinfo.json:

Код: Выделить всё

{"id": "zimfer.app.authorru",
 "version": "1.0.0",
 "vendor": "Zimfer Alexander",
 "type": "web",
 "main": "index.html",
 "title": "Who is the author",
 "icon": "icon80.png",
 "largeIcon": "icon130.png",
 "disableBackHistoryAPI": true,
 "bgColor": "black",
 "iconColor": "black",
 "splashColor": "black",
 "splashBackground": "img/_fon.png",
 "appDescription": "A quiz about the paintings of great Russian artists. Russia 2026."}


Иконки для приложения 80х80 и 130х130 пиксель:

Иконка 80х80

icon80.png (9.97 КБ) Просмотров: 825

Иконка 130х130

icon130.png (25.2 КБ) Просмотров: 825

Индексный файл index.html:

Код: Выделить всё

<!DOCTYPE html>
<html>

<head>
 <title>Author</title>
 <link rel="stylesheet" href="styles.css" type="text/css"> <!-- подключаем свой CSS-файл -->
</head>

<script src="webOSTVjs-1.2.4/webOSTV.js" charset="utf-8"></script>
<script src="webOSTVjs-1.2.4/webOSTV-dev.js" charset="utf-8"></script>
<script src="js/frame.js" type="text/javascript" charset="utf-8"></script>
<script src="script.js" type="text/javascript" charset="utf-8"></script>

<body>

<div id="container">
 <div id="header1">
 <div id="text1" class="text-header">Who is the author?</div>
 </div>

 <div id="content-main"></div>

 <div id="content-pla1">
 <img id="fram">
 <p id="fram-p" class="text-white"></p>
 </div>
 <div id="content-pla2">
 <button id="but1" class="item button-olive" onclick="Answer(otvet[1],1)">Ответ1</button>
 <button id="but2" class="item button-olive" onclick="Answer(otvet[2],2)">Ответ2</button>
 <button id="but3" class="item button-olive" onclick="Answer(otvet[3],3)">Ответ3</button>
 <button id="but4" class="item button-olive" onclick="Answer(otvet[4],4)">Ответ4</button>
 <button id="but5" class="item button-olive" onclick="Answer(otvet[5],5)">Ответ5</button>
 <button id="but6" class="item button-olive" onclick="Answer(otvet[6],6)">Ответ6</button>
 <div id="text2"></div>
 </div>

 <div id="content-set">
 <h2 id="set-h2" class="h2-white"></h2><br><br>
 <button id="button-ru" class="item button-yel" onclick="SaveLanguage()">RU</button>
 </div>
 
 <div id="content-help">
 <h2 id="help-h2" class="h2-white">Help</h2><br><br>
 <p id="help-p" class="p-white">Developer: Zimfer Alexander</p>
 </div>

 <div id="clear"></div>
 
 <div id="footer-menu" >
 <button id="button-play" class="item button-menu" onclick="Play()">Play</button>
 <button id="button-set" class="item button-menu" onclick="Set()">Settings</button>
 <button id="button-help" class="item button-menu" onclick="Help()">Help</button>
 </div>

 <div id="footer3"></div>
 
</div>

</body>

</html>


Приложение будет иметь 3 стандартные кнопки: Старт/Play, Настройки/Setting, Помощь/Help. Такой дизайн у меня уже устаканился.
Столкнулся со следующей проблемой: при правильном ответе картинка меняется на следующую. При неправильном - должен раздаваться звук ошибки и выводиться подсказка.
И вот звук ошибки на телевизоре не воспроизводится. На компьютере все нормально звучит, а на телевизоре - нет. Долго разбирался, оказалось - конкретно этот файл error.mp3 не воспроизводился телевизором.
Поменял на другой, стало все нормально. Почему не играет на ТВ - загадка. В нём не заполнены теги Альбом, Исполнители, Название.
Но я озвучивал вопросы через сайт для ПДД, там тоже эти теги пустые, но файл играется телевизором.
Отдельно в файле frame.js разместил массив с картинами:

Код: Выделить всё

var tickets = [["Image", "KeyRU", "KeyEN", "Error", "HelpRu", "HelpEn"],
 ["img/vsadnitsa.jpg", "Карл Брюллов", "Karl Bryullov", "", "Карл Брюллов (1799–1852). Всадница, 1832", "Karl Bryullov (1799–1852). Horsewoman, 1832"],
 ["img/grachi-prileteli.jpg", "Алексей Саврасов", "Alexei Savrasov", "", "Алексей Саврасов (1830–1897). Грачи прилетели, 1871", "Alexei Savrasov (1830–1897). The Rooks Have Returned, 1871"],
 ["img/neizvestnaya.jpg", "Иван Крамской", "Ivan Kramskoy", "", "Иван Крамской (1837-1887). Неизвестная, 1883", "Ivan Kramskoy (1837-1887). Portrait of an Unknown Woman, 1883"],
 ["img/utro-v-sosnovom-lesu.jpg", "Иван Шишкин", "Ivan Shishkin", "", "Иван Шишкин (1832–1898). Утро в сосновом лесу, 1889", "Ivan Shishkin (1832–1898). Morning in a Pine Forest, 1889"],
 ["img/demon-sidyashij.jpg", "Михаил Врубель", "Mikhail Vrubel", "", "Михаил Врубель (1856–1910). Демон сидящий, 1890", "Mikhail Vrubel (1856–1910). The Demon Seated, 1890"],
 ["img/kupanie-krasnogo-konya.jpg", "Кузьма Петров-Водкин", "Kuzma Petrov-Vodkin", "", "Кузьма Петров-Водкин (1878-1939). Купание красного коня, 1912", "Kuzma Petrov-Vodkin (1878-1939). Bathing of a Red Horse, 1912"],
 ["img/the-9-wave.jpg", "Иван Айвазовский", "Ivan Aivazovsky", "", "Иван Айвазовский (1817-1900). Девятый вал, 1850", "Ivan Aivazovsky (1817-1900). The Ninth Wave, 1850"],
 ["img/svyataya-troica.jpg", "Андрей Рублев", "Andrei Rublev", "", "Андрей Рублев (около 1360-1430). Троица, 1422", "Andrei Rublev (1360-1430). The Trinity, 1422"],
 ["img/noch-na-dnepre.jpg", "Архип Куинджи", "Arkhip Kuindzhi", "", "Архип Куинджи (1841-1910). Лунная ночь на Днепре, 1882", "Arkhip Kuindzhi (1842-1910). Moonlit Night on the Dnieper, 1882"],
 ["img/boyarynya-morozova.jpg", "Василий Суриков", "Vasiliy Surikov", "", "Василий Суриков (1848–1916). Боярыня Морозова, 1887", "Vasiliy Surikov (1848–1916). Boyaryna Morozova, 1887"],];


Вроде всё просто, сначала файл изображения, затем правильный ответ/автор на русском и английском, пустое поле, в котором фиксируется факт ответа, далее подсказка на русском и английском.
Весь script.js приводить не буду, но есть функции, которые уже устоялись и переходят из одного приложения в другое почти без изменений. Приведу их в следующем посте.

[soft42]

Функции, которые нужны в данном приложении.
Генерация случайного числа в указанном диапазоне:

Код: Выделить всё

function funRandom(min, max) {//генерация случайного числа в указанном диапазоне, включая min и max
 min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1) + min);}


Функция воспроизведения звукового файла, принимает имя файла:

Код: Выделить всё

var myAudio = new Audio(), myValue = ''; // Создаём новый элемент Audio для mySound()

function mySound(sss) {//озвучиваем переданный файл, используется глобальный Audio-объект
 myValue = sss; myAudio.src = this.myValue; myAudio.play(); //console.log(this.value)}

Функция перемешивания вопросов, в нашем случае перемешиваются строки массива tickets, где хранятся данные по картинам. Вызывается как funMixer(10);

Код: Выделить всё

function funMixer(uuu) {//перемешивание 10-вопросов
 for (let i = 1; i <= uuu; i++) {tickets[i][3]='';} //очистка признака, что уже ответили (3-ячейку не мешаем)
 let x=0, y=0;
 for (let i = 1; i <= uuu; i++)
 {x=funRandom(1, uuu); y=funRandom(1, uuu);
 while (x==y) {y=funRandom(1, uuu);}; //console.log(x+', '+y); //далее обмен через нулевую-ячейку
 tickets[0][0]=tickets[x][0]; tickets[0][1]=tickets[x][1]; tickets[0][2]=tickets[x][2]; tickets[0][4]=tickets[x][4]; tickets[0][5]=tickets[x][5]; //запоминаем x-строку в 0-строке
 tickets[x][0]=tickets[y][0]; tickets[x][1]=tickets[y][1]; tickets[x][2]=tickets[y][2]; tickets[x][4]=tickets[y][4]; tickets[x][5]=tickets[y][5]; //присваиваем x-строке значение y-строки
 tickets[y][0]=tickets[0][0]; tickets[y][1]=tickets[0][1]; tickets[y][2]=tickets[0][2]; tickets[y][4]=tickets[0][4]; tickets[y][5]=tickets[0][5]; //присваиваем y-строке значение 0-строки}}


Аналогично с ответами. Ответы хранятся в массиве otvet. Нулевая ячейка используется для обмена, как и в предыдущем случае. Вызывается как MixerAnswer(6);
Я объявил массив ответов большей длины, так-как ещё не определился, сколько ответов будет на один вопрос, может 6, может 8...

Код: Выделить всё

var otvet = ['', '', '', '', '', '', '', '', '', '']; //массив ответов

function MixerAnswer(uuu) {//перемешивание ответов между собой
 let x=0, y=0;
 for (let i = 1; i <= uuu; i++)
 {x=funRandom(1, uuu); y=funRandom(1, uuu);
 while (x==y) {y=funRandom(1, uuu);}; //console.log(x+', '+y); //далее обмен через нулевую-ячейку
 otvet[0]=otvet[x]; otvet[x]=otvet[y]; otvet[y]=otvet[0];}}


Остальные функции для каждого приложения свои.

[soft42]

Добрый вечер. В процессе отладки приложения столкнулся с одной особенностью:
Программа не открывает файл/картинку, если не совпадает написание расширений файлов. У меня был файл Tarakanowa.JPG.
А в программе написано Tarakanowa.jpg (расширение маленькими буквами), и он не открывался. Пришлось исправлять.
Зато можно в программе имя файла писать как большими, так и маленькими, например tarakanowa.jpg, файл Tarakanowa.jpg открывается. Очень странная логика

[Diz]

soft42
DOS-стайл однако

[soft42]

Добрый день.
Тестовая версия приложения на 10 вопросов/картинок готова, отправил в LG на проверку и публикацию. Остается ждать.
Пока попробую сделать плавную смену картинок.