willasm / obsidian-open-weather

Obsidian plugin for OpenWeather API
MIT License
49 stars 3 forks source link

I'm sorry, the addition of static weather has failed. #12

Closed kickTiger closed 1 year ago

kickTiger commented 1 year ago

I should have added the static weather according to the style in the example. Here are the steps I followed:

  1. I created a new template file under the template folder specified by the Templater plugin and called it.
  2. The journal file called the template file. All other Templater syntax is generated correctly, except for the static weather which cannot be generated. I am not sure whether I need to set up the Templater or Banner plugin specially.

I used the syntax from EXAMPLE.md directly in my template, and I also tried calling %weather1% alone, but it didn't work.

---
cssclass: daily
banner: "https://www.bing.com/th?id=OHR.AdelieWPD_EN-US5175747404_1920x1080.jpg&w=1920"
banner_x: 0.0954
banner_y: 0.48572
title: 000 homepage
created: 2023-04-25
author: coffee
banner_icon: ๐Ÿ“… 
type: journal
webclip: false
tags: [daily_note]
aliases: []
description: Daily Note
obsidianEditingMode: live
---
%weather3%

<div class="weather_historical_3">%weather3%</div>
<div class="weather_current_4"></div>
<%* app.commands.executeCommandById("obsidian-open-weather:replace-template-string")%>

The displayed effect is as shown in the picture, and %weather3% was not recognized correctly. image

willasm commented 1 year ago

What do you have in the daily.css file? It is partially working for me. The <%* app.commands.executeCommandById("obsidian-open-weather:replace-template-string")%> should not be required, I have to check the documentation on that. The weather information below the image is produced from the %weather3% you have right below the yaml which is probably not what you want..

Daily

willasm commented 1 year ago

Can you try using this css and let me know how it looks.

/*====================*/
/* Daily Note Styling */
/*====================*/
.daily {
    padding-left: 25px !important;
    padding-right: 25px !important;
    padding-top: 20px !important;
}

/* Transition Effect Weather One */
.weather_current_1,
.weather_historical_1 {
  transition: 0.3s;
}

/* Transition Effect Weather Two */
.weather_current_2,
.weather_historical_2 {
  transition: 0.3s;
}

/* Transition Effect Weather Three */
.weather_current_3,
.weather_historical_3 {
  transition: 0.3s;
}

/* Transition Effect Weather Four */
.weather_current_4,
.weather_historical_4 {
  transition: 0.3s;
}

/* Historical & Current weather One, Two, Three and Four common settings */
.weather_historical_1, .weather_current_1, .weather_historical_2, .weather_current_2, .weather_historical_3, .weather_current_3, .weather_historical_4, .weather_current_4 {
    display: flex;
    float: left;
    clear: left;
    align-items: center;
    top: 80px;
    left: 35px;
    position: absolute;
    font-family: monospace;
    font-size: 14pt !important;
    margin: 10px 5px;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 3px 3px 2px #414654;
    cursor: pointer;
}

/* Historical weather at top of the document over banner */
.weather_historical_1, .weather_historical_2, .weather_historical_3, .weather_historical_4 {
    color: #d0dce9;
    background-color: #0d3d56;
}

/* Current weather at top of the document over banner */
.weather_current_1, .weather_current_2, .weather_current_3, .weather_current_4 {
    color: #c4caa5;
    background-color: #133e2c;
    opacity: 0;
}

/* Show Current weather One on hover */
.weather_current_1:hover {
    opacity: 1;
}

/* Show Current weather Two on hover */
.weather_current_2:hover {
    opacity: 1;
}

/* Show Current weather Three on hover */
.weather_current_3:hover {
    opacity: 1;
}

/* Show Current weather Four on hover */
.weather_current_4:hover {
    opacity: 1;
}

/* Daily Note Name H6 Styling (YYYY-MM-DD) */
.daily h6 {
    font-size: 1.75em;
    color: #4cbf90;
    border-width: 1px;
    padding-bottom: 3px;
    text-align: center;
}

/* Daily Note Date H5 Styling (๐Ÿ”น Thursday ๐Ÿ”น 10th November ๐Ÿ”น 2022 ๐Ÿ”น) */
.daily h5 {
    font-size: 1.25em;
    color: #23a49d;
    border-width: 1px;
    padding-bottom: 3px;
    text-align: center;
}

/* Hide the frontmatter for Daily Notes */
.daily .frontmatter-container {
    display: none;
}
kickTiger commented 1 year ago

The screenshot above shows the use of this CSS. The key point is the following two calls, which are not parsed in the template:

%weather3%
<div class="weather_historical_3">%weather3%</div>

I added 2 of %weather3% just to test

willasm commented 1 year ago

Yes I see what you are saying now. Those both should be converted automatically. Try closing the tab and re-opening the file, one of the triggers to convert them is on file open. Also, do they convert if you run the command manually - Replace template strings from the command palette or from the icon on the left sidebar?

I'm suspect that it may be another plugin that is interfering with this. I just tried your template in an empty vault with only the OpenWeather plugin installed and nothing else and it works just fine. If you have the time, can you try creating a new empty vault and install just the OpenWeather plugin (and Banners plugin) and add and activate the css file as well and see if it works in that vault.

Also, what OS are you running this on. I only have windows 10 to test this on although it should run fine on mac without issues.

willasm commented 1 year ago

One other thing, can you check the settings and see what the Exclude Folder setting is set to. If your file is in that folder or any sub-folder below it the template strings will not be converted.

kickTiger commented 1 year ago

After researching for half an hour, I solved the problemใ€‚

I created an empty vault and installed only three plugins: Banners, OpenWeather, and Templater.

Through testing and research, I discovered that static weather text can be effective. However, there is one important thing to note regarding the settings of the OpenWeather plugin and the Exclude Folder .

Initially, I left the exclusion folder empty. However, after testing, I found that this caused issues not only with generating weather in static text but also with intermittent failures in dynamic text.

To avoid these problems, I recommend setting the Exclude Folder to the template path specified by the Templater plugin. This way, templates under the Templater plugin will not be automatically replaced, and static weather will be valid under Templater templates.

Thank you very much for your answer. The plugin is excellent, keep up the good work! I will continue to record vlogs in the near future to recommend this plugin.

openWeather

willasm commented 1 year ago

Thanks for doing all these tests, it has been a huge help!

The line %* app.commands.executeCommandById("obsidian-open-weather:replace-template-string")%> in my example document is a holdover from an earlier version which relied on the Templater plugin. I have since removed all dependency on Templater and it works fine without being installed now. I definitely will update the documentation to remove that.

When I added the exclude folder option I originally meant to set a default folder but somehow that slipped past me. That will be added in the next update. You can set a default template folder in the Obsidian core plugins as well as in the Templater plugin so I will have it first check one, then the other and use the setting it finds. If no setting is found I will popup a notice to inform the user to set one in the settings.

Thanks again for your assistance in testing this, it has been a great help to me, William.