I have a slides based game. Game board is background image of slide. If I use a sidebar for my questions I can move game pieces (images) around on the gameboard slide. I want to share it without having to share the spreadsheet and code without having to share any other drive files so I put the dice images on separate slides. I looked up the object id for each dice slide and for the single image on that slide (see below).
My html to display a sidebar with dice image:
<!DOCTYPE html>
<html>
<head>
<!-- dice1Sidebar.html -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>dice1Sidebar</title>
<base target="_top"> <!-- allows us to open the body of the HTML inside the sidebar -->
</head>
<body>
<img src = diceImg width="100" />
<script>
const sS = SlidesApp.getActivePresentation();
const slide = sS.getSlideById('gc48afbf6c5_0_8') // dice6Slide
<!-- tried all of these -->
<!-- const diceImg = slide.getImages()[0]; -->
<!-- const diceImg = slide.getImages()[0].asImage(); -->
const diceImg = slide.getImages()[0].asImage().select();
</script>
</body>
</html>
displays the broken image icon.
Also tried
I got the id with this code: ...
slideSet.forEach(function(slide) {
console.log('============================================');
slideId = slide.getObjectId;
console.log('slideId: ', slideId );
let pageElements = slide.getPageElements();
console.log('numberof elements: ' , pageElements.length ); // numberof elements: 6
let imageArr = slide.getImages();
console.log('@ images: ', imageArr.length );
imageArr.forEach(function(image) {
console.log('--------------- each image -------------------------');
console.log('image.getObjectId() : ', image.getObjectId() );
console.log('image.getTitle() : ', image.getTitle() );
//console.log('image.getPageElementType(): ', image.getPageElementType() ); // Logging output too large. Truncating output. image.getPageElementType(): { toString: [Function: toString],
console.log(' getHeight() : ' , image.getHeight() );
console.log(' getLeft() : ' , image.getLeft() );
console.log(' getWidth() : ' , image.getWidth() );
} )
...
Example output:
--------------- each image -------------------------
Mar 3, 2021, 11:22:52 AM Debug image.getObjectId() : gc48afbf6c5_0_57
Mar 3, 2021, 11:22:52 AM Debug image.getTitle() : dice2
Mar 3, 2021, 11:22:52 AM Debug getHeight() : 94.35826889763781
Mar 3, 2021, 11:22:52 AM Debug getLeft() : 186.00290413385827
Mar 3, 2021, 11:22:52 AM Debug getWidth() : 94.35826889763783
I found this about moving images from the sidebar to a slide but it uses 'ajax' and did not seem relevant. There are many described ways to get images from drive to html. Do I need to go through a BLOB stage?
More explanation: This is a board game. Where players answer questions and if they answer correctly a die is rolled and they can move their token that many squares. The ids are for the images of dice on the page. Dice images are stacked on the slide and covered so they are not visible. There is a background game board. I exposed the dice with 'bring to front'. When I display the next question I cover the dice. I has const peArr = gameboard.getPageElements() so I grabbed all the moving pieces on the board as well as the dice and covered them in the dice pile. If I cannot put the dice images in the sidebar I will have to clean up my array so I do not grab all images. Sloppy programming on my part. Displaying the die in the sidebar would look good but if it is not possible???
