I have an image that displays a parking lot. I want to make parking slots clickable and connect them with records in salesforce using lwc. Leaflet-rastercoords seems a good tool to achieve this but I have difficulty in implementing it in lwc with VScode. Anyone has tackled a similar task?
I know this can be done in HTML with an Image-Map. That also supports the use of Javascript functions.I'm not sure how LWC in Salesforce works with HTML, but maybe you can use it in there?
https://www.w3schools.com/html/html_images_imagemap.asp
Related
Hi Im new to GWT and Google App Engine. Im trying to layout which looks like the image. However, Im not sure whats the best way to achieve this.
There are several ways according to GWT documentation such as: UIBinder, Layout Panels (Im using this approach in the image).... etc.
However, my UI is not that complicated. I have a div with the navigation bar on top, a div with a map(Javascript, a div with Facebook comments(javascript), and a div with some functionality which I wrote for ratings etc.
Thus mostly this webpage invokes a lot of javascript and third party stuff.
Here is some code that accomplishes this
String header = "<div><h3>Navigation bar here</h3></div>";
String east = "<div><h3>Rating System here</h3></div>";
String south = "<div><h3>Facebook comments here</h3></div>";
dock.addNorth(new HTML(header), 75);
dock.addSouth(new HTML(south),50);
dock.addEast(new HTML(east), 300);
dock.add(map);
RootLayoutPanel.get().add(dock);
I tried entering some Javascript in that html string to be added to the map. However, it didnt show up on the view. Seems like the html only works if its text, is that caorrect?
Whats the best way to construct this in GWT?
Could someone please point me to some examples of code/ tutorials?
Thanks
I built a website like you project to do (link in my profile).
There is a jar file available for mapping maps v3 in gwt.
Here it is : http://code.google.com/p/gwt-google-apis/downloads/detail?name=gwt-maps-3.8.0-pre1.zip
Take care of GAE ... if your application must stay in "free", and you plan to make it available for others users, you will ran out of quota pretty fast :-(
(I gets 60% of instance time with only googlebots ...)
Anyway, just make an almost empty html, and build your panels from scratch.
Is there any JS library or code available to track user clicks? We'll use this to generate heatmaps using Heatmap.js.
This JS lib/code is supposed to work with fixed and liquid CSS layouts, cross browser, and different screen resolutions.
We have tried some simple tracking code, but it's not tracking the click positions properly for different screen resolutions and layouts.
I just wanted to check if something like this already has been implemented so that we can avoid reinventing the wheel and save time.
Any help, links, suggestions are much appreciated.
Thanks.
I found this website today searching for the same thing : www.crazyegg.com however I think you should "buy" their services instead of just importing a .js .
I am working in my senior project which is a web-based system and I want to dedicate one page of the website for some useful links that are related to my website. I tried to present them in such an innovative way like showing a brief description (in a balloon or a new line or anything) about the link when the mouse comes over it.
I heard there are some JQuery templates for that. I tried to search about them but I did not get anything.
So could you please help me in this issue?
Please provide me with any guide that is helpful to do this issue.
Also, please provide me with your suggestions for presenting the useful links in somehow a nice way.
What you're talking about is a tooltip. I like the tooltip component from jQuery Tools quite a lot, and the documentation is excellent.
There's no need to use JQuery!
What you want can be achieved using only CSS.
Utilizing the :hover selector, its possible to display a box over your link when you move your mouse over it.
Here's a good link to get started.
How about something like Simpletip: http://craigsworks.com/projects/simpletip/, or it's successor qTip: http://craigsworks.com/projects/qtip2/ (hat tip #Edmund Y).
If you look at this Xmarks page, it pretty much lists all of the most popular JQuery tooltip plugins: http://www.xmarks.com/topic/jquery_tooltip, sorted by the number of people that have bookmarked them!
If you access your mobile me account online with Safari, you can select an icon and login directly to selected service, great feature btw.
But if you access the same page using other browser like firefox or Chrome, you will see a gorgeous login page with a big, no huge cloud in the middle (the MobileMe logo) and interesting lighballs comming out of it.
Here's the link:
https://auth.me.com/authenticate?service=mail&ssoNamespace=appleid&formID=loginForm&returnURL=aHR0cHM6Ly9tZS5jb20vbWFpbC8=
And the greatest thing is that you can mouse over those little light balls and they follow your mouse movement.
Its just beautiful and i have never seen anything like that in Javascript. And i couldnt understand by looking at their code, how they did it. Of course their javascript is compressed so i couldn't look at it, but in the markup those shiny lights are just a bunch of canvas tags.
Does any one have an idea of how to make something like that? Its probably way beyond my javascript skills but it would be great to add such an effect to one of my projects.
Thanks in advance for all your suggestions ;)
that takes a lot of skills. I believe its achievable with processing.js
http://processingjs.org/
Take a look at this [quote]:
So, how is this eye candy accomplished? Through over 6000 lines of
(unminified) JS. MobileMe usually uses SproutCore for its
applications, but after looking through the source code, I didn’t find
a single reference to it. There did appear to be some resemblance of
a library being used in the login page, however, but I think it is
pretty custom. There appeared to be a class for each of the visual
components on the screen, at least one if not two separate animation
libraries (one 2d and one 3d), a particle rendering library, and
libraries for dealing with canvas drawing and DOM manipulation.
So it looks like it was custom made. You can read more here: http://badassjs.com/post/1649735994/the-new-mobileme-login-page-has-some-badass-js
I hope this helps.
I'm looking for a simple Flex or JavaScript based image editing component which can be embedded in a web application. It shouldn't be a web service but rather a component that I can download and customize (i18n etc.).
I only need some basic features: most important is cropping, optional features would be rotating and adjusting brightness/contrast.
Basically something like splashup.com, but as an open source application rather than a web-service.
Thanks a lot in advance for any hints!
-- Andreas
There is pixastic.
Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
Be sure to read the documentation to make sure the operations you are looking to perform are supported by all browsers. There are some issues with IE.
They have a editor you can try. It shows off some of the features.
Your question suggests you want an out of the box solution, or at least a base to stand on.
Quick Google search reveals editImage. This doesn't look polished or bug free, however building on this or rolling your own should not be difficult.
Here is a good article on Image Manipulation in Flex. Towards the end of it read "Cropping, Panning and Zooming", your basically looking at 5 lines of code. I think you might even be happier building this yourself.
Thanks for your answers!
I ended up customizing and extending this component:
http://blog.mediablur.com/2008/02/20/flex-image-cropping-component/