diff --git a/public/img/No-Image-Placeholder.svg b/public/img/No-Image-Placeholder.svg new file mode 100644 index 000000000..d21137506 --- /dev/null +++ b/public/img/No-Image-Placeholder.svg @@ -0,0 +1,309 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + NO IMAGEAVAILABLE + + diff --git a/public/scripts/extensions.js b/public/scripts/extensions.js index a017bb5d7..6b7e73340 100644 --- a/public/scripts/extensions.js +++ b/public/scripts/extensions.js @@ -4,6 +4,7 @@ export { getContext, getApiUrl, defaultRequestArgs, + modules, }; const extensionNames = ['caption', 'dice', 'expressions', 'floating-prompt', 'memory']; diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js index 8e8cb4262..286bdafd3 100644 --- a/public/scripts/extensions/expressions/index.js +++ b/public/scripts/extensions/expressions/index.js @@ -1,5 +1,4 @@ -import { getContext, getApiUrl } from "../../extensions.js"; -import { urlContentToDataUri } from "../../utils.js"; +import { getContext, getApiUrl, modules } from "../../extensions.js"; export { MODULE_NAME }; const MODULE_NAME = 'expressions'; @@ -67,6 +66,15 @@ async function moduleWorker() { validateImages(); } + if (!modules.includes('classify')) { + $('.expression_settings .offline_mode').css('display', 'block'); + lastCharacter = context.characterId; + return; + } + else { + $('.expression_settings .offline_mode').css('display', 'none'); + } + // check if last message changed const currentLastMessage = getLastCharacterMessage(); if (lastCharacter === context.characterId && lastMessage === currentLastMessage) { @@ -139,16 +147,25 @@ async function validateImages() { image.width = '0px'; image.height = '0px'; image.onload = function () { - $('#image_list').append(`
  • ${item} - OK
    • `); + $('#image_list').append(getListItem(item, image.src, 'success')); } image.onerror = function () { - $('#image_list').append(`
  • ${item} - Missing
    • `); + $('#image_list').append(getListItem(item, '/img/No-Image-Placeholder.svg', 'failure')); } $('#image_list').prepend(image); }); imagesValidating = false; } +function getListItem(item, imageSrc, textClass) { + return ` +
    + ${item} + +
    + `; +} + async function getExpressionsList() { if (Array.isArray(expressionsList)) { return expressionsList; @@ -175,11 +192,11 @@ async function getExpressionsList() { } } -async function setExpression(character, expression) { +async function setExpression(character, expression, force) { const filename = `${expression}.png`; - const debugImageStatus = document.querySelector(`#image_list li[id="${filename}"]`); + const debugImageStatus = document.querySelector(`#image_list div[id="${filename}"] span`); - if (debugImageStatus && !debugImageStatus.classList.contains('failure')) { + if (force || (debugImageStatus && !debugImageStatus.classList.contains('failure'))) { //console.log('setting expression from character images folder'); const imgUrl = `/characters/${character}/${filename}`; $('img.expression').prop('src', imgUrl); @@ -193,6 +210,17 @@ async function setExpression(character, expression) { } } +function onClickExpressionImage() { + // online mode doesn't need force set + if (modules.includes('classify')) { + return; + } + + const context = getContext(); + const expression = $(this).attr('id').replace('.png', ''); + setExpression(context.name2, expression, true); +} + (function () { function addExpressionImage() { const html = `
    `; @@ -208,7 +236,8 @@ async function setExpression(character, expression) {
    - +

    You are in offline mode. Click on the image below to set the expression.

    +

    Hint: Create new folder in the public/characters/ folder and name it as the name of the character. Put PNG images with expressions there.

    @@ -217,6 +246,7 @@ async function setExpression(character, expression) { `; $('#extensions_settings').append(html); $('#expressions_show_default').on('input', onExpressionsShowDefaultInput); + $(document).on('click', '.expression_list_item', onClickExpressionImage); $('.expression_settings').hide(); } diff --git a/public/scripts/extensions/expressions/manifest.json b/public/scripts/extensions/expressions/manifest.json index 1b89ac19b..b9945163b 100644 --- a/public/scripts/extensions/expressions/manifest.json +++ b/public/scripts/extensions/expressions/manifest.json @@ -1,9 +1,7 @@ { "display_name": "Character Expressions", "loading_order": 6, - "requires": [ - "classify" - ], + "requires": [], "js": "index.js", "css": "style.css" } \ No newline at end of file diff --git a/public/scripts/extensions/expressions/style.css b/public/scripts/extensions/expressions/style.css index 4875821c6..720cd9199 100644 --- a/public/scripts/extensions/expressions/style.css +++ b/public/scripts/extensions/expressions/style.css @@ -31,10 +31,39 @@ img.expression { height: 0px; } -#image_list { - margin-top: 0; - margin-bottom: 0; +.expression_list_item { + position: relative; + max-width: 33%; + max-height: 200px; + background-color: #515151b0; + border-radius: 10px; + cursor: pointer; +} + +.expression_list_title { + position: absolute; + bottom: 0; + left: 0; + text-align: center; font-weight: 600; + background-color: #000000a8; + width: 100%; + height: 20%; + display: flex; + justify-content: center; + align-items: center; +} + +.expression_list_image { + max-width: 100%; + height: 100%; +} + +#image_list { + display: flex; + flex-direction: row; + column-gap: 1rem; + margin: 1rem; } #image_list .success {