[EOS] [HELP] Getting Images Programmatically

[SilverSlut]

Hi!

I hope it's not too much of a bother, but I'm trying to make a tease and certain things would be much easier if I knew how to refer to/access galleries, images, and files programmatically. It would also be great if I knew how to display images programmatically as well, though I don't know if that's possible.

Basically, I see the very polished work that comes from some of our experienced tease-makers and I wish I could do what they do, but I don't know how I could with the tools given.

Anyone willing to unfold some of the mysteries for me? I have a pretty decent understanding of object-based programming and great google-fu skills, so you won't have to spend loads of time on me.

[RemiHiyama]

If what you mean by "programmaticaly" is "display an image with javascript code"... you can't, as far as I know.

What you can do is have pages that do nothing but display an image and then jump to a page that does your "after displaying the image" stuff, and use javascript to jump to one of those at the appropriate times.

[SilverSlut]

What I’m going for is a way to select the image programmatically and then use the built-in image displayed to display it.

This would lead to me being able to give viewers a “please don’t show me this image again” button without having a million pages.

[fapnip]

without having a million pages.

Currently no way around it in Eos. You'll need to create a page for each image.

In OpenEOS you can do it using pages.setImage(locator), but then you'll need to use the OpenEOS player to play them. (Can't play them directly on Milovana.)

[SilverSlut]

Damn okay! Well, thanks for at least confirming it for me!

Hopefully the EOS engine gets some updates sometime, like PNGs and a "pages" accessor. Maybe even GIFs, but that's dreaming big...

[RemiHiyama]

The engine could actually handle gifs fine if the server would allow uploading those.

[fapnip]

Hopefully the EOS engine gets some updates sometime, like PNGs and a "pages" accessor. Maybe even GIFs, but that's dreaming big...

Because of the increased bandwidth of GIFs, my guess is we'll never see GIF support. (OpenEOS does it by allowing you reference images stored on https://imgbb.com/.)

When/if seraph0x gets around to updating Eos, hopefully we'll see a way to get a listing of pages. For now, you can use my pages.contains(...) extension to at least check if a page name exists before trying to load it with pages.goto(...).

[computergeek]

You might try looking at some of the offline packages such as GuideMe and TeaseAI as they have greater functionality that what would be available online.

GuideMe
viewtopic.php?f=26&t=12944&hilit=guideme

I had just released a tease for GuideMe that has similar functionalities to what you are describing. You might find some of the coding useful.

'Simple for GuideMe
viewtopic.php?f=2&t=23972

[SilverSlut]

Yeah GuideMe seems pretty awesome, but writing directly in XML is a turn-off for me. Unless I have totally the wrong idea, in which case I'm open to being corrected.

[MisterFlames]

Can't really help with a programming solution.

In my current project, I'm using pages that only exist to display the image I want. Looks something like this:

Spoiler: show

So, I give each picture a number and set the variable to the picture number I want. The only purpose of that page is to load the correct image and redirect to another page.

It's super inconvenient and takes a lot of time if you try to do complex stuff. But better than nothing, I suppose?

[fapnip]

In case they're useful to anyone, here are my page calling and image page loading functions pulled out of FapJack, and slightly modified for use outside of FapJack. (They are a bit ugly -- never intended them for public consumption.)

Keep in mind that when you call returnToCaller(), when you return to the calling page, that page will be re-executed from the top.

Some of these functions require my pages.contains extension.

Page calling functions to put in your init script:

Code: Select all

// Enable/disable debug
var DEBUG = false

// Page stack storage
var pageStack = []

/**
 * push current page (and given pop callback) on stack an go to given page
 * @param {string} [pid] - Page Id to call
 * @param {function} [callback=undefined] - Optional callback function
 * @param {string} [altReturn=undefined] - Optional alternate page to return to
 */
function callPage(pid, callback, altReturn) {
  altReturn = altReturn || (typeof callback === 'string' ? callback : false)
  var currentPage = altReturn || pages.getCurrentPageId()
  pageStack.push({
    target: pid,
    page: altReturn === -1 ? null : currentPage,
    callback: callback,
  })
  if (DEBUG) console.log('calling page', pid, pageStack)
  pages.goto(pid)
}

/**
 * pull most recent page from stack
 */
function pullPage() {
  return pageStack.pop()
}

function gotoPulledPage(page) {
  var didCallback = false
  if (page && typeof page.callback === 'function') {
    if (DEBUG) console.log('Executng pulledPage callback:', page.callback, page)
    var result = page.callback(pages.getCurrentPageId(), page)
    if (typeof result === 'string' && pages.contains(result)) {
      if (DEBUG) console.log('Returning to callback result page', result, page)
      pages.goto(result)
      return
    }
    didCallback = true
  }
  if (!page) {
    console.error("Can't pop page. pageStack empty")
  } else if (!page.page) {
    if (didCallback) {
      console.warn('Skipping null page, using callback instead:', page)
    } else {
      console.error("Can't pop page. Invalid page entry:", page)
    }
  } else {
    // console.warn('Popping page:', page.page, page);
    if (DEBUG) console.log('Returning to page', page.page, page)
    pages.goto(page.page)
  }
}

/**
 * pull most recent page from stack, call callback if one was pushed, then go to pushed page
 */
function returnToCaller() {
  gotoPulledPage(pullPage())
}

callPage use examples:

Code: Select all

// Just call a page
callPage('my-page')

// Return to caller page (will re-execute page from the top)
returnToCaller()

// Call a page, but redirect to a different page on return
callPage('my-page', 'return-to-this-page')

// Call a page, execute a function before returning to caller
callPage('my-page', function() {console.log('Hey! I did this before the calling page was re-executed')})

// Call a page, execute a function before returning to alternate page
callPage('my-page', function() {console.log('Hey! I did this before the calling page was re-executed')}, 'return-to-this-page')

// Call a page, then let a function decide what page to execute on return
callPage('my-page', function() {return didSomething ? 'did-something-page' : 'something-else-page'})

Load image page functions to put in your init script:
Requires page call functions from above.

Code: Select all

var currentImage = null;
/**
 * Call the proper image-x page for the given round, if needed.
 * (image-x page should returnToCaller() when it's done.)
 */
function loadImagePage(imagePath, thenDo, thenGoto) {
  if (currentImage  !== imagePath) {
    if (DEBUG) console.warn('loading image page', imagePath)
    currentImage  = imagePath
    if (pages.contains(imagePath)) {
      callPage(imagePath, thenDo || false, thenGoto || false)
    } else {
      if (DEBUG) console.error('MISSING IMAGE PAGE:', imagePath)
    }
    return true
  } else {
    if (DEBUG) console.log('already loaded image', imagePath)
    return false
  }
}

/**
 * Clear the name of the last image we loaded
 * Needed if we load an image not using loadImagePage
 */
function clearImagePage() {
  currentImage   = null
}

Load image page use examples:

Code: Select all

// In an Eval, or JS code somewhere:
// (Best to be first Eval in page, else everything before eval will be re-executed after image is loaded)
loadImagePage('my-image-page'); // Will only call 'my-image-page' if the image isn't currently loaded.

// As last eval in 'my-image-page'
returnToCaller()

// If we've loaded an image without using loadImagePage, we must clear what we've recorded as the currently loaded image
// else loadImagePage won't know.
clearImagePage()

[fapnip]

Here's a super simple (but playable) example tease using the functions above:
https://milovana.com/webteases/showteas ... 5aa52402e3

Source JSON for tease (right-click / save link as):
https://milovana.com/webteases/geteossc ... 5aa52402e3

Edit: cleaned up example, and added some code comments.