Salient Soft

Having got CouchDB working under Windows 11 with the legacy places data as per this post here, I then wanted to run the legacy places angular and ionic apps if possible, just for reference and to consider my options going forward.

The angular app was in v6.1.7 which I did not want to revisit and upgrade. Similarly, the ionic app was an earlier legacy version which could be tricky to reinstate under windows 11.

However, I did have already built distributions for both apps, and both were able to run successfully under Windows 11 via http-server without having to install anything else. For angular I used the existing build under the dist subdirectory, and for Ionic I the build is under the www subdirectory. Note that whilst the index.html for the Ionic version did specify that cordova.js was required, and caused a load error in the web console, this was not an issue when using from a browser as it was not needed.

I did want to be able to run them remotely as well, from other PCs and mobiles. I tried installing the distributions under Zen hosting, with remote access to CouchDB running on the local PC. However, this would not run under HTTPS as it meant having mixed content – the access to CouchDB was not HTTPS and I did not want to go to the trouble of installing a self signed cert locally to get it all to work – this excercise was not worth the effort. I could not find an easy way under Zen cpanel of allowing just this app to be HTTP only, with everything else defaulting to HTTPS. If I turned off forced defaulting to HTTPS in cpanel, the app worked fine under HTTP but other access was also allowed to be HTTP only which I did not like, so I dumped the idea of hosting under Zen directly. I did hit a spate of nasty looking cpanel issues when I did this and for a while thought I had broken the domain/ssl/cpanel access entirely whilst messing with domain/alias/redirect settings in cpanel, but in the end it all worked fine again.

I therefore continued to run/host locally via http-server. I did want to be able to potentially remote boot my local PC via Fritz and access the app from anywhere, which would mean auto running the http-servers at boot time. The easiest way to do this turned out to be to use the windows task scheduler, which unlike services can run batch files without any other tools such as srvany which is commonly used to do this for services. Whilst the scheduler is often used with time based triggers, it is perfectly possible to specify a trigger as ‘run at boot time’. I also specified that it should run without any user logged in, therefore with local access only/no user authentication. This worked fine and I could boot the PC and then immediately access the places apps from a mobile without logging in.

Another trick needed was to add some remote port sharing in the Fritz box for both apps, via my static IP addresses. When doing this I also had to add a port share for the CouchDB access, otherwise CouchDB also complained about mixing private CORS stuff with the remote access. Once I did this, and changed the app config to use the remote URL for CouchDB access, it all worked fine. Fortunately, I could also continue to access the same apps locally on the hosting PC even though they were still using the remote URL for CouchDB access – it all worked fine.

I then set up redirects under cpanel from Zen to make the app access look a bit more friendly with salient soft urls, and this all ran fine.

Comments Off on Running Legacy Places Guide under Windows 11 for reference

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

I had some of these image files from some legacy clip art photos from an older version of Corel Draw.

Ideally I wanted to be able to preview them in windows explorer, as happens automatically with JPG files, however this would not work. I tried IrfanView, which is a separate image viewer, but this failed to view the files, as it could not locate jpeg2000.dll. I tried to locate and install the dll online, but was unable to prevent the error, so IrfanView would not work.

I tried another package, the FastStone Image Viewer, and this worked successfully. You can select folders in the left column in an explorer like fashion, and the jp2 images are shown as large icons on the right. Whilst I still could not preview them in explorer, FastStone worked perfectly well in being able to preview these legacy images. It can also view a number of other graphics formats such as WMF which I had used previously for the company logo.

An install kit for FastStone can be downloaded here.

Comments Off on Viewing JP2 image files in Windows 11

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

In V6 or PrimeNG, you could enable drag drop reordering on the picklist and still scroll on a touch device, e.g. on a mobile phone. This was handled nicely by using a click and hold to select an item for drag drop, and a swipe to do scrolling.

In V13 this is now broken – touching on an item instantly selects it for dragging, without using the previous click and hold, so that it is not possible to scroll by swiping the source or target list any more. I have confirmed that it used to work on my old V6 microapps version which used a standard PrimeNG V6.1.3 picklist, and also have checked the current PrimeNG showcase online – the current showcase is broken in exactly the same way when trying to scroll via touch on mobile. Whilst scroll bars are present on the RHS of the list, they are very small for Mobile. I did try to enlarge the scroll bars for mobile, using some webkit specific styling, but this proved problematic as it is not fully supported for Firefox – they cannot be resized on firefox. Even when I did get it working, selecting the scroll thumbtrack for mobile proved intermittent and tricky – not a nice interaction at all.

My simple workaround for this is to disabled dragdrop for the picklist for a touch device by setting dragdrop=false (i.e. dragdrop=!touchDevice). I already have a config property in the fabric to detect a touch device, and have replicated that as a global config parameter which is visible to all the microapps. The picklist can then use this. This is actually better than it sounds – whilst you cannot reorder items within a list any more, you can move between source and target using the buttons, and drag/drop is tricky on a mobile anyway as the source and target lists appear one above the other with typically only one of them visible so dragging between them is tricky as again scrolling is involved.

For reference, changing the scrollbar styling via the webkit styles is documented here and here.

Applying the webkit styles is very picky per the posts above – spacing etc. matters – there must not be a space between the element/class name and for example ::-webkit-scrollbar or it won’t work. In the end this SCSS styling worked for me, and fortunately I was able to get it working with a classname rather than just e.g. a ul element which is the one I wanted to hit:

.p-component.p-picklist {
  .p-picklist-header {
    background: $ss-widget-header;
    color: $ss-widget-header-text;
  }

  .p-picklist-list {
    &::-webkit-scrollbar {
      width: 50px;
      height: 50px;
    }
    &::-webkit-scrollbar-thumb {
      width: 50px;
      height: 50px;
      background: #a8a8a8;
      border-radius: 4px;
    }

As above I dumped this approach anyway, as even with a very large scrollbar and thumb track, it was difficult to consistently scroll on mobile, and anyway  the source and target for drag/drop were not both in view simultaneously anyway.

Comments Off on PrimeNG V13 Picklist Component does not scroll on touch device when drag drop enabled

An old chestnut this – when upgrading from an old version on my hosted environment, my chrome based dev desktop worked fine, mainly due to my habit of hitting ctrl/f5 which clears the cache before loading.

However, on my android mobile, this needs an explicit cache clear before loading the page e.g. via the settings/history etc., which I was not in the habit of doing. Therefore when testing the new version on mobile, it failed. The new version was a production build which did not have source maps. The old version was a dev one with source maps. The console errors indicated an inability to find and load the source maps, which were not present in the latest prod deployment, but were still being requested by the cached scripts on the mobile. An explicit cache clear solved the problem. 

When I tried this again on the desktop without the cache clear, i.e. with a straight refresh, I was able to duplicate the error seen on the android chrome.

Note that the problem only applies to the fabric deployment as all the others have a timestamp (ts=) querystring parameter added to the scripts when loading, which prevents caching. I normally disable the output hashing on all microapps including the fabric for convenience, to avoid editing the app config to change the names of all the dynamically loaded scripts, even for a prod build.

Doing this on the Fabric is unnecessary as the scripts are not loaded dynamically by my code, so if I left the hashing on for the fabric, this would solve the problem, as the timestamp querystring would sort the issue for all the others.

Going forward, I intend to improve automation of the build process for hosted deployments by providing e.g. an NPM script to build all the microapps into a single zipped deployment which can be just uploaded and unzipped – at present I am having to do each one individually and copy up the dist directory. Whilst all this is only a POC application, I am doing it often enough to make this worthwhile so as not to waste time or make mistakes with it.

Doing this would also allow the possibility of using my own timestamps on all the filenames for every script, and dynamically modifying the config to incorporate the timestamps in the build script. This would allow caching to be left enabled for the code scripts (but not for the config), which would actually be a benefit as it would improve startup times and lessen bandwidth usage – especially relevant for mobiles. I could add a fabric config parameter to indicate whether the querystring timestamps should be added or not when loading scripts, so that the feature can still be used when needed. Perhaps I could leave this enabled for dev mode and not bother with timestamps on the actual filenames for example.

Using my own timestamps on the names would simplify and standardise the names, as I could use an identical timestamp on all scripts for every microapp done as part of a given build, to simplify naming and build automation – I would only need to pass around one single timestamp parameter which would be used for all generated script files and in the config.

Comments Off on Caching of old microapp scripts breaks new version

Unfortunately with V13 of PrimeNG and its supported chart.js versions, the axes do not get removed when switching  chart types and bleed onto the next chart. It appears that the chart must be destroyed and recreated when changing types – a refresh or reinit call are not enough, and explicit angular change detector calls don’t work either, see here.

Therefore as just having a single permanent chart and changing its properties fails as above, I’m explicitly making the chart data undefined to ensure that the *ngIf in the template destroys and recreates the chart. This works fine.

This appears to be a new bug.

Comments Off on PrimeNG V13 Chart Axes Bleedover Issue

I hit an issue where a PrimeNG panel, used in a Dataview component in grid mode, was not centering its header text after upgrading to the latest V13.

The issue was weird – the header container div was set to flex by the Panel component itself, but when I used justify-content: center to center the text in a dependent span, it remained left justified despite all my efforts to check for other style issues, force styling with !important etc.

When I checked the latest PrimeNG showcase online, I noticed that this also has the same problem. I noted that other containers/elements in the Panel such as the content container div did not use flex, so I felt happy to force the styling for the container back to block and use text-align: center instead. I did this locally in the affected microapp component rather than the overall theme, but might rethink this later and standardize if I hit the issue again.

This solved the problem and the text centered correctly.

Comments Off on PrimeNG V13 Panel Header Text Not Centering

I had trouble when debugging some asynchronouse code – console.log was showing a later value/state of an object and not the current one at the time of the statement, which significantly confused the debugging process.

It turned out that console.log operation is browser dependent and not guaranteed to be either sync or async, and can also change between versions. In addition, when logging a complete object, the log statement might be synchronous, but it is only logging the object reference. The actual values will only be accessed when the object is opened in the chrome inspector for example.

These issues are discussed online here, here and here.

In the end I used breakpoints and inspected values directly when stopped on a breakpoint, rather than relying on the operation of console.log. This point needs to be borne in mind when dealing with async code, callbacks etc.

Comments Off on Javascript console.log statement can be asynchronous/browser dependent

I have already noted here and here that Prime have removed themeroller support in favour of a paid for theme designer tool, and more significantly, have removed there actual new theme SCSS api from open source, so this is paid for as well, preventing you from using their new API with manually designed themes.

My solution is to pick one of the free themes which is nearest to the look I want, and then rebadge its compiled css (which you do get a copy of) as SCSS, and then customise that.

Obviously the raw CSS has a lot of duplication compared to the original SCSS. My original strategy was to copy raw rules to the end of the file in a new section, and modify them as required to override the original rules, by making more specific as required (e.g. by adding a p.component class). This would then allow them to be matched to their originals, which sounded attractive from a correlation/derivation point of view.

In the end I gave up on this idea. The section with the modified rules was getting messy with all the duplication, and was harder to make sense of. I therefore adopted a new strategy which was to copy all the rules and modify as required, and then do some fairly straightforward merging of them into single SCSS rules. This dramatically simplified the modifications and made them clearer to read, so I have stuck with this idea going forwards.

There have been oddball cases where I have taken a different approach, and actually edited the original generated css directly. For example, there is a media query to switch the menu bar into hamburger only mode at a certain fixed viewport width. I did not want this, so as the media query covered a lengthy section of css, I removed the media query directly, replacing it with a class based rule so I could still switch in hamburger mode dynamically when I wanted. This still encapsulated the same original css, and seemed the tidiest approach in this case.

Comments Off on PrimeNG Theming Strategy