I am performing object detection on an image from a camera and storing it in a directory with a fixed name. Every few seconds, the image is updated and stored with the same name in the directory.
I am running node-red on my Mac. I want to show this image on my npm dashboard and update it update it every time the source image is updated. Is there a way to do this?
I tried with the media node in the node-red dashboard but it doesn't update my image.
PLease help.
I solved the problem in two parts:
Setting httpStatic in the settings.js file
Setting up the template node in node-red
Setting httpStatic
Go to the folder ~/.node-red and open the settings.js file
In this file, uncomment the line starting with httpStatic and put in the path to the directory/ folder where the images are stored.The line of code will look like: httpStatic: 'Path to your folder',
Restart Node RED
This sets up the path you provided as the root directory for Node RED from which it'll start searching for your files
Setting up template node in Node RED
Bring in a template node and put in the following code:
<body>
<script>
setInterval(function(){
$("#myimg").attr("src", "path to your image w.r.t. httpStatic?"+new
Date().getTime());
},7000);
</script>
<div style="height:500px;">
<p align='center' id="box">
<img src="path to your image w.r.t. httpStatic" id="myimg">
</p>
</div>
</body>
The given above checks the directory in which you have the image(s) every 7 seconds and updates the images if the image changes.
Note: Be sure to provide the path to the image with respect to the root directory set in httpStatic
You can change the size of the division, alignment of the image and time interval for updation according to your need.
Related
I have been using Svelte for a little while and now I have switched to SvelteKit so I can add multiple pages. I want to add some images to my site but I don't know where to put them. In Svelte I would just put them in public/images but there is no public folder with SvelteKit (I set it up with npm init svelte#next my-app if that matters). Would I put them in static?
Thanks!
I added the images in static/images and referenced them with src="/images/photo.jpg" like #b2m9 said and it works perfectly.
I recommend putting images under src/lib, not static. For example you could make a src/lib/images or src/lib/assets folder and put them there.
The reason is performance:
For files imported from anywhere under src, at compile time Vite adds a hash to the filename. myImage.png might end up as myImage-a89cfcb3.png. The hash is based on the image contents. So if you change the image, it gets a new hash. This enables the server to send a very long cache expiration to the browser, so the browser can cache it forever or until it changes. It's key-based cache expiration, which IMO is the best kind: cached exactly as long as it needs to be. (Whether the server actually sends the right caching headers in the response may depend on which SvelteKit adapter you use and what host you're on.)
By contrast, images under static don't have a hash added to their name. You can use the static directory for things like robots.txt that need to have a specific filename. Since the filename stays unchanged even if its contents change these files by necessity end up having a cache-control value that includes max-age=0, must-revalidate and an etag, which means even if the browser caches the image it still has to make a server round-trip to validate that the cached image is correct. This slows down every image on your site.
Usage:
When putting images under src/lib, you reference them like this:
<script>
import img from '$lib/images/img.png';
</script>
<img src={img} alt="Image" />
I recommend simplifying by adding svelte-preprocess-import-assets to your project, which automates the process of importing images and cleans up your code. You wrote the following and it generates the code above:
<img src="$lib/images/img.png" alt="Image" />
As Sveltekit uses Vitejs, there is a easy solution mentioned in Vitejs official web site (Click Here).
First inside the script tag :
<script>
const imgUrl = new URL('./img.png', import.meta.url).href
</script>
then inside your Image tag just use that variable,
<img src="{imgUrl}" alt="" />
or,
<div class=" h-screen w-full" style="background-image: url('{bgUrl}') ;">
</div>
You can import static images from any relative path.
there is also svelte-image.
"Svelte image is a pre-processor which automates image optimization using sharp.
It parses your img tags, optimizes or inlines them and replaces src accordingly. (External images are not optimized.)
Image component enables lazyloading and serving multiple sizes via srcset.
This package is heavily inspired by gatsby image.
Kudos to #jkdoshi for great video tutorial to Svelte Image."
-https://github.com/matyunya/svelte-image
I am using Dropzone code obtained from this web site
DropZoneCode
In this example the dropzone is the width of the entire screen. I would like to reduce that size down to about 400 to 500 pixel. When I reduced the size of the div I could only drop 2 files before it stopped uploading files. The 3rd file just opened in the browser, which I believe was an indication I was outside the dropzone.
I believe if I reduced the size of the icon showing in the drop zone I would be able to add more files. Can anyone tell me where within the css file I can adjust the size of those items?
I was able to get it working using this setup
<asp:Panel ID="pnlStealthStat" runat="server" Visible="false">
<div id="dZUpload" class="dropzone" style="height:auto;margin-top:5px;">
<div class="dz-default dz-message"> Drop Stealth Stats Files Here</div>
</div>
</asp:Panel>
This setup was part of a bootstrap column and is functioning as expect
I have created a js file where an array contains multiple objects. Every object has an image path given. Using for loop, I am importing every object to my component. Everything works fine except the image. It's broken. It's not taking the relative path. I have stored all the images in a folder. Below is my code:
Data.js
export const dashboardUtil = [
{
title: "Posts",
count: 500,
image: "/src/images/1.png"
}
//rest of the objects
]
Component.js
let blocks = [];
for(let i=0;i<dashboardUtil.length;i++){
blocks.push(
<Col xs={12} md={6} sm={6}>
<div className="main-block" className="stats-block">
<h3>{dashboardUtil[i].title}</h3>
<p>{dashboardUtil[i].count}</p>
<img src={dashboardUtil[i].image} />
</div>
</Col>
);
}
image: "/src/images/1.png"
This is not a relative path, its absolute (starts with slash). If you intend it to be relative, use ./ e.g. ./src/images/1.png.
The bigger issue is that you're providing a path to a local resource to the context of the users browser. It expects this to be a http(s):// resource. You need to provide an endpoint that your web server handles and serves up the resource.
Either:
Your image needs to go into a location your web server can access, and you need to set the img src attribute to reference that location
You should look into webpack and a file loader plugin that takes a local image path via require(), and copies that to an accessible location.
use :
import image from "../pathToImageFolder/image1.png";
//path to image will be automatically constructed by webpack
<img src={image}>
I am currently trying to add a static image into an Odoo v10 report.
In Odoo v8, I used the image tag with the path like this:
<field src="/my_module/static/src/img/my_image.png"/>
But in Odoo v10 it does only display an empty rectangle.
Has it been changed in v10 or am I doing something wrong?
The path and the name of the file is correct.
Greetings, Matthias
First of all image you want to display is static image not the field so try image tag:
<img src="my_module/static/src/img/my_image.png'/>
This is working for me to display a background image:
<div class="page" t-attf-style="background-
image:url('/my_module/static/src/img/my_image.jpg');">
Make sure that when you go to (your server's url)/my_module/static/src/img/my_image.jpg in your browser, you can see the image.
So you could do an empty div with your image as background in the place you want your image.
I'm working on a gallery type application - one template puts together a popup dialog for a larger view of thumbnail images when clicked. The server path to the image is included as a template variable.
Gallery.Templates.Popup = "\
<div class='popup'>\
<img class='popup-image' src='{{image-path}}' />\
<div class='name'>{{name}}</div>\
<div class='caption'>{{caption}}</div>\
<div class='dimensions'>{{dimensions}}</div>\
<div class='price'>{{price}}</div>\
</div> \
";
This works very well EXCEPT for the first time the image is loaded. The dialog is constructed and shown but at the time the html string is attached to the dom, it lacks the image. The problem it is causing is in positioning the dialog:
The dialog box is positioned in the middle of the screen like this:
left = window.width /2 - dialog.width/2
But since the image is not present, the dialog.width variable is incorrect. Again, this only happens the first time a thumbnail is clicked, I'm guessing the image is cached for subsequent clicks.
Would this be handled by prefetching the images somehow? If so, do they need to be attached to the dom in order to be cached or can I just load them in an array?
Many Thanks !
If you can get the image size ahead of time from the server, you could use that to help you size the '.popup' div appropriately.
It sounds like a bad idea to prefetch images if they aren't needed and I can't think of a way to ensure that a specific image is loaded before it's html is generated programmatically.