Mouseover to bring image in Oracle Apex - javascript

I am currently developing application in Apex and I am lost. I have requirement that on hoovering over name/surname column in employee table it should bring image of employee. Image should not be stored in database it should rather by a pointer to... well FTP ? What is best practice to store images for DB but not in DB?
I understand that it is complex problem that have many steps therefore any help would be greatly appreciated.

As Jeffrey says (and i'd react in a comment, but then i started typing...), you will have to decide on how and where you'll store your images. Blob columns are already out of the picture, so they'll have to be put on a filesystem somewhere. This could be your apex_images folder for example, or a folder anywhere else on the server. You can always check by setting up an img tag on a page in your application, setting the src attribute to the image location.
Another consideration would be just how you are going to link the images to an employee, and how the images are to be maintained.
What will their filenames be? By ID? By employee name?
I've been in this situation too, and it was a such an enormous hassle too. I received a folder with images in it, all numbered up. Until some anomalies popped up of course: there were people with an identical number, because they had only been using part of a unique key. And many and more incorrectly named pictures: z.jpg, x.jpg, zzz.jpg, bob.jpg, mary.jpg.
If going for names, how? And how to deal with special symbols in names, such as accents: é,à,ç,.... Important of course, since you might not be able to link images to an employee because their name contains a special character but he image file doesn't.
And what about long names, or middle names? Maria De La Santagosa-Gurça Totally random name, but you catch my drift. That might be someone's real name, although the usually used name would be Maria Santagosa, which really isn't too far fetched.
Let's suppose you will give images a unique key value, such as a generated ID field of your employee record.
Perhaps the image can be made, the name can be copied and pasted in a column of the employee record.
I suppose the most important question would be: who will be maintaining the pictures?
If, say, Human Resources will be doing this, you'll have to carefully explain those steps: create an employee, copy the ID field (which honestly is totally meaningless to them - and rightfully so), and name the jpg EXACTLY that way.
Yet another consideration is filetype, and whether they'll get mixed up (again: who will maintain?).
And how about size? Will it be thumbnails or large size? Will the browser resize them? Probably the size of your database and amout of images are of consideration, and the load on your systems. If large pictures are not required, it'd be non-performant to actually drag those large images over the lines every time.
Believe me when i say that images not matching up to employees will be common, and that you should be aware of this. In my opinion, that is simply the case of the filesystem being easier tampered on that it would be on a database record.
Maybe consider the reasons for not choosing database storage again. Again, in my opinion, a profile picture is just as much a piece of structured data as is the employee name, and has more of a place in the database than on a filesystem. Maintaining the picture of an employee doesn't even have to be hard. HR would probably have a maintenance application where they can view and edit all details of an employee. Displaying the image would be trivial, and providing an update and delete method just as much.
I'm not going to step into the detail of providing a floating image. First decide on storage location and the details, then take the next step of setting up img tags and see how that works. Then set up a single img tag, and use javascript to dynamically alter the src of the tag. Floating a selection would be next.

Related

What's the best way to implement dynamic text on a static page?

I want my blog to be more interesting by making it different every time a reader reads a post. For example, I want to tell a story using a quote from a famous person, a picture, and a situation from the real life. Say, I have 2 relevant quotes, 3 pictures, and 10 situations to use. I don’t want to use them all together, instead, I want every item to be randomly selected during the page load, this will give me 2×3×10 = 60 different variants of the page. If I had a database-backed site, I would select them parts from a DB, but I like the Middleman much and the page must be static.
What would you recommend?
JQuery might be the lightest weight easy solution here. You could use JavaScript to randomly choose each element and place them on the screen.
If you wanted to make sure the person had a unique message each time, you could record the selected combination in a client side cookie so on subsequent visits, your code checks the cookie to make sure that the combination is different than the previous x number of visits.
Depending on how long those 10 stories are, I would say maybe the quotes and the stories could be downloaded as a compressed JavaScript file that contains the list in a JSON. When you set the img src attribute using JQuery, it should pull the required image down from the server.
It would be a small project for me to show you all the details here but hopefully I've given you enough information to help you get started. You may have to use Google to fill in for examples of random numbers in JavaScript, using cookies with JQuery, replace image using JQuery.

Inverse binary thresholding function on images

I am currently working on a sneaker recommendation application. As part of the implementation, a user needs to upload an image of a sneaker, and from this, the application attempts to find 3 closest matching shoes. To date, I have created a dataset of sneakers and have decided to use resemblejs in order to compare the upload images against what is in the dataset.
However I am encountering a problem. Prior to sending the uploaded sneaker image, I need to ascertain it's shape in order to determine whether or not it valid for submission.
Ideally I would like all the pictures facing one way... so consider the following scenario.
User uploads:
It's in the wrong direction, so the application knows to mirror it as all images in the dataset face this direction:
So all that needs to be done is mirror the picture as it is perfectly valid. Once this is done, the image has passed preprocessing and is compared against what is in the database.
I have researched various ways of doing this, and one of the approaches that struck me involves using a inverse binary thresholding approach in order to turn the background of the image black while whiting out the contents of the shoe itself.
Is it possible to accomplish this in Javascript? If so how?
I then thought that it would make sense to analyse the picture to see which side had more black/white (dividing it in half) in order to see if it needed to be mirrored. In a case where it cannot be mirrored, the user just has to upload a new picture.

Bigcommerce Image Variables- Making a product-page-productimage-slideshow

i need two things:
a great resource that goes into detail about all the various template variables....i finally found a resource that lists all of the variables on springmerchant...but it doesnt speak about what they do and/or how they do it.
secondly, this is for switching the bigcommerce-standard cloudzoom feature for something like a flexslider slideshow; therefore, i would love some insight into product images and what variables i can use....i know there is a variable that will output a specific products' tinyimages/thumbnails dynamically based on unknown method...i would like to know if there is a variable that does this except with full-size images.
what i am trying to accomplish:
something similar to coton-colors product-slider http://coton-colors.com/black-chevron-dinner-plate
Why not just grab the data that is already part of the product page? The tiny thumbnails have data attached to them pointing to the full res images(you should be able to find those variables, too). You can just use a script to create an array based on each full size image, then pass the values into your slider.
For the best list of variables and where the can be used, take a look at https://developer.bigcommerce.com/themes/snippets and https://developer.bigcommerce.com/themes/panels
By clicking on each panel or snippet they show you the variables that can be used.
Best of luck!

Creating html with text overlay on an image with variable position

I am tasked with creating an html document that has a floor plan image as the base layer. Above this I need to overlay employee names that will be pulled out of a database and placed on the map according to a variable in the database named location. Each name will also need to be a hyperlink but I believe this part will be easy once I get the placement down. Additionally when the database is updated with new employees or employees moving. I need to be able to either autosync the page or be able to sync with maybe one click. I have experience with html although this is beyond my current abilities. I also have some experience building windows apps in .net. Can anyone point me to the simplest approach to start tackling this task?
You should check AJAX technology, that will let you to get updated data. Then you should be able to modify positions to new ones.
It's simple and easy with jQuery's $.ajax.
Also if you need realtime updates, check WebSockets.

Capture website screenshot using javascript

I've seen similar questions asked and the answers were not quite what I'm after. Since this question is slightly different, I'm asking again - Hopefully you'll agree this isn't a duplicate.
What I want to do: Generate an image showing the contents of my own website as seen by the user (actually, each specific user).
Why I want to do it: I've got some code that identifies places on the page where the user's mouse hovers for a significant length of time (ppl tend to move the mouse to areas of interest). I also record click locations. These are recorded as X/Y co-ords. relative to the top-left of the page
NB: This is only done for users who are doing usability testing.
I'd ideally like to be able to capture a screenshot and then use something server-side to overlay the mouse data on the image (hotspots, mouse path, etc.)
The problem I have is that page content is very dynamic (not so much during display but during server-side generation) - depending on the type of user, assigned roles, etc... whole boxes can be missing - and the rest of the layout readjusts accordingly - consequently there's no single "right" screenshot for a page.
Option 1 (which feels a little nasty): would be to walk the DOM and serialize it and send that back to the server. I'd then open up the appropriate browser and de-serialize the DOM. This should work but sounds difficult to automate. I suspect there'd also be some issues around relative URLs, etc.
Option 2: Once the page has finished loading, capture an image of the client area (I'd ideally like to capture the whole length of the page but suspect this will be even harder). Most pages don't require scrolling so this shouldn't be a major issue - something to improve for version 2. I'd then upload this image to the server via AJAX.
NB: I don't want to see anything outside the contents of my own page (chrome, address bar, anything)
I'd prefer to be able to do this without installing anything on the end-user pc (hence javascript). If the only possibility is a client-side app, we can do that but it will mean more hassle when getting random users to usability test (currently, we just email friends/family/guinea pigs a different URL)
One alternative solution would be to "record" the positions and dimensions of the main structural elements on the page:
(using jQuery)
var pageStructure = {};
$("#header, #navigation, #sidebar, #article, #ad, #footer").each(function() {
var elem = $(this);
var offset = elem.offset();
var width = elem.outerWidth();
var height = elem.outerHeight();
pageStructure[this.id] = [offset.left, offset.top, width, height];
});
Then you send the serialized pageStructure along with the mouse-data, and based on that data you can reconstruct the layout of the given page.
One thing we always talk about where I work is the value of ownership vs the cost required to make something from scratch. With the group I have, we could build just about anything...however, at a per-hour rate in the $100 range, it would need to be a pretty marketable tool or replace a very expensive product for it to be worth our time. So, when it comes to things like this that are already done, I'd consider looking elsewhere first. Think of what you could do with all that extra time....
A simple, quick google search found this: http://www.trymyui.com/ It's likely not perfect, but it points to the fact that solutions like this are out there and already working/tested. Or, you could download a script such as this heatmap Obviously, you'd need to add a bit to allow you to re-create what was on the screen while the map was created.
Good Luck.
IMO, it's not worth reinventing the wheel. Just buy an existing solution like ClickTale.
http://www.clicktale.com/

Categories

Resources