Develop Reference

Dynamic Point Cloud

I have another issue regarding the Image Paths on the sidebar.
I am working on a site that has to be able to load a cloud by selecting it from a grid, then selecting another cloud from the grid and:
Clear the existing cloud and annotations if there are any.
Load the new cloud with new annotations.
I have both of those two steps working. The problem I have is When I try to use the sidebar menu, Most of the information/links and Icons are gone.
I am doing things a little bit unconventional. I am using a single .aspx page to load whichever cloud is selected from the grid and not a single .html page for each cloud created. The folder structure for the libs are as follows in relation to the .aspx page
/scripts/Potree/libs
I'm fairly sure this is a path thing since everything else is working as expected. I can not figure out how to resolve this. has anyone else tried this and if so, how did you resolve this?

There was a different version of JQuery loaded from the Master page of this project that conflicted with the version Potree needed. I changed the Master to only load the conflicting JQuery file if the page is not the one containing the point cloud.

Issue displaying local image files via css class and/or img src attribute

I have some issues rising up displaying Image files from local filesystem.
And to say it before: yes i am aware of the security breach this is causing and there is no other way playing it different because my company has no file Server yet to serve these images in a proper way.
With that out of the way the scenario:
I have an angular app which should show me some Images on my page. I wrote a directive called Gallery to do so.
Into this gallery I am handing in the absolute paths to my Image files and just set the src attribute via javascript. I tested it with some random chosen files picked from Google and everything worked out well. Allthough my browser is throwing out error because of security the picutres were displayed.
But when i got the real data from my company collegue Things started getting nasty. The error still thrown in console but nothing was displayed. I checked first overwriting the img.onload listener finding out that the testimages are giving me the Output i put onto the listener, my real data images didn't.
Next I tried to set the background attribute and not the src one. My test images were displayed the real data ONLY if it is placed into the assets folder of my app. This got me quite confused because like mentioned above using my test images it doesn't matter where they are placed, they are displayed everytime.
I also tried changing file format from png to jpg but nothing happens.
Also scaling down the images (real data has big px solutions) didn't work either.
So my question is simple ...what am i doing wrong? Could it be possible that those real data images are not exported properly. But if that's the case, why do they work in the assets folder? Like mentioned security block is not possible because my test pictures a doing well.

Finally I found the bug which was responsible for the behaviour ... It was no wrong linking it was the IIS Express which was caching old links. #mrunion and #cloned links to filesystem are still working on IE and also in Edge just for devs which have no other choice then to do it that way
Cheers Max

CKEditor 5 and Image Button

I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.
Based on the guides and articles I have been reading, my assumption is that I have to save the image to the server and then give the url back to the ckeditor so that it may use it to display the image.
What I can't seem to figure out is how to do that. Where in the ckeditor js code would I add my own logic so that it may pick up the uploaded image, send it to the server and then give a url back to ck editor?
I've been through a lot of documentation such as this, but I can't seem to find anything.
https://docs.ckeditor.com/ckeditor5/latest/features/image.html
https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html
https://docs.ckeditor.com/ckeditor5/latest/builds/guides/integration/configuration.html

I'm trying to figure out how to upload images with CK Editor 5. Now I've seen a whole size of different plugins, but I would like to learn how this works for myself. What I have noticed is that if I click the image button, I get a dialog to upload the image and then I select an image and nothing happens.
Did you check the console? On the console, if you don't have the editor properly configured, you'd have something like this:
filerepository-no-upload-adapter: Upload adapter is not defined. Read more: https://docs.ckeditor.com/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter
Now, there are two built-in upload adapters – for CKFinder's server connector and for the Easy Image service provided by CKEditor Cloud Services. Both need to be configured to work:
CKFinder adapter: https://docs.ckeditor.com/ckeditor5/latest/api/module_adapter-ckfinder_uploadadapter-CKFinderAdapterConfig.html
Easy Image: https://docs.ckeditor.com/ckeditor5/latest/features/image-upload.html#easy-image
The role of an upload adapter is to expose a function which will send a file to the server (in whatever way it wants) and notify the editor once the upload is done (by returning a URL to this file). The editor takes care of the rest – inserting the image into the content, displaying a progress bar, etc.
Besides using the built-in adapters, you can write your own one. See:
https://docs.ckeditor.com/ckeditor5/latest/api/module_upload_filerepository-Adapter.html
https://github.com/ckeditor/ckeditor5-adapter-ckfinder/tree/master/src as an example of a simple upload adapter

HTML : load thumbnail image and full image faster

I have a blog website that loads the images slowly i want to know how to make them load faster and:
I am using same image for thumbnail and story. thumbnail is small,does it still load full image?if so how to use thumbnail of an image?
Where should i store the images? what is the best location to store images for your websites and blogs? can save them in one drive and use the source?
how to optimise images?what is a placeholder?i have seen many websites such as facebook use a kind of place holder which displays before image and content?how to do so?
-how to i preload images ? or is there any better way ?

Here are some pointers.
Thumbnail images have to be separate from original (large) images. When the user uploads the images, you have to use some script to resize the images. If you are using a standard CMS like Drupal or Wordpress, there should be an option somewhere to do the resizing (without you having to write code).
Assuming your blog is public, the images as well should be public (usually). You can create a directory named files and you can store the images inside that directory. If you are using a standard CMS, these options should be there in some form.
To avoid having all files in one directory in the long run, use folder naming schemes like files/[YEAR]/[MONTH] or anything else you think would serve your purpose.
Make sure the uploads directory and your upload mechanism is well-protected using and .htaccess (or equivalent). Otherwise, someone might upload malicious scripts and execute them on your server.
A placeholder is anything which holds the place of something while the original thing is absent (or being loaded). So, a placeholder image will be a standard image with a general design - it's as good as saying loading. You can use JavaScript or CSS (background-image) to achieve such a placeholder.
Preloading should not be necessary as far as I see from your question. A better opinion / answer could be given if you share the link to your site.
Next time, please try to make detailed questions - one question per problem, if possible. Also, do not fear to Google for a solution. I learnt programming (PHP, JS, Drupal, CodeIgniter and more) just by Googling! Hope this helps!

Jigar has done a fairly good job of answering the question though I thought I'd add if you want to optimise images there are plenty of websites that do it for you for free.
My favourite is https://tinyjpg.com/ however there are plenty of others. A quick Google search will get you plenty of different sites all doing basically the same thing.
This post might also help Load a low-res background image first, then a high-res one

Twitter embedded timeline widget

I went ahead and downloaded http://platform.twitter.com/widgets.js
And the http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
Two files the embedded timeline widget uses.
All I'm trying to do is customize the css of the widget, and since twitter only gives you a few design options like link color and a dark/light theme, I thought it would be easier to download the files and modify them myself.
Only problem is, I'm having some difficulty trying to point the css file location inside the widgets.js to the copy on my webapp
A line inside widget.js, locating the css file on twitters servers, its tied up with some variables that combine a prefixed platform.twitter.com/ value or something
provide("tfw/assets",...{"default":"embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css",
I don't how much editing has to be done to widget.js but my guess its only a couple lines?
If anybody proficient in javascript wouldn't mind taking a look and telling me "Not worth the effort", or "It's simple, just change __ to __", let me know.
widgets.js is the first hyperlink above

(See my edit below for a better solution) This seemed to work for me and doesn't take much time to implement:
In widgets.js, find
function Z(a,b,c)
Change this in function Z:
d.href=twttr.widgets.config.assetUrl()+"/"+b
to something like this:
d.href=b
The assetUrl just gets the base URL of the file (eg. a CSS file), which is at a domain Twitter owns. b will be the paths you specify throughout the JS (such as embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css ). Upload all the CSS (like timeline.xyz.default.css) to where you want it, then you can customize those files and keep them on your own server. You can't modify the CSS by simply adding rules to a CSS file on your server, since the Twitter feed is in an iframe from a different domain. Modifying CSS in iframes with this type of source (ie. not from your own domain) is not allowed, to prevent hijacking-type problems, but if the iframe refers to a CSS on your own server then you can modify things.
There may be some other things you might want to check out to make sure you have all the required files. You should also get sprite.png which is referred to in the Twitter CSS file. I was able to customize the CSS this way and it worked fine.
Edit:
I had problems with the above solution in IE7/6 and Chrome in Jelly Bean so found a better solution that lets you inject your own custom CSS file into the iframe while sticking with all of Twitter's CSS at their own domain. From a fresh widgets.js I went and added the following:
;d=c.createElement("link"),
d.id="custom-css-1",
d.rel="stylesheet",
d.type="text/css",
d.href="http://mydomain.com/css/timeline.custom.css";
c.getElementsByTagName("head")[0].appendChild(d);
immediately after
c.getElementsByTagName("head")[0].appendChild(d)
on the line in widgets.js starting with
provide("tfw/widget/timeline"
(again in function Z) This seems to work much better, and all you need is a copy of widgets.js at http://platform.twitter.com/widgets.js.

It looks like if I download wigdet.js and custom.css then widget does not pick up
data-chrome="transparent"
I downloaded
http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
renamed it timeline.custom.css
Changed in wigdet.js link to my css
function b(e,t,n){
var r;
n=n||document;
if(n.getElementById(e))return;
r=n.createElement("link"),
r.id=e,r.rel="stylesheet",
r.type="text/css",
r.href= "../css/timeline.custom.css",
n.getElementsByTagName("head")[0].appendChild(r)
}
Is link to css correct? Or twitter uses the newest version of css?
http://platform.twitter.com/embed/timeline.4d0955f67d15e8ef0601086ae2d5fcd0.default.css
How to make widget to pickup the data-chrome="transparent"
I used widget script
<a class="twitter-timeline"
data-dnt="true"
href="https://twitter.com/search?q=%23My_hush"
data-tweet-limit="1"
data-theme="dark"
data-screen-name="some_name"
data-chrome="noscrollbar noheader transparent noborders nofooter"
data-widget-id="My_id">
Tweets about "#My_hush"</a>