Using Live Preview (optional)

The following steps will allow you to preview your XML files locally on your computer without waiting for them to be transferred first to the server. These instructions were developed by UNF computer science major Krithick Saravana.

Download the necessary files

  1. From this OneDrive location, download the folder "ewproject" to your computer, paying attention to where you're saving it.
  2. Unzip/uncompress it, if that doesn't happen automatically. You should now see on your computer a folder called "ewproject".

Add the files for your document

  1. Within "ewproject," you will find a subfolder called "content." Copy the XML file you want to view into that folder.
  2. Within "ewproject," you will also find a subfolder called "images." If you want to see your document images in the live preview, copy them into that folder. You can save them to your computer by right-clicking (Windows)/control-clicking (Mac) on each image when viewing the file on the server (follow the link to your document on our document spreadsheet).

Install the Live Server Extension

This is the extension that will allow VS Code to mimic the behavior of the server. You can install this in two ways:

  1. Follow this link.
  2. Click install.

OR

  1. Open VS Code.
  2. Click on Extensions icon on the left most vertical panel.
  3. Search for "Live Server."
  4. Click on the extension that is from "Ritwick Dey."
  5. Click "Install."

Launch your live preview

  1. In VS Code, select File > Open Folder, and open the ewproject folder.
  2. On the bottom most horizontal panel, look for the "Go Live'"button. It will be on the right-hand side. If it does not automatically open a webpage, go to http://127.0.0.1:5500/ in your browser.
  3. Click on the "content" folder and then click on the .xml file you are working with.

Note that, in order to display, your XML file must be well formed and valid. If it is not, you will see a blank screen when you try to view your page. In that case, go back to VS Code. If you see the message "XML is not valid" at the bottom of the window, fix any problems until the message "XML is valid" appears. Then save your changes in VS Code and reload the browser page. 

Making and viewing changes

  1. Make your changes in VS Code.
  2. Save your changes.
  3. Reload the browser page.
If you are on a view other than "Reading Text" when you reload, the button will stay on that view but the page will reset to "Reading Text". To go back to "Transcription" or another view, first click on "Reading Text" then toggle back to the view you want. See the last section on Tampermonkey for an easier method.

OPTIONAL: Using a Tampermonkey Script to automatically set the view on page load

  1. Install Tampermonkey to your browser
  2. Click on the extension and click "Create a new script..."
  3. Copy and paste the following script:
// ==UserScript==
// @name         Omeka Default View Selector
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Set a default view for Omeka content on page load
// @author       K. S.
// @match        http://127.0.0.1:5500/*.xml
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
    'use strict';

    // Function to set the default view
    function setDefaultView(view) {
        GM_setValue('defaultView', view);
        alert('Default view set to: ' + view);
    }

    // Function to load the default view
    function loadDefaultView() {
        const defaultView = GM_getValue('defaultView', '../css/edition.css');
        document.getElementById('themeBox').value = defaultView;
        document.getElementById('themeBox').dispatchEvent(new Event('change'));
    }

    // Create a settings panel
    GM_registerMenuCommand("Set Default View to Reading Text", () => setDefaultView('../css/edition.css'));
    GM_registerMenuCommand("Set Default View to Transcription", () => setDefaultView('../css/transcription.css'));
    GM_registerMenuCommand("Set Default View to Changes", () => setDefaultView('../css/edition_markup.css'));
    GM_registerMenuCommand("Set Default View to Semantic", () => setDefaultView('../css/edition_semantic.css'));

    // Load the default view on page load
    window.addEventListener('load', loadDefaultView);
})();

4. When you go to an .xml file in the live preview the Tampermonkey icon should show a red box with a 1 to indicate the running script.

5. Click on the extension and you should see 4 options. Select the view you would like: "Set Default View to Transcription."

6. Now when you reload, the page should default to the view you chose.

 

 

Using Live Preview (optional)