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.
Related
i plan to implement a webapp that allows users to add widgets that are predefined by me in something like a menu (e.g. two buttons and a card with some content) to something like a canvas.
I then want to save this layout so it can be later restored on the same device as well as on an other device.
There should also be a fast way of deciding on one device to add one widget to a layout that is shown on another device right now. This addition i made from one device should be visible on the other device instantely.
I thought about how to do this but am unsure, I saw some stuff about saving it in databases or in json format like in this example with react https://www.storyblok.com/tp/react-dynamic-component-from-json.
As I am a beginner, I with vue.js as well as json etc I am quite unsure on how to decide how to implement such a functionality.
For example with a database/json file I am unsure on how the other device will receive that something was added by another device.
I am glad on any tips or suggestions.
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
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.
Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.
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/