Images in APEX

Hello,
I would like to be able associate like images with buttons, do not be where the images are placed in APEX to be able to form it.
Thank you very much

Hello,
You can upload the images (Shared Components>Images) and reference them using src="#WORKSPACE_IMAGES#name.gif" (or src="#APP_IMAGES#name.gif") or upload them to your 'APEX server' somewhere in the images directory and reference them like src="/i/my_img/name.gif".
Greetings,
Roel
http://roelhartman.blogspot.com/
You can reward this reply by marking it as either Helpful or Correct ;-)

Similar Messages

How to grey out images in APEX

Hi,
Can someone let me know how can I disable/greyout images in APEX?
I have a list of images in a horizontal way, say Image 1, Image 2, Image 3, Image 4.
So when Image 1 is accessed, Image 2,3 and 4 should be greyed out. When Image 2 is accessed, Image 3 and 4 (not Image 1) should be greyed out and so on.
Please let me know how can this be done?

935799 wrote:
Hi,
Can someone let me know how can I disable/greyout images in APEX?
I have a list of images in a horizontal way, say Image 1, Image 2, Image 3, Image 4.
So when Image 1 is accessed, Image 2,3 and 4 should be greyed out. When Image 2 is accessed, Image 3 and 4 (not Image 1) should be greyed out and so on.
Please let me know how can this be done?Hi,
What you mean by "Image is accessed"?
Do you mean when mouse click image or hover mouse over image?
Regards,
Jari
My Blog: http://dbswh.webhop.net/dbswh/f?p=BLOG:HOME:0
Twitter: http://www.twitter.com/jariolai

How do you display a image in apex

I have a trouble for a long time..
I can't load a image in apex..
I do a lot of things but it never give result correctly
some could help me..
Thank u....

Hi,
OK - the link I gave will explain how to upload into a table and then display images from there.
To do this through Shared Components:
1 - Go to Shared Components
2 - Select Images
3 - Click Create
4 - In the Application option, leave it as "No Application Associated" if you want any application to use the image, or select an application if the image is for that application only
5 - Click the Browse button, locate your image file on your machine and click Open
6 - Any any Notes you want (this is not required)
7 - Click Upload
On your page, decide where you want the image to appear. This can be in a region's Source, Region Header or Region Footer OR if you want you can do this on the page template you are using. Then enter in:
For an image NOT associated with an application:
<img src="#WORKSPACE_IMAGES#filename.gif">For an image associated with an application:
<img src="#APP_IMAGES#filename.gif">Andy

Saving & populating images in apex

hi
I want to save & retrieve employee photoes in database using apex. can anyone help me.
vijay

Hi Vijay,
Inside your workspace do you have sample application-> Run it->Go to Tab-> product-> Click Create Product-> Form shows input field with browse button-> Edit page to see the code to implement saving & populating images in apex.
This is table based storage inside apex.
If you want to store inside apex for your designing then go to shared component -> image-> create new image uploading-> Access from your page will be like the below.
<img src=#APP_IMAGES#temp.jpg>
This link also help.
http://download.oracle.com/docs/cd/B31036_01/doc/appdev.22/b28839/up_dn_files.htm
Thanks,
Loga
Edited by: Logaa on Sep 15, 2010 12:14 AM

Capture Web Cam image in APEX and Upload into the Database

Overview
By using a flash object, you should be able to interface with a usb web cam connected to the client machine. Their are a couple of open source ones that I know about, but the one I chose to go with is by Taboca Labs and is called CamCanvas. This is released under the MIT license, and it is at version 0.2, so not very mature - but in saying that it seems to do the trick. The next part is to upload a snapshot into the database - in this particular implementation, it is achieved by taking a snapshot, and putting that data into the canvas object. This is a new HTML5 element, so I am not certain what the IE support would be like. Once you have the image into the canvas, you can then use the provided function convertToDataURL() to convert the image into a Base64 encoded string, which you can then use to convert into to a BLOB. There is however one problem with the Base64 string - APEX has a limitation of 32k for and item value, so can't be submitted by normal means, and a workaround (AJAX) has to be implemented.
Part 1. Capturing the Image from the Flash Object into the Canvas element
Set up the Page
Required Files
Download the tarball of the webcam library from: https://github.com/taboca/CamCanvas-API-/tarball/master
Upload the necessary components to your application. (The flash swf file can be got from one of the samples in the Samples folder. In the root of the tarball, there is actually a swf file, but this seems to be a different file than of what is in the samples - so I just stick with the one from the samples)
Page Body
Create a HTML region, and add the following:
    <div class="container">
     <object id="iembedflash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="320" height="240">
          <param name="movie" value="#APP_IMAGES#camcanvas.swf" />
          <param name="quality" value="high" />
          <param name="allowScriptAccess" value="always" />
          <embed allowScriptAccess="always" id="embedflash" src="#APP_IMAGES#camcanvas.swf" quality="high" width="320" height="240"
type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" mayscript="true" />
    </object>
    </div>
<p><a href="javascript:captureToCanvas()">Capture</a></p>
<canvas style="border:1px solid yellow" id="canvas" width="320" height="240"></canvas>That will create the webcam container, and an empty canvas element for the captured image to go into.
Also, have a hidden unprotected page item to store the Base64 code into - I called mine P2_IMAGE_BASE64
HTML Header and Body Attribute
Add the Page HTML Body Attribute as:
onload="init(320,240)"
JavaScript
Add the following in the Function and Global Variable Declarations for the page (mostly taken out of the samples provided)
//Camera relations functions
var gCtx = null;
var gCanvas = null;
var imageData = null;
var ii=0;
var jj=0;
var c=0;
function init(ww,hh){
     gCanvas = document.getElementById("canvas");
     var w = ww;
     var h = hh;
     gCanvas.style.width = w + "px";
     gCanvas.style.height = h + "px";
     gCanvas.width = w;
     gCanvas.height = h;
     gCtx = gCanvas.getContext("2d");
     gCtx.clearRect(0, 0, w, h);
     imageData = gCtx.getImageData( 0,0,320,240);
function passLine(stringPixels) {
     //a = (intVal >> 24) & 0xff;
     var coll = stringPixels.split("-");
     for(var i=0;i<320;i++) {
          var intVal = parseInt(coll);
          r = (intVal >> 16) & 0xff;
          g = (intVal >> 8) & 0xff;
          b = (intVal ) & 0xff;
          imageData.data[c+0]=r;
          imageData.data[c+1]=g;
          imageData.data[c+2]=b;
          imageData.data[c+3]=255;
          c+=4;
     if(c>=320*240*4) {
          c=0;
          gCtx.putImageData(imageData, 0,0);
function captureToCanvas() {
     flash = document.getElementById("embedflash");
     flash.ccCapture();
     var canvEle = document.getElementById('canvas');
     $s('P2_IMAGE_BASE64', canvEle.toDataURL());//Assumes hidden item name is P2_IMAGE_BASE64
     clob_Submit();//this is a part of part (AJAX submit value to a collection) two
}In the footer region of the page (which is just a loading image to show whilst the data is being submitted to the collection [hidden by default]) :<img src="#IMAGE_PREFIX#processing3.gif" id="AjaxLoading"
style="display:none;position:absolute;left:45%;top:45%;padding:10px;border:2px solid black;background:#FFF;" />If you give it a quick test, you should be able to see the webcam feed and capture it into the canvas element by clicking the capture link, in between the two elements - it might through a JS error since the clob_Submit() function does not exist yet.
*Part 2. Upload the image into the Database*
As mentioned in the overview, the main limitation is that APEX can't submit values larger than 32k, which I hope the APEX development team will be fixing this limitation in a future release, the workaround isn't really good from a maintainability perspective.
In the sample applications, there is one that demonstrates saving values to the database that are over 32k, which uses an AJAX technique: see http://www.oracle.com/technetwork/developer-tools/apex/application-express/packaged-apps-090453.html#LARGE.
*Required Files*
From the sample application, there is a script you need to upload, and reference in your page. So you can either install the sample application I linked to, or grab the script from the demonstration I have provided - its called apex_save_large.js.
*Create a New Page*
Create a page to Post the large value to (I created mine as 1000), and create the following process, with the condition that Request = SAVE. (All this is in the sample application for saving large values).declare
     l_code clob := empty_clob;
begin
     dbms_lob.createtemporary( l_code, false, dbms_lob.SESSION );
     for i in 1..wwv_flow.g_f01.count loop
          dbms_lob.writeappend(l_code,length(wwv_flow.g_f01(i)),wwv_flow.g_f01(i));
     end loop;
     apex_collection.create_or_truncate_collection(p_collection_name => wc_pkg_globals.g_base64_collection);
     apex_collection.add_member(p_collection_name => wc_pkg_globals.g_base64_collection,p_clob001 => l_code);
     htmldb_application.g_unrecoverable_error := TRUE;
end;I also created a package for storing the collection name, which is referred to in the process, for the collection name:create or replace
package
wc_pkg_globals
as
g_base64_collection constant varchar2(40) := 'BASE64_IMAGE';
end wc_pkg_globals;That is all that needs to be done for page 1000. You don't use this for anything else, *so go back to edit the camera page*.
*Modify the Function and Global Variable Declarations* (to be able to submit large values.)
The below again assumes the item that you want to submit has an item name of 'P2_IMAGE_BASE64', the condition of the process on the POST page is request = SAVE, and the post page is page 1000. This has been taken srtaight from the sample application for saving large values.//32K Limit workaround functions
function clob_Submit(){
          $x_Show('AjaxLoading')
          $a_PostClob('P2_IMAGE_BASE64','SAVE','1000',clob_SubmitReturn);
function clob_SubmitReturn(){
          if(p.readyState == 4){
                         $x_Hide('AjaxLoading');
                         $x('P2_IMAGE_BASE64').value = '';
          }else{return false;}
function doSubmit(r){
$x('P2_IMAGE_BASE64').value = ''
     flowSelectAll();
     document.wwv_flow.p_request.value = r;
     document.wwv_flow.submit();
}Also, reference the script that the above code makes use of, in the page header<script type="text/javascript" src="#WORKSPACE_IMAGES#apex_save_large.js"></script>Assuming the script is located in workspace images, and not associated to a specific app. Other wise reference #APP_IMAGES#
*Set up the table to store the images*CREATE TABLE "WC_SNAPSHOT"
"WC_SNAPSHOT_ID" NUMBER NOT NULL ENABLE,
"BINARY" BLOB,
CONSTRAINT "WC_SNAPSHOT_PK" PRIMARY KEY ("WC_SNAPSHOT_ID")
create sequence seq_wc_snapshot start with 1 increment by 1;
CREATE OR REPLACE TRIGGER "BI_WC_SNAPSHOT" BEFORE
INSERT ON WC_SNAPSHOT FOR EACH ROW BEGIN
SELECT seq_wc_snapshot.nextval INTO :NEW.wc_snapshot_id FROM dual;
END;
Then finally, create a page process to save the image:declare
v_image_input CLOB;
v_image_output BLOB;
v_buffer NUMBER := 64;
v_start_index NUMBER := 1;
v_raw_temp raw(64);
begin
--discard the bit of the string we dont need
select substr(clob001, instr(clob001, ',')+1, length(clob001)) into v_image_input
from apex_collections
where collection_name = wc_pkg_globals.g_base64_collection;
dbms_lob.createtemporary(v_image_output, true);
for i in 1..ceil(dbms_lob.getlength(v_image_input)/v_buffer) loop
v_raw_temp := utl_encode.base64_decode(utl_raw.cast_to_raw(dbms_lob.substr(v_image_input, v_buffer, v_start_index)));
dbms_lob.writeappend(v_image_output, utl_raw.length(v_raw_temp),v_raw_temp);
v_start_index := v_start_index + v_buffer;
end loop;
insert into WC_SNAPSHOT (binary) values (v_image_output); commit;
end;Create a save button - add some sort of validation to make sure the hidden item has a value (i.e. image has been captured). Make the above conditional for request = button name so it only runs when you click Save (you probably want to disable this button until the data has been completely submitted to the collection - I haven't done this in the demonstration).
Voila, you should have now be able to capture the image from a webcam. Take a look at the samples from the CamCanvas API for extra effects if you wanted to do something special.
And of course, all the above assumed you want a resolution of 320 x 240 for the image.
Disclaimer: At time of writing, this worked with a logitech something or rather webcam, and is completely untested on IE.
Check out a demo: http://apex.oracle.com/pls/apex/f?p=trents_demos:webcam_i (my image is a bit blocky, but i think its just my webcam. I've seen others that are much more crisp using this) Also, just be sure to wait for the progress bar to dissappear before clicking Save.
Feedback welcomed.

Hmm, maybe for some reason you aren't getting the base64 version of the saved image? Is the collection getting the full base64 string? Seems like its not getting any if its no data found.
The javascript console is your friend.
Also, in the example i used an extra page, from what one of the examples on apex packages apps had. But since then, I found this post by Carl: http://carlback.blogspot.com/2008/04/new-stuff-4-over-head-with-clob.html - I would use this technique for submitting the clob, over what I have done - as its less hacky. Just sayin.

Handling images in APEX 4.0

I am using APEX 4.0 and trying to rebuild an old Forms 6i application in this APEX 4.0 version. In Forms 6i there was the possibility to define an image with its size (I use 512 * 384 pixels). And I could also read an image from the file-system and resize it in a way that the complete image was vissible in the Application.
In Forms 6i I used the following code :
read_image_file ( fto
, 'JFIF'
, 'FOTO.EXAMPLE'
image_zoom ( 'FOTO.EXAMPLE'
, ADJUST_TO_FIT
Can anyone help me to implement this functionality in APEX 4.0 ?
Thanks,
Jos Straathof

Hi Jos,
I think there are 2 ways of going about this.
Method 1
Read the image into Oracle, resize it, and serve it up.
I'm not up-to-date with the latest version of Oracle, but I don't think it has a function to resize images built in, so you'd need an external library that you can call; or install a java library to do it. You'd read the image in as a BFILE, or use java to read it in. Not sure how you'd serve it up from APEX, but I know its possible.
Method 2
Set the HEIGHT and WIDTH attributes on the image when you generate the HTML and let the browser resize it. This is by far the easiest method.
eg <IMG SRC='myimage.jpg' HEIGHT=240 WIDTH=320>
Comming from a forms 6i background, I have the same problem - I keep comparing Apex to forms. But they are radically different beasts, and I'm trying to unlearn everything I know.
Tak

Best practice for images in APEX

Hello All,
I use APEX 4.2.2 .. Oracle 11g SOE...
Speaking about the sample DB application. Suppose each product has more than one image. And that we have two Apps desktop & Mobile. Suppose Product A has 5 images.
===>>
Does it mean that for Product A, I have to store 12 images as following:
5 images for Desktop App where dimensions are e.g 640 x 480
5 images for Mobile App where dimensions are e.g 448 x 336
1 Thumbnail for desktop App 104 x 104 ( To show up on the report )
1 Thumbnail for mobile App 50 x 50 ( To show up on the report )
Here I noticed that the image are begin resized on the fly. As we upload images, we get thumbnails. Any comments ???
http://blueimp.github.io/jQuery-File-Upload/angularjs.html
Regards,
Fateh

Hello Roel,
Thanks for the response. I am aware of Oracle Multimedia. Maybe, I was not clear. As I got from you, you agree that I have to store 2 editions of each image one for desktop and the other for mobile.
do the proper scaling in the application itself.You mean I can use Height and Width Attributes of the img Tag to scale the images to be used in Report / List . But as I know this does not reduce the size of the image. If the list shows 20 record with 20 images, the mobile webpage will be slow.
So, do you agree that I have to generate a two thumbnails (one for desktop and another for mobile ) for each PRODUCT, or you were refereeing to something else ?
Regards,
Fateh

How to use custom images in Apex 4.1 with EPG

I just ported over an application from Apex 3.2/10g using Apache to a new server using Apex 4.1/11g using EPG and none of my custom images work. When using Apache, all I had to do was copy the file over to the /i/Custom images folder and I could reference it on any of my pages. I copied the entire /Custom folder to the new server and that doesn't seem to do the trick. I've seen some posts that talk about having to use FTP (why?) or something to get this to work. Can someone please explain what is going on here and what I need to do to get this working?

With EPG, the images aren't accessed from a directory. They are actually stored inside the database. The FTP process actually gets redirected so that the image gets stored inside Oracle rather than being written to a file. There are numerous articles and such detailing exactly how to do this.
One is here:
http://www.apex-blog.com/oracle-apex/accessing-i-using-ftp-170.html

Referencing loaded images in APEX

Hi all:
Up until this point, I have used the same method of getting images to be recognized by an Apex
installation. That specifically has been through loading images into a physical directory on the
machine where APEX was installed. This was made available to me by the DBA that installed APEX.
This is Application Express 2.2.0.00.32 running on AIX Unix.
Oracle Database 10g Enterprise Edition Release 10.2.0.1.0 - 64bit Production
This arrangement worked. I was able to reference any image loaded to that directory using
"/i/[image].gif". "/i/" was set as my pseudo directory by default on Apex.
Over time, I developed an application that is now ready to deploy in like environments and I have
never had a problem with viewing graphics.
For the purposes of demoing to a specific customer, I was asked to deploy this to a different environment
temporarily, I was given the option of loading my application to a Windows XP environment running
Oracle XE and Application Express 2.1.0.00.39.
Since there was no physical directory that I could locate for images, it seemed to me that my only
option was to load my images using the wizard for loading image file components (which I understand
means using XDB)...
I was not been able to get this to work. I went back to my AIX Unix/Oracle 10g installation and attempted
to do the same (load images as a file component and reference them). To my surprise it didn't work there
either.
These are the steps I took in attempting this:
1.) Within my application definition, go to "Shared components"
2.) Under the Files section, I click on "images"
3.) Click on the button labeled "Create"
4.) The page "Create Image" appears. I click on the "Browse" button and I pick the image from my local file system.
5.) I leave the drop-down list as is (reading "No Application Associated")
6.) I click on the "Upload" button.
I then go back to my application under "Edit Attributes" and reference the file as /i/[file].gif
I find that the images do not show up. On IE, all I get is the standard red "X" indicating that
an image file failed to load.
I can't help thinking that I'm missing an obvious step. Let me know if there's any other info I should
provide.
Thanks

HI,
To reference images loaded through shared components use:
#WORKSPACE_IMAGES#filename.gif (when you set it to No Application Associated)
or
#APP_IMAGES#filename.gif (when you associate it with a specific application)
Graham

How to generate the "validate image" using APEX API ?

I don't konw whether APEX has some API function using to generate image, and draw anything on it freely :-), such as LINE, TEXT or RECTANGLE ?

Apex has no built in tools for creating GIF or JPEG images no.
You may have some success looking for some java code that will do this for you, then you can load that java class into the database, write some PL/SQL wrappers around it then you will be able to call it from within your Apex application.

Dsplaying Images in apex using shared drive

Hi,
I would like to display the images on student info page.
Apex db OS: solaris
Images stored on OS: windows (shared drive)
I dont want to copy the images from windows server to solaris .Image name is same as student id for example student id:123 and image: 123.jpg
Please advise how can i do it in apex.
Regards
Harinder

Harinder:
If you are using the OHS to access APEX and if the OHS is installed on the solaris box you could create an alias named 'location' and point this to the shared drive that has the student images.Within your APEX application you can then refer to an image as
../<location>/<image_file_name>
varad

How to show an image in apex

Hello everone!
Do u know how to get an image (JPG, gif, bmp) which is saved in the BLOB in a table?
I suppose that exists an apex function which allows to do that.
Any help would be very appreciated.
Thank u in advance.
Regards

There are two examples in my demo application:
http://apex.oracle.com/pls/otn/f?p=31517:64
http://apex.oracle.com/pls/otn/f?p=31517:212
which will give you an idea how that can be done.
Denes Kubicek
http://deneskubicek.blogspot.com/
http://www.opal-consulting.de/training
http://apex.oracle.com/pls/otn/f?p=31517:1
-------------------------------------------------------------------

How do I add images to Apex Pages?

Hello all,
Can anyone tell me how to add an image to an APEX Page? We have an app which is ready to be rolled out, but iit is looking a little spartan. Its a Finance app but some graphics would be nice.
We uploaded an image named ID-10038362.jpg to Shared Components>Images for the application. We reference it on page 101> Log In HTML Region>Attribute Region Image <img src="ID-10038362">
We are on APEX 4.1.
Any help would be appreciated.
Thanks

lilhelp wrote:
Hello all,
Can anyone tell me how to add an image to an APEX Page? We have an app which is ready to be rolled out, but iit is looking a little spartan. Its a Finance app but some graphics would be nice.
We uploaded an image named ID-10038362.jpg to Shared Components>Images for the application. We reference it on page 101> Log In HTML Region>Attribute Region Image <img src="ID-10038362">
We are on APEX 4.1.
#WORKSPACE_IMAGES#ID-10038362.jpg

Getting an ORA-01003 error importing images using Apex import options

I took an export of the images from my application (would be nice if this was included in the applicatoin export options)
When I try to import, I get the following error
Execution of the statement was unsuccessful. ORA-01003: no statement parsed
begin wwv_flow.g_import_in_progress := true; end;
ORA-01003: no statement parsed
This worked for me on apex.oracle.com.. can't do it on any of my apex instances.
I am able to import applications without a problem
Any suggestions?

Anyone have any ideas?

How to change Alt text for the Popup Key LOV Image in Apex 3.2.1.00.10

we are using Application Express version is 3.2.1.00.10
There is an icon to click on to popup the lov search box, the alt text for that image is currently "popup Lov"
would it be possible to change the text to something more meaningfull e.g. "Lookup Person name" or "search Directory for Person names" .
I have tried by updaing them
from
Shared Components>Templates> Popup List of Values Template > Popup Icon Attr --> width="13" height="13" alt="Popup Lov"
(under Popup List of Values)
to
alt="#CURRENT_ITEM_NAME#"
it didn't work.
your respone will help getting accessability sign off

Venu,
Try adding title = "Lookup Person name" to the Image Attributes of your icon or button.
Jeff

Images in APEX

Similar Messages

Maybe you are looking for