images wont unload - please assist - image

I have some code here that when an image (which is my button) is clicked, a new image randomly appears. This is due to a table I created with some images inside.
local animalPic
local button = display.newImageRect ("images/animalBtn.jpg", 200, 200)
button.x = 250
button.y = 50
local myPics = {"images/animal1.png", "images/animal2.png"}
function button:tap (event)
local idx = math.random(#myPics)
local img = myPics[idx]
local animalPic = display.newImage(img)
animalPic.x = contentCenterX
animalPic.y = contentCenterY
end
button:addEventListener ("tap", button)
The problem with it is the graphics just keep piling up when I click the button. The correct behavior should be -
Button is clicked and an image is shown while removing the previous image. How do I incorporate this behavior? I already tried the removeSelf command and it doesnt work......Any help appreciated.

You declare animalPic each time you enter function. You should declare it once and then remove it and replace it by another.
It should be:
local animalPic
function button:tap (event)
local idx = math.random(#myPics)
local img = myPics[idx]
animalPic:removeSelf()
animalPic = nil
animalPic = display.newImage(img)
animalPic.x = contentCenterX
animalPic.y = contentCenterY
end

When you call display.newImage(), you are adding a new image. The problem is that you need to remove/hide the original one. Perhaps you really need two objects - one for the current image and one for the tap event. When the tap event occurs, hide the old image and display the new one. An alternative would be to load all the images in their own imageRects and then toggle them on and off.

Related

Python: update plot with image with slider weight

I loaded a .nii file in my application.
def show(self):
image = SimpleITK.ReadImage(file_name)
t1 = SimpleITK.GetArrayFromImage(image)
t2 = color.rgb2gray(t1[w.get()])
print(w.get())
print(t2.shape)
plt.ion()
fig = plt.figure()
ax = fig.add_subplot(111)
line1 = ax.imshow(t2, cmap='gray')
This function it is called when I move the slider and show me in a new figure the slice of brain.(the screenshot of application is attach here: [1]: https://i.stack.imgur.com/vzDJt.png)
I need to update the same figure/plot, it is possible?
That should work, but I would not be calling ReadImage and GetArrayFromImage every time show gets called. You don't want to be re-loading and converting the image each time your widget changes. Do those thing once, when the application starts.
If you look at the SimpleITK-Notebooks that's pretty much how images are displayed in Jupyter notebooks.
http://insightsoftwareconsortium.github.io/SimpleITK-Notebooks/Python_html/04_Image_Display.html
The section 'Inline display with matplotlib' uses imshow to display images.

Retrieve image from TinyDB via a Python function

I know TinyDB can't store images but you can store the image file path. I have done that and I want to make my application display an image when a button is clicked. I have successfully added the file path to the database and I have tested the output using print and the file path displays (so it is working to that extent). Also no error message come up. The function is as follows:
def showcar():
getcar = cardb.get(where("img_id") == "1")
img = Image.open("{car_img}".format(**getcar))
pic = ImageTk.PhotoImage(img)
lblimage.configure(image=pic)
When I click the button the function is assigned to, nothing happens. But when I use the exact same code out of the function like so:
getcar = cardb.get(where("img_id") == "1")
img = Image.open("{car_img}".format(**getcar))
pic = ImageTk.PhotoImage(img)
btnshow = Button(root, text="Show All", command=lambda: lblimage.configure(image=pic))
Then the image displays when the button is clicked. How can I make the application call the image path from TinyDB in a function?

Save multiple images with one function - AS3 ADOBE AIR

I've got an Array with 17 web links of images
var products:Array;
trace(products)
// Ouput :
"http://www.myWebsite.com/zootopia.jpg"
"http://www.myWebsite.com/james.jpg"
"http://www.myWebsite.com/tom.jpg"
..etc
If I do products[10].movieimage; the output will be the 9th link (something like : "http://www.myWebsite.com/lalaland.jpg")
I'm looking for downloading every images without a dialog box.
I manage to do so for 1 image with the specific link, like that :
function saveImage (event:Event):void {
var stream:URLStream = new URLStream();
var image1:File = File.documentsDirectory.resolvePath("test.jpg");
var fileStream:FileStream = new FileStream();
stream.load(new URLRequest("http://www.myWebsite.com/lalaland.jpg"));
stream.addEventListener(Event.COMPLETE, writeComplete);
        
function writeComplete(evt:Event):void  {
                var fileData:ByteArray = new ByteArray();
                stream.readBytes(fileData,0,stream.bytesAvailable);
                fileStream.openAsync(image1, FileMode.UPDATE);
                fileStream.writeBytes(fileData,0,fileData.length);
                fileStream.close();
trace("writeComplete");
trace(image1.url);
        }
}
Question : Is there a way to download all the images with the web links of my products array ? (and if images already exist, replace them. I could use if (image1.exists){ if (image2.exists){ ..etc for each image. But maybe there is a simplier solution)
If you could show me how, with a bit of code, I could that.
Also, note that I'd like to load the images then in Uiloader, like that :
function loadImages():void {
uiloader1.source = image1.url;
uiloader2.source = image2.url;
etc...
}
Don't over think it. You have your array of images. You have your tested routine for saving one image. Now put it together:
Some function initializes things and kicks it off.
Either splice out (or pop out) an item on the array – OR use a index var to access an item in the array
Pass that to your download function.
When the download completes either pop another item off the array OR increment your index. But first you would test if array.length== 0 OR `index > array.length. If either is true (depending on which method you use), then you are done.
If you want to get fancy you can show a progress bar and update it each time your download completes.

PhantomJS - Rendering fails to show all images

I have a phantomjs script that is stepping through the pages of my site.
For each page, I use page = new WebPage() and then page.close() after finishing with the page. (This is a simplified description of the process, and I'm using PhantomJS version 1.9.7.)
While on each page, I use page.renderBase64('PNG') one or more times, and add the results to an array.
When I'm all done, I build a new page and cycle through the array of images, adding each to the page using <img src="data:image/png;base64,.......image.data.......">.
When done, I use page.render(...) to make a PDF file.
This is all working great... except that the images stop appearing in the PDF after about the 20th image - the rest just show as 4x4 pixel black dots
For troubleshooting this...
I've changed the render to output a PNG file, and have the same
problem after the 19th or 20th image.
I've outputted the raw HTML. I
can open that in Chrome, and all the images are visible.
Any ideas why the rendering would be failing?
Solved the issue. Turns out that PhantomJS was still preparing the images when the render was executed. Moving the render into the onLoadFinished handler, as illustrated below, solved the issue. Before, the page.render was being called immediately after the page.content = assignment.
For those interested in doing something similar, here's the gist of the process we are doing:
var htmlForAllPages = [];
then, as we load each page in PhantomJS:
var img = page.renderBase64('PNG');
...
htmlForAllPages.push('<img src="data:image/png;base64,' + img + '">');
...
When done, the final PDF is created... We have a template file ready, with all the required HTML and CSS etc. and simply insert our generated HTML into it:
var fs = require('fs');
var template = fs.read('DocumentationTemplate.html');
var finalHtml = template.replace('INSERTBODYHERE', htmlForAllPages.join('\n'));
var pdfPage = new WebPage();
pdfPage.onLoadFinished = function() {
pdfPage.render('Final.pdf');
pdfPage.close();
};
pdfPage.content = finalHtml;

random images in corona sdk

I have 3 images and 1 button -
I want to be able to click my button and have 1 of the 3 images appear. And everytime I click the button i want a new random image to appear in the place of the last image......Pretty simple it would seem, but Im losing hair over this and am about to call it quits......Can anyone help me do this? I want to learn, so please comment the code if you decide to help me....Thanks in advance.
So far, I have:
display.setStatusBar( display.HiddenStatusBar ) -- hide status bar
--insert background
local bgImg = display.newImageRect( "images/myBG.jpg", 625, 450 )
bgImg.x = display.contentCenterX -- center bg on X
bgImg.y = display.contentCenterY -- center bg on Y
-- scripture references
myTable = {
display.newImage("images/btnLogo1.png"),
display.newImage("images/btnLogo2.png"),
display.newImage("images/btnLogo3.png"),
}
randomPicture = myTable[math.random(1,3)]
This should work:
-- scripture references
myTable = {
"images/btnLogo1.png",
"images/btnLogo2.png",
"images/btnLogo3.png",
}
local randomPicture = myTable[math.random(1,3)]
display.newImage(myTable[randomPicture])
I hope you need no explanation about it :)
If your image names are continous, that is like img_1,img_2,img_3. etc... then you can use the following method:
-- Display an image
local myImage = display.newImageRect("images/btnLogo1.png",50,50)
myImage.x = display.contentWidth/2
myImage.y = display.contentHeight/2
-- Call this function on button click
function imageChangeFunction()
-- remove the previous image
if(myImage)then myImage:removeSelf() end
-- creating the sprite with new image
myImage = display.newImageRect("images/btnLogo"..math.random(3)..".png",50,50)
myImage.x = display.contentWidth/2
myImage.y = display.contentHeight/2
print("Image changed...")
end
-- Here I am assigning the listener to Runtime, you can change it for your button
Runtime:addEventListener("tap",imageChangeFunction)
Note:
math.random(3) gives you any random number between 1 and 3.
.. is used for concatenation. So, "images/btnLogo"..math.random(3)..".png" will give you any of the following strings:
images/btnLogo1.png
images/btnLogo2.png
images/btnLogo3.png
For more info, visit: math.random() and Corona String Operations

Resources