Serving static files in uibuilder

General
1

I have a problem that I don't know if it's related to uibuilder or not, but since I tried elsewhere and that problem didn't exist, I decided to ask here.
I have designed a ui using uibuilder that loads all logos and icons easily. I have used a map with openlayers.

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([51.338743, 35.699819])),
  name: 'Azadi',
});
const map = new ol.Map({
  target: 'map',
  layers: [
      new ol.layer.Tile({
          source: new ol.source.OSM(),
      }),
      new ol.layer.Vector({
          source: new ol.source.Vector({
              features: [iconFeature]
      }),
          style: new ol.style.Style({
              image: new ol.style.Icon({
                  anchor: [0.5, 2],
                  anchorXUnits: 'fraction',
                  anchorYUnits: 'pixels',
                  src: '../images/layout_img/map_icon.png'
                  // src: "https://openlayers.org/en/latest/examples/data/icon.png"
              })
          })
      })
  ],
  view: new ol.View({
      center: ol.proj.fromLonLat([51.338743, 35.699819]),
      zoom: 12
  })
});

However, when I try to change its marker icon, it cannot read the icon and gives the following error.

can not GET http://127.0.0.1:1880/images/layout_img/map_icon.png

I changed URI to /platform/src/images/layout_img/map_icon.png and again not worked. Can not GET http://127.0.0.1:1880/platform/src/images/layout_img/map_icon.png
I searched a lot about it and couldn't find anything, also to make sure I wrote a small test server to make sure the problem wasn't my code (which it wasn't), so I guessed that the problem was with my referencing type in the URI or from the node-red side.

2

All my uibuilder custom images/icons are in this folder: ~/.node-red/uibuilder/<your-app-folder>/src/assets
and I point them with: ./assets/<image.png> or http://<your-ip>:1880/<your-app-folder>/assets/

2 Likes
3

According to your answer I create assets folder in root of my app folder and i set the src URI in map to './assets/map_icon.png' and then set to 'http://127.0.0.1:1880/platform/assets/map_icon.png and non of them not worked and I encountered same error.

4

It's worked by this URI './images/layout_img/map_icon.png'
Apparently, uibuilder recognizes the src folder as a static folder, and I didn't know that!

5

Yes, my bad sorry. There was a typo in my previous message. Edited.

1 Like
6

uibuilder's scr or dist folders are static folders and always have been. :slight_smile:

You can switch between the two using the setting in the advanced tab in the node. One day you will be able to use other folders but that hasn't got to the top of the list yet.

In recent uibuilder versions, you can also use the folder for server-side dynamic files as well if you wish, it uses EJS and is an option in the uibuilder section of settings.js.

1 Like
7

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.