Salient Soft

Update 9/5/23

I reinstalled the current latest version, V3.3.2, to try to solve an issue where I could not connect to Fauxton (In fact this was my mistake – I was effectively using 127.0.0.1:5984 rather than the actual IP address i.e. nodename:5984, having forgotton I had changed the binding in local.ini).

After reinstalling, I edited local.ini and used my previous trick below to add a plaintext password and let couchDB encode it. However, couchDB seemed to ignore anything I placed in local.ini, and instead was using a file etc\local.d\10-admins.ini. When I editied this latter file, I could add the password correctly and it was honored (then encoded by CouchDB and replaced in the file).

When reinstalling, I had simply uninstalled the old version via control panel, then installed the new one on top without removing any other existing files (in particular I left the existing database in place). It appears that the installer took my old custom settings and placed them in the above 10-admins.ini file.

I have left this as it is at present but may change this later. This page here gives a good intro to the configuration files, their precedence order and how to override stuff. This section on authentication mentions the 10-admins.ini file which it says is present if you intall from a package like I did.

Original Post

I had a zip backup of a complete old version with data, but needed to locate the old release to reinstall on a new PC and reinstate the data

MSIs of old releases can be found in the apache archive here 

If you look under the releases subfolder in the old installation there is a RELEASES text file which details the release information. Mine was release 2.0.0.

The latest release at the time of posting is 3.2.2, but I was not clear that the data structures would be forwards compatible if I just restored all the previous data I had (this is one way that backup is proposed, as opposed to replicating to another server which I didn’t want to do).

On issue was that I had temporarily forgotten the admin password. This post here details how to change an admin password manually if you forget – you can just change the hashed password against an admin user with a plaintext one, and CouchDB will detect this and swap it for the hashed version when it is next restarted.

After installing v2.0.0, it would not fully start on Windows 11 – the service paused during startup. It did however run on an older Windows 10 pc, and also ran correctly when I restored all the data.

I then tried the latest 3.2.2 version on the Windows 11 pc, and again restored the data. I had a couple of issues – one was an incorrect server name in the app config url which prevented access to the database. A second issue peculiar to V3.2.2 was that initially I got errors when trying to access the database from the app with no authentication (this simple legacy Proof of Concept was not authenticated). I then found in the user settings in V3 that by default there were admin roles specified which were preventing simple access with no authentication. Once I removed these, this solved the problem and access from the application worked correctly without authentication.

This then worked fine – there were no compatibility issues with V2.0.0 data when restored under v3.2.2.

Comments Off on Reinstalling Apache CouchDB

The title says it all. This really shouldn’t be hard, but I searched a number of forums full of gripes from people with no answers, and even on a microsoft forum, a microsoft reply said basically “sorry you can’t do that”. I felt this was particularly poor misinformation given that as below, I persevered with looking further and found a perfectly good solution that does it easily.

This post here was a start – you can do a “file/save as” of a a presentation, and select “powerpoint show” i.e. PPSX file (there is also a macro-enabled show file but did not need to try that). This looked promising as it did start the show when clicked on as a local file, but still did not actually start the show when shared via a hyperlink.

Later I found this post here which gave a clue to the issue and tried just adding a query string parameter “action=embedview” to the link URL. This worked perfectly in exactly the way I wanted – the show started automatically via the embedded viewer but still showed in a browser tab. If you want full screen you can use f11 as normal to toggle it in the browser. I didn’t care for having a link which directly took you into full screen powerpoint showing, as this takes control away from those who might be unaware of what is going on. There is an ‘open in new window’ icon at the bottom right, and this does open the presentation in a new tab without showing it, but this is fine, if someone wants to play with it they can. It also means they can save a copy themselves, but I was happy with this as they are viewing it all anyway, and if it was a web page they could export to PDF so not much different.

One key point on this is that it only worked when the file was hosted on my company MS onedrive share which actually had the office licence. It did not work on a Zen hosted file (it just downloaded it), and when I tried on a free MS onedrive share, it opened the presentation without running it directly, even when the above query string parameter was added. I am not sure of the reason for this, and may look into this further at some point, but it was not an issue anyway – I just needed to host the file on the correct share, and create a read only onedrive hyperlink with onedrive, and then add the query string parameter to the url, and it all worked fine.

This meant I could easily prepare simple powerpoint presentations to share for viewing, more easily than trying to put web pages together to do a similar thing – after all, the kind of presentation I wanted is exactly what powerpoint is for, and it does it easily. It was just a shame that the solution does not appear to be documented well online, but I was thankful for a good solution in the end.

Comments Off on Creating a hyperlink to a powerpoint presentation that opens and shows automatically

Firstly I installed the latest current release of node under NVM. This was 18.2.0, so this was installed simply using “nvm install 18.2.0”. This is only needed once as it is global for any project/folder running under NVM.

I then followed the upgrade procedure for angular here. Upgrading is well documented and supported – you can pick any pair of versions along with some details of your app complexity/what you use, and get specific update help here.

I then updated the various dependent components. I needed to add the switches “–force –allow-dirty”. “–force” was to force the updates through even when there were dependency version issues – this would all come out in the wash when finished, it was just a question of the dependency update order which triggered this. “–allow-dirty” allowed the update to proceed even when there were pending git commits present. I am unsure why the process is so picky about this – I did not intend to commit after every individual update command, and did not see why there should be a warning about it. The following updates were done:

npm install primeng@13.4.1 –force –allow-dirty
npm install primeicons@5.0.0 –force –allow-dirty
npm install primeng@13.4.1 –force –allow-dirty
npm install primeflex@3.2.0 –force –allow-dirty
npm install jasmine-core@4.1.1 –force –allow-dirty
npm install @angular/cdk@13.3.7 –force –allow-dirty

for my chart microapp which uses the PrimeNG chart component and therefore chart.js, I had to upgrade chart.js to the latest 3.8.0 or builds won’t work:

npm install chart.js@3.8.0 –force –allow-dirty

I also with noted with charts that the styling changed – charts were too big for browser window and needed unwanted scrolling, so would need to look into styling issues on this. Also the growl when you click on chart points etc. has gone.
This is replaced with a hover “growl” next to where you hover over a point. I confirmed the behaviour change with the primeng showcase.

I also noted that @angular/cdk  slipped the net orignally and needed doing (even adding again) manually as listed above.

After all the updates as above I was able to build and run in the usual way.

Comments Off on Upgrading Angular & PrimeNG Microapps from V11 to V13

This is fairly straightforward, but appears to be subject to the fundamental limitation that the Fritz Box cannot make use of multiple external IP addresses for the port forwarding, even if you are on an 8 port subnet like I am. I made absolutely sure that the Fritz Box was aware of the subnet by accessing its menus, then navigating to Home Network/Network on the left menus, and then clicking on the Network Settings tab. You then click on Additional settings to reveal some extra settings, and then scroll down and then click on IPv4 settings. Finally, if you scroll down and look under Public IPv4 Subnet you will see the public subnet visible/allocated to the Fritz Box, as a prefix and network mask.

In my case this was clearly an 8 port subnet, but unfortunately the fritz box only allowed port forwarding using the primary router public IP address.

I managed to work within this limitation however, as you can still forward multiple different ports to multiple different local devices. For example, to enable inbound RDP access to a PC as I did, do the following:-

1/ Visit Internet/Permit Access on the menus, and then click the Add device for sharing button.

2/ Select the target PC/device at the top, then at the bottom click New Sharing, which configures the desired sharing for the device.

3/ Then Click the Port Sharing radio button (as opposed to the default My FRITZ! sharing). Under application, I selected MS remote Desktop as the Fritz box was aware of RDP. You can select Other Application and enter the ports manually if you are working with an application that the Fritz box is unaware of.

4/ You then have 3 ports to configure, which is slightly confusing – I was not clear on all of this and the online help was blank on some of this detail. When I selected MS Remote Desktop, Port to Device and through… were both set to 3389, which was the correct internal port to use for RDP. Below this was Port requested externally, which is the actual external port you want to use. In one case therefore I left the defaults, but for a second PC, I set the external port to 3390, which allowed me to use the same external IP address for 2 different RDP configuration to access 2 different internal PCs successfully. I was not clear however what the distinction between Port to Device and through… was all about, but did not need to touch it.

5/ When accessing via the MS android RDP app, I was able to configure multiple PCs as required, and could also configure both Lan and internet configurations of the same PC so that I could access it both ways from my phone. A key trick here is that this app does allow a different RDP port to be used. Under PC name for the internet, I set the target IP address (the public IP address of the router), and appended a different port using e.g. :3390 notation to use port 3390 instead of 3389. You are able to give an additional friendly name for the PC when doing this, which is useful when configuring external IP access. Internally on the lan you can just use the standard windows network names. This then all worked fine and I was able to use my phone both to remotely access the fritz box to wake the PC, and then remote login using the MS RDP app to access it.

Comments Off on Enabling External access/port forwarding with the Fritzbox 7530, and using the MS RDP Android App.

As I found previously, there were a number of things to get right to make this work, as follows:-

1/ The bios settings for the motherboard need to be set correctly to enable it, and whether/how to do this varies depending on the motherboard. My older Gigabyte Z77-D3H at version F18 did not have a setting to enable this, but it turned out that it worked anyway once all the other issues were correctly address as below. My newer Asus Prime Z690M-Plus D4 did need a setting changed, and this was somewhat subtle. For this motherboard, from the home page you need to visit Advanced Mode/Advanced/APM Configuration/Power on by PCI-E, and enable this option. Note that you only find out from the prompt when you actually visit this option, which is labelled as PCI-E, that it also affects the onboard LAN as well as any PCI-E adapter. This was not clear.

2/ In Windows 10 and 11, open the control panel and visit Hardware and Sound/Power Options, and then select “Choose what power buttons do” on the left menu. Then click “Change settings that are currently unavailable” at the top, and this enables the “Turn on fast startup” option, which should be disabled. Whilst I am not certain that this is required, it was cited in this post re wake on lan, and turning it off did not slow boot time noticeably on my PCs, so I left it on.

3/ You then need to change the network adapter settings. Open the device manager and located your network adapter. Check the advanced settings and ensure that Wake on magic packet is enabled. Then, under the power management tab, allow this device to wake the computer, ensure that Only allow a magic packet to wake the computer is enabled. Again, I am not certain that the latter is absolutely required and I did get some intermittent behaviour when testing wake on lan, but in the end I have left this enabled, as I have no current requirement for any other way to wake the computer.

4/ On the Fritz Box 7530, wake on lan is built in. Navigate to Home Network/Network using the menus on the left, and then select the device that you want to wake. Note that it may be under active connections or idle connections in the list, and it is not clear what an idle connection means – a pc that is on/booted can appear in the idle connections list. Either way, this does not matter. You just click on the pencil icon as if to edit the settings for that device (even though you are not changing anything, this is where you will find wake on lan). Scroll to the bottom and you will see a button labelled Start Computer, which will successfully perform a wake on lan if all is in order. Note that to the left of this button is a check box labelled Start this computer automatically as soon as it is accessed from the internet. Whilst it might be convenient to enable this to save a manual wake on lan via the fritz box when accessing from the internet, I have elected not to do so at present as my needs for this are infrequent and it gives additional protection for the lan, as a remote fritz box access is needed to trigger this, which is of course password protected. However, doing it automatically would be a lot more convenient as accessing the fritz box remotely to do the wake on lan is perfectly possible and relatively straightforward, it does require several steps.

Once all this was done, I achieved consistent wake-on-lan behaviour using my Fritz Box 7530 to perform the wake on lan, as per this post here.

Comments Off on Configuring Wake On Lan with Windows 10/11 and Fritzbox 7530

I experimented with mounting a backup image from a particular backup point on a job, using the Backup software.
This worked fine, and a new drive letter was created which could be browsed directly via windows explorer.
I was not clear how to dismount the image, and the documentation said that it would only remain mounted until a reboot anyway.

In fact, after rebooting, the image remained mounted in error even if the backup disk was not available (obviously it could not be fully browsed). I managed to remove it consistently by de-assigning its drive letter in disk management, then rendering it offline in disk management, and then using device manager to delete the UIM device for the mounted image, which appeared under disk devices. This worked ok providing all the steps were done in the right order, otherwise it appeared to remain around after a reboot.

After trying again in the backup software, I found it was a simple user error – the mount screen allows selection of a drive letter, and if one is already selected you can select “None” again to remove it and dismount the image. This was not immediately obvious the first time around – I failed to notice that “None” was available in the list as it was hidden and you need to explicitly scroll to the very top of the list to see it.

Once I dismounted the image this way, it worked immediately and completely removed the image and the device even without a reboot.

Comments Off on Dismounting a Paragon Backup Image

My initial attempt on this was to use static positioning when the title bar was unpinned (e.g. scrollable), and fixed positioning when the bar was pinned.

When using fixed positioning as above, the title bar is no longer in the normal flow so the rest of the content (in my case, encapsulated in a main container div) will sit underneath the title bar. I therefore used a top margin when pinned to prevent the top of the content being hidden. Some issues arose with this as follows:

1/ It was necessary therefore to add an additional margin to the main container to avoid occluding the content under the title bar, which meant exactly knowing its height. In addition, to allow a gap between the title bar and the content when pinned, I added a border to the title bar of the same colour as the page background, in effect to act as a kind of margin. This worked fine.

1/ My title bar was floated, so it automatically resized to fit its content. this meant that the margin allowance on the main content div would have to vary dynamically on resize.

2/ One way around this was to set media query breakpoints to trigger on the resize, and to set a fixed height for the title bar rather than floating it, and setting the margin on the content to match in each media query. In addition to this, I implemented a flexbox solution where the container was sized and the content centered within it. I was not so keen on this as it lost the ability to dynamically resize the title bar container as needed by the content resizing, and might cause problems if the layout/text changed in the title bar for example.

3/ Another way was to use a resize event and change the size of the margin on the content programmatically, using an rxjs debounced resize event. This worked pretty well, but I needed to switch the content margin on and off when the title bar was pinned/unpinned. This should have worked ok, but I noticed some slight visual movements in some page elements on pinning change, even though I could not see any style or layout changes in the browser inspector. This was annoying.

4/ I then tried using absolute positioning of the title bar when unpinned, and fixed positioning when pinned. This relied on using the same programmatic margin on the content for both, and in fact simplified the code, as I did not have to switch off the programmatic margin change when unpinning the title bar – it was used all the time, as absolute positioning was also outside the normal flow. Also, the slight glitches I saw on the page were completely eliminated.

I therefore stuck with method 4/ as the final solution. Some sample code showing the programmatic resize is as follows:-

private readonly resizeDebounceTime = 100;
private resizeObservable!: Observable<Event>;
private resizeSubscription!: Subscription;
private readonly formatPixelSize = (pixels: number) => `${pixels}px`;

…

ngAfterViewInit(): void {
   this.initBannerSpacingAdjustment();
}

ngOnDestroy(): void {
   this.destroyBannerSpacingAdjustment();
}

private initBannerSpacingAdjustment(): void {
   this.adjustBannerSpacing();
   this.resizeObservable = fromEvent(window, 
      ‘resize’).pipe(debounceTime(this.resizeDebounceTime));
   this.resizeSubscription = this.resizeObservable.subscribe(event => 
      this.adjustBannerSpacing());
}

private destroyBannerSpacingAdjustment(): void {
   if (this.resizeSubscription) {
      this.resizeSubscription.unsubscribe();
}
}

private adjustBannerSpacing(): void {
   /* note that the offsetHeight is the total height of the banner,
    * including padding and border */
   this.mainContainer.nativeElement.style.marginTop =
      this.formatPixelSize(this.banner.nativeElement.offsetHeight);
}

 

Comments Off on Pinning a title bar on a page with Angular 11/PrimeNG 11

Update 4/3/21

I had problems again when trying to display font-awesome icons in a microapp/web component. In this case, my parent fabric application which loaded the web component had font awesome loaded in package.json but not in angular.json. I removed font-awesome from the web component application in both package.json and angular.json as the parent had loaded it in both places. This then worked correctly. There may be a similar issue with e.g. the prime icons etc. but have not researched this. Clearly PrimeNG itself is needed in both applications as the child web component has development dependencies on it. My theme styling however is only loaded in the parent fabric, and it makes sense that font-awesome behaves the same way.

Original Post

My previous post about using font awesome with Angular  up to v6 and PrimeNG up to v6 is here

With PrimeNG 11, Prime have introduced their own icon set, PrimeIcons.

I wanted to use some font awesome icons as well as they have a larger set, but initially they would not display. When trying again later it all worked fine, and am unsure what I got wrong the first time around. To be clear, the following steps were needed:

1/ Install font awesome and add to package.json (–save adds to package.json)

npm install font-awesome –save

2/ Add a style reference to angular.json

“styles”: [
“node_modules/primeng/resources/primeng.min.css”,
“node_modules/font-awesome/css/font-awesome.min.css”,
“node_modules/primeicons/primeicons.css”,
“src/messages.scss”,
“src/styles.scss”
],

Double check that the referenced css file actually exists under node-modules for the version in use. in my case, this was 4.7.0.

I was looking for pin/unpin icons for a banner bar, and could only find a vertical pin, fa-thumb-tack – I also wanted a horizontal pin to designate the unpinned state. Fortunately, font awesome has the ability to transform icons e.g. to rotate them. This is more limited in v4, but rotation is allowed, so my reference was as follows:

<p-toggleButton [(ngModel)]="bannerPinned" onIcon="fa fa-thumb-tack" offIcon="fa fa-thumb-tack fa-rotate-90"
                class="ss-pin-banner"></p-toggleButton>

This worked perfectly. v5, which was not available directly to install via npm at the time, allows more transformations. The transforms are detailed in this stack overflow post and this font awesome page.

Comments Off on Using Font Awesome with Angular 11/PrimeNG 11

This follows on from this earlier post for Angular 6.

PrimeNG has for some time removed support for legacy themeroller themes and added their own architecture and theme editor. However, for the first time, the theme editor and the SCSS theming interface/standard SCSS files are no longer open source, but are a paid for option. The rest of the component set, including the delivered compiled css for all the standard themes, is available as open source as before.

Therefore, having considered the options, I elected to take a standard theme that was close to what I needed and edit its css directly. This is suggested as an option by Prime for small changes, but it is possible that later changes to the theme architecture could require theme changes as we are editing the compiled css. I decided that the risk and rework that might be needed was small, so have taken this route.

My policy on this is to copy the theme files to a new theme folder under assets/resources/themes/, and then to rename the theme.css file to theme.scss, as the compiled css is also valid scss. This then allows me to add my own variables as required for theme colours etc. to avoid duplication. The intention is to minimise alterations to the original theme, so I would only add variables where I had made changes, to minimise any rework if I had to take a new version of the standard theme and add my changes again.

Whilst doing this, I noted a warning that node-sass, as used previously, is now deprecated. I therefore switched to sass, as per this stackoverflow post, using npm uninstall -g node-sass followed by npm install -g sass. This worked fine, and my changes to the existing compilation script in package.json (also allowing multiple themes to be compiled) were as follows:-

 “scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“scss”: “npm run scss1 && npm run scss2”,
“scss1”: “cd src/assets/resources/themes/salient-new && sass theme.scss:theme.css –source-map .”
“scss2”: “cd src/assets/resources/themes/salient-new2 && sass theme.scss:theme.css –source-map .”
},

Comments Off on Creating and compiling a Custom PrimeNG 11 theme deployed as a static asset

I am  using multiple themes and theme selection, using custom themes

For interest I am loading the theme css as a static asset, in index.html:-

<head>
<meta charset=”utf-8″>
<title>Microapp Fabric Prototype</title>
<base href=”/”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link id=”theme-css” rel=”stylesheet” type=”text/css” href=”assets/resources/themes/salient/theme.css”>
</head>

Then I am dynamically changing the href to switch themes:-

export class ThemeSwitcher {
/*
* Select the target theme
* this may be an external theme or an internal packaged one
* If the path contains a ‘/’ the theme is assumed to be an external theme source
*/
changeTheme(theme: string) {
const themeLink: HTMLLinkElement = <HTMLLinkElement>document.getElementById(‘theme-css’);
themeLink.href = theme.indexOf(‘/’) >= 0 ? theme : ‘assets/resources/themes/’ + theme + ‘/theme.css’;
}
}

A theme SCSS under the assets folder will be automatically compiled and included inline in the package only when a specific theme is referred to in the “style” section of angular.json. When dynamically switching multiple themes as above, the themes are kept as static assets and are not inlined in the package and so are removed from the “style” section. When this is done, the theme scss files for all the themes are not compiled to css automatically when an ng build or ng serve is done. This post here details how to manually install and build the scss using node-sass. It goes into other details which I haven’t needed as I am using static assets, so only node-sass is needed. If in the actual theme directory, the following commands will install  node-sass and compile the scss for the theme and also create the source map:-

npm install node-sass

node-sass theme.scss theme.css ––source-map .

This can also be added to the scripts section of package.json to make an npm command:

“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”,
“scss”: “cd src/assets/resources/themes/legacy-blue && node-sass theme.scss theme.css ––source-map .”
},

This can be run by simply using npm run scss

Note as above that npm supports the cd command in the scripts section, both for linux and windows (as detailed here). The default directory is the root of the project, and this is consistent even if you run the npm command e.g. from a subdirectory. I did not manage to find a way to automate this via an ng build or ng serve command, so these would have to be run in conjunction with npm run scss (with the latter running first).

No Comments »